/* Menzo Kit tokens, generated from src/kit/tokens.json */
:root { --ivory: #f9f5ee; --paper: #f3ede2; --linen: #e3decc; --white: #ffffff; --night: #171411; --brass: #c9a35a; --ink: #171411; --ink-2: #2b2622; --ink-3: #6b6259; --gold-ink: #735623; --gold-deep: #86662a; --gold-light: #e3c48a; --ivory-on-dark: #f4efe6; --line: rgba(23, 20, 17, .14); --line-dark: rgba(249, 245, 238, .18); --shade: rgba(23, 20, 17, .55); --space-xs: 8px; --space-s: 14px; --space-m: 22px; --space-l: 40px; --space-xl: 64px; --space-section: 108px; --gutter: 56px; --wrap: 1240px; --measure: 620px; --header: 96px; --radius-0: 0; --radius-pill: 999px; --shadow-lift: 0 40px 70px -40px rgba(40, 28, 8, .65); --shadow-soft: 0 20px 50px -30px rgba(23, 20, 17, .35); --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif; --font-body: "Source Serif 4", "Source Serif Pro", Georgia, serif; --font-ui: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-condensed: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif; --font-script: Waterfall, "Snell Roundhand", cursive; --font-logo: "Inter Tight", "Helvetica Neue", Arial, sans-serif; }
/* ==========================================================================
   Menzo Kit (https://claude.ai/artifact/DKa4TkjQdJoe6TMxgwAGvE)
   The one stylesheet pages are moving onto. Tokens come from src/kit/tokens.json (prepended by the build).
   Rule: a new need becomes a kit block here first. No page-specific styles.
   ========================================================================== */
/* fluid versions of the kit's desktop/phone values (brand book: Space and shape) */
:root { --gutter: clamp(20px, 4vw, 56px); --space-section: clamp(64px, 7vw, 108px); --space-xl: clamp(40px, 5vw, 64px); --space-l: clamp(28px, 3vw, 40px); }
/* the site's older gold variables now point at the kit's golds, so every page reads them (contrast fix) */
:root { --gold: var(--gold-ink); --maize-deep: var(--gold-deep); }

/* Menzo Kit: the shared stylesheet. Every value comes from tokens.css (generated from tokens.json). */
.mk, [class^="mk-"], [class*=" mk-"] { box-sizing: border-box; font-family: var(--font-body); color: var(--ink-2); -webkit-font-smoothing: antialiased; }
.mk *, .mk *::before, .mk *::after { box-sizing: inherit; }
.mk p, .mk h1, .mk h2, .mk h3, .mk figure, .mk blockquote { margin: 0; }
.mk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk a:not(.mk-btn) { color: inherit; }

/* grounds: each sets the colours its children use */
.mk-g-ivory { background: var(--ivory); --mk-text: var(--ink-2); --mk-head: var(--ink); --mk-accent: var(--gold-deep); --mk-label: var(--gold-ink); --mk-muted: var(--ink-3); --mk-line: var(--line); }
.mk-g-paper { background: var(--paper); --mk-text: var(--ink-2); --mk-head: var(--ink); --mk-accent: var(--gold-deep); --mk-label: var(--gold-ink); --mk-muted: var(--ink-3); --mk-line: var(--line); }
.mk-g-white { background: var(--white); --mk-text: var(--ink-2); --mk-head: var(--ink); --mk-accent: var(--gold-deep); --mk-label: var(--gold-ink); --mk-muted: var(--ink-3); --mk-line: var(--line); }
.mk-g-linen { background: var(--linen); --mk-text: var(--ink-2); --mk-head: var(--ink); --mk-accent: var(--gold-deep); --mk-label: var(--gold-ink); --mk-muted: var(--ink-2); --mk-line: var(--line); }
.mk-g-night { background: var(--night); --mk-text: var(--ivory-on-dark); --mk-head: var(--ivory-on-dark); --mk-accent: var(--brass); --mk-label: var(--gold-light); --mk-muted: var(--ivory-on-dark); --mk-line: var(--line-dark); }
.mk-g-brass { background: var(--brass); --mk-text: var(--ink); --mk-head: var(--ink); --mk-accent: var(--ink); --mk-label: var(--ink); --mk-muted: var(--ink); --mk-line: var(--line); }
.mk[class*="mk-g-"], .mk [class*="mk-g-"] { color: var(--mk-text); }

.mk-wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.mk-sec { padding-block: var(--space-section); }

/* type: one scale */
.mk-eyebrow { font: 600 14px/1.3 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--mk-label); }
.mk-h1, .mk-h2, .mk-h3, .mk-h4 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; color: var(--mk-head); text-wrap: balance; }
.mk-h1 { font-size: 96px; line-height: .92; letter-spacing: .005em; }
.mk-h2 { font-size: 64px; line-height: .95; }
.mk-h3 { font-size: 40px; line-height: 1.08; }
.mk-h4 { font-size: 28px; line-height: 1.1; }
.mk-h1 em, .mk-h2 em, .mk-h3 em, .mk-h4 em { font-style: italic; color: var(--mk-accent); }
.mk-h1 em.mk-br, .mk-h2 em.mk-br { display: block; }
.mk-lead { font: 400 22px/1.65 var(--font-body); color: var(--mk-text); max-width: var(--measure); }
.mk-body { font: 400 19px/1.7 var(--font-body); color: var(--mk-text); max-width: var(--measure); }
.mk-cap { font: 400 15px/1.4 var(--font-body); color: var(--mk-muted); }
.mk-cite { display: block; font: 600 14px/1.4 var(--font-ui); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--mk-muted); }
.mk-drop::first-letter { float: left; font: 500 4.6em/.8 var(--font-display); color: var(--mk-accent); padding: .06em .1em 0 0; }
.mk-script { font: 400 100px/.95 var(--font-script); color: var(--gold-light); }

/* actions: two kinds only */
.mk-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 30px; border: 0; border-radius: var(--radius-0); background: var(--night); color: var(--ivory-on-dark);
  font: 600 14px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s, color .3s; }
.mk-btn:hover { background: var(--brass); color: var(--ink); }
.mk-g-night .mk-btn, .mk-on-photo .mk-btn { background: var(--brass); color: var(--ink); }
.mk-g-night .mk-btn:hover, .mk-on-photo .mk-btn:hover { background: var(--ivory); }
.mk-btn--pill { border-radius: var(--radius-pill); }
.mk-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 14px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--mk-head); text-decoration: none; border-bottom: 1px solid var(--brass); }
.mk-on-photo .mk-link { color: var(--ivory-on-dark); }
.mk-g-brass .mk-link { border-color: var(--ink); }
.mk-ar { display: inline-block; position: relative; width: 18px; height: 1px; background: currentColor; transition: transform .3s; }
.mk-ar::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.mk-btn:hover .mk-ar, .mk-link:hover .mk-ar { transform: translateX(4px); }
.mk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) 28px; }
.mk-btn:focus-visible, .mk-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* photos over everything: shade + light type */
.mk-on-photo { position: relative; color: var(--ivory-on-dark); --mk-head: var(--ivory-on-dark); --mk-text: var(--ivory-on-dark); --mk-accent: var(--brass); --mk-label: var(--gold-light); --mk-muted: var(--ivory-on-dark); }
.mk-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--shade), rgba(23, 20, 17, .15) 72%), linear-gradient(0deg, var(--shade), transparent 55%); }

/* HomeHero: film or photo, the split headline with a gold rule, the angled cut */
.mk-hero { min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; background: var(--night); clip-path: polygon(0 0, 100% 0, 100% 90%, 74% 100%, 0 93%); }
.mk-hero > img { position: absolute; inset: 0; }
.mk-hero .mk-wrap { position: relative; z-index: 1; width: 100%; padding-bottom: 110px; }
.mk-hero-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 44px; align-items: end; justify-content: start; }
.mk-hero-caps { grid-row: 1 / span 3; padding-right: 44px; border-right: 1px solid var(--gold-light); font: 400 156px/.84 var(--font-condensed); letter-spacing: .01em; text-transform: uppercase; color: var(--ivory-on-dark); }
.mk-hero-grid .mk-script { grid-column: 2; font-size: 96px; white-space: nowrap; }
.mk-hero-line { grid-column: 2; margin-top: 14px; font: 500 15px/1.5 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; }
.mk-hero-grid .mk-acts { grid-column: 2; margin-top: 26px; }

/* PageHero: full-bleed photo, gold italic H1, credit strip below */
.mk-phero { min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; background: var(--night); }
.mk-phero > img { position: absolute; inset: 0; }
.mk-phero .mk-wrap { position: relative; z-index: 1; width: 100%; padding-bottom: 64px; display: grid; gap: var(--space-s); }
.mk-crumbs { font: 500 13px/1 var(--font-ui); letter-spacing: .08em; color: var(--ivory-on-dark); opacity: .85; }
.mk-phero .mk-lead { margin-top: 4px; max-width: 46ch; }
.mk-phero .mk-acts { margin-top: var(--space-s); }
.mk-credit { padding-block: 12px; border-bottom: 1px solid var(--line); font: 400 14px/1.4 var(--font-body); color: var(--ink-3); background: var(--ivory); }

/* SectionHead: eyebrow, headline, optional intro */
.mk-head { display: grid; gap: var(--space-s); max-width: 980px; }
.mk-head--center { justify-items: center; text-align: center; margin-inline: auto; }
.mk-head .mk-lead { margin-top: var(--space-xs); }

/* SplitFeature: a 4:5 photo beside a text column; flip for the next one */
.mk-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-xl); align-items: center; }
.mk-split--flip .mk-split-ph { order: 2; }
.mk-split-ph { aspect-ratio: 4 / 5; overflow: hidden; }
.mk-split-txt { display: grid; gap: var(--space-m); }

/* CardRow: three services or stories */
.mk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: var(--space-l); }
.mk-card { display: grid; gap: 10px; align-content: start; text-decoration: none; }
.mk-card-ph { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 8px; }
.mk-card-n { font: italic 500 26px/1 var(--font-display); color: var(--mk-accent); }
.mk-card p { font: 400 17px/1.55 var(--font-body); color: var(--mk-text); }

/* PullQuote: a verbatim review between gold rules */
.mk-quote { max-width: 980px; margin: 0 auto; padding-block: 30px; border-block: 1px solid var(--brass); text-align: center; display: grid; gap: 18px; }
.mk-quote p { font: italic 500 40px/1.18 var(--font-display); color: var(--mk-head); text-wrap: balance; }

/* PhotoBreak and PhotoPair, inside long pages */
.mk-break figure { display: grid; gap: var(--space-xs); }
.mk-break .mk-ph { aspect-ratio: 16 / 9; overflow: hidden; }
.mk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.mk-pair .mk-ph { aspect-ratio: 4 / 5; overflow: hidden; }
.mk-pair .mk-ph + .mk-ph { margin-top: 14%; }
.mk-pair .mk-cap { grid-column: 1 / -1; }

/* Chapters: the storybook, three cream pages with a soft fold */
.mk-book { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: var(--shadow-lift); margin-top: var(--space-l); }
.mk-page { display: flex; flex-direction: column; gap: var(--space-s); padding: 40px 34px 26px; background: var(--ivory) linear-gradient(90deg, rgba(122, 92, 38, .1), transparent 7%, transparent 93%, rgba(122, 92, 38, .1)); --mk-head: var(--ink); --mk-text: var(--ink-2); --mk-accent: var(--gold-deep); --mk-muted: var(--ink-3); }
.mk-page + .mk-page { border-left: 1px solid rgba(122, 92, 38, .22); }
.mk-page-ch { font: italic 500 22px/1 var(--font-display); color: var(--gold-ink); }
.mk-page .mk-ph { aspect-ratio: 4 / 3; overflow: hidden; border: 6px solid var(--night); }
.mk-page .mk-ph img { filter: grayscale(1) contrast(1.06); }
.mk-page .mk-body { font-size: 17px; }
.mk-page-no { margin-top: auto; padding-top: 16px; text-align: center; font: italic 400 16px/1 var(--font-display); color: var(--gold-ink); }

/* FactsStrip: the quick facts of a wedding or venue */
.mk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--mk-line); }
.mk-fact { padding: 22px 22px 22px 0; display: grid; gap: 6px; }
.mk-fact + .mk-fact { padding-left: 22px; border-left: 1px solid var(--mk-line); }
.mk-fact b { font: 500 22px/1.2 var(--font-display); color: var(--mk-head); }

/* FaqGroup: a numbered group of questions */
.mk-faq { display: grid; gap: var(--space-s); max-width: 920px; }
.mk-faq-h { display: flex; align-items: baseline; gap: 16px; }
.mk-faq-h span { font: italic 500 30px/1 var(--font-display); color: var(--mk-accent); }
.mk-faq details { border-top: 1px solid var(--mk-line); }
.mk-faq details:last-child { border-bottom: 1px solid var(--mk-line); }
.mk-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font: 500 22px/1.3 var(--font-display); color: var(--mk-head); }
.mk-faq summary::after { content: "+"; font: 400 26px/1 var(--font-ui); color: var(--mk-accent); }
.mk-faq details[open] summary::after { content: "–"; }
.mk-faq details .mk-body { padding-bottom: 22px; }

/* DateCheck: the enquiry band */
.mk-date { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-xl); align-items: start; }
.mk-form { display: grid; gap: 16px; }
.mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mk-field { display: grid; gap: 8px; }
.mk-field span { font: 600 14px/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--mk-label); }
.mk-field input { min-height: 52px; padding: 0 16px; border: 1px solid var(--mk-line); border-radius: var(--radius-0); background: transparent; color: var(--mk-head); font: 400 17px/1 var(--font-body); }
.mk-g-night .mk-field input { border-color: rgba(249, 245, 238, .35); }
.mk-next { font: 400 16px/1.5 var(--font-body); color: var(--mk-muted); }

/* VenueLogos: proof row */
.mk-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--mk-line); margin-top: var(--space-l); }
.mk-logo { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 28px 12px; }
.mk-logo + .mk-logo { border-left: 1px solid var(--mk-line); }
.mk-logo b { font: 500 21px/1.15 var(--font-display); color: var(--mk-head); }

/* fluid type: desktop sizes from the kit, phone sizes from the brand book */
.mk-h1 { font-size: clamp(44px, 6.7vw, 96px); }
.mk-h2 { font-size: clamp(36px, 4.45vw, 64px); }
.mk-h3 { font-size: clamp(30px, 2.8vw, 40px); }
.mk-h4 { font-size: clamp(24px, 1.95vw, 28px); }
.mk-lead { font-size: clamp(19px, 1.55vw, 22px); }
.mk-body { font-size: clamp(18px, 1.32vw, 19px); }
.mk-quote p { font-size: clamp(28px, 2.8vw, 40px); }
.mk-sec { padding-block: var(--space-section); }
.mk-wrap { padding-inline: var(--gutter); }

/* phones and small tablets */
@media (max-width: 899px) {
  .mk-split, .mk-date { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .mk-split--flip .mk-split-ph { order: 0; }
  .mk-split-ph { aspect-ratio: 4 / 3.4; }
  .mk-cards, .mk-book { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 14px; scroll-padding-inline: var(--gutter); scrollbar-width: none; box-shadow: none; }
  .mk-cards::-webkit-scrollbar, .mk-book::-webkit-scrollbar { display: none; }
  .mk-card, .mk-page { scroll-snap-align: start; }
  .mk-page { box-shadow: 0 24px 40px -28px rgba(40, 28, 8, .7); }
  .mk-page + .mk-page { border-left: 0; }
  .mk-facts { grid-template-columns: 1fr 1fr; }
  .mk-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
  .mk-fact:nth-child(n + 3) { border-top: 1px solid var(--mk-line); }
  .mk-logos { grid-template-columns: 1fr 1fr; }
  .mk-logo:nth-child(odd) { border-left: 0; }
  .mk-pair .mk-ph + .mk-ph { margin-top: 10%; }
}
@media (max-width: 560px) {
  .mk-two { grid-template-columns: minmax(0, 1fr); }
  .mk-acts .mk-btn { width: 100%; justify-content: center; }
  .mk-faq summary { font-size: 20px; }
}

/* Prose: running text inside any block (articles, split columns, FAQ answers) */
.mk-prose > * + * { margin-top: 1em; }
.mk-prose p, .mk-prose li { font: 400 clamp(18px, 1.32vw, 19px)/1.7 var(--font-body); color: var(--mk-text, var(--ink-2)); }
.mk-prose ul, .mk-prose ol { padding: 0; list-style: none; display: grid; gap: 10px; }
.mk-prose li { position: relative; padding-left: 24px; }
.mk-prose li::before { content: ""; position: absolute; left: 0; top: .85em; width: 12px; height: 1px; background: var(--brass); }
.mk-prose strong { font-weight: 500; color: var(--mk-head, var(--ink)); }
.mk-prose a:not(.mk-btn):not(.mk-link) { color: var(--mk-head, var(--ink)); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.mk-prose h2 { margin-top: var(--space-l); }
.mk-prose h2:first-child { margin-top: 0; }
.mk-prose h3 { font: 500 clamp(22px, 1.8vw, 26px)/1.15 var(--font-display); text-transform: uppercase; color: var(--mk-head, var(--ink)); margin-top: var(--space-m); }
.mk-prose--lead > p:first-of-type { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.65; }
.mk-prose--lead > p:first-of-type::first-letter { float: left; font: 500 4.6em/.8 var(--font-display); color: var(--mk-accent, var(--gold-deep)); padding: .06em .1em 0 0; }
.mk-prose--col { max-width: 760px; margin-inline: auto; }
.mk-prose--col .doc-break, .mk-prose--col .doc-pair, .mk-prose--col .doc-pull { margin-block: var(--space-l); }
/* FactsStrip with three facts (service promises) */
.mk-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-fact .mk-cap { line-height: 1.5; }
@media (max-width: 899px) { .mk-facts--3 { grid-template-columns: minmax(0, 1fr); } .mk-facts--3 .mk-fact { padding-left: 0; border-left: 0; } .mk-facts--3 .mk-fact + .mk-fact { border-top: 1px solid var(--mk-line); } }
/* a service page's own film sits beside its intro */
.mk-split--intro { align-items: start; }
.mk-svc-media { justify-self: center; width: min(100%, 380px); }
.mk-svc-media .clip { margin: 0; }
/* tables inside prose: hairline rows, label type for headings, scroll sideways on phones */
.mk-prose .table-wrap { overflow-x: auto; margin-block: var(--space-m); }
.mk-prose table { width: 100%; min-width: 560px; border-collapse: collapse; font: 400 17px/1.5 var(--font-body); color: var(--mk-text, var(--ink-2)); }
.mk-prose th { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--ink); font: 600 14px/1.4 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mk-head, var(--ink)); }
.mk-prose td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--mk-line, var(--line)); vertical-align: top; }

/* Guide layout: contents in a sticky side column beside the reading column */
.mk-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 1000px) { .mk-doc { grid-template-columns: 250px minmax(0, 760px); justify-content: center; } .mk-doc-side { position: sticky; top: 120px; align-self: start; } }
.mk-toc { display: grid; gap: 14px; }
.mk-toc ol { list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--line); }
.mk-toc a { display: block; padding: 8px 0 8px 14px; margin-left: -1px; border-left: 2px solid transparent; font: 400 16px/1.35 var(--font-body); color: var(--ink-2); text-decoration: none; }
.mk-toc a:hover, .mk-toc a.is-on { color: var(--ink); border-left-color: var(--brass); }
.mk-toc .mk-btn { margin-top: 10px; justify-content: center; }
@media (max-width: 999px) { .mk-doc-side { display: none; } }

/* Wedding story: the moments as alternating splits (film or photo beside the words), and the couple's letter */
.mk-chs { display: grid; gap: var(--space-xl); margin-top: var(--space-l); }
.mk-ch { align-items: center; }
.mk-ch-media { display: grid; gap: 12px; justify-items: center; }
.mk-ch-media .mk-split-ph { width: 100%; }
.mk-ch-words { margin: 6px 0 0; padding-left: 18px; border-left: 1px solid var(--brass); display: grid; gap: 8px; }
.mk-ch-words p { font: italic 500 clamp(21px, 1.7vw, 24px)/1.3 var(--font-display); color: var(--mk-head, var(--ink)); }
.mk-letter { margin-top: var(--space-l); }
.mk-letter > p:not(.mk-cite) { font-size: clamp(18px, 1.4vw, 20px); }
.mk-card p a, .mk-head .mk-body a, .mk-cap a { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }

/* CardRow as a directory: any number of cards in a grid; stacked on phones, two across on tablets */
.mk-cards--grid { row-gap: var(--space-xl); }
@media (max-width: 899px) {
  .mk-cards.mk-cards--grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; }
}
@media (max-width: 600px) { .mk-cards.mk-cards--grid { grid-template-columns: minmax(0, 1fr); } }
.mk-card-ph--wide { aspect-ratio: 3 / 2; }
.mk-card-blank { display: grid; place-items: center; height: 100%; background: var(--paper); font: italic 500 26px/1.1 var(--font-display); color: var(--gold-deep); text-align: center; padding: 20px; }
/* a plain list of facts (weddings without a gallery yet) */
.mk-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--mk-line, var(--line)); }
.mk-list li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--mk-line, var(--line)); font: 400 17px/1.5 var(--font-body); color: var(--mk-text, var(--ink-2)); }
.mk-list b { font: 500 21px/1.2 var(--font-display); color: var(--mk-head, var(--ink)); }
.mk-list a { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
@media (min-width: 900px) { .mk-ch { grid-template-columns: .85fr 1.15fr; } .mk-ch.mk-split--flip { grid-template-columns: 1.15fr .85fr; } }

/* ==========================================================================
   Mobile facelift (19 Oct 2026)
   ========================================================================== */
/* the form's "what happens next" line sits on the white form card */
.mc-form .mc-next { color: var(--ink-3); }
.mk-gal-more { display: none; }
@media (max-width: 699px) {
  /* hero: the small line wraps evenly */
  .b3-punch { letter-spacing: .14em; text-wrap: balance; max-width: 22em; }
  /* inner page openings: a calmer lede and a full-width button */
  .ph-hero .lede { font-size: 17px; line-height: 1.55; }
  .ph-hero .ph-actions { width: 100%; }
  .ph-hero .ph-actions .btn { width: 100%; justify-content: center; }
  /* a service's own film: a phone-sized frame, not the whole screen */
  .mk-svc-media { width: min(76%, 300px); }
  /* labels and credits in capitals wrap cleanly */
  .mk-cite { letter-spacing: .08em; }
  .mk-eyebrow { letter-spacing: .2em; }
  /* story galleries: the first ten, then "Show all" */
  .is-trim .st-gal .gi:nth-child(n + 11) { display: none; }
  .mk-gal-more { display: inline-flex; width: 100%; justify-content: center; margin-top: var(--space-m); }
  /* directories: compact list cards, photo on the left */
  .mk-cards.mk-cards--grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; border-top: 1px solid var(--line); }
  .mk-cards--grid .mk-card { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
  .mk-cards--grid .mk-card > * { grid-column: 2; }
  .mk-cards--grid .mk-card-ph { grid-column: 1; grid-row: 1 / span 6; margin: 0; aspect-ratio: 4 / 5; }
  .mk-cards--grid .mk-card-ph--wide { aspect-ratio: 1 / 1; }
  .mk-cards--grid .mk-card .mk-h4 { font-size: 22px; }
  .mk-cards--grid .mk-card p { font-size: 15px; line-height: 1.45; }
  .mk-cards--grid .mk-card .mk-cap { display: none; }
  .mk-cards--grid .mk-card .mk-link { min-height: 36px; font-size: 14px; letter-spacing: .12em; justify-self: start; }
  /* footer: the photo grid is a desktop flourish */
  .fj-photos { display: none; }
}
/* the phone menu: fill the lower half with ways to get in touch */
.menu-more { display: grid; gap: 10px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.menu-more-h { margin: 0 0 2px; font: 600 14px/1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); }
.menu-more a { font: 400 19px/1.4 var(--font-body); color: var(--ivory-on-dark); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; min-height: 36px; display: inline-flex; align-items: center; }
.mk-gal-more { white-space: nowrap; }
/* form labels in the kit's label style (cite), on both date forms */
.m-field > span, .m-field > legend, .planner .f > span, .planner legend { font: 600 14px/1.4 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 699px) {
  /* long button labels: full width, tighter tracking, one line where possible */
  .sv-txt .m-btn { width: 100%; justify-content: space-between; letter-spacing: .1em; padding-inline: 20px; }
}
/* links inside facts are full-size tap targets */
.mk-fact a { display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   Reading font: Source Serif 4 everywhere (owner: "a text font that's larger and easy to read", 19 Oct 2026)
   ========================================================================== */
:root { --body: var(--font-body); }
body { font-family: var(--font-body); font-optical-sizing: auto; }
.mk-prose p, .mk-prose li, .mk-body, .mk-lead { line-height: 1.65; }
/* arrows always take their button's or link's colour */
.mk-btn .mk-ar, .mk-link .mk-ar { color: inherit; background: currentColor; }

/* homepage on phones: bigger, darker reading text, everything left-aligned, calmer story section */
@media (max-width: 699px) {
  body { font-size: 18px; }
  .ms-body p, .ms-card p, .mk-card p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
  figcaption, .mk-cap, .ms-img figcaption { font-size: 15px; color: var(--ink-3); }
  .mk-head--center { justify-items: start; text-align: left; margin-inline: 0; }
  .m-head, .m-head p, .mvn .m-head-p, .mvn p { text-align: left; }
  .mvn .m-head-p, .mvn p { font-size: 18px; line-height: 1.65; color: var(--ink-2); }
  /* Katie & Dennis: the script quote set in the italic serif (scripts are hard to read this small), the deck larger */
  .ks-pullq blockquote p { font-family: var(--font-display) !important; font-style: italic; font-weight: 500; font-size: 30px !important; line-height: 1.2 !important; letter-spacing: 0 !important; }
  .ks-deck, .ks-deck p { font-size: 20px; line-height: 1.55; }
  .ks-col p, .ks-letter p, .ks p { font-size: 18px; line-height: 1.65; }
}
@media (max-width: 699px) {
  /* one alignment on phones: left */
  .mvn .m-head, .mvn .m-head > * { text-align: left; justify-items: start; justify-content: flex-start; margin-inline: 0; }
  .mk-acts[style*="justify-content:center"] { justify-content: flex-start !important; }
  /* Linda's quote reads larger than its credit */
  .ks-coda-q, .ks-coda-q p { font-size: 28px !important; line-height: 1.25 !important; }
  .ks-coda-who { font-size: 14px !important; letter-spacing: .1em !important; }
  .ks-deck, .ks-deck p { font-size: 21px; }
  /* long button labels stay on one line */
  .m-btn, .mk-btn { letter-spacing: .1em; }
  .mvn .m-btn { width: 100%; justify-content: center; gap: 12px; }
}

/* ==========================================================================
   Homepage Katie & Dennis: one carousel of photos and films (19 Oct 2026)
   ========================================================================== */
.ks-v2 .ks-open { display: grid; gap: var(--space-m); max-width: 760px; }
.ks-car { margin-top: var(--space-l); }
.ks-car-bar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: var(--space-m); }
.ks-car-h { margin: 0; font: 600 14px/1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.ks-car-nav { display: flex; gap: 10px; }
.ks-car-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background .3s, color .3s; }
.ks-car-btn:hover { background: var(--ink); color: var(--ivory); }
.ks-car-btn[data-dir="-1"] .arr { transform: rotate(180deg); }
.ks-car-btn:disabled { opacity: .3; cursor: default; }
/* the row scrolls on every screen size, cards a fixed width, the next one peeking in */
.ks-film.ks-car .mv-row { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: clamp(250px, 24vw, 300px); max-width: none; margin: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; gap: clamp(14px, 1.6vw, 22px); padding: 0 0 12px; scrollbar-width: none; }
.ks-film.ks-car .mv-row::-webkit-scrollbar { display: none; }
.ks-film.ks-car .reel { scroll-snap-align: start; margin-top: 0 !important; }
.ks-film.ks-car .reel-media { aspect-ratio: 9 / 16; }
.reel-photo .reel-media img { width: 100%; height: 100%; object-fit: cover; }
.reel-photo .reel-media::after { display: none; }
.ks-film.ks-car .reel figcaption { text-align: left; color: var(--ink-3); font-size: 15px; }
.ks-film.ks-car .reel figcaption q { display: block; font: italic 500 19px/1.3 var(--font-display); color: var(--ink); }
.ks-col-solo { max-width: 760px; margin: var(--space-l) 0 0; }
.ks-coda-solo { display: block; }
.ks-coda-solo .ks-coda-txt { max-width: 760px; }
@media (max-width: 699px) {
  .ks-film.ks-car .mv-row { grid-auto-columns: 78%; margin-inline: calc(-1 * var(--g)); padding-inline: var(--g); scroll-padding-inline: var(--g); }
  .ks-car-nav { display: none; }
}
/* the carousel never widens the page: it scrolls inside its own width */
.ks-car { display: block; min-width: 0; max-width: 100%; overflow: hidden; }
.ks-film.ks-car .mv-row { width: 100%; min-width: 0; overflow-x: auto; }
@media (max-width: 699px) {
  .ks-car { overflow: visible; }
  .ks-film.ks-car .mv-row { width: auto; }
  .ks-car-h { font-size: 14px; letter-spacing: .14em; }
}

/* ==========================================================================
   Carousels in place (19 Oct 2026): sections keep their layout; only the media slides
   ========================================================================== */
/* a photo slot that holds several photos, one at a time */
.mk-slides { min-width: 0; display: grid; gap: 12px; }
.mk-slides-row { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; min-width: 0; }
.mk-slides-row::-webkit-scrollbar { display: none; }
.mk-slide { margin: 0; scroll-snap-align: start; display: grid; gap: var(--space-xs); }
.mk-slides-nav { display: flex; align-items: center; gap: 12px; }
.mk-slides-count { font: 600 14px/1 var(--font-ui); letter-spacing: .14em; color: var(--ink-2); min-width: 4em; text-align: center; }
/* the Katie & Dennis films: the same row, now scrolling with arrows */
.ks-car-h { font-size: 14px; }
/* nothing to scroll: no arrows */
.is-static .ks-car-nav, .is-static .mk-slides-nav { display: none; }

/* ==========================================================================
   Homepage, owner's chosen direction (19 Oct 2026). Header, footer and hp-* sections.
   ========================================================================== */
/* larger reading text everywhere (owner: "increase the size of the general text") */
body { font-size: 19px; }
.mk-body, .mk-prose p, .mk-prose li { font-size: clamp(19px, 1.45vw, 21px); }
.hp-p { font: 400 clamp(19px, 1.45vw, 21px)/1.7 var(--font-body); color: var(--ink-2); margin: 0; max-width: 34em; }

/* ---------- header: links either side of a centred logo ---------- */
.hd.hd2 { position: fixed; inset: 0 0 auto; z-index: 50; height: auto; background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(23, 20, 17, .1); transition: background .4s, color .4s, box-shadow .4s, transform .4s; }
.hd2-in { max-width: 1360px; margin: 0 auto; height: 92px; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.hd2-l, .hd2-r { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.hd2-r { justify-content: flex-end; }
.hd2-l a, .hd2-r a { font: 600 14px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: inherit; text-decoration: none; padding: 14px 0; border-bottom: 1px solid transparent; transition: border-color .3s; }
.hd2-l a:hover, .hd2-r a:hover, .hd2-l a[aria-current], .hd2-r a[aria-current] { border-bottom-color: var(--brass); }
.hd2-r .hd2-cta { padding: 13px 18px; border: 1px solid currentColor; }
.hd2-r .hd2-cta:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.hd2 .brand { justify-self: center; display: block; }
.hd2 .brand .logo, .hd.hd2.is-scrolled .brand .logo { height: 60px; width: auto; }
.hd2 .brand .logo .tag, .hd.hd2.is-scrolled .brand .logo .tag { opacity: 1; }
.hd2 .logo .hole { fill: #fff; }
/* over the homepage film: clear, white logo and links */
body.l-home .hd.hd2.hd-over:not(.is-scrolled):not(.menu-open .hd) { background: transparent; color: #fff; box-shadow: none; }
body.l-home .hd.hd2.hd-over:not(.is-scrolled) .logo .hole { fill: var(--night); }
body.l-home .hd.hd2.hd-over:not(.is-scrolled) .hd2-cta:hover { background: #fff; color: var(--ink); border-color: #fff; }
body.l-home main { padding-top: 0; }
body:not(.l-home) main { padding-top: 92px; }
.hd2 .menu-btn { display: none; }
@media (max-width: 1099px) {
  .hd2-in { grid-template-columns: 1fr auto; height: 76px; }
  .hd2-l, .hd2-r { display: none; }
  .hd2 .brand { justify-self: start; }
  .hd2 .brand .logo, .hd.hd2.is-scrolled .brand .logo { height: 48px; }
  .hd2 .menu-btn { display: inline-flex; justify-self: end; color: inherit; }
  body:not(.l-home) main { padding-top: 76px; }
}

/* ---------- footer: clean, light, the full-colour logo ---------- */
.ft.ft2 { background: var(--ivory); color: var(--ink); border-top: 1px solid var(--line); padding: 0; }
.ft2-in { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(28px, 3vw, 40px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.ft2-l, .ft2-r { display: flex; flex-wrap: wrap; gap: 12px clamp(18px, 2.4vw, 36px); }
.ft2-r { justify-content: flex-end; }
.ft2 a { color: var(--ink); text-decoration: none; }
.ft2-l a, .ft2-r a { font: 600 14px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; padding: 12px 0; border-bottom: 1px solid transparent; }
.ft2-l a:hover, .ft2-r a:hover { border-bottom-color: var(--brass); }
.ft2-logo .logo { height: 66px; width: auto; color: var(--ink); }
.ft2-logo .logo .label { fill: var(--brass); }
.ft2-logo .logo .hole { fill: var(--ivory); }
.ft2-base { max-width: 1240px; margin: 0 auto; padding: 18px var(--gutter) 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.ft2-base p { margin: 0; font: 400 15px/1.5 var(--font-body); color: var(--ink-3); }
.ft2-base span { margin: 0 8px; }
.ft2-base a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
@media (max-width: 899px) {
  .ft2-in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ft2-logo { order: -1; }
  .ft2-l, .ft2-r { justify-content: center; }
  .ft2-base { justify-content: center; text-align: center; padding-bottom: 96px; }
}

/* ---------- shared homepage parts ---------- */
.hp-sec { padding-block: clamp(72px, 8vw, 128px); }
.hp-wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }
.hp-ivory { background: var(--ivory); }
.hp-linen { background: #f1ece2; }
.hp-night { background: #171310; color: var(--ivory-on-dark); }
.hp-eye { margin: 0 0 14px; font: 600 14px/1.3 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.hp-eye-light { color: var(--gold-light); }
.hp-center { text-align: center; justify-items: center; display: grid; }
.hp-center-t { text-align: center; }
.hp-h2 { margin: 0; font: 500 clamp(38px, 4.4vw, 62px)/1.02 var(--font-display); color: var(--ink); text-wrap: balance; }
.hp-h2 em { font-style: italic; color: var(--gold-deep); }
.hp-h2.hp-caps { text-transform: uppercase; letter-spacing: .02em; }
.hp-script { display: block; margin-top: .02em; font: 400 .78em/1 var(--font-script); text-transform: none; letter-spacing: 0; color: var(--gold-deep); }
.hp-light { color: #fff; }
.hp-light .hp-script { color: var(--gold-light); }
.hp-rule { display: block; width: 56px; height: 1px; background: var(--brass); margin: 26px 0; }
.hp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 30px; }
.hp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; background: var(--ink); color: #fff; border: 1px solid var(--ink); font: 600 14px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.hp-btn:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.hp-btn-light { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.hp-btn-light:hover { background: var(--brass); border-color: var(--brass); }
.hp-btn-line { background: transparent; color: var(--ink); }
.hp-btn-line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hp-btn-wide { width: 100%; }
.hp-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 14px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass); }
.hp-link::after, .hp-more::after { content: "→"; font-family: var(--font-body); letter-spacing: 0; }
.hp-link-light { color: #fff; }
.hp-more { display: inline-flex; gap: 8px; font: 600 14px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.hp-cite { font: 600 14px/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- hero ---------- */
.hp-hero { position: relative; min-height: max(640px, 100svh); display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; background: var(--night); }
.hp-hero-film, .hp-hero-shade { position: absolute; inset: 0; }
.hp-hero-film .mh-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-hero-shade { background: linear-gradient(180deg, rgba(23, 19, 16, .55), rgba(23, 19, 16, .35) 40%, rgba(23, 19, 16, .62)); }
.hp-hero-in { position: relative; z-index: 1; padding: 120px var(--gutter) 140px; display: grid; justify-items: center; }
.hp-h1 { margin: 0; display: grid; justify-items: center; gap: 4px; font-weight: 400; }
.hp-h1-caps { font: 500 clamp(60px, 9vw, 132px)/.95 var(--font-display); letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hp-h1-caps i { font-style: normal; color: var(--brass); margin: 0 .22em; }
.hp-h1-script { font: 400 clamp(40px, 4.6vw, 70px)/1 var(--font-script); color: var(--gold-light); text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 26px rgba(0, 0, 0, .5); }
.hp-hero .hp-acts { justify-content: center; }
.hp-hero-foot { position: absolute; z-index: 1; left: 0; right: 0; bottom: 30px; margin: 0; display: grid; justify-items: center; gap: 14px; font: 600 14px/1 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.hp-hero-foot i { display: block; width: 1px; height: 44px; background: linear-gradient(rgba(255, 255, 255, .8), transparent); }

/* ---------- how we work ---------- */
.hp-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.hp-photo-stack { position: relative; margin: 0 0 40px; padding-right: 14%; }
.hp-photo-main { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.hp-photo-main img, .hp-photo-inset img { width: 100%; height: 100%; object-fit: cover; }
.hp-photo-inset { position: absolute; right: 0; bottom: -40px; width: 36%; aspect-ratio: 3 / 4; overflow: hidden; border: 8px solid var(--ivory); box-shadow: var(--shadow-lift); }
.hp-photo-stack figcaption { margin-top: 12px; font: 400 15px/1.4 var(--font-body); color: var(--ink-3); max-width: 60%; }
.hp-sign { margin: 22px 0 0; font: 400 46px/1 var(--font-script); color: var(--ink); }

/* ---------- services ---------- */
.hp-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); }
.hp-svc { display: grid; justify-items: center; text-align: center; gap: 10px; color: var(--ink); text-decoration: none; }
.hp-svc-ph { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 10px; }
.hp-svc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hp-svc:hover .hp-svc-ph img { transform: scale(1.04); }
.hp-svc-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; font: 400 14px/1.3 var(--font-body); color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.hp-svc-n { font: italic 500 22px/1 var(--font-display); color: var(--gold-deep); }
.hp-svc-t { font: 500 clamp(26px, 2.2vw, 32px)/1.1 var(--font-display); }
.hp-svc-t em { font-style: italic; color: var(--gold-deep); }
.hp-svc-d { font: 400 18px/1.55 var(--font-body); color: var(--ink-2); max-width: 22em; }
.hp-svc .hp-more { margin-top: 6px; border-bottom: 1px solid var(--brass); padding-bottom: 8px; }

/* ---------- the night: Dennis's words, the films ---------- */
.hp-bigq { max-width: 900px; margin: 6px auto 0; text-align: center; }
.hp-bigq blockquote { margin: 0; }
.hp-bigq p { margin: 0; font: 400 clamp(26px, 2.6vw, 36px)/1.45 var(--font-body); font-optical-sizing: auto; color: var(--ivory-on-dark); text-wrap: pretty; }
.hp-bigq em { font-style: italic; color: var(--gold-light); }
.hp-bigq figcaption { margin-top: 24px; font: 600 14px/1.4 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 239, 230, .7); }
.hp-films-h { margin-top: clamp(56px, 7vw, 96px); }
.hp-films.ks-film.mv { background: none; padding: 0; color: var(--ivory-on-dark); }
.hp-films .mv-row { max-width: 980px; margin: 22px auto 0; }
.hp-films .reel figcaption { color: rgba(244, 239, 230, .78); text-align: left; }
.hp-films .reel figcaption q { color: var(--ivory-on-dark); }
.hp-tag { margin: clamp(56px, 6vw, 88px) 0 0; text-align: center; font: italic 500 clamp(34px, 3.6vw, 52px)/1.1 var(--font-display); color: var(--gold-light); }
.hp-tag::first-letter { text-transform: uppercase; }
.hp-tag-sub { margin: 14px auto 0; max-width: 34em; text-align: center; font: 400 19px/1.6 var(--font-body); color: rgba(244, 239, 230, .85); }

/* ---------- Dennis, in his words ---------- */
.hp-split-dennis { grid-template-columns: .8fr 1.2fr; align-items: start; }
.hp-portrait { margin: 0; }
.hp-portrait span { display: block; aspect-ratio: 4 / 5; overflow: hidden; padding: 10px; border: 1px solid var(--line); background: var(--ivory); }
.hp-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hp-portrait figcaption { margin-top: 12px; text-align: center; font: 400 15px/1.4 var(--font-body); color: var(--ink-3); }
.hp-qmark { display: block; height: 44px; font: 500 96px/1 var(--font-display); color: var(--brass); }
.hp-dq { margin: 0; display: grid; gap: 22px; }
.hp-dq-lead { margin: 0; font: 400 clamp(23px, 2vw, 28px)/1.5 var(--font-body); color: var(--ink); }
.hp-cite-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin: 28px 0 0; }

/* ---------- from the floor ---------- */
.hp-floor { padding-top: 0; }
.hp-floor .hp-wrap { border-top: 1px solid var(--line); padding-top: clamp(56px, 6vw, 88px); }
.hp-floor-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; }
.hp-floor-q { margin: 0; max-width: 18em; font: 400 clamp(32px, 3.4vw, 46px)/1.15 var(--font-body); color: var(--ink); }
.hp-floor-q em { font-style: italic; color: var(--gold-deep); }
.hp-floor-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 52px); align-items: start; }
.hp-floor-ph { margin: 0; }
.hp-floor-ph:nth-child(even) { margin-top: 36px; }
.hp-floor-ph span { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.hp-floor-ph img { width: 100%; height: 100%; object-fit: cover; }
.hp-floor-ph figcaption { margin-top: 10px; font: 400 15px/1.4 var(--font-body); color: var(--ink-3); }

/* ---------- portfolio ---------- */
.hp-pf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 48px; }
.hp-pf-intro { max-width: 22em; }
.hp-pfs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(20px, 3vw, 40px); margin: clamp(40px, 5vw, 64px) 0 clamp(48px, 5vw, 72px); }
.hp-pf { display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; }
.hp-pf:nth-child(3n + 2) { margin-top: 64px; }
.hp-pf-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 8px; }
.hp-pf-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hp-pf:hover .hp-pf-ph img { transform: scale(1.04); }
.hp-pf-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.hp-pf-name { font: 500 clamp(24px, 2vw, 28px)/1.1 var(--font-display); }
.hp-pf-n { font: italic 500 18px/1 var(--font-display); color: var(--gold-deep); }
.hp-pf-where { font: 400 16px/1.45 var(--font-body); color: var(--ink-2); }
.hp-pf .hp-more { margin-top: 6px; }

/* ---------- date check ---------- */
.hp-date { position: relative; background: #171310; color: #fff; overflow: hidden; }
.hp-date-bg { position: absolute; inset: 0; opacity: .22; }
.hp-date-bg img { width: 100%; height: 100%; object-fit: cover; }
.hp-date-in { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.hp-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; counter-reset: s; }
.hp-steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 18px 0; border-top: 1px solid rgba(244, 239, 230, .18); }
.hp-steps li::before { content: "0" counter(s); grid-row: span 2; font: italic 500 22px/1.2 var(--font-display); color: var(--gold-light); }
.hp-steps b { font: 500 24px/1.2 var(--font-display); color: #fff; }
.hp-steps span { font: 400 17px/1.5 var(--font-body); color: rgba(244, 239, 230, .82); }
.hp-form.mc-form { background: var(--ivory); color: var(--ink); padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.hp-form-h { margin: 0 0 4px; font: 500 30px/1.1 var(--font-display); color: var(--ink); }

@media (max-width: 899px) {
  .hp-split, .hp-split-dennis, .hp-date-in { grid-template-columns: minmax(0, 1fr); }
  .hp-photo-stack { padding-right: 18%; }
  .hp-svcs, .hp-pfs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .hp-svcs::-webkit-scrollbar, .hp-pfs::-webkit-scrollbar { display: none; }
  .hp-svc, .hp-pf { scroll-snap-align: start; }
  .hp-pf:nth-child(3n + 2) { margin-top: 0; }
  .hp-floor-row { grid-template-columns: 1fr 1fr; }
  .hp-portrait { max-width: 360px; }
}
@media (max-width: 600px) {
  .hp-h1-caps { font-size: clamp(48px, 15vw, 64px); letter-spacing: .02em; }
  .hp-h1-caps i { margin: 0 .12em; }
  .hp-hero-in { padding: 110px var(--gutter) 150px; }
  .hp-hero .hp-acts { flex-direction: column; width: 100%; }
  .hp-hero .hp-btn { width: 100%; }
  .hp-acts .hp-btn { width: 100%; }
  .hp-sign { font-size: 40px; }
  .hp-p { font-size: 19px; }
}
/* homepage refinements: stronger script lines, level films */
.hp-script { font-size: .92em; color: var(--gold-deep); margin-top: .06em; }
.hp-light .hp-script { color: var(--gold-light); }
.hp-h1-script { font-size: clamp(44px, 5.2vw, 78px); text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 30px rgba(0, 0, 0, .65); }
.hp-hero-shade { background: linear-gradient(180deg, rgba(23, 19, 16, .6), rgba(23, 19, 16, .42) 40%, rgba(23, 19, 16, .66)), radial-gradient(ellipse 55% 45% at 50% 50%, rgba(23, 19, 16, .35), transparent 75%); }
.hp-films .reel { margin-top: 0 !important; }
.hp-hero-foot span { max-width: 22em; text-align: center; text-wrap: balance; padding-inline: var(--gutter); }

/* ==========================================================================
   Homepage story below the hero (19 Oct 2026): the owner's reference layout and scroll,
   little text, dark type. hp2-*.
   ========================================================================== */
.hp2 { position: relative; background: var(--ivory); padding-block: clamp(80px, 9vw, 150px); overflow: hidden; }
.hp2-wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); position: relative; }
.hp2-display { margin: 0; font: 400 clamp(44px, 5.4vw, 84px)/1.02 var(--font-display); letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.hp2-display em { font-style: italic; color: var(--gold-deep); }
.hp2-display-sm { font-size: clamp(38px, 3.8vw, 58px); }
.hp2-label { margin: 0; font: 600 14px/1.5 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.hp2-label-light { color: #fff; }
.hp2-p { margin: 0; font: 400 clamp(18px, 1.35vw, 20px)/1.7 var(--font-body); color: var(--ink-2); }
.hp2-p b { font-weight: 600; color: var(--ink); }
.hp2-sub { margin: 0; font: italic 400 clamp(26px, 2.2vw, 34px)/1.2 var(--font-display); color: var(--ink); }
.hp2-center { display: grid; justify-items: center; gap: 16px; text-align: center; margin-top: clamp(48px, 5vw, 72px); }
.hp2-center-t { text-align: center; }
.hp2-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hp2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 34px; background: var(--ink); color: #fff; border: 1px solid var(--ink); font: 600 14px/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.hp2-btn:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.hp2-btn-line { background: transparent; color: var(--ink); }
.hp2-btn-line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hp2-btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.hp2-btn-wide { width: 100%; }
.hp2-link { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font: 600 14px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass); }
.hp2-link::after { content: "→"; font-family: var(--font-body); letter-spacing: 0; }
.hp2-ph { display: block; overflow: hidden; background: var(--paper); }
.hp2-ph img { width: 100%; height: 100%; object-fit: cover; }
.hp2-bw img { filter: grayscale(1) contrast(1.05); }
/* gentle rise as each piece arrives */
.hp2-rv { transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .hp2-rv.rv:not(.in) { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) { .hp2-rv { transition: none; } .js .hp2-rv.rv:not(.in) { opacity: 1; transform: none; } }

/* 1. opening collage: headline over three photos, a short column, then a seal and one line */
.hp2-intro .hp2-display { max-width: 15ch; margin-left: 22%; }
.hp2-intro-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr .8fr; gap: clamp(16px, 2vw, 28px); align-items: start; margin-top: clamp(-40px, -2vw, -12px); }
.hp2-intro-a { aspect-ratio: 3 / 4.2; margin-top: 80px; }
.hp2-intro-b { aspect-ratio: 3 / 4; margin-top: 40px; }
.hp2-intro-txt { display: grid; gap: 18px; padding-top: 60px; }
.hp2-intro-c { aspect-ratio: 3 / 4.4; margin-top: -60px; }
.hp2-intro-foot { display: grid; justify-items: center; gap: 14px; text-align: center; max-width: 560px; margin: clamp(56px, 6vw, 88px) auto 0; }
.hp2-seal { width: 72px; height: 72px; padding: 10px; border: 1px solid rgba(201, 163, 90, .6); border-radius: 50%; display: grid; place-items: center; }
.hp2-rec { width: 100%; height: 100%; }
.hp2-rec .disc { fill: var(--ink); } .hp2-rec .groove { fill: none; stroke: #8a8f99; stroke-width: 1; } .hp2-rec .label { fill: var(--brass); } .hp2-rec .hole { fill: var(--ivory); }

/* 2 & 8. a photo that stays still while the page moves past it */
.hp2-band { position: relative; height: clamp(520px, 86vh, 820px); clip-path: inset(0); display: grid; place-items: center; color: #fff; text-align: center; }
.hp2-band-img { position: fixed; inset: 0; z-index: 0; }
.hp2-band-img img { width: 100%; height: 100vh; object-fit: cover; }
.hp2-band-shade { position: absolute; inset: 0; z-index: 1; background: rgba(23, 19, 16, .45); }
.hp2-band-in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; padding-inline: var(--gutter); max-width: 900px; }
.hp2-band-line { margin: 0; font: italic 400 clamp(40px, 4.8vw, 72px)/1.08 var(--font-display); color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); text-wrap: balance; }
.hp2-band-line em { color: var(--gold-light); }
.hp2-band-right { place-items: center end; text-align: right; }
.hp2-band-right .hp2-band-in { justify-items: end; margin-right: clamp(20px, 7vw, 120px); max-width: 640px; }
@media (max-width: 899px), (prefers-reduced-motion: reduce) { .hp2-band-img { position: absolute; } .hp2-band-img img { height: 100%; } }

/* 3. from the aisle: headline over a tall centre photo, a line either side */
.hp2-aisle-grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; grid-template-rows: auto auto auto; gap: 28px clamp(24px, 3vw, 48px); align-items: start; }
.hp2-aisle-a { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 3 / 4; width: 62%; }
.hp2-aisle-h { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2; text-align: center; max-width: 14ch; justify-self: center; }
.hp2-aisle-c { grid-column: 2; grid-row: 2 / span 2; aspect-ratio: 3 / 4.1; margin-top: -70px; }
.hp2-aisle-l { grid-column: 1; grid-row: 3; align-self: end; max-width: 22em; }
.hp2-aisle-r { grid-column: 3; grid-row: 2; align-self: center; max-width: 22em; }
.hp2-aisle-d { grid-column: 3; grid-row: 3; aspect-ratio: 4 / 3; width: 78%; justify-self: end; }

/* 4. Dennis: round photo, one big line, the films */
.hp2-words { background: var(--paper); }
.hp2-vertical { position: absolute; left: clamp(4px, 2vw, 40px); top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; margin: 0 0 0 40px; white-space: nowrap; font: italic 400 clamp(60px, 7vw, 110px)/1 var(--font-display); color: rgba(122, 92, 38, .14); pointer-events: none; }
.hp2-words-row { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; max-width: 920px; margin: 0 auto; }
.hp2-round { width: clamp(140px, 15vw, 200px); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--ivory); box-shadow: 0 0 0 1px rgba(201, 163, 90, .5); }
.hp2-q { margin: 0; display: grid; gap: 18px; }
.hp2-q blockquote { margin: 0; }
.hp2-q p { margin: 0; font: italic 400 clamp(36px, 4vw, 60px)/1.1 var(--font-display); color: var(--ink); text-wrap: balance; }
.hp2-films.ks-film.mv { background: none; padding: 0; margin-top: clamp(48px, 5vw, 72px); color: var(--ink-2); }
.hp2-films .mv-row { max-width: 980px; margin: 0 auto; }
.hp2-films .reel { margin-top: 0 !important; }
.hp2-films .reel figcaption { color: var(--ink-2); }
.hp2-films .reel figcaption q { color: var(--ink); }

/* 5. meet Dave: a framed card */
.hp2-dave .hp2-display { margin-left: 18%; }
.hp2-dave-card { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin: -24px 6% 0 14%; padding: clamp(28px, 3vw, 44px); background: var(--paper); }
.hp2-vlabel { position: absolute; left: -44px; top: 50%; margin: 0; transform: translateY(-50%) rotate(-90deg); white-space: nowrap; font: 600 14px/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }
.hp2-dave-ph { aspect-ratio: 4 / 5; margin-top: -90px; }
.hp2-dave-txt { display: grid; gap: 18px; justify-items: start; }

/* 6. ways to book, over a faint ballroom */
.hp2-ways { background: var(--ivory); }
.hp2-ways-bg { position: absolute; inset: 0; opacity: .1; }
.hp2-ways-bg img { width: 100%; height: 100%; object-fit: cover; }
.hp2-ways .hp2-display + .hp2-label { margin-top: 18px; }
.hp2-ways-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.hp2-way { display: grid; gap: 10px; padding: 30px clamp(20px, 3vw, 44px) 30px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.hp2-way:nth-child(even) { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--line); }
.hp2-way-t { font: 600 14px/1.4 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }

/* 7. the portfolio: a centred slider, the next and previous weddings peeking in */
.hp2-pf { padding-inline: 0; }
.hp2-slider { margin-top: clamp(36px, 4vw, 56px); }
.hp2-slider-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 820px); gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: calc((100vw - min(62vw, 820px)) / 2); scroll-padding-inline: calc((100vw - min(62vw, 820px)) / 2); scrollbar-width: none; }
.hp2-slider-row::-webkit-scrollbar { display: none; }
.hp2-slide { scroll-snap-align: center; display: grid; gap: 14px; text-decoration: none; color: var(--ink); }
.hp2-slide-ph { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.hp2-slide-ph img { width: 100%; height: 100%; object-fit: cover; }
.hp2-slide-cap { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: center; font: 400 17px/1.4 var(--font-body); color: var(--ink-2); }
.hp2-slide-cap b { font: italic 500 26px/1 var(--font-display); color: var(--ink); }
.hp2-slider-nav { display: flex; justify-content: center; align-items: center; gap: clamp(20px, 6vw, 120px); margin-top: 32px; padding-inline: var(--gutter); }
.hp2-nav { min-height: 44px; padding: 0 6px; background: none; border: 0; border-bottom: 1px solid var(--ink); font: 600 14px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.hp2-nav:disabled { opacity: .3; cursor: default; }

/* 9. what you can count on */
.hp2-count-grid { display: grid; grid-template-columns: .85fr 1.2fr .75fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.hp2-count-a { aspect-ratio: 3 / 4; }
.hp2-count-b { aspect-ratio: 3 / 4.3; margin-top: 120px; }
.hp2-count-txt { display: grid; gap: 26px; justify-items: start; }
.hp2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.hp2-list li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.hp2-list b { display: block; font: italic 500 23px/1.2 var(--font-display); color: var(--ink); }
.hp2-list span:not(.hp2-dot) { font: 400 17px/1.55 var(--font-body); color: var(--ink-2); }
.hp2-dot { width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; border: 1px solid var(--brass); background: radial-gradient(circle, var(--brass) 0 3px, transparent 3.5px); }

/* 10. close: the big question, two photos, the form */
.hp2-close { background: var(--paper); }
.hp2-close-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hp2-close-art { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; }
.hp2-close-art .hp2-display { grid-column: 1 / -1; position: relative; z-index: 2; margin-bottom: -40px; }
.hp2-close-a { aspect-ratio: 3 / 4; margin-top: 60px; }
.hp2-close-b { aspect-ratio: 3 / 4; }
.hp2-form.mc-form { background: var(--ivory); padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; border: 1px solid var(--line); }

/* phones and tablets: stack calmly, keep a hint of the collage */
@media (max-width: 899px) {
  .hp2-intro .hp2-display, .hp2-dave .hp2-display { margin-left: 0; }
  .hp2-intro-grid { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .hp2-intro-a { margin-top: 0; } .hp2-intro-b { margin-top: 48px; }
  .hp2-intro-txt { grid-column: 1 / -1; padding-top: 8px; }
  .hp2-intro-c { display: none; }
  .hp2-aisle-grid { grid-template-columns: 1fr; }
  .hp2-aisle-grid > * { grid-column: 1 !important; grid-row: auto !important; margin-top: 0 !important; width: 100% !important; justify-self: stretch !important; }
  .hp2-aisle-a, .hp2-aisle-d { display: none; }
  .hp2-aisle-h { text-align: left; justify-self: start; }
  .hp2-words-row { grid-template-columns: 1fr; justify-items: start; }
  .hp2-vertical { display: none; }
  .hp2-dave-card { grid-template-columns: 1fr; margin: 24px 0 0; }
  .hp2-dave-ph { margin-top: 0; }
  .hp2-vlabel { display: none; }
  .hp2-ways-grid { grid-template-columns: 1fr; }
  .hp2-way:nth-child(even) { padding-left: 0; border-left: 0; }
  .hp2-slider-row { grid-auto-columns: 84vw; padding-inline: 8vw; scroll-padding-inline: 8vw; }
  .hp2-count-grid { grid-template-columns: 1fr 1fr; }
  .hp2-count-txt { grid-column: 1 / -1; grid-row: 1; }
  .hp2-count-b { margin-top: 48px; }
  .hp2-close-grid { grid-template-columns: 1fr; }
  .hp2-close-art .hp2-display { margin-bottom: 0; }
  .hp2-close-a { margin-top: 32px; }
  .hp2-band-right .hp2-band-in { justify-items: center; text-align: center; margin: 0 auto; }
}
@media (max-width: 600px) {
  .hp2-acts .hp2-btn, .hp2-count-txt .hp2-btn, .hp2-dave-txt .hp2-btn { width: 100%; }
}
/* keep every headline clear of the photos (readability first) */
.hp2-aisle-c { margin-top: 0; }
.hp2-aisle-h { margin-bottom: 12px; }
.hp2-dave-card { margin-top: 28px; }
.hp2-dave-ph { margin-top: 0; }
.hp2-close-art .hp2-display { margin-bottom: 20px; }
@media (max-width: 600px) { .hp2-slider-nav { gap: 14px; } .hp2-slider-nav .hp2-btn { padding: 0 16px; letter-spacing: .12em; white-space: nowrap; } }

/* ==========================================================================
   Homepage options B and C (review pages, noindex). Layouts follow the owner's two references;
   colours stay Menzo: night replaces their navy, brass their gold, linen their blush.
   ========================================================================== */
body.opt main { background: #fff; overflow-x: clip; }
body.opt img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- B: header is a centred logo with a menu button ---------- */
body.opt-b .hd2-l, body.opt-b .hd2-r { display: none; }
body.opt-b .hd2-in { grid-template-columns: 1fr auto 1fr; }
body.opt-b .hd2 .menu-btn { display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; color: inherit; }
body.opt-b .hd2 .brand { grid-column: 2; grid-row: 1; justify-self: center; }
body.opt-b .ft2, body.opt-b .dock { display: none; }
body.opt-b { --ob-serif: "Playfair Display", Georgia, serif; --ob-mist: #f4efe6; }
.ob-k, .ob-k-i, .ob-tag { margin: 0; font: 500 14px/1.4 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; color: var(--ink); }
.ob-k-i { font: italic 400 22px/1.3 var(--ob-serif); letter-spacing: 0; text-transform: none; }
.ob-k-light { color: var(--gold-light); }
.ob-h { margin: 14px 0 0; font: 400 clamp(34px, 4vw, 52px)/1.1 var(--ob-serif); text-transform: uppercase; color: var(--ink); text-align: center; text-wrap: balance; }
.ob-h-sm { font-size: clamp(28px, 3vw, 38px); text-transform: none; }
.ob-h-left { text-align: left; }
.ob-p { margin: 0; font: 400 19px/1.75 var(--font-body); color: var(--ink-2); }
.ob-center { text-align: center; max-width: 64ch; margin: 18px auto 0; }
.ob-sec { padding: clamp(64px, 8vw, 110px) var(--gutter); max-width: 1240px; margin: 0 auto; }
.ob-what, .ob-team, .ob-how { text-align: center; }
.ob-cap { display: block; margin-top: 14px; font: 400 14px/1.4 var(--ob-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-align: center; }

.ob-hero { position: relative; height: min(100svh, 900px); min-height: 560px; color: #fff; display: grid; place-items: center; text-align: center; }
.ob-hero-ph { position: absolute; inset: 0; }
.ob-hero-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(23,20,17,.45), rgba(23,20,17,.18) 40%, rgba(23,20,17,.4)); }
.ob-hero-in { position: relative; padding: 0 var(--gutter); }
.ob-hero-t { margin: 0; font: 400 clamp(30px, 4.2vw, 58px)/1.15 var(--ob-serif); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.ob-hero-s { margin: 14px 0 0; font: 500 14px/1 var(--font-ui); letter-spacing: .5em; text-transform: uppercase; color: #fff; }

.ob-strip { background: var(--night); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px clamp(22px, 3vw, 44px); padding: 22px var(--gutter); }
.ob-strip span { font: 400 clamp(19px, 1.8vw, 26px)/1.2 var(--ob-serif); letter-spacing: .02em; }
.ob-strip .ob-strip-k { font: 500 14px/1 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-light); }

.ob-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 980px; margin: clamp(32px, 4vw, 52px) auto 0; }
.ob-svc { text-decoration: none; }
.ob-svc-ph { display: block; aspect-ratio: 3 / 5; overflow: hidden; }
.ob-svc-ph img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ob-svc:hover .ob-svc-ph img { transform: scale(1.04); }

.ob-gold { padding: 0 var(--gutter) 0 0; max-width: 1400px; margin: clamp(20px, 3vw, 40px) auto 0; }
.ob-gold-in { background: linear-gradient(100deg, #cdb67a, #e6d6a6 55%, #efe4c3); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; padding: clamp(48px, 6vw, 80px) clamp(24px, 5vw, 80px); }
.ob-mix { margin: 0; font: 400 clamp(30px, 3.4vw, 48px)/1.22 var(--ob-serif); color: var(--ink); text-transform: uppercase; }
.ob-mix i { text-transform: none; font-style: italic; }
.ob-mix-sm { font-size: clamp(28px, 3vw, 40px); margin: 14px 0 22px; }
.ob-board { position: relative; aspect-ratio: 5 / 4; }
.ob-pin { position: absolute; width: 38%; aspect-ratio: 4 / 5; background: #fff; padding: 6px; box-shadow: 0 10px 28px rgba(23,20,17,.18); }
.ob-pin0 { left: 0; top: 4%; transform: rotate(-4deg); }
.ob-pin1 { left: 31%; top: 0; transform: rotate(3deg); z-index: 2; }
.ob-pin2 { right: 0; top: 6%; transform: rotate(-2deg); }
.ob-pin3 { left: 6%; bottom: 0; transform: rotate(3deg); z-index: 3; }
.ob-pin4 { left: 36%; bottom: 3%; transform: rotate(-3deg); z-index: 4; }
.ob-pin5 { right: 2%; bottom: 0; transform: rotate(4deg); z-index: 3; }

.ob-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 3vw, 44px); text-align: left; }
.ob-card { margin: 0; position: relative; }
.ob-card-ph { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.ob-card figcaption { position: relative; margin: -64px 18px 0; background: #fff; padding: 20px 22px; font: 400 18px/1.6 var(--font-body); color: var(--ink-2); box-shadow: 0 8px 24px rgba(23,20,17,.08); }
.ob-card b { display: block; margin-bottom: 6px; font: 500 14px/1.3 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }

.ob-blush { max-width: 1240px; margin: clamp(30px, 4vw, 60px) auto 0; padding: 0 var(--gutter); }
.ob-blush-in { background: linear-gradient(100deg, var(--ob-mist), #f6eee4 50%, #efe2d2); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 60px); align-items: center; padding: clamp(48px, 6vw, 80px) clamp(24px, 6vw, 90px) clamp(40px, 5vw, 64px); }
.ob-phone { justify-self: center; width: min(280px, 72vw); aspect-ratio: 9 / 19; border-radius: 44px; background: #111; padding: 11px; box-shadow: 0 30px 60px rgba(23,20,17,.28), inset 0 0 0 2px #333; margin-bottom: -120px; position: relative; z-index: 2; }
.ob-phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 30%; height: 22px; border-radius: 12px; background: #111; transform: translateX(-50%); z-index: 2; }
.ob-phone-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #222; }
.ob-phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-strip-in { justify-content: flex-start; padding-left: clamp(24px, 6vw, 90px); }

.ob-pfsec { padding-top: clamp(140px, 14vw, 200px); }
.ob-pf-head { max-width: 900px; margin: 0 auto; }
.ob-pfs { max-width: 900px; margin: clamp(32px, 4vw, 48px) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(24px, 4vw, 44px); }
.ob-pf { text-decoration: none; }
.ob-pf .ob-cap { text-align: left; }
.ob-pf-ph { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.ob-pf-col { display: grid; gap: 44px; align-content: start; }
.ob-pf-col + .ob-pf-col { padding-top: 22%; }
.ob-pf-col:first-child .ob-pf:nth-child(even) .ob-pf-ph, .ob-pf-col + .ob-pf-col .ob-pf:nth-child(odd) .ob-pf-ph { aspect-ratio: 4 / 5; }

.ob-how-row { display: grid; grid-template-columns: auto minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: clamp(20px, 3vw, 44px); align-items: start; margin-top: clamp(36px, 4vw, 56px); text-align: left; }
.ob-how-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.ob-how-txt { display: grid; gap: 18px; }
.ob-vert { margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 400 clamp(22px, 2.2vw, 30px)/1 var(--ob-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ob-vert::after { content: " →"; letter-spacing: 0; }
.ob-how-row .ob-vert:last-child { transform: none; }

.ob-quote-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 3vw, 40px); max-width: 920px; margin: 0 auto; }
.ob-quote-row { border: 1px solid #c9c3b8; outline: 10px solid #fff; box-shadow: 0 0 0 11px #ece6dc; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; min-height: 420px; }
.ob-quote-row::-webkit-scrollbar { display: none; }
.ob-quote { flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: clamp(36px, 5vw, 64px) clamp(24px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.ob-quote blockquote { margin: 0; }
.ob-quote p { margin: 0; font: 400 19px/1.75 var(--font-body); color: var(--ink-2); }
.ob-quote figcaption { margin-top: 28px; font: 500 14px/1.4 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.ob-arrow, .oc-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #c9c3b8; background: #fff; color: var(--ink); font: 400 20px/1 var(--font-body); cursor: pointer; transition: background .3s, color .3s; }
.ob-arrow:hover, .oc-arrow:hover { background: var(--ink); color: #fff; }
.is-static .ob-arrow, .is-static .oc-arrow { visibility: hidden; }

.ob-contact { max-width: 1400px; margin: 0 auto; padding: 0 0 0 var(--gutter); }
.ob-contact-in { background: linear-gradient(100deg, #fff, var(--ob-mist) 60%, #efe2d2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(48px, 6vw, 80px) clamp(24px, 6vw, 90px); }
.ob-contact-h { margin: 16px 0 14px; font: 400 clamp(30px, 3vw, 40px)/1.2 var(--ob-serif); color: var(--ink); }
.ob-contact a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.ob-form.mc-form { display: grid; gap: 20px; position: relative; padding: 0 90px 0 0; background: transparent; border: 0; box-shadow: none; }
.ob-line input { width: 100%; border: 0; border-bottom: 1px solid #b9b2a6; background: transparent; padding: 12px 0; font: 400 18px/1.4 var(--font-body); color: var(--ink); border-radius: 0; }
.ob-line input::placeholder { color: var(--ink-3); letter-spacing: .12em; }
.ob-line input:focus { outline: none; border-bottom-color: var(--ink); }
.ob-go { position: absolute; right: 0; bottom: 6px; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; font: 500 14px/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background .3s, color .3s; }
.ob-go:hover { background: var(--ink); color: #fff; }
.ob-form .form-status { margin: 0; font: 400 16px/1.5 var(--font-body); color: var(--ink-2); }
.ob-form .form-status:empty { display: none; }

.ob-ig { padding-block: clamp(48px, 6vw, 72px); }
.ob-tag { display: inline-block; background: var(--brass); color: var(--ink); padding: 6px 10px; letter-spacing: .3em; }
.ob-handle { margin: 14px 0 18px; font: 400 clamp(28px, 3vw, 38px)/1.2 var(--ob-serif); color: var(--ink); }
.ob-follow { display: inline-block; font: 600 14px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding: 12px 16px; border: 1px solid var(--ink); text-decoration: none; }
.ob-follow:hover { background: var(--ink); color: #fff; }

.ob-foot { background: var(--night); color: var(--ivory-on-dark, #efe8dc); }
.ob-foot-in { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 6vw, 72px) var(--gutter) 32px; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ob-foot p { margin: 8px 0 0; font: 400 17px/1.7 var(--font-body); }
.ob-foot a { color: inherit; text-decoration: none; }
.ob-foot a:hover { color: var(--gold-light); }
.ob-foot-logo .logo { height: 70px; width: auto; color: var(--ivory); }
.ob-foot-logo .logo .label { fill: var(--brass); }
.ob-foot-logo .logo .hole { fill: var(--night); }
.ob-foot-base { max-width: 1240px; margin: 0 auto; padding: 18px var(--gutter) 28px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.ob-foot-base p { margin: 0; font-size: 15px; color: #cfc6b8; }

@media (max-width: 899px) {
  .ob-svcs { grid-template-columns: 1fr; max-width: 420px; gap: 28px; }
  .ob-svc-ph { aspect-ratio: 4 / 5; }
  .ob-gold, .ob-contact { padding: 0; }
  .ob-gold-in, .ob-blush-in, .ob-contact-in { grid-template-columns: 1fr; }
  .ob-board { max-width: 440px; width: 100%; margin: 8px auto 0; }
  .ob-cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: 34px; }
  .ob-blush { padding: 0; }
  .ob-phone { margin-bottom: -90px; }
  .ob-strip-in { justify-content: center; padding-left: var(--gutter); padding-top: 110px; }
  .ob-pfsec { padding-top: 64px; }
  .ob-pfs { gap: 30px 14px; }
  .ob-pf-col { gap: 30px; }
  .ob-how-row { grid-template-columns: 1fr; }
  .ob-vert { writing-mode: horizontal-tb; transform: none; font-size: 22px; }
  .ob-how-row .ob-vert:first-child { display: none; }
  .ob-quote-box { grid-template-columns: 1fr 1fr; }
  .ob-quote-row { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
  .ob-quote-box .ob-arrow { grid-row: 2; justify-self: center; margin-top: 20px; }
  .ob-form.mc-form { padding: 0 0 92px; }
  .ob-go { right: auto; left: 0; bottom: 0; }
  .ob-foot-in { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ob-foot-base { justify-content: center; text-align: center; }
}

/* ---------- C: header is a quiet row of links; the logo sits large in the hero ---------- */
body.opt-c { --oc-serif: "Bodoni Moda", "Cormorant Garamond", Georgia, serif; --oc-slate: #6f7f8c; --oc-slate-d: #55636e; --oc-mist: #f5f2ec; }
body.opt-c .hd.hd2.hd-over:not(.is-scrolled) .hd2-brand { opacity: 0; pointer-events: none; }
body.opt-c .hd.hd2.hd-over:not(.is-scrolled) .hd2-in { height: 64px; }
body.opt-c .hd.hd2.hd-over:not(.is-scrolled) .hd2-cta { border-color: transparent; padding-inline: 0; }
body.opt-c .hd2 .brand { transition: opacity .4s; }
.oc-k { margin: 0; font: 500 14px/1.5 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.oc-k-left { text-align: left; }
.oc-k-light { color: #fff; }
.oc-h { margin: 18px 0 0; font: 400 clamp(34px, 4vw, 54px)/1.12 var(--oc-serif); letter-spacing: -.01em; color: var(--ink); text-align: center; text-wrap: balance; }
.oc-h em { font-style: italic; }
.oc-h-left { text-align: left; }
.oc-h-light { color: #fff; }
.oc-p { margin: 0; font: 400 19px/1.75 var(--font-body); color: var(--ink-2); }
.oc-sec { padding: clamp(64px, 8vw, 110px) var(--gutter); max-width: 1240px; margin: 0 auto; }
.oc-btn { display: inline-block; margin-top: 28px; background: var(--oc-slate-d); color: #fff; font: 600 14px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 15px 26px; transition: background .3s; }
.oc-btn:hover { background: var(--night); }
.oc-btn-light { background: #fff; color: var(--ink); }
.oc-btn-light:hover { background: var(--brass); color: var(--ink); }
.oc-center { text-align: center; }

.oc-hero { position: relative; height: min(100svh, 920px); min-height: 560px; display: grid; place-items: center; text-align: center; color: #fff; }
.oc-hero-ph { position: absolute; inset: 0; }
.oc-hero-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(23,20,17,.35), rgba(23,20,17,.12) 45%, rgba(23,20,17,.38)); }
.oc-hero-in { position: relative; padding: 0 var(--gutter); }
.oc-hero-logo .logo { width: min(620px, 82vw); height: auto; color: #fff; filter: drop-shadow(0 2px 20px rgba(0,0,0,.3)); }
.oc-hero-logo .logo .label { fill: var(--brass); }
.oc-hero-logo .logo .hole { fill: var(--night); }
.oc-hero-s { margin: 18px 0 0; font: 500 14px/1.4 var(--font-ui); letter-spacing: .42em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }

.oc-intro { max-width: 860px; text-align: center; display: grid; justify-items: center; gap: 0; }
.oc-intro .oc-h { margin-bottom: 26px; }
.oc-intro .oc-p { max-width: 62ch; margin-top: 12px; }
.oc-intro .oc-k::before, .oc-intro .oc-k::after { content: none; }

.oc-pks { position: relative; max-width: none; background: var(--oc-mist); }
.oc-ghost { position: absolute; top: clamp(20px, 3vw, 40px); left: 0; right: 0; margin: 0; white-space: nowrap; overflow: hidden; font: 300 clamp(80px, 11vw, 170px)/1 var(--oc-serif); letter-spacing: .04em; text-transform: uppercase; color: rgba(23,20,17,.06); text-align: center; pointer-events: none; }
.oc-pk-row { position: relative; max-width: 1180px; margin: clamp(50px, 6vw, 90px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.oc-pk { display: flex; flex-direction: column; align-items: center; }
.oc-pk > *:not(.oc-btn) { align-self: stretch; }
.oc-pk-ph { display: block; aspect-ratio: 5 / 4; overflow: hidden; border: 1px solid #cfc8bb; border-bottom: 0; }
.oc-pk-lab { margin: 0; background: #ece5d8; border-inline: 1px solid #cfc8bb; padding: 14px 10px; font: 600 14px/1.3 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); text-align: center; }
.oc-pk-body { flex: 1; background: #fff; border: 1px solid #cfc8bb; border-top: 0; padding: 28px clamp(18px, 2vw, 30px) 34px; text-align: center; }
.oc-pk-t { margin: 0; font: italic 400 clamp(28px, 2.6vw, 36px)/1.15 var(--oc-serif); color: var(--ink); }
.oc-pk-k { margin: 14px 0 16px; font: 600 14px/1.5 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.oc-pk .oc-btn { margin-top: 22px; }

.oc-venues .oc-h { margin-top: 0; }
.oc-venues .oc-k { margin: 18px 0 0; padding-bottom: 14px; border-bottom: 1px solid #cfc8bb; display: inline-block; }
.oc-vgrid { margin-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 260px)); gap: 10px; }
.oc-v { position: relative; display: block; overflow: hidden; }
.oc-v-big { grid-row: span 2; }
.oc-v img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.oc-v:hover img { transform: scale(1.04); }
.oc-v span { position: absolute; left: 16px; bottom: 12px; font: 400 clamp(24px, 2.4vw, 36px)/1.1 var(--oc-serif); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.oc-v::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(23,20,17,.45)); }
.oc-v span { z-index: 1; }

.oc-why-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.oc-why .oc-h { margin-top: 0; }
.oc-why .oc-k { margin: 18px 0 22px; }
.oc-arrows { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.oc-arrows li { font: 600 16px/1.45 var(--font-ui); color: var(--ink); padding-left: 26px; position: relative; }
.oc-arrows li::before { content: "→"; position: absolute; left: 0; color: var(--gold-ink); }
.oc-why-art { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.oc-why-art span { display: block; overflow: hidden; }
.oc-w1 { aspect-ratio: 4 / 3; }
.oc-w2 { aspect-ratio: 3 / 4; margin-top: 30px; }
.oc-w3 { aspect-ratio: 3 / 4; margin-top: -60px; }
.oc-w4 { aspect-ratio: 4 / 3; }

.oc-pano { height: clamp(220px, 28vw, 420px); overflow: hidden; }

.oc-test-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.oc-test-ph { display: block; aspect-ratio: 4 / 3.4; overflow: hidden; }
.oc-test-q { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.oc-test-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.oc-test-row::-webkit-scrollbar { display: none; }
.oc-quote { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.oc-quote blockquote { margin: 0; }
.oc-quote p { margin: 0; font: 400 clamp(21px, 1.9vw, 27px)/1.45 var(--oc-serif); color: var(--ink); }
.oc-quote figcaption { margin-top: 22px; font: 600 14px/1.4 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.oc-quote figcaption::before { content: "— "; }
.oc-arrow { border: 0; background: transparent; font-size: 24px; }

.oc-process { text-align: center; }
.oc-proc-art { position: relative; max-width: 980px; margin: 0 auto; height: clamp(420px, 46vw, 600px); }
.oc-proc-art > span { position: absolute; overflow: hidden; }
.oc-proc-head { position: absolute; left: 20%; right: 20%; top: 0; height: 40%; display: grid; place-content: center; overflow: hidden; z-index: 1; }
.oc-proc-bg { position: absolute; inset: 0; opacity: .55; }
.oc-proc-head .oc-k, .oc-proc-head .oc-script { position: relative; }
.oc-script { margin: 10px 0 0; font: 400 clamp(36px, 4.4vw, 60px)/1.1 var(--font-script, "Waterfall", cursive); color: var(--ink); }
.oc-p1 { left: 0; top: 30%; width: 26%; aspect-ratio: 3 / 4; z-index: 2; }
.oc-p2 { left: 36%; top: 46%; width: 24%; aspect-ratio: 3 / 4; z-index: 2; }
.oc-p3 { right: 0; top: 36%; width: 30%; aspect-ratio: 4 / 3; z-index: 2; }
.oc-steps { max-width: 1100px; margin: clamp(44px, 5vw, 70px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-step { position: relative; padding: 18px clamp(18px, 3vw, 40px); }
.oc-step + .oc-step { border-left: 1px solid #cfc8bb; }
.oc-step-n { position: absolute; left: 50%; top: -28px; transform: translateX(-50%); font: 300 120px/1 var(--oc-serif); color: rgba(23,20,17,.07); }
.oc-step-t { position: relative; margin: 0 0 12px; font: 600 15px/1.4 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.oc-step .oc-p { position: relative; font-size: 18px; }

.oc-gal { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.oc-gal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.oc-gal-i { display: block; text-decoration: none; }
.oc-gal-i img { aspect-ratio: 3 / 4; height: auto; }
.oc-gal-i span { display: block; margin-top: 12px; font: 600 14px/1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-align: center; }
.oc-gal-txt .oc-h { margin-top: 0; }

.oc-ready { position: relative; display: grid; place-items: center; text-align: center; padding: clamp(90px, 11vw, 150px) var(--gutter); overflow: hidden; }
.oc-ready-ph { position: absolute; inset: 0; }
.oc-ready-ph::after { content: ""; position: absolute; inset: 0; background: rgba(43, 52, 60, .78); }
.oc-ready-in { position: relative; max-width: 820px; }
.oc-ready .oc-k { margin-top: 22px; line-height: 1.8; }

@media (max-width: 899px) {
  .oc-pk-row { grid-template-columns: 1fr; max-width: 440px; gap: 40px; }
  .oc-vgrid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 180px; }
  .oc-v-big { grid-column: 1 / -1; grid-row: auto; }
  .oc-why-in, .oc-test-in, .oc-gal { grid-template-columns: 1fr; }
  .oc-arrows { grid-template-columns: 1fr; }
  .oc-w3 { margin-top: -30px; }
  .oc-test-q { grid-template-columns: 1fr 1fr; }
  .oc-test-row { grid-column: 1 / -1; grid-row: 1; }
  .oc-test-q .oc-arrow { grid-row: 2; justify-self: center; }
  .oc-proc-art { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .oc-proc-art > span, .oc-proc-head { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .oc-proc-head { grid-column: 1 / -1; order: -1; min-height: 200px; }
  .oc-p3 { grid-column: 1 / -1; }
  .oc-steps { grid-template-columns: 1fr; gap: 10px; }
  .oc-step + .oc-step { border-left: 0; border-top: 1px solid #cfc8bb; }
  .oc-step { padding-top: 40px; }
  .oc-gal-txt { text-align: center; }
  .oc-gal-txt .oc-h { text-align: center; }
}
body.opt .oc-gal-i img { height: auto; aspect-ratio: 3 / 4; }
@media (max-width: 899px) {
  .ob-hero-s, .oc-hero-s { letter-spacing: .26em; line-height: 1.6; }
  .oc-gal-i span { font-size: 14px; letter-spacing: .12em; }
}

/* ---------- Option D: services block measured from the Dreams in Detail reference ---------- */
body.opt-d { --od-navy: #122233; --od-serif: "Playfair Display", Georgia, serif; --od-sans: "Work Sans", "Instrument Sans", sans-serif; }
.od-svc { background: #fff; padding: 100px var(--gutter) 110px; text-align: center; }
.od-k { margin: 0; font: 500 18px/28px var(--od-sans); letter-spacing: .38em; text-transform: uppercase; color: var(--od-navy); }
.od-h { margin: 8px 0 0; font: 500 70px/80px var(--od-serif); text-transform: uppercase; color: var(--od-navy); }
.od-cards { display: grid; grid-template-columns: repeat(3, 329px); gap: 6px; justify-content: center; margin-top: 60px; }
.od-card { display: block; text-decoration: none; color: var(--od-navy); }
.od-box { position: relative; display: block; height: 573px; overflow: hidden; }
.od-box img, .od-box .od-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.od-shade { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0); transition: background-color .5s; }
.od-over { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 45px; opacity: 0; transition: opacity .5s; color: #fff; }
.od-over-t { display: block; margin-bottom: 50px; font: 400 22px/26.4px var(--od-serif); letter-spacing: 1.1px; text-transform: uppercase; }
.od-over-d { display: block; font: 400 16px/24px var(--od-sans); }
.od-card:hover .od-shade, .od-card:focus-visible .od-shade { background: rgba(0, 0, 0, .3); }
.od-card:hover .od-over, .od-card:focus-visible .od-over { opacity: 1; }
.od-cap { display: block; margin: 20px auto 0; max-width: 329px; font: 400 22px/22px var(--od-serif); letter-spacing: 1.1px; text-transform: uppercase; color: var(--od-navy); }
@media (max-width: 1099px) {
  .od-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 999px; margin-inline: auto; }
}
@media (max-width: 899px) {
  .od-svc { padding: 64px var(--gutter) 72px; }
  .od-k { font-size: 15px; letter-spacing: .3em; }
  .od-h { font-size: 44px; line-height: 52px; }
  .od-cards { grid-template-columns: 1fr; max-width: 420px; gap: 36px; margin-top: 40px; }
  .od-box { height: auto; aspect-ratio: 329 / 480; }
  .od-cap { font-size: 20px; line-height: 26px; margin-top: 16px; }
}
@media (hover: none) {
  .od-over { display: none; }
}
/* the 30% shade is the reference's; a soft shadow keeps the white text readable over bright photos like the white jacket */
.od-over-t, .od-over-d { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .45); }
/* Option D header: logo and bar sized like the reference (221px-wide logo in a 138px bar at 1440, same when scrolled) */
@media (min-width: 1100px) {
  body.opt-d .hd2-in { height: 138px; }
  body.opt-d .hd2 .brand .logo, body.opt-d .hd.hd2.is-scrolled .brand .logo { height: auto; width: 221px; }
  body.opt-d .hd2 .brand { height: auto; }
}
/* Option D on tablets and phones: the logo stays big and centred, menu button on the right */
@media (max-width: 1099px) {
  body.opt-d .hd2-in { grid-template-columns: 1fr auto 1fr; height: 104px; }
  body.opt-d .hd2 .brand { grid-column: 2; grid-row: 1; justify-self: center; height: auto; }
  body.opt-d .hd2 .brand .logo, body.opt-d .hd.hd2.is-scrolled .brand .logo { height: auto; width: 160px; }
  body.opt-d .hd2 .menu-btn { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (max-width: 599px) {
  body.opt-d .hd2-in { height: 88px; }
  body.opt-d .hd2 .brand .logo, body.opt-d .hd.hd2.is-scrolled .brand .logo { width: 128px; }
  body.opt-d .hd2 .menu-txt { display: none; }
}
/* Option D on desktop: the header sits at the top of the page and scrolls away with it, no floating bar */
@media (min-width: 1100px) {
  body.opt-d .hd.hd2 { position: absolute; transform: none !important; }
}
/* brighter, crisper hover text over the light photos: deeper shade, bolder line, firmer shadow */
body.opt-d .od-card:hover .od-shade, body.opt-d .od-card:focus-visible .od-shade { background: rgba(18, 16, 14, .5); }
body.opt-d .od-over { color: #fff; }
body.opt-d .od-over-t { font-weight: 500; }
body.opt-d .od-over-d { font-weight: 500; font-size: 17px; line-height: 26px; }
body.opt-d .od-over-t, body.opt-d .od-over-d { text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 22px rgba(0, 0, 0, .5); }

/* ---------- Option D hero: "E · Layered gold and white" (sizes from the 1440 mock-up, scaled by viewport) ---------- */
.od-hero-in { padding: 150px var(--gutter) 110px; isolation: isolate; }
.od-hero-in::before { content: ""; position: absolute; left: 50%; top: 54%; width: min(1400px, 130vw); height: 78%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(16, 13, 10, .62), rgba(16, 13, 10, .35) 55%, rgba(16, 13, 10, 0)); }
.od-h1 { margin: 0; display: grid; justify-items: center; }
.od-script { position: relative; z-index: 2; font: 400 clamp(96px, 13.9vw, 220px)/.7 "Waterfall", cursive; color: #f7d488; -webkit-text-stroke: .8px #fde3a7;
  text-shadow: 0 0 1px #f7d488, 0 3px 3px rgba(40, 25, 5, .7), 0 0 30px rgba(0, 0, 0, .5); padding: 0 .1em; }
.od-caps { position: relative; z-index: 1; margin-top: .07em; font: 600 clamp(26px, 4vw, 62px)/1.05 "Bodoni Moda", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; font-optical-sizing: none; font-variation-settings: "opsz" 11;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6), 0 0 28px rgba(0, 0, 0, .45); }
/* Michigan, more defined: larger, heavier, brighter gold with a crisp dark edge and solid gold rules */
.od-place { margin: clamp(18px, 1.8vw, 26px) 0 0; display: flex; align-items: center; gap: 18px; font: 700 clamp(14px, 1.25vw, 18px)/1 var(--font-ui); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: #ffdf95;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .7); }
.od-place::before, .od-place::after { content: ""; width: clamp(40px, 4.5vw, 72px); height: 2px; background: #f2cd7c; box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.od-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 22px; margin-top: clamp(28px, 2.8vw, 40px); }
.od-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 34px; border-radius: 999px; font: 600 14px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.od-btn-white { background: #fff; color: var(--night); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.od-btn-white:hover { background: #f7d488; }
.od-btn-line { border: 1.5px solid rgba(255, 255, 255, .9); color: #fff; background: rgba(16, 13, 10, .25); }
.od-btn-line:hover { background: #fff; color: var(--night); }
@media (max-width: 700px) {
  .od-hero-in { padding: 120px var(--gutter) 90px; }
  .od-script { font-size: clamp(64px, 22vw, 96px); }
  .od-caps { font-size: clamp(22px, 6.6vw, 28px); letter-spacing: .06em; margin-top: .2em; }
  .od-acts { flex-direction: column; width: 100%; }
  .od-btn { width: 100%; }
}

/* ---------- Option D: "Let's create / THE SOUNDTRACK / to the best night of your life" (the hero's type, set for an ivory ground) ---------- */
.od-say { margin: 0 auto; display: grid; justify-items: center; text-align: center; }
.od-say-lead { font: 400 clamp(64px, 8vw, 128px)/.8 "Waterfall", cursive; color: #a27a2e; position: relative; z-index: 1; }
.od-say-big { margin-top: .04em; font: 600 clamp(38px, 5.6vw, 88px)/1 "Bodoni Moda", Georgia, serif; letter-spacing: .1em; padding-left: .1em; text-transform: uppercase; color: var(--od-navy, #122233);
  font-optical-sizing: none; font-variation-settings: "opsz" 11; }
.od-say-tag { margin-top: clamp(16px, 1.6vw, 24px); display: flex; align-items: center; gap: 16px; font: 600 clamp(14px, 1.15vw, 17px)/1.3 var(--font-ui); letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; color: #5b4a2f; }
.od-say-tag::before, .od-say-tag::after { content: ""; flex: none; width: clamp(28px, 4vw, 64px); height: 1.5px; background: #c9a35a; }
body.opt-d .hp2-intro .hp2-intro-grid { margin-top: clamp(64px, 8vw, 128px); }
@media (max-width: 700px) {
  .od-say-big { letter-spacing: .05em; padding-left: .05em; }
  .od-say-tag { letter-spacing: .22em; padding-left: .22em; text-align: center; }
  .od-say-tag::before, .od-say-tag::after { display: none; }
}
/* Option D on tablets too: header scrolls away with the page and no floating "Check your date" bar (phones keep both) */
@media (min-width: 700px) {
  body.opt-d .hd.hd2 { position: absolute; transform: none !important; }
  body.opt-d .dock { display: none !important; }
}

/* Option D "Let's create THE SOUNDTRACK": measured from the reference at 1440 (Playfair 42 / Playfair 114 / Work Sans 18,
   all #122233, gaps 8 and 16, a 4 x 262 rule ending 34px above, white ground). Scales down with the viewport. */
body.opt-d .hp2-intro { background: #fff; padding-top: 0; }
body.opt-d .od-svc { padding-bottom: 40px; }
.od-say::before { content: ""; display: block; width: 4px; height: clamp(120px, 18.2vw, 262px); margin: 0 auto clamp(22px, 2.4vw, 34px); background: #c9a35a; }
.od-say-lead { font: 400 clamp(26px, 2.92vw, 42px)/1 "Playfair Display", Georgia, serif; color: #122233; }
.od-say-big { margin-top: clamp(4px, .56vw, 8px); font: 400 clamp(36px, 7.92vw, 114px)/1 "Playfair Display", Georgia, serif; letter-spacing: normal; padding-left: 0; color: #122233; text-transform: uppercase; font-variation-settings: normal; }
.od-say-tag { margin-top: clamp(10px, 1.1vw, 16px); display: block; font: 500 clamp(13px, 1.25vw, 18px)/1.56 "Work Sans", sans-serif; letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; color: #122233; }
.od-say-tag::before, .od-say-tag::after { content: none; }
@media (max-width: 700px) {
  .od-say-big { letter-spacing: normal; padding-left: 0; }
  .od-say-tag { letter-spacing: .24em; padding-left: .24em; }
}
/* the reference holds these sizes fixed at every desktop width: do the same, scale only below 1150px; no vertical rule */
.od-say::before { content: none; }
body.opt-d .hp2-intro { padding-top: clamp(64px, 7vw, 110px); }
@media (min-width: 1150px) {
  .od-say-lead { font-size: 42px; }
  .od-say-big { font-size: 114px; margin-top: 8px; }
  .od-say-tag { font-size: 18px; margin-top: 16px; }
}
@media (max-width: 1149px) {
  .od-say-lead { font-size: clamp(26px, 3.65vw, 42px); }
  .od-say-big { font-size: clamp(36px, 9.9vw, 114px); }
  .od-say-tag { font-size: clamp(13px, 1.56vw, 18px); }
}
/* Option D: the headline stands alone before the next band */
body.opt-d .od-say-sec { padding-bottom: clamp(64px, 7vw, 110px); }

/* ---------- Option D: four steps ---------- */
.os { --os-navy: #122233; --os-ink: #3a4452; --os-line: #dcd7cc; --os-gold: #a27a2e; background: #fff; padding-block: 0 clamp(80px, 9vw, 140px); }
.os-wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.os-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.os-h { margin: 0; font: 500 clamp(40px, 5.2vw, 76px)/1.04 "Playfair Display", Georgia, serif; color: var(--os-navy); letter-spacing: -.01em; text-wrap: balance; }
.os-h em { display: block; font-style: italic; font-weight: 400; color: var(--os-gold); }
.os-note { margin: 0; font: 400 clamp(17px, 1.4vw, 20px)/1.65 "Work Sans", sans-serif; color: var(--os-ink); border-left: 2px solid #c9a35a; padding-left: 22px; }

.os-track { list-style: none; margin: clamp(44px, 5vw, 70px) 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; counter-reset: os; }
.os-track::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 17px; height: 1px; background: linear-gradient(90deg, #c9a35a, #e3c48a 50%, #c9a35a); }
.os-track li { position: relative; display: grid; justify-items: center; gap: 10px; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--os-navy); counter-increment: os; }
.os-track li::before { content: counter(os); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--os-navy); color: #f3d48d; font: 500 15px/1 "Playfair Display", serif; letter-spacing: 0; box-shadow: 0 0 0 6px #fff; }

.os-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--os-line); }
.os-cell { border: 1px solid var(--os-line); margin: -.5px; display: grid; grid-template-rows: auto 1fr; background: #fff; transition: box-shadow .4s, transform .4s; position: relative; }
.os-cell:hover { box-shadow: 0 22px 50px rgba(18, 34, 51, .12); transform: translateY(-4px); z-index: 2; }
.os-ph { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.os-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.os-cell:hover .os-ph img { transform: scale(1.05); }
.os-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(18, 34, 51, .55)); }
.os-n { position: absolute; z-index: 1; left: 28px; bottom: 6px; font: 400 clamp(64px, 6vw, 96px)/1 "Playfair Display", serif; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.os-body { position: relative; padding: clamp(30px, 3.2vw, 48px) clamp(26px, 3.6vw, 56px) clamp(34px, 3.4vw, 50px); }
.os-ico { position: absolute; right: clamp(24px, 3vw, 44px); top: -34px; width: 68px; height: 68px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(18, 34, 51, .14); border: 1px solid #efe6d2; }
.os-ico svg { width: 36px; height: 36px; fill: none; stroke: var(--os-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.os-k { margin: 0 0 10px; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--os-gold); }
.os-t { margin: 0; font: 600 clamp(26px, 2.3vw, 34px)/1.15 "Playfair Display", Georgia, serif; color: var(--os-navy); }
.os-p { margin: 16px 0 0; font: 400 18px/1.7 "Work Sans", sans-serif; color: var(--os-ink); max-width: 46ch; }
.os-chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.os-chips li { padding: 8px 14px; border-radius: 999px; background: #f7f1e4; color: var(--os-navy); font: 500 14px/1 "Work Sans", sans-serif; }
.os-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding-bottom: 6px; border-bottom: 1.5px solid #c9a35a; font: 600 14px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--os-navy); text-decoration: none; }
.os-cta span { transition: transform .3s; font-size: 1.2em; letter-spacing: 0; }
.os-cta:hover span { transform: translateX(6px); }

.os-band { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 3vw, 40px); padding: clamp(26px, 3vw, 40px) clamp(24px, 4vw, 56px); background: var(--os-navy); color: #fff; border-radius: 2px; position: relative; overflow: hidden; }
.os-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 120% at 100% 50%, rgba(201, 163, 90, .28), transparent 70%); pointer-events: none; }
.os-band-rec { width: 64px; height: 64px; display: block; position: relative; z-index: 1; }
.os-band-rec svg { width: 100%; height: 100%; animation: os-spin 8s linear infinite; }
.os-band-rec .disc { fill: #0b0907; } .os-band-rec .groove { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: .8; } .os-band-rec .label { fill: #c9a35a; } .os-band-rec .hole { fill: var(--os-navy); }
@keyframes os-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .os-band-rec svg { animation: none; } }
.os-band-t { margin: 0; font: 500 clamp(24px, 2.4vw, 34px)/1.15 "Playfair Display", serif; position: relative; z-index: 1; }
.os-band-p { margin: 6px 0 0; font: 400 17px/1.5 "Work Sans", sans-serif; color: #e7dcc4; position: relative; z-index: 1; }
.os-band-btn { position: relative; z-index: 1; }

@media (max-width: 899px) {
  .os-head { grid-template-columns: 1fr; }
  .os-grid { grid-template-columns: 1fr; }
  .os-track { display: none; }
  .os-band { grid-template-columns: auto 1fr; }
  .os-band-btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 599px) {
  .os-p { font-size: 17px; }
  .os-ico { width: 56px; height: 56px; top: -28px; } .os-ico svg { width: 30px; height: 30px; }
  .os-band-rec { width: 48px; height: 48px; }
}
@media (max-width: 899px) { .os-grid { margin-top: 40px; } .os-h em { margin-top: 4px; } }

/* ---------- landing page (/landing/): logo only, no menu, footer without page links ---------- */
body.lp .hd2-l, body.lp .hd2-r, body.lp .hd2 .menu-btn, body.lp .menu, body.lp .ft2-l, body.lp .ft2-r, body.lp .dock { display: none !important; }
body.lp .hd2-in { grid-template-columns: 1fr; justify-items: center; }
body.lp .hd2 .brand { grid-column: 1; }
body.lp .ft2-in { grid-template-columns: 1fr; justify-items: center; }
body.lp .od-card { cursor: default; }
html:has(body.lp) { scroll-behavior: smooth; }
body.lp .hd2-in { display: flex !important; justify-content: center; }
body.lp .hd2 .brand { margin: 0 auto; }

/* ---------- Dave's bio (landing + Option D), after the owner's reference ---------- */
.ob2 { background: #fff; padding-block: clamp(72px, 8vw, 130px); }
.ob2-in { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.ob2-fig { margin: 0; display: grid; gap: 26px; justify-items: center; text-align: center; }
.ob2-ph { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 30px 60px rgba(18, 34, 51, .16); }
.ob2-ph img { width: 100%; height: 100%; object-fit: cover; }
.ob2-name { display: block; font: italic 500 clamp(28px, 2.6vw, 36px)/1.1 "Playfair Display", Georgia, serif; color: #a27a2e; }
.ob2-role { display: block; margin-top: 10px; font: 600 14px/1.3 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #122233; }
.ob2-h { margin: 0 0 clamp(22px, 2.4vw, 32px); font: 600 clamp(38px, 4.6vw, 66px)/1.04 "Playfair Display", Georgia, serif; color: #122233; letter-spacing: -.01em; text-wrap: balance; }
.ob2-h em { display: block; margin-top: .08em; font-weight: 400; font-style: italic; font-size: 1.12em; color: #a27a2e; }
.ob2-p { margin: 0 0 18px; font: 400 clamp(17px, 1.35vw, 19px)/1.7 "Work Sans", sans-serif; color: #2f3a47; max-width: 58ch; }
.ob2-facts { list-style: none; margin: clamp(24px, 2.6vw, 34px) 0 0; padding: 22px 0 0; border-top: 1px solid #e6dfcf; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ob2-facts li { font: 500 14px/1.4 "Work Sans", sans-serif; color: #4a5260; letter-spacing: .04em; }
.ob2-facts b { display: block; margin-bottom: 4px; font: 500 clamp(30px, 3vw, 42px)/1 "Playfair Display", serif; color: #122233; letter-spacing: 0; }
.ob2-btn { margin-top: clamp(26px, 2.8vw, 36px); background: #122233; color: #fff; }
.ob2-btn:hover { background: #a27a2e; color: #fff; }
@media (max-width: 899px) {
  .ob2-in { grid-template-columns: 1fr; }
  .ob2-fig { max-width: 440px; margin: 0 auto; }
  .ob2-btn { width: 100%; }
}
/* the bio fills exactly one screen on desktop: everything centred, the portrait sized from the screen height */
@media (min-width: 900px) {
  .ob2 { min-height: 100svh; display: grid; align-items: center; padding-block: 56px; box-sizing: border-box; }
  .ob2-ph { width: auto; height: min(58svh, 600px); aspect-ratio: 4 / 5; }
  .ob2-fig { gap: 20px; }
  .ob2-h { font-size: clamp(38px, min(4.4vw, 6.4svh), 64px); }
  .ob2-p { margin-bottom: 14px; font-size: clamp(16px, min(1.3vw, 2.1svh), 19px); }
  .ob2-facts { margin-top: 20px; padding-top: 18px; }
  .ob2-btn { margin-top: 24px; }
}
@media (min-width: 900px) { .ob2 { padding-block: clamp(28px, 4svh, 56px); } }

/* ---------- landing: featured wedding (Katie & Dennis) ---------- */
.kds { background: #122233; color: #f3ede2; padding-block: clamp(80px, 9vw, 140px); position: relative; overflow: hidden; }
.kds::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 85% 10%, rgba(201,163,90,.18), transparent 70%), radial-gradient(ellipse 60% 40% at 10% 90%, rgba(201,163,90,.12), transparent 70%); pointer-events: none; }
.kds-in { position: relative; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.kds-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.kds-k { margin: 0 0 16px; font: 600 14px/1 "Work Sans", sans-serif; letter-spacing: .34em; text-transform: uppercase; color: #e3c48a; }
.kds-center { text-align: center; margin-top: clamp(56px, 6vw, 84px); }
.kds-h { margin: 0; font: 500 clamp(44px, 5vw, 76px)/1 "Playfair Display", Georgia, serif; color: #fff; }
.kds-h em { display: block; margin-top: .1em; font-style: italic; font-weight: 400; color: #e3c48a; }
.kds-lede { margin: 24px 0 0; font: 400 clamp(17px, 1.4vw, 20px)/1.65 "Work Sans", sans-serif; color: #e6dfd2; max-width: 46ch; }
.kds-facts { margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(227,196,138,.35); }
.kds-facts div { padding: 16px 16px 16px 0; border-bottom: 1px solid rgba(227,196,138,.35); }
.kds-facts dt { font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #e3c48a; }
.kds-facts dd { margin: 8px 0 0; font: 500 18px/1.35 "Playfair Display", serif; color: #fff; }
.kds-mosaic { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; height: clamp(440px, 46vw, 620px); }
.kds-ph { display: block; overflow: hidden; position: relative; }
.kds-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.kds-ph:hover img { transform: scale(1.05); }
.kds-a { grid-row: 1 / 3; } .kds-b { grid-row: 1 / 2; } .kds-c { grid-row: 2 / 4; } .kds-d { grid-row: 3 / 4; grid-column: 1; }
.kds-credit { margin: 14px 0 0; text-align: right; font: 400 14px/1.4 "Work Sans", sans-serif; color: #b9b0a0; }
.kds-films { margin-top: 26px; }
.kds-quote { margin: clamp(64px, 7vw, 100px) auto 0; max-width: 1040px; text-align: center; position: relative; }
.kds-mark { display: block; height: .55em; font: 400 clamp(110px, 12vw, 180px)/1 "Playfair Display", serif; color: #c9a35a; }
.kds-pull { margin: 0; font: italic 400 clamp(34px, 4.4vw, 64px)/1.12 "Playfair Display", Georgia, serif; color: #fff; text-wrap: balance; }
.kds-full { margin: clamp(30px, 3.4vw, 46px) 0 0; columns: 2; column-gap: clamp(32px, 4vw, 64px); text-align: left; }
.kds-full p { margin: 0 0 18px; font: 400 clamp(17px, 1.3vw, 19px)/1.75 "Source Serif 4", Georgia, serif; color: #ece5d7; break-inside: avoid-column; }
.kds-quote figcaption { margin-top: 28px; display: grid; justify-items: center; gap: 6px; }
.kds-who { font: italic 500 30px/1 "Playfair Display", serif; color: #e3c48a; }
.kds-role { font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #cfc6b4; }
@media (max-width: 899px) {
  .kds-top { grid-template-columns: 1fr; }
  .kds-mosaic { height: 120vw; max-height: 620px; }
  .kds-full { columns: 1; }
  .kds-credit { text-align: left; }
}
@media (max-width: 599px) { .kds-facts { grid-template-columns: 1fr; } }
/* landing: the header never changes on scroll — it stays exactly as it sits over the film and scrolls away with the page */
body.lp .hd.hd2, body.lp .hd.hd2.is-scrolled, body.lp .hd.hd2.is-hidden { position: absolute !important; transform: none !important; background: transparent !important; color: #fff !important; box-shadow: none !important; transition: none !important; }
body.lp .hd.hd2 .logo .hole { fill: var(--night); }
body.lp main { padding-top: 0 !important; }
.ob2-lead { font-size: clamp(18px, min(1.45vw, 2.35svh), 21px); color: #122233; }

/* polish pass: the Soundtrack heading leads straight into the steps; tighter, quieter cards */
body.opt-d .od-say-sec { padding-bottom: 0 !important; }
.os.os-joined { padding-top: clamp(36px, 4vw, 56px); }
.os.os-joined .os-track { margin-top: 0; }
.os-body { padding: clamp(28px, 2.8vw, 40px) clamp(26px, 3vw, 44px) clamp(30px, 3vw, 42px); }
.os-p { margin-top: 12px; font-size: 18px; line-height: 1.6; }
.os-cta { margin-top: 20px; }
@media (min-width: 900px) and (max-height: 820px) {
  .ob2-h { font-size: clamp(34px, 5.6svh, 52px); margin-bottom: 18px; }
  .ob2-p { font-size: 16px; line-height: 1.6; margin-bottom: 12px; }
  .ob2-lead { font-size: 18px; }
  .ob2-facts { margin-top: 14px; padding-top: 14px; }
  .ob2-facts b { font-size: 30px; }
  .ob2-btn { margin-top: 18px; }
}

/* ---------- landing: Dennis's review as a printed card ---------- */
.kdr { margin: clamp(64px, 7vw, 100px) auto 0; max-width: 1120px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); background: #fbf8f2; color: #122233; box-shadow: 0 40px 80px rgba(0, 0, 0, .35); position: relative; }
.kdr::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(162, 122, 46, .45); pointer-events: none; }
.kdr-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 8px; padding: 30px 0 30px 30px; }
.kdr-photos span { display: block; overflow: hidden; }
.kdr-photos img { width: 100%; height: 100%; object-fit: cover; }
.kdr-portrait { grid-column: 1 / -1; min-height: 360px; }
.kdr-sm { aspect-ratio: 1 / 1; }
.kdr-copy { padding: clamp(36px, 4vw, 56px) clamp(32px, 4.4vw, 64px) clamp(34px, 3.6vw, 50px); display: flex; flex-direction: column; }
.kdr-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kdr-stars { display: inline-flex; gap: 4px; }
.kdr-stars svg { width: 24px; height: 24px; fill: #c9a35a; }
.kdr-tag { font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #a27a2e; }
.kdr-pull { margin: 22px 0 0; font: italic 400 clamp(30px, 3vw, 44px)/1.15 "Playfair Display", Georgia, serif; color: #122233; text-wrap: balance; }
.kdr-text { margin: 22px 0 0; padding-top: 22px; border-top: 1px solid #e6dcc8; }
.kdr-text p { margin: 0 0 14px; font: 400 17px/1.7 "Source Serif 4", Georgia, serif; color: #343c47; }
.kdr-by { margin-top: auto; padding-top: 20px; border-top: 1px solid #e6dcc8; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.kdr-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fbf8f2, 0 0 0 4px #c9a35a; }
.kdr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kdr-by b { display: block; font: italic 500 26px/1.1 "Playfair Display", serif; color: #122233; }
.kdr-by span { font: 500 14px/1.4 "Work Sans", sans-serif; color: #5b6370; }
.kdr-meta { text-align: right; }
.kdr-credit { margin: 12px 0 0; font: 400 13px/1.4 "Work Sans", sans-serif; color: #8a8378; }
@media (max-width: 899px) {
  .kdr { grid-template-columns: 1fr; }
  .kdr-photos { padding: 24px 24px 0; }
  .kdr-portrait { min-height: 0; aspect-ratio: 4 / 4.4; }
  .kdr-by { grid-template-columns: auto 1fr; }
  .kdr-meta { grid-column: 1 / -1; text-align: left; }
}

/* ---------- venue banner under the hero (test page): Dreams in Detail's navy band, scrolling venue logos ---------- */
.vb { position: relative; z-index: 2; height: 103px; display: flex; align-items: center; background: #122233; color: #fff; overflow: hidden; }
.vb-label { flex: none; margin: 0; padding: 0 30px 0 clamp(20px, 4vw, 56px); font: 500 16px/1 "Work Sans", sans-serif; letter-spacing: 6.08px; text-transform: uppercase; color: #f7efef; white-space: nowrap; position: relative; z-index: 1; background: #122233; box-shadow: 24px 0 24px #122233; }
.vb-strip { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vb-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: vb-glide calc(var(--n) * 5s) linear infinite; }
.vb-strip:hover .vb-track { animation-play-state: paused; }
@keyframes vb-glide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vb-track { animation: none; } .vb-strip { overflow-x: auto; } }
.vb-track li { flex: none; width: 212px; height: 103px; display: grid; place-items: center; }
.vb-track a { display: grid; place-items: center; width: 100%; height: 100%; }
.vb-logo { display: block; background: currentColor; opacity: .92; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: opacity .3s; }
.vb-track a:hover .vb-logo { opacity: 1; }
/* like the reference, the banner shows on arrival: the film stops 103px short of the screen */
body.bnr-test .hp-hero { min-height: max(560px, calc(100svh - 103px)); }
@media (max-width: 760px) {
  .vb { height: auto; flex-direction: column; align-items: stretch; padding-top: 16px; }
  .vb-label { padding: 0; text-align: center; font-size: 13px; letter-spacing: 4.5px; box-shadow: none; }
  .vb-track li { width: 170px; height: 84px; }
  .vb-logo { transform: scale(.85); }
}
/* banner logos: bigger and full bright white */
.vb-track li { width: 250px; }
.vb-logo { opacity: 1; color: #ffffff; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }
@media (max-width: 760px) { .vb-track li { width: 200px; } .vb-logo { transform: scale(.9); } }
/* label above, logos across the full width (owner, 19 Oct) */
.vb { height: 132px; flex-direction: column; align-items: stretch; justify-content: center; padding-top: 14px; }
.vb-label { padding: 0; text-align: center; font-size: 14px; letter-spacing: 5.4px; box-shadow: none; background: none; }
.vb-strip { flex: none; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.vb-track li { height: 92px; }
body.bnr-test .hp-hero { min-height: max(560px, calc(100svh - 132px)); }
@media (max-width: 760px) { .vb { height: auto; padding-top: 16px; } .vb-label { font-size: 12px; letter-spacing: 4.2px; } .vb-track li { height: 84px; } }
/* the hero line now introduces the band, so the band carries logos only (owner, 19 Oct) */
.vb { height: 103px; padding-top: 0; }
.vb-track li { height: 103px; }
body.bnr-test .hp-hero { min-height: max(560px, calc(100svh - 103px)); }
@media (max-width: 760px) { .vb { height: 92px; padding-top: 0; } .vb-track li { height: 92px; } }
body.bnr-test .hp-hero-foot span { max-width: none; white-space: nowrap; }
/* services hover: back to the reference exactly (owner, 19 Oct) — Playfair 22/26.4 400 + Work Sans 16/24 400, no shadows, 30% shade */
body.opt-d .od-over-t { font-weight: 400; text-shadow: none; }
body.opt-d .od-over-d { font-weight: 400; font-size: 16px; line-height: 24px; text-shadow: none; }
body.opt-d .od-card:hover .od-shade, body.opt-d .od-card:focus-visible .od-shade { background: rgba(0, 0, 0, .3); }
body.opt-d .od-svc > .od-k, body.opt-d .od-svc > .od-h { max-width: 1300px; margin-left: auto; margin-right: auto; }

/* /landing/ · Kindle & Co adaptations (19 Oct 2026) */
/* 1 · booking band: the photo at full strength under a navy fade, solid at the bottom, a warm gold glow at the top */
body.opt-d.lp .hp-date { background: #122233; }
body.opt-d.lp .hp-date-bg { opacity: 1; }
body.opt-d.lp .hp-date-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 68% 0%, rgba(222, 178, 88, .3) 0%, rgba(222, 178, 88, 0) 100%),
    linear-gradient(180deg, #122233 0%, rgba(18, 34, 51, 0) 20%),
    linear-gradient(0deg, #122233 0%, rgba(18, 34, 51, .9) 42%, rgba(18, 34, 51, .6) 100%); }
/* 2 · Dave's portrait melts into the page; his name rises out of the fade */
body.opt-d.lp .ob2-ph { position: relative; box-shadow: none; }
body.opt-d.lp .ob2-ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 38%, rgba(255, 255, 255, .92) 72%, #fff 100%); }
body.opt-d.lp .ob2-fig { gap: 0; }
body.opt-d.lp .ob2-fig figcaption { position: relative; margin-top: calc(-1 * clamp(58px, 5.4vw, 78px)); }
body.opt-d.lp .ob2-name { font-size: clamp(38px, 3.6vw, 52px); }
/* 3 · photo strip above the footer: six squares edge to edge */
.ost { background: var(--ivory, #f8f4ec); }
.ost-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ost-t { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #122233; }
.ost-t img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.ost-t:hover img, .ost-t:focus-visible img { opacity: .82; transform: scale(1.04); }
.ost-credit { margin: 0; padding: 12px var(--gutter, 16px); text-align: center; font: 400 12px/1.5 "Work Sans", sans-serif; letter-spacing: .04em; color: #5b6270; }
@media (max-width: 699px) { .ost-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ost-t img { transition: opacity .5s; } .ost-t:hover img { transform: none; } }

/* /landing/ · Brooklyn Holden Films adaptations (19 Oct 2026) */
/* reviews between sections: large photo, a smaller one set off its corner, first sentence as the headline */
.orv { background: #f7f3ec; padding-block: clamp(72px, 8vw, 124px); overflow: hidden; }
.orv-in { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.orv-photos { position: relative; padding: 0 0 clamp(44px, 5vw, 72px) clamp(48px, 7vw, 112px); }
.orv-big { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e2d4; }
.orv-sm { position: absolute; left: 0; bottom: 0; width: 42%; aspect-ratio: 3 / 4; overflow: hidden; background: #e9e2d4; border: 8px solid #f7f3ec; }
.orv-big img, .orv-sm img { display: block; width: 100%; height: 100%; object-fit: cover; }
.orv-flip .orv-photos { order: 2; padding: 0 clamp(48px, 7vw, 112px) clamp(44px, 5vw, 72px) 0; }
.orv-flip .orv-sm { left: auto; right: 0; }
.orv-top { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(20px, 2vw, 28px); }
.orv-logo { display: block; height: 24px; width: auto; }
.orv-stars { display: inline-flex; gap: 3px; }
.orv-stars svg { width: 17px; height: 17px; fill: #b8862f; }
.orv-q { margin: 0; }
.orv-h { margin: 0 0 clamp(16px, 1.6vw, 22px); font: 400 clamp(28px, 2.7vw, 40px)/1.2 "Playfair Display", Georgia, serif; color: #122233; text-wrap: balance; }
.orv-p { margin: 0; max-width: 54ch; font: 400 clamp(17px, 1.3vw, 19px)/1.7 "Work Sans", sans-serif; color: #2f3a47; }
.orv-by { margin: clamp(22px, 2.2vw, 30px) 0 0; font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #122233; }
.orv-by span { display: block; margin-top: 6px; font: 400 14px/1.4 "Work Sans", sans-serif; letter-spacing: .03em; text-transform: none; color: #5b6270; }
@media (max-width: 899px) {
  .orv-in { grid-template-columns: minmax(0, 1fr); }
  .orv-photos, .orv-flip .orv-photos { order: 0; max-width: 460px; width: 100%; margin: 0 auto; }
}
/* promises over a muted loop from the Katie & Dennis film */
.opr { position: relative; isolation: isolate; overflow: hidden; background: #122233; color: #fff; padding-block: clamp(92px, 10vw, 156px); text-align: center; }
.opr-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.opr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 34, 51, .74) 0%, rgba(18, 34, 51, .84) 100%); }
.opr-in { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.opr-k { margin: 0 0 14px; font: 500 14px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #e2bf72; }
.opr-h { margin: 0; font: 500 clamp(40px, 4.6vw, 66px)/1.08 "Playfair Display", Georgia, serif; color: #fff; text-wrap: balance; }
.opr-h em { font-weight: 400; font-style: italic; color: #e2bf72; }
.opr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(255, 255, 255, .2); }
.opr-col h3 { margin: 0 0 14px; font: 600 14px/1.4 "Work Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #fff; }
.opr-col p { margin: 0 auto; max-width: 32ch; font: 400 clamp(17px, 1.3vw, 19px)/1.7 "Work Sans", sans-serif; color: rgba(255, 255, 255, .9); }
.opr-credit { margin: clamp(40px, 5vw, 60px) 0 0; font: 400 12px/1.5 "Work Sans", sans-serif; letter-spacing: .04em; color: rgba(255, 255, 255, .62); }
@media (max-width: 760px) { .opr-cols { grid-template-columns: minmax(0, 1fr); } }
/* booking band: the dance-floor loop replaces the still */
body.opt-d.lp .hp-date-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* /landing/ hero: the gold script drops in like Flamingo's "Boldly Yours" (Showit slideInDown: one full height above, 1.5s ease-out, no fade) */
@keyframes od-script-in { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } }
body.opt-d.lp .od-script { animation: od-script-in 1.5s ease-out both; }
@media (prefers-reduced-motion: reduce) { body.opt-d.lp .od-script { animation: none; } }

/* /landing/ · Athena adaptations (19 Oct 2026) */
/* the long thin arrow used for quiet text links */
.lk-arrow { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lk-arrow i { display: inline-block; position: relative; width: 34px; height: 1px; background: currentColor; transition: width .4s ease; }
.lk-arrow i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border: solid currentColor; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.lk-arrow:hover i, .lk-arrow:focus-visible i { width: 46px; }
/* booking bar, pinned to the top of the window */
body.opt-d.lp { --bar-h: 44px; }
.lbar { position: sticky; top: 0; z-index: 70; height: var(--bar-h); display: flex; align-items: center; justify-content: center; padding-inline: var(--gutter); background: #122233; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.lbar p { margin: 0; display: flex; align-items: center; gap: 26px; font: 500 12px/1 "Work Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.lbar a { color: #e2bf72; }
.lbar a:hover { color: #f3d48f; }
body.opt-d.lp .hd.hd2 { top: var(--bar-h) !important; }
body.opt-d.lp.bnr-test .hp-hero { min-height: max(560px, calc(100svh - 103px - var(--bar-h))); }
@media (max-width: 760px) {
  body.opt-d.lp { --bar-h: 40px; }
  .lbar p { gap: 14px; font-size: 10.5px; letter-spacing: .14em; }
  .lbar .lk-arrow i { width: 22px; }
  body.opt-d.lp.bnr-test .hp-hero { min-height: max(520px, calc(100svh - 92px - var(--bar-h))); }
}
@media (max-width: 380px) { .lbar p { font-size: 9.5px; letter-spacing: .1em; gap: 10px; } }
/* hero entrance after the script drops: capitals, then Michigan, then the line down to the venue band */
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-drop { from { opacity: 0; transform: translate3d(0, -100%, 0); } 25% { opacity: 1; } to { opacity: 1; transform: translate3d(0, 0, 0); } }
body.opt-d.lp .od-caps { animation: lp-fade .75s ease-out .75s both; }
body.opt-d.lp .od-place { animation: lp-fade .75s ease-out 1.1s both; }
body.opt-d.lp .hp-hero-foot { animation: lp-drop 1s ease-out 1.75s both; }
@media (prefers-reduced-motion: reduce) { body.opt-d.lp .od-caps, body.opt-d.lp .od-place, body.opt-d.lp .hp-hero-foot { animation: none; } }
/* review slider: slides share one spot; without script they simply stack */
.orv-src { font: 600 12px/1.4 "Work Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #a27a2e; }
.js .orv-slides { display: grid; }
.js .orv-slide { grid-area: 1 / 1; transition: opacity .6s ease, visibility .6s; }
.js .orv-slide:not(.is-on) { opacity: 0; visibility: hidden; }
html:not(.js) .orv-slide + .orv-slide { margin-top: 40px; padding-top: 40px; border-top: 1px solid #e6dfcf; }
html:not(.js) .orv-nav { display: none; }
.orv-nav { margin: clamp(26px, 2.6vw, 36px) 0 0; padding-top: 18px; border-top: 1px solid #e6dfcf; display: flex; align-items: center; justify-content: space-between; max-width: 54ch; }
.orv-count { font: 500 13px/1 "Work Sans", sans-serif; letter-spacing: .18em; color: #5b6270; }
.orv-more { padding: 6px 0; border: 0; background: none; cursor: pointer; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #122233; }
.orv-more:hover { color: #a27a2e; }
/* reviewed on: platform logos in one tone */
.orw { background: #f7f3ec; padding: 0 var(--gutter) clamp(64px, 7vw, 104px); margin-top: calc(-1 * clamp(24px, 3vw, 48px)); display: grid; justify-items: center; gap: 22px; }
.orw-k { margin: 0; font: 500 12px/1 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #5b6270; }
.orw-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(28px, 6vw, 88px); }
.orw-logos img { display: block; height: 30px; width: auto; filter: brightness(0); opacity: .62; transition: opacity .4s; }
.orw-logos li:hover img { opacity: .85; }
/* @menzomedia tag sitting on the strip's top edge */
.ost { position: relative; }
.ost-tag { position: absolute; z-index: 2; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 12px 24px; background: #f8f4ec; color: #122233; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.ost-tag i { width: 22px; }
.ost-tag:hover i { width: 30px; }

/* /landing/ hero film, treated like Brooklyn Holden Films: the film at 55% over flat #3e3e3e, no dark shade, so it reads soft and matte */
body.opt-d.lp .hp-hero { background: #3e3e3e; }
body.opt-d.lp .hp-hero-film .mh-vid { opacity: .55; filter: saturate(.5) brightness(1.25) contrast(.82) sepia(.08); }
body.opt-d.lp .hp-hero-shade { background: none; }
body.opt-d.lp .od-hero-in::before { background: radial-gradient(closest-side, rgba(30, 30, 30, .28), rgba(30, 30, 30, .12) 60%, rgba(30, 30, 30, 0)); }

/* /landing/ reviews: one section, two featured cards with large platform logos, two beneath (owner, 19 Oct 2026) */
.rvx { background: #f7f3ec; padding-block: clamp(84px, 9vw, 140px); }
.rvx-in { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.rvx-head { text-align: center; margin-bottom: clamp(44px, 5vw, 72px); }
.rvx-k { margin: 0 0 14px; font: 500 15px/1.4 "Work Sans", sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #a27a2e; }
.rvx-title { margin: 0; font: 500 clamp(44px, 5vw, 72px)/1.05 "Playfair Display", Georgia, serif; color: #122233; text-wrap: balance; }
.rvx-title em { font-weight: 400; font-style: italic; color: #a27a2e; }
.rvx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.rvx-card { margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #ebe3d3; padding: clamp(32px, 3.6vw, 56px); box-shadow: 0 24px 60px rgba(18, 34, 51, .07); }
.rvx-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: clamp(22px, 2.4vw, 30px); margin-bottom: clamp(24px, 2.6vw, 34px); border-bottom: 1px solid #efe8da; }
.rvx-logo { display: block; width: auto; }
.rvx-feat .rvx-google { height: clamp(52px, 5vw, 72px); margin: -8px 0 -10px -4px; }   /* the file has built-in padding */
.rvx-feat .rvx-theknot { height: clamp(38px, 3.6vw, 50px); }
.rvx-sm .rvx-logo { height: clamp(32px, 2.8vw, 40px); }
.rvx-src { font: 600 15px/1.3 "Work Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #a27a2e; }
.rvx-stars { display: inline-flex; gap: 4px; flex: none; }
.rvx-stars svg { width: clamp(22px, 2vw, 28px); height: clamp(22px, 2vw, 28px); fill: #c39232; }
.rvx-q { margin: 0; flex: 1; }
.rvx-h { margin: 0 0 18px; font: 400 clamp(30px, 2.6vw, 40px)/1.22 "Playfair Display", Georgia, serif; color: #122233; text-wrap: balance; }
.rvx-sm .rvx-h { font-size: clamp(26px, 2.1vw, 32px); }
.rvx-p { margin: 0; font: 400 clamp(18px, 1.45vw, 21px)/1.7 "Work Sans", sans-serif; color: #2f3a47; }
.rvx-by { margin-top: clamp(26px, 2.6vw, 36px); display: grid; gap: 6px; }
.rvx-by b { font: 600 15px/1.3 "Work Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #122233; }
.rvx-by span { font: 400 16px/1.4 "Work Sans", sans-serif; color: #5b6270; }
@media (max-width: 899px) {
  .rvx-grid { grid-template-columns: minmax(0, 1fr); }
  .rvx-top { flex-wrap: wrap; }
}

/* /landing/ lower half, redesigned for room (19 Oct 2026): feature (Athena), films + review, split booking (Aura), footer (Brooklyn Holden / Kindle & Co) */
/* featured wedding: full-bleed photo, floating white card, facts in one row */
.ofw { background: #fff; }
.ofw-hero { position: relative; min-height: min(88vh, 900px); display: grid; align-items: end; padding: 0 var(--gutter) clamp(56px, 7vw, 96px); overflow: hidden; }
.ofw-ph { position: absolute; inset: 0; }
.ofw-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofw-card { position: relative; z-index: 1; width: min(560px, 100%); margin-left: clamp(0px, 4vw, 72px); background: #fff; padding: clamp(32px, 4vw, 60px); box-shadow: 0 30px 70px rgba(18, 34, 51, .18); }
.ofw-k { margin: 0 0 16px; font: 500 14px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #a27a2e; }
.ofw-h { margin: 0 0 20px; font: 500 clamp(40px, 4.4vw, 62px)/1.04 "Playfair Display", Georgia, serif; color: #122233; }
.ofw-h em { display: block; font-weight: 400; font-style: italic; color: #a27a2e; }
.ofw-lede { margin: 0 0 26px; font: 400 clamp(18px, 1.4vw, 20px)/1.7 "Work Sans", sans-serif; color: #2f3a47; }
.ofw-link { font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #122233; }
.ofw-link:hover { color: #a27a2e; }
.ofw-credit { position: absolute; right: var(--gutter); bottom: 18px; margin: 0; font: 400 12px/1.4 "Work Sans", sans-serif; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.ofw-facts { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 6vw, 88px) var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ofw-facts div { padding: 0 clamp(16px, 2.4vw, 36px); border-left: 1px solid #e6dfcf; text-align: center; }
.ofw-facts div:first-child { border-left: 0; }
.ofw-facts dt { margin-bottom: 10px; font: 500 13px/1.4 "Work Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #a27a2e; }
.ofw-facts dd { margin: 0; font: 400 clamp(19px, 1.6vw, 23px)/1.35 "Playfair Display", Georgia, serif; color: #122233; }
@media (max-width: 899px) {
  .ofw-hero { min-height: 0; display: block; padding: 0; }
  .ofw-ph { position: relative; display: block; height: 62svh; min-height: 360px; }
  .ofw-card { margin: -64px var(--gutter) 0; width: auto; }
  .ofw-credit { position: static; padding: 14px var(--gutter) 0; color: #5b6270; text-shadow: none; }
  .ofw-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .ofw-facts div:nth-child(3) { border-left: 0; }
}
/* films and Dennis's card: same design, more room */
.ofx { padding-block: clamp(96px, 10vw, 156px) !important; }
.ofx-h { margin: 6px 0 clamp(44px, 5vw, 72px); text-align: center; font: 500 clamp(38px, 4vw, 58px)/1.08 "Playfair Display", Georgia, serif; color: #fff; }
.ofx-h em { font-weight: 400; font-style: italic; color: #e2bf72; }
.ofx .kdr { margin-top: clamp(88px, 10vw, 150px); }
/* check your date: split screen */
.obk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #f7f3ec; min-height: 860px; }
.obk-media { position: relative; overflow: hidden; background: #122233; }
.obk-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(.95); }
.obk-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 34, 51, .1), rgba(18, 34, 51, .35)); }
.obk-media-cap { position: absolute; z-index: 1; left: 24px; bottom: 20px; margin: 0; font: 400 12px/1.4 "Work Sans", sans-serif; color: rgba(255, 255, 255, .85); }
.obk-panel { align-self: center; width: 100%; max-width: 660px; padding: clamp(64px, 7vw, 120px) clamp(28px, 6vw, 96px); box-sizing: border-box; }
.obk-script { margin: 0 0 -.12em; font: 400 clamp(64px, 6.4vw, 104px)/.8 "Waterfall", cursive; color: #a27a2e; }
.obk-h { margin: 0 0 clamp(26px, 2.6vw, 36px); font: 500 clamp(40px, 4vw, 58px)/1.06 "Playfair Display", Georgia, serif; color: #122233; text-wrap: balance; }
.obk-list { list-style: none; margin: 0 0 clamp(34px, 3.4vw, 46px); padding: 0; display: grid; gap: 16px; }
.obk-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; align-items: start; font: 400 clamp(17px, 1.3vw, 19px)/1.55 "Work Sans", sans-serif; color: #2f3a47; }
.obk-list svg { width: 30px; height: 30px; fill: none; stroke: #a27a2e; stroke-width: 1.2; }
.obk-form { display: grid; gap: 26px; }
.obk-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.obk-field { display: grid; gap: 8px; }
.obk-field span, .obk-fs legend { font: 600 12px/1.3 "Work Sans", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #122233; }
.obk-field input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(18, 34, 51, .35); border-radius: 0; background: transparent; font: 400 18px/1.3 "Work Sans", sans-serif; color: #122233; transition: border-color .3s; }
.obk-field input::placeholder { color: #8a8f99; }
.obk-field input:focus { outline: none; border-bottom-color: #a27a2e; box-shadow: 0 1px 0 #a27a2e; }
.obk-field input.is-bad { border-bottom-color: #b3261e; }
.obk-fs { margin: 0; padding: 0; border: 0; }
.obk-fs legend { margin-bottom: 12px; padding: 0; }
.obk-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.obk-pill input { position: absolute; opacity: 0; pointer-events: none; }
.obk-pill span { display: inline-block; padding: 11px 18px; border: 1px solid rgba(18, 34, 51, .3); border-radius: 999px; font: 400 15px/1 "Work Sans", sans-serif; color: #122233; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.obk-pill input:checked + span { background: #122233; border-color: #122233; color: #fff; }
.obk-pill input:focus-visible + span { outline: 2px solid #a27a2e; outline-offset: 2px; }
.obk-btn { margin-top: 6px; min-height: 60px; border: 0; background: #122233; color: #fff; font: 600 14px/1 "Work Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; transition: background .4s; }
.obk-btn:hover { background: #a27a2e; }
.obk .form-status { margin: 0; font: 400 16px/1.5 "Work Sans", sans-serif; color: #2f3a47; }
@media (max-width: 899px) {
  .obk { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .obk-media { height: 46svh; min-height: 300px; }
  .obk-panel { max-width: none; }
  .obk-row { grid-template-columns: minmax(0, 1fr); }
}
/* footer */
.ost { background: #122233; }
.ost-credit { color: rgba(255, 255, 255, .62); }
.ofo { background: #122233; color: #fff; }
.ofo-in { max-width: 1240px; margin: 0 auto; padding: clamp(72px, 8vw, 116px) var(--gutter) clamp(56px, 6vw, 84px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: start; border-top: 1px solid rgba(255, 255, 255, .1); }
.ofo-col { display: grid; gap: 14px; justify-items: start; }
.ofo-r { justify-items: end; text-align: right; }
.ofo-h { margin: 0 0 6px; font: italic 400 26px/1.1 "Playfair Display", Georgia, serif; color: #e2bf72; }
.ofo-col a { font: 500 14px/1.4 "Work Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .88); text-decoration: none; transition: color .3s; }
.ofo-col a:hover { color: #e2bf72; }
.ofo-r a[href^="mailto"], .ofo-r a[href*="instagram"] { letter-spacing: .04em; text-transform: none; font-size: 16px; }
.ofo .ofo-btn { margin-top: 10px; padding: 16px 26px; border: 1px solid rgba(255, 255, 255, .7); letter-spacing: .22em; }
.ofo .ofo-btn:hover { background: #fff; color: #122233; }
.ofo-mid { display: grid; justify-items: center; text-align: center; gap: 14px; }
.ofo-logo { color: #fff; }
.ofo-logo .logo { display: block; width: clamp(200px, 18vw, 250px); height: auto; }
.ofo-logo .logo .groove { stroke: rgba(18, 34, 51, .5); }
.ofo-tag { margin: 12px 0 0; font: 400 clamp(40px, 3.6vw, 56px)/.9 "Waterfall", cursive; color: #e2bf72; }
.ofo-p { margin: 0; max-width: 34ch; font: 400 17px/1.65 "Work Sans", sans-serif; color: rgba(255, 255, 255, .8); }
.ofo-book { margin: 6px 0 0; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #e2bf72; }
.ofo-base { max-width: 1240px; margin: 0 auto; padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .12); font: 400 13px/1.5 "Work Sans", sans-serif; color: rgba(255, 255, 255, .6); }
.ofo-base p { margin: 0; }
.ofo-top { color: rgba(255, 255, 255, .8); text-decoration: none; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }
.ofo-top:hover { color: #e2bf72; }
@media (max-width: 899px) {
  .ofo-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ofo-mid { order: -1; }
  .ofo-col, .ofo-r { justify-items: center; text-align: center; }
  .ofo-base { justify-content: center; text-align: center; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
.obk-form.mc-form { background: none; padding: 0; box-shadow: none; border: 0; gap: 26px; }
/* owner, 19 Oct: no floating header — the booking bar stays at the top of the page and scrolls away with it */
.lbar { position: relative; }
/* booking bar removed (owner, 19 Oct): no offset for the header or the hero */
body.opt-d.lp { --bar-h: 0px; }
@media (max-width: 760px) { body.opt-d.lp { --bar-h: 0px; } }
/* featured wedding: the couple stands on the left of the pond photo, so the card sits right (owner, 19 Oct) */
.ofw-hero { justify-items: end; }
.ofw-card { margin-left: 0; margin-right: clamp(0px, 4vw, 72px); }
.ofw-credit { right: auto; left: var(--gutter); }
@media (max-width: 899px) {
  .ofw-card { margin: -64px var(--gutter) 0; }
  .ofw-ph img { object-position: 30% 55% !important; }
}
/* hero film halfway between the original and the Brooklyn Holden treatment (owner, 19 Oct) */
body.opt-d.lp .hp-hero { background: #2b2824; }
body.opt-d.lp .hp-hero-film .mh-vid { opacity: .8; filter: saturate(.78) brightness(1.08) contrast(.92) sepia(.04); }
body.opt-d.lp .hp-hero-shade { background: linear-gradient(180deg, rgba(23, 19, 16, .32), rgba(23, 19, 16, .18) 40%, rgba(23, 19, 16, .38)); }
@media (min-width: 900px) and (max-width: 1240px) {
  .ofw-card { width: min(430px, 100%); padding: 34px 36px; }
  .ofw-h { font-size: 40px; }
  .ofw-lede { font-size: 17px; }
}
.ofo .ofo-r a.ofo-btn { text-transform: uppercase; letter-spacing: .22em; font-size: 14px; }
/* Dennis's card, shortened: three of his lines as highlights, the full review behind a toggle (owner, 19 Oct) */
.kdr-hl { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid #e6dcc8; }
.kdr-hl li { display: grid; gap: 8px; padding: 20px 0; border-bottom: 1px solid #e6dcc8; }
.kdr-hl-k { font: 600 12px/1.3 "Work Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #a27a2e; }
.kdr-hl q { font: italic 400 clamp(20px, 1.7vw, 24px)/1.4 "Playfair Display", Georgia, serif; color: #122233; quotes: "“" "”"; }
.kdr-more { margin: 18px 0 22px; }
.kdr-more summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #122233; }
.kdr-more summary::-webkit-details-marker { display: none; }
.kdr-more summary::after { content: "+"; font: 400 20px/1 "Work Sans", sans-serif; color: #a27a2e; transition: transform .3s; }
.kdr-more[open] summary::after { transform: rotate(45deg); }
.kdr-more summary:hover { color: #a27a2e; }
.kdr-more .kdr-text { margin-top: 18px; }
.kdr-portrait { min-height: 300px; }
/* featured wedding now carries Dave's three films (owner, 19 Oct): photo + card, facts, films; Dennis's card follows on navy */
.ofw-facts { padding-bottom: clamp(36px, 4vw, 56px); }
.ofw-films { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 4.4vw, 64px) var(--gutter) clamp(84px, 9vw, 128px); text-align: center; border-top: 1px solid #efe8da; }
.ofw-films .ofw-k { margin-bottom: 10px; }
.ofw-fh { margin: 0 0 clamp(30px, 3.6vw, 48px); font: 500 clamp(34px, 3.6vw, 52px)/1.1 "Playfair Display", Georgia, serif; color: #122233; text-wrap: balance; }
.ofw-fh em { font-weight: 400; font-style: italic; color: #a27a2e; }
.ofw .hp-films .mv-row { margin-top: 0; }
.ofw .reel-media { box-shadow: 0 24px 50px rgba(18, 34, 51, .18); }
.ofx { padding-block: clamp(72px, 8vw, 120px) !important; }
.ofx .kdr { margin-top: 0; }
/* film labels: a soft dark fade behind the top of each film so "01 The ceremony" reads on bright sky */
.ofw .reel-media { position: relative; }
.ofw .reel-media::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 42%; pointer-events: none; background: linear-gradient(180deg, rgba(10, 16, 28, .62) 0%, rgba(10, 16, 28, .28) 55%, rgba(10, 16, 28, 0) 100%); border-radius: inherit; }
.ofw .reel-cap span { color: #f0cd84; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.ofw .reel-cap b { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }

/* /landing/ header, after ourdjrocks.com (owner, 19 Oct): over the hero, scrolls away with the page */
.odh { position: absolute; z-index: 60; left: 0; right: 0; top: 0; color: #fff; }
.odh-in { max-width: 1440px; margin: 0 auto; height: 112px; padding-inline: clamp(20px, 3vw, 44px); display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); box-sizing: border-box; }
.odh-logo { flex: none; color: #fff; display: block; }
.odh-logo .logo { display: block; width: clamp(150px, 13vw, 190px); height: auto; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }
.odh-logo .logo .groove { stroke: rgba(18, 34, 51, .45); }
.odh-nav { margin-left: auto; display: flex; align-items: center; }
.odh-nav a { padding: 8px clamp(12px, 1.5vw, 24px); font: 600 15px/23px "Oswald", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-decoration: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); position: relative; transition: color .3s; }
.odh-nav a::after { content: ""; position: absolute; left: clamp(12px, 1.5vw, 24px); right: clamp(12px, 1.5vw, 24px); bottom: 2px; height: 2px; background: #f0cd84; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.odh-nav a:hover, .odh-nav a:focus-visible { color: #f0cd84; }
.odh-nav a:hover::after, .odh-nav a:focus-visible::after { transform: scaleX(1); }
.odh-cta { flex: none; padding: 14px 24px; background: #122233; border: 1px solid #e2bf72; color: #fff; font: 600 14px/1 "Oswald", "Arial Narrow", sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s; }
.odh-cta:hover, .odh-cta:focus-visible { background: #e2bf72; color: #122233; }
.odh-btn { display: none; margin-left: auto; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.odh-ico { display: grid; gap: 6px; width: 28px; margin: 0 auto; }
.odh-ico i { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .3s, opacity .3s; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.odh-open .odh-ico i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.odh-open .odh-ico i:nth-child(2) { opacity: 0; }
.odh-open .odh-ico i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.odh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.odh-menu { background: #122233; padding: 10px clamp(20px, 3vw, 44px) 26px; display: grid; box-shadow: 0 24px 40px rgba(0, 0, 0, .3); }
.odh-menu[hidden] { display: none; }
.odh-menu a { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font: 600 17px/1.2 "Oswald", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-decoration: none; }
.odh-menu a:hover { color: #f0cd84; }
.odh-menu .odh-menu-cta { margin-top: 20px; border: 1px solid #e2bf72; text-align: center; padding: 16px; }
.odh-open .odh { background: #122233; }
.odh-open .odh-in { background: #122233; }
@media (max-width: 1100px) {
  .odh-nav, .odh-cta { display: none; }
  .odh-btn { display: block; }
  .odh-in { height: 84px; }
  .odh-logo .logo { width: 140px; }
}
/* the old centred header is gone on /landing/, so the hero copy no longer needs to clear it */
body.opt-d.lp .od-hero-in { padding-top: clamp(120px, 12vw, 150px); }

/* ---------- /landing/ phone polish (19 Oct 2026) ---------- */
@media (max-width: 760px) {
  /* long stacks become side-swipe rows, the next card peeking in */
  body.opt-d.lp .os-grid, body.opt-d.lp .od-cards, body.opt-d.lp .rvx-grid {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 14px; max-width: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); border: 0; }
  body.opt-d.lp .os-grid::-webkit-scrollbar, body.opt-d.lp .od-cards::-webkit-scrollbar, body.opt-d.lp .rvx-grid::-webkit-scrollbar { display: none; }
  body.opt-d.lp .os-cell, body.opt-d.lp .od-card, body.opt-d.lp .rvx-card { scroll-snap-align: start; }
  body.opt-d.lp .os-cell { margin: 0; border: 1px solid var(--os-line); }
  body.opt-d.lp .os-cell:hover { transform: none; box-shadow: none; }
  body.opt-d.lp .od-cards { margin-top: 32px; padding-bottom: 6px; }
  body.opt-d.lp .rvx-card { box-shadow: 0 14px 30px rgba(18, 34, 51, .07); }
  body.opt-d.lp .rvx-feat .rvx-google { height: 48px; }
  body.opt-d.lp .rvx-feat .rvx-theknot { height: 34px; }
  body.opt-d.lp .rvx-h { font-size: 26px; }
  body.opt-d.lp .rvx-p { font-size: 17px; }
  /* a quiet "swipe" cue under each row */
  body.opt-d.lp .os-grid + .os-band, body.opt-d.lp .rvx-grid { position: relative; }
  .lp-swipe { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 14px 0 0; font: 600 11px/1 "Work Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #8a8378; }
  .lp-swipe i { display: inline-block; width: 26px; height: 1px; background: currentColor; position: relative; }
  .lp-swipe i::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border: solid currentColor; border-width: 1px 1px 0 0; transform: rotate(45deg); }
  /* step-one bar: no record icon, text gets the room */
  body.opt-d.lp .os-band { grid-template-columns: 1fr; text-align: center; }
  body.opt-d.lp .os-band-rec { display: none; }
  /* Dennis's card: tag under the stars, not squeezed beside them */
  body.opt-d.lp .kdr-top { flex-wrap: wrap; gap: 8px 16px; }
  body.opt-d.lp .kdr-tag { letter-spacing: .22em; }
  body.opt-d.lp .kdr-more summary { letter-spacing: .16em; }
  /* section rhythm on phones */
  body.opt-d.lp .rvx, body.opt-d.lp .ofx { padding-block: 64px !important; }
  body.opt-d.lp .opr { padding-block: 72px; }
  body.opt-d.lp .ofo-base { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 761px) { .lp-swipe { display: none; } }
/* on touch screens there's no hover, so each service shows its description over the photo */
@media (hover: none) {
  body.opt-d.lp .od-card .od-shade { background: linear-gradient(180deg, rgba(10, 14, 22, .05) 30%, rgba(10, 14, 22, .72) 100%); }
  body.opt-d.lp .od-card .od-over { opacity: 1; justify-content: flex-end; }
  body.opt-d.lp .od-card .od-over-t { display: none; }
  body.opt-d.lp .od-card .od-over-d { font-size: 15px; line-height: 1.55; }
}
@media (hover: none) { body.opt-d.lp .od-card .od-over { padding: 22px 20px; text-align: left; align-items: flex-start; } }
@media (max-width: 760px) { body.opt-d.lp .od-cards, body.opt-d.lp .os-grid, body.opt-d.lp .rvx-grid { justify-content: start; justify-items: stretch; } }
/* tablet: two-up steps and reviews, three-up services (polish, 19 Oct) */
@media (min-width: 761px) and (max-width: 1023px) {
  body.opt-d.lp .os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.opt-d.lp .od-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 10px; }
  body.opt-d.lp .od-cap { font-size: 16px; }
  body.opt-d.lp .rvx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.opt-d.lp .rvx-card { padding: 30px 28px; }
  body.opt-d.lp .rvx-h { font-size: 24px; }
  body.opt-d.lp .rvx-p { font-size: 16.5px; }
}
/* typed hero word: caret, hidden full text, steady line height (19 Oct) */
.od-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.od-type { display: inline; }
.od-caret { display: inline-block; width: 2px; height: .62em; margin-left: .06em; vertical-align: .05em; background: #f7d488; box-shadow: 0 0 6px rgba(247, 212, 136, .6); animation: od-caret 1s steps(1) infinite; }
@keyframes od-caret { 50% { opacity: 0; } }
body.opt-d.lp .od-script { min-height: .7em; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .od-caret { display: none; } }
/* services row spans the same width as the steps above and the reviews below, so the edges line up (owner, 19 Oct) */
@media (min-width: 761px) {
  body.opt-d.lp .od-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; gap: 10px; justify-content: stretch; }
  body.opt-d.lp .od-box { height: auto; aspect-ratio: 329 / 540; }
}
@media (min-width: 761px) {
  body.opt-d.lp .od-svc { padding-left: 0; padding-right: 0; }
  body.opt-d.lp .od-svc > .od-k, body.opt-d.lp .od-svc > .od-h { padding-inline: var(--gutter); }
}
.os-bandsec { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(16px, 2vw, 24px); } .os-bandsec .os-band { margin-top: 0; }

/* full site (19 Oct): the /landing/ header and footer on every page. Pages without a hero film get a solid navy bar in the flow. */
.odh.odh-solid { position: relative; background: #122233; }
body.site-new:not(.l-home) main { padding-top: 0 !important; }
body.site-new .dock { display: none !important; }

/* ---------- footer after Aura Photography (owner, 19 Oct) ---------- */
.afo { background: #0f1b2b; color: #f3ede2; padding-top: clamp(56px, 6vw, 80px); overflow: hidden; }
.afo-top { max-width: 1440px; margin: 0 auto; padding-inline: clamp(20px, 2vw, 28px); display: grid; grid-template-columns: auto minmax(40px, 1fr) auto minmax(40px, 1fr) auto; align-items: start; gap: clamp(20px, 3vw, 44px); }
.afo-pill { margin-top: clamp(18px, 2.2vw, 30px); padding: 14px 40px; border-radius: 999px; background: #e2bf72; color: #122233; font: 500 15px/1 "Work Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .4s; }
.afo-pill:hover { background: #f3d48f; }
.afo-rule { align-self: start; margin-top: clamp(40px, 4vw, 52px); height: 1px; background: rgba(243, 237, 226, .55); }
.afo-mark { display: grid; justify-items: center; text-decoration: none; color: #f3ede2; position: relative; z-index: 1; }
.afo-script { font: 400 clamp(54px, 5.4vw, 84px)/.7 "Waterfall", cursive; color: #e2bf72; margin-bottom: -.12em; position: relative; z-index: 2; }
.afo-word { font: 600 clamp(96px, 11.4vw, 168px)/.84 "Bodoni Moda", Georgia, serif; letter-spacing: .04em; font-optical-sizing: none; font-variation-settings: "opsz" 11; }
.afo-icons { margin: clamp(18px, 2.2vw, 28px) 0 0; display: flex; gap: 22px; }
.afo-icons a { color: #f3ede2; display: block; width: 34px; height: 34px; transition: color .3s; }
.afo-icons a:hover { color: #e2bf72; }
.afo-icons svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.afo-icons svg .f { fill: currentColor; stroke: none; }
.afo-mid { max-width: 1440px; margin: clamp(-120px, -7vw, -60px) auto 0; padding-inline: clamp(20px, 2vw, 28px); display: flex; justify-content: space-between; align-items: start; gap: 40px; position: relative; z-index: 2; pointer-events: none; }
.afo-mid > * { pointer-events: auto; }
.afo-h { margin: 0 0 14px; font: 500 20px/1 "Work Sans", sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.afo-links { display: grid; grid-template-columns: repeat(2, auto); grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 10px 64px; }
.afo-links a { font: 400 16px/1.4 "Work Sans", sans-serif; color: #f3ede2; text-decoration: none; transition: color .3s; }
.afo-links a:hover { color: #e2bf72; }
.afo-tag { margin: 22px 0 0; max-width: 270px; text-align: center; font: 500 18px/1.5 "Work Sans", sans-serif; }
.afo-tag span { display: block; margin-top: 14px; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #e2bf72; }
.afo-strip { position: relative; margin-top: clamp(-40px, -2vw, -20px); display: grid; grid-template-columns: 1fr minmax(0, 400px) 1fr; align-items: center; }
.afo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.afo-row-l { padding-left: 10px; } .afo-row-r { padding-right: 10px; }
.afo-t { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.afo-t img, .afo-hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.afo-t:hover img { transform: scale(1.05); }
.afo-hero { display: block; aspect-ratio: 1 / 1; overflow: hidden; margin-top: clamp(-240px, -16vw, -140px); position: relative; z-index: 3; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.afo-credit { margin: 22px auto 0; padding-inline: 20px; text-align: center; font: 400 12px/1.5 "Work Sans", sans-serif; color: rgba(243, 237, 226, .55); }
.afo-base { max-width: 1440px; margin: 0 auto; padding: 22px clamp(20px, 2vw, 28px) calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; gap: 16px; font: 400 12px/1.5 "Work Sans", sans-serif; color: rgba(243, 237, 226, .8); }
.afo-base p { margin: 0; }
.afo-base a { color: inherit; text-decoration: none; letter-spacing: .14em; text-transform: uppercase; }
.afo-base a:hover { color: #e2bf72; }
@media (max-width: 1100px) {
  .afo-top { grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr); }
  .afo-top .afo-pill, .afo-top .afo-icons { grid-column: 1 / -1; justify-self: center; grid-row: 3; }
  .afo-top .afo-pill { grid-row: 4; margin-top: 0; }
  .afo-mark { grid-column: 2; grid-row: 1; }
  .afo-rule:first-of-type { grid-column: 1; grid-row: 1; }
  .afo-rule:last-of-type { grid-column: 3; grid-row: 1; }
  .afo-mid { margin-top: 36px; flex-direction: column; align-items: center; text-align: center; }
  .afo-links { justify-content: center; }
  .afo-strip { margin-top: 48px; }
  .afo-hero { margin-top: -40px; }
}
@media (max-width: 760px) {
  .afo-top { padding-inline: 0; gap: 14px; }
  .afo-rule { margin-top: 22px; }
  .afo-script { font-size: 46px; }
  .afo-word { font-size: clamp(68px, 21vw, 96px); }
  .afo-icons { gap: 26px; }
  .afo-strip { grid-template-columns: 1fr 1.6fr 1fr; padding-inline: 16px; }
  .afo-row { grid-template-columns: 1fr; }
  .afo-row .afo-t:not(:first-child) { display: none; }
  .afo-row-l, .afo-row-r { padding: 0; }
  .afo-t { aspect-ratio: 4 / 5; }
  .afo-hero { margin-top: 0; aspect-ratio: 4 / 5; }
  .afo-mid { order: 3; }
  .afo-links { gap: 12px 48px; }
  .afo-links a { font-size: 17px; }
  .afo-base { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 1100px) {
  .afo { display: flex; flex-direction: column; }
  .afo-top { order: 1; } .afo-strip { order: 2; } .afo-mid { order: 3; } .afo-credit { order: 4; } .afo-base { order: 5; }
  .afo-strip { margin-top: 40px; }
  .afo-hero { margin-top: 0; }
}
/* footer, desktop: the photo of Dave rises only into the foot of the wordmark, the strip runs behind its lower half (as Aura) */
@media (min-width: 1101px) {
  .afo-word { font-size: clamp(96px, 10vw, 150px); }
  .afo-mid { margin-top: -96px; }
  .afo-strip { margin-top: 40px; align-items: end; grid-template-columns: 1fr minmax(0, 380px) 1fr; }
  .afo-row { padding-bottom: 72px; }
  .afo-hero { margin-top: 0; }
}
.afo-script { margin-bottom: -.04em; }
@media (min-width: 1101px) { .afo-strip { margin-top: -95px; } }
@media (min-width: 1101px) {
  .afo-top { grid-template-columns: minmax(0, 1fr) minmax(40px, .55fr) auto minmax(40px, .55fr) minmax(0, 1fr); }
  .afo-pill { justify-self: start; } .afo-icons { justify-self: end; }
  .afo-mid { margin-top: -80px; }
}
/* footer: photos sit below the text, nothing overlaps (owner, 19 Oct) */
.afo-mid { margin-top: 28px !important; }
.afo-strip { margin-top: clamp(40px, 4vw, 56px) !important; align-items: center !important; }
.afo-row { padding-bottom: 0 !important; }
.afo-hero { margin-top: 0 !important; aspect-ratio: 4 / 5; }
@media (min-width: 1101px) {
  .afo-top { align-items: center; }
  .afo-pill, .afo-icons { margin-top: 0; }
  .afo-rule { margin-top: 0; align-self: center; }
  .afo-mid { margin-top: -150px !important; }
  .afo-strip { grid-template-columns: 1fr minmax(0, 300px) 1fr; margin-top: 70px !important; }
}
@media (min-width: 1101px) {
  .afo-top { align-items: start; }
  .afo-pill, .afo-icons { margin-top: clamp(18px, 2.2vw, 30px); }
  .afo-rule { margin-top: clamp(40px, 4vw, 52px); align-self: start; }
  .afo-mid { margin-top: -80px !important; }
  .afo-strip { margin-top: -30px !important; }
}

/* ---------- homepage consistency pass (owner, 19 Oct): one spacing scale, one label style, one heading size, one body size ---------- */
body.opt-d.lp {
  --sec-y: clamp(72px, 8vw, 120px);
  --h2: clamp(40px, 4.8vw, 68px);
  --lead: clamp(18px, 1.35vw, 20px);
  --body: clamp(17px, 1.2vw, 18px);
}
/* section rhythm */
body.opt-d.lp .od-say-sec { padding-top: var(--sec-y) !important; }
body.opt-d.lp .os.os-joined:not(.os-bandsec) { padding-top: clamp(40px, 4vw, 56px); padding-bottom: var(--sec-y); }
body.opt-d.lp .os-bandsec { padding-top: var(--sec-y); padding-bottom: 0; }
body.opt-d.lp .od-svc { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
body.opt-d.lp .rvx, body.opt-d.lp .ofx { padding-block: var(--sec-y) !important; }
body.opt-d.lp .ob2 { min-height: 0; padding-block: var(--sec-y) !important; }
body.opt-d.lp .ofw-films { padding-bottom: var(--sec-y); }
/* labels above headings: one style */
body.opt-d.lp .od-k, body.opt-d.lp .rvx-k, body.opt-d.lp .ofw-k, body.opt-d.lp .kdr-tag, body.opt-d.lp .os-k {
  font: 600 14px/1.4 "Work Sans", sans-serif !important; letter-spacing: .3em !important; text-transform: uppercase; color: #a27a2e; }
body.opt-d.lp .od-k { color: #122233; }
/* section headings: one size */
body.opt-d.lp .od-h, body.opt-d.lp .rvx-title, body.opt-d.lp .ob2-h, body.opt-d.lp .ofw-h, body.opt-d.lp .ofw-fh { font-size: var(--h2) !important; line-height: 1.06 !important; }
body.opt-d.lp .ofw-fh { font-size: calc(var(--h2) * .78) !important; }
body.opt-d.lp .ob2-h em { font-size: 1em; }
/* body copy: one size */
body.opt-d.lp .ob2-p, body.opt-d.lp .ofw-lede, body.opt-d.lp .rvx-p, body.opt-d.lp .os-p { font-size: var(--body) !important; line-height: 1.7 !important; }
body.opt-d.lp .ob2-lead { font-size: var(--lead) !important; }
@media (max-width: 760px) {
  body.opt-d.lp { --sec-y: 64px; --h2: clamp(34px, 9.5vw, 44px); }
  body.opt-d.lp .od-k, body.opt-d.lp .rvx-k, body.opt-d.lp .ofw-k, body.opt-d.lp .os-k { font-size: 12px !important; letter-spacing: .26em !important; }
}
body.opt-d.lp .ob2-h { font-weight: 500 !important; letter-spacing: 0 !important; }
@media (max-width: 760px) { body.opt-d.lp .hp2-band { min-height: 0 !important; height: 72svh; max-height: 600px; } }
body.opt-d.lp .ofw-h { font-size: calc(var(--h2) * .8) !important; }
/* footer photos sized and styled like Wild Willow (owner, 19 Oct): six equal squares, even gaps, inset from the edges; three on phones */
.afo-grid { order: 2; max-width: 1440px; width: 100%; box-sizing: border-box; margin: clamp(48px, 5vw, 64px) auto 0; padding-inline: clamp(38px, 3.5vw, 50px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.7vw, 24px); }
.afo-grid .afo-t { aspect-ratio: 1 / 1; overflow: hidden; }
.afo-grid .afo-t img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .5s; }
.afo-grid .afo-t:hover img { opacity: .85; transform: none; }
@media (max-width: 760px) {
  .afo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-inline: 38px; margin-top: 44px; }
  .afo-grid .afo-t:nth-child(n+4) { display: none; }
}
@media (max-width: 1100px) { .afo-grid { order: 4; } .afo-mid { order: 3; } }

/* ---------- menu after Wild Willow (owner, 19 Oct): slim bar fixed to the top, full-screen overlay on phones ---------- */
.wwh { position: relative; z-index: 80; }
.wwh-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 60px; display: flex; align-items: center; gap: 24px; padding-inline: clamp(20px, 2.2vw, 32px);
  background: rgba(247, 243, 236, .88); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); color: #122233; box-shadow: 0 1px 0 rgba(18, 34, 51, .06); }
.wwh-logo { color: #122233; display: block; flex: none; }
.wwh-logo .logo { display: block; width: 132px; height: auto; }
.wwh-logo .logo .groove { stroke: rgba(255, 255, 255, .35); }
.wwh-logo .logo .tag { display: none; }
.wwh-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(22px, 3.2vw, 46px); }
.wwh-nav a { font: 400 12px/1 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #122233; text-decoration: none; padding: 8px 0; position: relative; transition: color .3s; }
.wwh-nav a::after { content: ""; position: absolute; left: 0; right: .3em; bottom: 2px; height: 1px; background: #a27a2e; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.wwh-nav a:hover, .wwh-nav a:focus-visible { color: #a27a2e; }
.wwh-nav a:hover::after, .wwh-nav a:focus-visible::after { transform: scaleX(1); }
.wwh-btn { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #122233; cursor: pointer; }
.wwh-ico { display: grid; gap: 7px; width: 26px; margin: 0 auto; }
.wwh-ico i { display: block; height: 1px; background: currentColor; }
/* the overlay */
.wwh-menu { position: fixed; inset: 0; z-index: 90; color: #fff; display: grid; grid-template-rows: auto auto 1fr auto; padding: 22px clamp(28px, 7vw, 56px) calc(32px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; animation: wwh-in .45s ease both; }
.wwh-menu[hidden] { display: none; }
@keyframes wwh-in { from { opacity: 0; } to { opacity: 1; } }
.wwh-menu-bg { position: absolute; inset: 0; z-index: -1; }
.wwh-menu-bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.35); }
.wwh-menu-bg::after { content: ""; position: absolute; inset: 0; background: rgba(12, 20, 33, .76); }
.wwh-x { justify-self: end; position: relative; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: #fff; }
.wwh-x i { position: absolute; left: 11px; right: 11px; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.wwh-x i + i { transform: rotate(-45deg); }
.wwh-menu-h { margin: 10px 0 0; font: 400 clamp(64px, 18vw, 110px)/1 "Bodoni Moda", Georgia, serif; font-variation-settings: "opsz" 11; letter-spacing: .02em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.wwh-menu-nav { margin: clamp(28px, 6vh, 56px) 0 0 2px; padding-left: clamp(28px, 9vw, 44px); border-left: 1px solid rgba(226, 191, 114, .7); display: grid; gap: clamp(18px, 3.4vh, 26px); align-content: start; }
.wwh-menu-nav a { font: 400 14px/1 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #fff; text-decoration: none; }
.wwh-menu-nav a:hover, .wwh-menu-nav a:focus-visible { color: #e2bf72; }
.wwh-menu-foot { margin-top: 36px; display: grid; gap: 18px; }
.wwh-menu-logo { color: #fff; }
.wwh-menu-logo .logo { width: 170px; height: auto; display: block; }
.wwh-menu-logo .logo .groove { stroke: rgba(18, 34, 51, .45); }
.wwh-menu-foot p { margin: 0; max-width: 32ch; font: 400 16px/1.6 "Work Sans", sans-serif; color: rgba(255, 255, 255, .88); }
@media (max-width: 1100px) { .wwh-nav { display: none; } .wwh-btn { display: block; } }
/* the page starts below the bar; the old header styles are gone */
body.site-new main, body.opt-d.lp main { padding-top: 60px !important; }
body.opt-d.lp.bnr-test .hp-hero { min-height: max(520px, calc(100svh - 103px - 60px)); }
body.opt-d.lp .od-hero-in { padding-top: clamp(64px, 8vw, 110px); }
body.opt-d.lp { --bar-h: 0px; }
html { scroll-padding-top: 72px; }
.wwh-menu-logo { justify-self: start; display: block; width: 170px; }
.wwh-menu-logo .logo { width: 170px !important; height: auto !important; }
.wwh-menu-logo .logo .label { fill: #c9a35a; }
/* "Planned with you" band: a line about the couple, a button to their wedding, the photo credit (owner, 19 Oct) */
.hp2-band-story { margin: 0; max-width: 46ch; font: 400 clamp(16px, 1.2vw, 18px)/1.65 "Work Sans", sans-serif; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.hp2-band-story b { font-weight: 600; letter-spacing: .02em; }
.hp2-band-right .hp2-band-story { text-align: right; }
.hp2-band .hp2-btn { margin-top: 4px; padding: 16px 30px; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s; }
.hp2-band .hp2-btn:hover { background: #e2bf72; border-color: #e2bf72; color: #122233; }
.hp2-band-credit { position: absolute; z-index: 2; left: var(--gutter); bottom: 16px; margin: 0; font: 400 12px/1.4 "Work Sans", sans-serif; color: rgba(255, 255, 255, .75); }
@media (max-width: 760px) { .hp2-band-right .hp2-band-story { text-align: center; } .hp2-band-credit { left: 0; right: 0; text-align: center; } }
/* tighter, even section spacing (owner, 19 Oct) */
body.opt-d.lp { --sec-y: clamp(56px, 6vw, 88px); }
@media (max-width: 760px) { body.opt-d.lp { --sec-y: 52px; } }
body.opt-d.lp .os.os-joined:not(.os-bandsec) { padding-bottom: var(--sec-y); }
body.opt-d.lp .os-bandsec { padding-top: var(--sec-y); padding-bottom: 0; }
body.opt-d.lp .od-svc .od-cards { margin-top: clamp(36px, 3.6vw, 52px); }
body.opt-d.lp .rvx-head { margin-bottom: clamp(32px, 3.6vw, 52px); }
body.opt-d.lp .od-say-sec { padding-top: var(--sec-y) !important; }
@media (max-width: 760px) { body.opt-d.lp .os.os-joined:not(.os-bandsec) { padding-top: 20px; } body.opt-d.lp .os-grid { margin-top: 24px; } }
/* film sound buttons: small frosted glass pills, out of the way (owner, 19 Oct) */
.hp-films .reel-play, .ofw .reel-play {
  left: 14px; right: auto; bottom: 14px; top: auto; transform: none; width: auto; height: 34px; padding: 0 13px 0 10px; gap: 7px;
  display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(12, 20, 33, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; box-shadow: none;
  font: 600 10.5px/1 "Work Sans", sans-serif; letter-spacing: .22em; text-transform: uppercase; transition: background .3s, border-color .3s; }
.hp-films .reel-play svg, .ofw .reel-play svg { width: 15px; height: 15px; }
.hp-films .reel-play:hover, .ofw .reel-play:hover, .hp-films .reel-play:focus-visible, .ofw .reel-play:focus-visible { transform: none; background: rgba(226, 191, 114, .9); border-color: #e2bf72; color: #122233; }
/* header reverted to the ourdjrocks-style header (owner, 19 Oct): undo the fixed-bar offsets */
body.site-new main, body.opt-d.lp main { padding-top: 0 !important; }
body.opt-d.lp.bnr-test .hp-hero { min-height: max(560px, calc(100svh - 103px)); }
body.opt-d.lp .od-hero-in { padding-top: clamp(120px, 12vw, 150px); }
html { scroll-padding-top: 0; }
@media (max-width: 760px) { body.opt-d.lp.bnr-test .hp-hero { min-height: max(520px, calc(100svh - 92px)); } }
/* footer without the Navigate block (owner, 19 Oct): the tagline sits under the icons on desktop */
@media (min-width: 1101px) { .afo-mid { justify-content: flex-end; } }
/* footer: page links without a heading or button, set clear of everything (owner, 19 Oct) */
@media (min-width: 1101px) { .afo-mid { justify-content: space-between; margin-top: -110px !important; } .afo-pill-space { display: block; width: 1px; } }
@media (max-width: 1100px) { .afo-pill-space { display: none; } .afo-nav { margin-top: 8px; } }
/* check-your-date form, compact (owner, 19 Oct): one grid, two rows of short fields, no numbered steps */
.planner-tight { display: grid; gap: 18px; margin-top: 26px; }
.planner-tight .pt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.planner-tight .pt-grid > * { grid-column: span 2; min-width: 0; margin: 0; }
.planner-tight .pt-grid > .pt-4 { grid-column: 1 / -1; }
.planner-tight .f input, .planner-tight .f select, .planner-tight .f textarea { width: 100%; box-sizing: border-box; }
.planner-tight fieldset { border: 0; padding: 0; }
.planner-tight .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.planner-tight textarea { min-height: 0; }
.planner-tight .mc-next { margin: 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 560px) { .planner-tight .pt-grid { grid-template-columns: minmax(0, 1fr); } .planner-tight .pt-grid > * { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .planner-tight .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .planner-tight .pt-grid > * { grid-column: span 1; }
  .planner-tight .pt-grid > .pt-2, .planner-tight .pt-grid > .pt-4 { grid-column: 1 / -1; }
  .planner-tight .f > span, .planner-tight legend { font-size: 12px; }
  .planner-tight input, .planner-tight select { font-size: 16px; padding-block: 10px; }
}
@media (min-width: 1000px) { body.site-new .cyd-media { top: 0; height: 100vh; } }
/* featured heroes on Portfolio and Venues: exactly the services hero */
.fh-slide { position: absolute; inset: 0; display: grid; place-items: center; }
.fh-slide[hidden] { display: none; }
.fh .sv-hero-in { position: relative; }
@media (max-width: 700px) { .fh .mh-tag { display: block; text-align: center; } }
.sv-hero-page .sv-hero-img { opacity: var(--svo, .62); }

/* Wedding story facts with a planner: five across, last one full width on phones */
.mk-facts--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 899px) { .mk-facts--5 { grid-template-columns: 1fr 1fr; } .mk-facts--5 .mk-fact:last-child { grid-column: 1 / -1; } }


/* Wedding story: planner credit strip (Polaroid, after Luna Soirée's own type: Playfair Display, Mulish, Great Vibes) */
.lsp { background: #ffe6ee radial-gradient(#f4c3cf 1.2px, transparent 1.4px) 0 0 / 18px 18px; border-block: 1px solid #f4c3cf; }
.lsp-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 44px); padding-block: 22px; }
.lsp-pol { position: relative; margin: 0; width: 112px; padding: 7px 7px 26px; background: #fff; transform: rotate(-5deg); box-shadow: 0 16px 26px -14px rgba(92, 10, 44, .5); }
.lsp-pol::before { content: ""; position: absolute; top: -9px; left: 50%; width: 54px; height: 16px; transform: translateX(-50%) rotate(3deg); background: rgba(255, 79, 147, .55); }
.lsp-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.lsp-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.lsp-pol figcaption { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 400 19px/1 "Great Vibes", cursive; color: #b0124f; }
.lsp .lsp-eye { margin: 0; font: 700 11px/1.3 "Mulish", var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: #b0124f; }
.lsp .lsp-name { margin: 6px 0 0; font: 700 clamp(28px, 2.8vw, 38px)/1.05 "Playfair Display", Georgia, serif; color: #18140c; }
.lsp .lsp-name em { font-weight: 400; font-style: italic; color: #ff2a7f; }
.lsp .lsp-copy { margin: 8px 0 0; max-width: 66ch; font: 400 16px/1.55 var(--font-body); color: #3d2a30; }
.lsp-acts { display: grid; justify-items: start; gap: 10px; }
.lsp .lsp-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: #ff2a7f; color: #fff; font: 700 12px/1 "Mulish", var(--font-ui); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s; }
.lsp .lsp-btn:hover { background: #b0124f; transform: translateY(-1px); }
.lsp .lsp-ig { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; font: 600 13px/1 "Mulish", var(--font-ui); color: #b0124f; text-decoration: none; }
.lsp-ig svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lsp-ig svg circle:last-child { fill: currentColor; stroke: none; }
@media (max-width: 899px) {
  .lsp-in { grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; padding-block: 20px; }
  .lsp-pol { width: 92px; }
  .lsp .lsp-copy { font-size: 15px; }
  .lsp-acts { grid-column: 1 / -1; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 10px 18px; }
}
@media (max-width: 420px) { .lsp .lsp-copy { display: none; } .lsp-acts { grid-template-columns: auto; gap: 8px; } }

/* ---------- /vendors/: preferred vendors as a lifestyle page ---------- */
.vx-intro, .vx-out { background: #faf6ef; padding: clamp(80px, 9vw, 140px) max(16px, var(--gutter)); text-align: center; }
.vx-out { background: #f3ece1; }
.vx-intro-in { max-width: 860px; margin: 0 auto; }
.vx-eyebrow { margin: 0; font: 600 13px/1.3 "Work Sans", var(--font-ui); letter-spacing: .32em; text-transform: uppercase; color: #8a6a2f; }
.vx-h { margin: 22px 0 0; font: 500 clamp(44px, 5.6vw, 84px)/1 "Bodoni Moda", Georgia, serif; color: #171411; text-wrap: balance; }
.vx-h em { font-style: italic; color: #a8843f; }
.vx-h--sm { font-size: clamp(36px, 4.2vw, 60px); }
.vx-lede { margin: 28px auto 0; max-width: 58ch; font: 400 clamp(18px, 1.5vw, 21px)/1.75 var(--font-body); color: #3b332b; }
.vx-lede a { color: inherit; text-decoration-color: #a8843f; text-underline-offset: 4px; }

.vx-v { position: relative; background: #fbe9ee; padding-block: clamp(80px, 9vw, 150px) clamp(64px, 7vw, 110px); overflow: hidden; isolation: isolate; }
.vx-v::before { content: ""; position: absolute; z-index: -1; width: min(70vw, 900px); aspect-ratio: 1; right: -18%; top: -22%; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 62%); }
.vx-v-in { max-width: 1240px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.vx-port { margin-top: clamp(24px, 4vw, 64px) !important; }
.vx-port { position: relative; margin: 0; }
.vx-port-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 0 0; box-shadow: 0 50px 80px -40px rgba(92, 10, 44, .45); }
.vx-port-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.vx-port:hover .vx-port-ph img { transform: scale(1.04); }
.vx-port::after { content: ""; position: absolute; inset: -18px -18px 18px 18px; z-index: -1; border-radius: 999px 999px 0 0; border: 1px solid #e88aa3; }
.vx-port figcaption { position: absolute; right: -6%; bottom: -26px; font: 400 clamp(54px, 6vw, 84px)/1 "Great Vibes", cursive; color: #b0124f; transform: rotate(-6deg); text-shadow: 0 2px 0 #fbe9ee; }
.vx-no { display: flex; align-items: center; gap: 16px; margin: 0; font: 700 12px/1.3 "Mulish", var(--font-ui); letter-spacing: .28em; text-transform: uppercase; color: #b0124f; }
.vx-no span { padding: 8px 12px; border: 1px solid #e88aa3; border-radius: 999px; letter-spacing: .18em; }
.vx-name { margin: 26px 0 0; font: 400 clamp(56px, 7vw, 104px)/.95 "Playfair Display", Georgia, serif; color: #18140c; letter-spacing: -.01em; }
.vx-name em { display: block; font-style: italic; color: #d81b66; }
.vx-seal { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 0; padding: 10px 18px 10px 14px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -18px rgba(176, 18, 79, .6); font: 600 13px/1 "Mulish", var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #5c0a2c; }
.vx-seal svg { width: 18px; height: 18px; fill: #d81b66; }
.vx-body { margin-top: 28px; display: grid; gap: 16px; max-width: 54ch; }
.vx-body p { margin: 0; font: 400 clamp(17px, 1.35vw, 19px)/1.75 var(--font-body); color: #3d2a30; }
.vx-facts { margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid rgba(176, 18, 79, .25); }
.vx-facts div { padding: 18px 16px 18px 0; }
.vx-facts div + div { padding-left: 18px; border-left: 1px solid rgba(176, 18, 79, .25); }
.vx-facts dt { font: 700 11px/1.2 "Mulish", var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: #b0124f; }
.vx-facts dd { margin: 8px 0 0; font: 400 clamp(19px, 1.6vw, 24px)/1.2 "Playfair Display", Georgia, serif; color: #18140c; }
.vx-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }
.vx-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 30px; border-radius: 999px; background: #d81b66; color: #fff; font: 700 12px/1 "Mulish", var(--font-ui); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background .25s, transform .25s, box-shadow .25s; box-shadow: 0 16px 30px -16px rgba(216, 27, 102, .8); }
.vx-btn:hover { background: #5c0a2c; transform: translateY(-2px); }
.vx-ig { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 14px/1 "Mulish", var(--font-ui); color: #5c0a2c; text-decoration: none; border-bottom: 1px solid rgba(92, 10, 44, .35); }
.vx-ig svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vx-ig svg circle:last-child { fill: currentColor; stroke: none; }

.vx-together { max-width: 1440px; margin: clamp(90px, 10vw, 150px) auto 0; padding-inline: max(16px, var(--gutter)); }
.vx-together-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; max-width: 1240px; margin: 0 auto; }
.vx-together-head .vx-eyebrow { flex-basis: 100%; color: #b0124f; }
.vx-h3 { margin: 0; font: 400 clamp(34px, 3.6vw, 52px)/1.05 "Playfair Display", Georgia, serif; color: #18140c; }
.vx-h3 em { color: #d81b66; }
.vx-more { font: 700 12px/1 "Mulish", var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #5c0a2c; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid currentColor; }
.vx-strip { margin-top: 36px; display: grid; grid-template-columns: 1fr 1.15fr 1.4fr 1.15fr 1fr; gap: clamp(10px, 1.2vw, 18px); align-items: center; }
.vx-st { display: block; overflow: hidden; }
.vx-st img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.vx-st:hover img { transform: scale(1.05); }
.vx-st-0, .vx-st-4 { aspect-ratio: 3 / 4; }
.vx-st-1, .vx-st-3 { aspect-ratio: 3 / 4.6; }
.vx-st-2 { aspect-ratio: 3 / 4.2; border-radius: 999px 999px 0 0; }
.vx-credit { margin: 22px auto 0; max-width: 1240px; font: 400 14px/1.5 var(--font-body); color: #6d5a60; text-align: right; }
@media (max-width: 899px) {
  .vx-v-in { grid-template-columns: minmax(0, 1fr); }
  .vx-port { width: min(78vw, 420px); margin: 0 auto 30px !important; }
  .vx-port figcaption { right: -4%; bottom: -30px; }
  .vx-facts { grid-template-columns: minmax(0, 1fr); }
  .vx-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(176, 18, 79, .25); }
  .vx-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; }
  .vx-facts dd { margin: 0; text-align: right; }
  .vx-strip { grid-template-columns: repeat(5, 62vw); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * max(16px, var(--gutter))); padding-inline: max(16px, var(--gutter)); scrollbar-width: none; }
  .vx-strip::-webkit-scrollbar { display: none; }
  .vx-st { scroll-snap-align: start; }
  .vx-credit { text-align: left; }
}

/* Story chapters with photos instead of a film: a staggered pair of tall cards, the same height as the film cards beside them */
.mk-ch-media--ph { grid-template-columns: 1fr 1fr; gap: 14px; width: min(100%, 560px); justify-self: center; align-items: start; }
.mk-ch-media--ph .mk-split-ph { aspect-ratio: 9 / 16; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; }
.mk-ch-media--ph .mk-split-ph img { width: 100%; height: 100%; object-fit: cover; }
.mk-ch-media--ph .mk-split-ph + .mk-split-ph { margin-top: 48px; }
@media (max-width: 899px) { .mk-ch-media--ph { width: min(100%, 420px); } .mk-ch-media--ph .mk-split-ph + .mk-split-ph { margin-top: 32px; } }

/* ---------- /vendors/<slug>/: a preferred vendor's own page (Luna Soirée: her pink, her Playfair) ---------- */
.lv-wrap { max-width: 1240px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); }
.lv-hero .sv-hero-img { filter: grayscale(1) contrast(1.05); }
.lv-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(24, 20, 12, .30) 0%, rgba(24, 20, 12, .10) 45%, rgba(74, 10, 38, .55) 100%); pointer-events: none; }
.lv-hero .sv-hero-in, .lv-hero .sv-hero-cap { z-index: 1; }
.lv-hero .sv-l1, .lv-hero .sv-l2 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; letter-spacing: .02em; }
.lv-hero .sv-l3 { font-family: "Great Vibes", cursive; color: #ffc2d8; }
.lv-pink { color: #b0124f; }
.lv-gold { color: #e3c48a; }
.lv-head { max-width: 820px; margin: 0 auto; text-align: center; }
.lv-h { margin: 18px 0 0; font: 400 clamp(40px, 4.8vw, 72px)/1.02 "Playfair Display", Georgia, serif; color: #18140c; text-wrap: balance; }
.lv-h em { font-style: italic; color: #d81b66; }
.lv-h--light { color: #fff; }
.lv-h--light em { color: #ff9cc3; }
.lv-lede { margin-top: 22px; }

.lv-meet { background: #fbe9ee; padding-block: clamp(90px, 10vw, 160px); position: relative; overflow: hidden; isolation: isolate; }
.lv-meet::before { content: ""; position: absolute; z-index: -1; width: min(70vw, 900px); aspect-ratio: 1; left: -20%; bottom: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 62%); }
.lv-meet-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 120px); align-items: start; }

.lv-promise { background: #fff7f9; padding-block: clamp(90px, 10vw, 150px); }
.lv-prs { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.lv-pr { position: relative; padding: clamp(32px, 3.4vw, 48px); background: #fff; border: 1px solid #f4c3cf; border-radius: 999px 999px 18px 18px; text-align: center; box-shadow: 0 30px 60px -44px rgba(92, 10, 44, .5); }
.lv-pr-n { margin: 18px 0 0; font: italic 400 34px/1 "Playfair Display", serif; color: #e88aa3; }
.lv-pr h3 { margin: 14px 0 0; font: 400 clamp(26px, 2.2vw, 32px)/1.1 "Playfair Display", serif; color: #18140c; }
.lv-pr p:last-child { margin: 16px 0 0; font: 400 17px/1.7 var(--font-body); color: #3d2a30; }

.lv-services { background: #fff; padding-block: clamp(90px, 10vw, 150px); }
.lv-bento { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: minmax(0, auto); gap: clamp(14px, 1.6vw, 22px); }
.lv-bt { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 3vw, 44px); border-radius: 28px; display: flex; flex-direction: column;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.lv-bt:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(92, 10, 44, .55); }
.lv-bt-art { position: absolute; z-index: -1; pointer-events: none; }
.lv-bt-n { margin: 0; font: 700 12px/1 "Mulish", var(--font-ui); letter-spacing: .3em; }
.lv-bt h3 { margin: 18px 0 0; font: italic 400 clamp(34px, 3.1vw, 48px)/1 "Playfair Display", Georgia, serif; letter-spacing: -.01em; }
.lv-bt-d { margin: 14px 0 0; max-width: 34ch; font: 400 17px/1.6 var(--font-body); }
.lv-bt ul { list-style: none; margin: auto 0 0; padding: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lv-bt li { padding: 9px 14px; border-radius: 999px; font: 600 13px/1.2 "Mulish", var(--font-ui); letter-spacing: .02em; }
/* 01 weddings: the hero tile */
.lv-bt-1 { grid-row: span 2; min-height: 640px; background: linear-gradient(155deg, #ff3d8b 0%, #d81b66 45%, #7a0c3b 100%); color: #fff; }
.lv-bt-1 .lv-bt-art { width: 120%; right: -48%; top: -18%; fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: .6; }
.lv-bt-1 .lv-bt-art path { fill: rgba(255, 255, 255, .06); }
.lv-bt-1 h3 { font-size: clamp(48px, 4.6vw, 70px); }
.lv-bt-1 .lv-bt-n, .lv-bt-1 .lv-bt-d { color: #ffe1ec; }
.lv-bt-1 li { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(4px); }
/* 02 celebrations */
.lv-bt-2 { background: #fbe9ee; color: #18140c; }
.lv-bt-2 h3, .lv-bt-2 .lv-bt-n { color: #d81b66; }
.lv-bt-2 .lv-bt-d { color: #3d2a30; }
.lv-bt-2 li { background: #fff; color: #5c0a2c; border: 1px solid #f4c3cf; }
/* 03 corporate */
.lv-bt-3 { background: #18140c radial-gradient(ellipse 80% 60% at 100% 0%, rgba(216, 27, 102, .35), transparent 70%); color: #fff; }
.lv-bt-3 .lv-bt-n { color: #ff9cc3; }
.lv-bt-3 .lv-bt-d { color: #e9dfe3; }
.lv-bt-3 li { background: rgba(255, 255, 255, .08); color: #fbe9ee; border: 1px solid rgba(255, 156, 195, .35); }
/* 04 LSE Texas */
.lv-bt-4 { grid-column: span 2; background: #fff7f9; border: 1px solid #f4c3cf; color: #18140c; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(20px, 3vw, 48px); align-items: center; }
.lv-bt-4 > * { grid-column: 1; }
.lv-bt-4 ul { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; justify-content: flex-end; }
.lv-bt-4 .lv-bt-art { width: 220px; right: -40px; bottom: -70px; fill: rgba(216, 27, 102, .08); }
.lv-bt-4 h3, .lv-bt-4 .lv-bt-n { color: #d81b66; }
.lv-bt-4 .lv-bt-d { color: #3d2a30; }
.lv-bt-4 li { background: #d81b66; color: #fff; }
@media (max-width: 1099px) {
  .lv-bento { grid-template-columns: 1fr 1fr; }
  .lv-bt-1 { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .lv-bt-4 { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .lv-bento { grid-template-columns: minmax(0, 1fr); }
  .lv-bt-4 { grid-template-columns: minmax(0, 1fr); }
  .lv-bt-4 ul { grid-column: 1; grid-row: auto; justify-content: flex-start; padding-top: 22px; }
}

.lv-team { background: #fbe9ee; padding-block: clamp(90px, 10vw, 150px); }
.lv-tms { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.lv-tm-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 0 0; background: #f4c3cf; box-shadow: 0 30px 50px -36px rgba(92, 10, 44, .6); }
.lv-tm-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.lv-tm:hover .lv-tm-ph img { transform: scale(1.05); }
.lv-tm h3 { margin: 22px 0 0; font: 400 28px/1.1 "Playfair Display", serif; color: #18140c; }
.lv-tm .lv-tm-r { margin: 8px 0 0; font: 700 11px/1.4 "Mulish", var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #b0124f; }
.lv-tm p:last-child { margin: 12px 0 0; font: 400 16px/1.65 var(--font-body); color: #3d2a30; }

.lv-venues { background: #4a0a26 radial-gradient(ellipse 60% 70% at 80% 0%, rgba(216, 27, 102, .35), transparent 70%); color: #fff; padding-block: clamp(90px, 10vw, 150px); text-align: center; }
.lv-vl { list-style: none; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; max-width: 1100px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; }
.lv-vl li { font: italic 400 clamp(20px, 1.9vw, 28px)/1.4 "Playfair Display", serif; color: #fbe9ee; }
.lv-vl li:not(:last-child)::after { content: "☾"; margin: 0 .7em; font-style: normal; font-size: .6em; color: #ff9cc3; position: relative; top: -.2em; }
.lv-vl a { color: #ffc2d8; text-decoration-color: rgba(255, 194, 216, .5); text-underline-offset: 5px; }
.lv-vl-note { margin: 36px 0 0; font: 400 15px/1.5 var(--font-body); color: #e7c3d1; }

.lv-together { background: #fff7f9; padding-block: clamp(90px, 10vw, 150px) clamp(64px, 7vw, 100px); }
.lv-tg-head { text-align: center; max-width: 900px; }
.lv-tg-head .vx-more { display: inline-block; margin-top: 26px; }
.lv-together .vx-together { margin-top: clamp(48px, 6vw, 80px); }

.lv-contact { background: #fbe9ee; padding-block: clamp(90px, 10vw, 150px); text-align: center; }
.lv-ct { max-width: 760px; }
.lv-ct-moon { display: block; width: 46px; margin: 0 auto; }
.lv-ct-moon svg { display: block; width: 46px; height: 46px; fill: #d81b66; }
.lv-ct .vx-eyebrow { margin-top: 18px; }
.lv-ct-acts { justify-content: center; }

@media (max-width: 1099px) { .lv-tms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .lv-meet-in { grid-template-columns: minmax(0, 1fr); }
  .lv-prs { grid-template-columns: minmax(0, 1fr); }
  .lv-pr { border-radius: 999px 999px 18px 18px; }
}
@media (max-width: 599px) {
  .lv-tms { grid-template-columns: minmax(0, 1fr); max-width: 380px; margin-inline: auto; }
}

/* Dave on the vendor ("From the booth"): a dark stage for one quote, with a small portrait */
.lv-dq { position: relative; overflow: hidden; isolation: isolate; background: #18140c; color: #fff; padding-block: clamp(100px, 11vw, 170px); text-align: center; }
.lv-dq::before { content: ""; position: absolute; z-index: -1; inset: -30% -10% auto; height: 120%; background: radial-gradient(ellipse 50% 45% at 50% 40%, rgba(216, 27, 102, .38), transparent 70%); }
.lv-dq-in { max-width: 1040px; position: relative; }
.lv-dq-k { color: #ff9cc3; }
.lv-dq-mark { display: block; height: .55em; margin-top: 10px; font: italic 400 clamp(150px, 16vw, 230px)/1 "Playfair Display", Georgia, serif; color: #d81b66; }
.lv-dq-fig { margin: 0; }
.lv-dq blockquote { margin: 0; }
.lv-dq blockquote p { margin: 0; font: italic 400 clamp(26px, 3vw, 42px)/1.35 "Playfair Display", Georgia, serif; color: #fff; text-wrap: balance; }
.lv-dq-by { margin-top: clamp(40px, 5vw, 60px); display: inline-flex; align-items: center; gap: 18px; text-align: left; position: relative; }
.lv-dq-ph { flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #18140c, 0 0 0 5px #d81b66, 0 16px 30px -10px rgba(216, 27, 102, .6); }
.lv-dq-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transform-origin: 46% 22%; }
.lv-dq-who { display: grid; gap: 6px; }
.lv-dq-who b { font: 400 26px/1 "Playfair Display", Georgia, serif; color: #fff; }
.lv-dq-who span { font: 700 11px/1.3 "Mulish", var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: #ff9cc3; }
.lv-dq-sig { position: absolute; right: -96px; top: -30px; font: 400 64px/1 "Great Vibes", cursive; color: rgba(255, 156, 195, .55); transform: rotate(-8deg); }
@media (max-width: 599px) { .lv-dq-sig { display: none; } .lv-dq-by { gap: 14px; } .lv-dq-ph { width: 68px; height: 68px; } }

/* Story galleries as a carousel (owner, 21 Oct 2026): one edge-to-edge row, about five photos in view, arrows + counter + progress line */
.car { margin-top: var(--space-l); }
.car-track { position: relative; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(50% - 50vw); padding-inline: max(16px, calc(50vw - 620px + var(--gutter, 0px))); scroll-padding-inline: max(16px, calc(50vw - 620px + var(--gutter, 0px))); outline: none; }
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline: 2px solid var(--brass, #a8843f); outline-offset: 6px; }
.car .gi { flex: none; margin: 0; height: clamp(280px, 24vw, 360px); aspect-ratio: var(--ar); max-width: 82vw; scroll-snap-align: start; border-radius: 4px; opacity: 1 !important; transform: none !important; }
.car .gi img { width: 100%; height: 100%; object-fit: cover; }
.car-ui { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px; margin-top: 26px; }
.car .car-count { margin: 0; min-width: 7.5em; font: 600 13px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mk-label, #8a6a2f); font-variant-numeric: tabular-nums; }
.car-bar { position: relative; height: 1px; background: var(--mk-line, rgba(0, 0, 0, .15)); overflow: hidden; }
.car-bar i { position: absolute; inset: -1px 0; background: var(--mk-head, #171411); transform-origin: left; transform: scaleX(.2); transition: transform .25s; }
.car-btn { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--mk-head, #171411); background: transparent; color: var(--mk-head, #171411); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.car-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.car-p svg { transform: rotate(180deg); }
.car-btn:hover:not(:disabled) { background: var(--mk-head, #171411); color: #fff; }
.car-btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 700px) { .car .gi { height: 300px; } .car-ui { gap: 12px; } .car-btn { width: 46px; height: 46px; } .car .car-count { min-width: 6.5em; } }
.st-gallery { overflow-x: clip; }   /* the full-bleed track must never widen the page where scrollbars take space */

/* Homepage featured wedding: planner credit (Luna Soirée) in the card and in the facts row */
.ofw-facts:has(> div:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1240px; }
.ofw-facts a.ofw-planner { color: #d81b66; text-decoration: underline; text-decoration-color: rgba(216, 27, 102, .4); text-underline-offset: 5px; }
.ofw-facts a.ofw-planner:hover { text-decoration-color: currentColor; }
.ofw-lse { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 18px 10px 14px; border-radius: 999px; background: #fbe9ee; color: #5c0a2c;
  font: 500 14px/1.2 "Work Sans", sans-serif; letter-spacing: .02em; text-decoration: none; transition: background .2s, color .2s; }
.ofw-lse span { color: #d81b66; font-size: 16px; }
.ofw-lse b { font-weight: 600; color: #d81b66; }
.ofw-lse:hover { background: #d81b66; color: #fff; }
.ofw-lse:hover span, .ofw-lse:hover b { color: #fff; }
@media (max-width: 899px) {
  .ofw-facts:has(> div:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ofw-facts:has(> div:nth-child(5)) div { border-left: 1px solid #e6dfcf; }
  .ofw-facts:has(> div:nth-child(5)) div:nth-child(odd) { border-left: 0; }
  .ofw-facts:has(> div:nth-child(5)) div:last-child { grid-column: 1 / -1; }
}

/* ---------- /about/: Marquee Events layout + Pinch Me Planning founder letter (owner, 21 Oct 2026) ---------- */
.ab-k { margin: 0; font: 600 13px/1.3 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #c9a35a; }
.ab-wide { max-width: 1240px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); }
.ab-narrow { max-width: 820px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); text-align: center; }
.ab-rule { display: block; width: min(560px, 80%); height: 1px; margin: 26px auto 34px; background: linear-gradient(90deg, transparent, #c9a35a, transparent); }
.ab-rule--wide { width: min(900px, 90%); }
.ab-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 30px; background: #171411; color: #fff; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.ab-btn:hover { background: #c9a35a; color: #171411; }
.ab-tl { display: inline-flex; gap: 10px; align-items: center; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #171411; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid #c9a35a; }
.ab-cap { position: absolute; left: max(16px, var(--gutter)); bottom: 18px; z-index: 2; margin: 0; font: 400 13px/1.4 var(--font-body); color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.ab-cap--r { left: auto; right: max(16px, var(--gutter)); }
.ab-script { margin: 0; text-align: center; font: 400 clamp(52px, 6vw, 88px)/1 "Waterfall", cursive; color: #171411; }

/* 1 hero: full photo, dark title box low and centred */
.ab-hero { position: relative; min-height: calc(100svh - 103px); display: grid; place-items: end center; padding: 0 max(16px, var(--gutter)) clamp(56px, 7vw, 96px); overflow: hidden; isolation: isolate; background: #171411; }
.ab-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ab-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 20, 17, .25), rgba(23, 20, 17, .05) 40%, rgba(23, 20, 17, .55)); }
.ab-hero-box { max-width: 760px; padding: clamp(26px, 3vw, 40px) clamp(28px, 4vw, 56px); background: rgba(23, 20, 17, .9); text-align: center; border-top: 2px solid #c9a35a; }
.ab-h { margin: 14px 0 0; font: 500 clamp(36px, 4.4vw, 62px)/1.05 "Bodoni Moda", Georgia, serif; color: #fff; text-wrap: balance; }
.ab-h em { display: block; font-style: italic; color: #e3c48a; }

/* 2 intro */
.ab-intro { background: #fff; padding-block: clamp(90px, 10vw, 140px); }
.ab-h2 { margin: 0; font: 500 clamp(34px, 3.8vw, 54px)/1.1 "Bodoni Moda", Georgia, serif; color: #171411; text-wrap: balance; }
.ab-h2 em { font-style: italic; color: #a8843f; }
.ab-intro p { margin: 0 auto 20px; max-width: 64ch; font: 400 clamp(17px, 1.35vw, 19px)/1.8 var(--font-body); color: #3b332b; }
.ab-intro .ab-btn { margin-top: 18px; }

/* 3 hello: textured band, profile card, signed letter */
.ab-hello { padding-block: clamp(90px, 10vw, 140px); background: #e9e1d5 radial-gradient(rgba(23, 20, 17, .05) 1px, transparent 1.2px) 0 0 / 5px 5px; }
.ab-band-h { margin: 0 auto; max-width: 900px; text-align: center; font: 400 clamp(34px, 4vw, 58px)/1.1 "Bodoni Moda", Georgia, serif; letter-spacing: .04em; text-transform: uppercase; color: #171411; text-wrap: balance; }
.ab-band-h em { font: 400 1.25em/1 "Waterfall", cursive; text-transform: none; letter-spacing: 0; color: #a8843f; }
.ab-hello-grid { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ab-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; box-shadow: 0 30px 60px -40px rgba(23, 20, 17, .5); }
.ab-profile-ph { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.ab-profile-ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.ab-profile-txt { padding: 24px 22px; }
.ab-profile-name { margin: 0; font: 400 26px/1.1 "Bodoni Moda", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #a8843f; }
.ab-profile-role { margin: 8px 0 18px; padding-bottom: 14px; border-bottom: 1px solid #e6dfcf; font: 600 11px/1.4 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #171411; }
.ab-profile dl { margin: 0; }
.ab-profile dt { margin-top: 12px; font: 600 10.5px/1.3 "Work Sans", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #171411; }
.ab-profile dd { margin: 3px 0 0; font: 400 15px/1.45 var(--font-body); color: #3b332b; }
.ab-letter p { margin: 0 0 18px; font: 400 clamp(17px, 1.35vw, 19px)/1.85 var(--font-body); color: #2c2620; }
.ab-letter a { color: inherit; text-decoration-color: #c9a35a; text-underline-offset: 4px; }
.ab-letter .ab-hi { margin: 0 0 14px; font: 400 clamp(54px, 5vw, 76px)/1 "Waterfall", cursive; color: #a8843f; }
.ab-sig { margin: 6px 0 0; font: 400 52px/1 "Waterfall", cursive; color: #171411; text-align: right; }

/* 4 story: white card over a full-width photo of Dave working */
.ab-story { position: relative; min-height: 760px; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #171411; }
.ab-story-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.ab-story-in { width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(64px, 8vw, 110px) max(16px, var(--gutter)); }
.ab-card { max-width: 520px; padding: clamp(30px, 3.4vw, 48px); background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.ab-card-mark { display: block; width: 120px; margin-bottom: 18px; color: #171411; }
.ab-card-mark svg { width: 100%; height: auto; }
.ab-card-h { margin: 0 0 18px; font: 500 clamp(30px, 3vw, 42px)/1.1 "Bodoni Moda", Georgia, serif; color: #171411; }
.ab-card-h em { font-style: italic; color: #a8843f; }
.ab-card p { margin: 0 0 14px; font: 400 16px/1.7 var(--font-body); color: #3b332b; }

/* 5 the standard: script heading, film beside the promises */
.ab-standard { background: #fff; padding-block: clamp(90px, 10vw, 140px); }
.ab-std { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ab-film { margin: 0; }
.ab-film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #171411; }
.ab-film figcaption { margin-top: 10px; font: 400 13px/1.4 var(--font-body); color: #6b6158; }
.ab-std-txt > p { margin: 0 0 22px; font: 400 17px/1.75 var(--font-body); color: #3b332b; }
.ab-ex { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid #e6dfcf; }
.ab-ex li { padding: 14px 0; border-bottom: 1px solid #e6dfcf; font: 400 16px/1.6 var(--font-body); color: #3b332b; }
.ab-ex b { display: block; font: 500 20px/1.3 "Bodoni Moda", Georgia, serif; color: #171411; margin-bottom: 4px; }
.ab-ex a { color: inherit; text-decoration-color: #c9a35a; }

/* 6 music first: photo with an overlapping dark box */
.ab-music { background: #faf6ef; padding-block: clamp(90px, 10vw, 140px); }
.ab-music .ab-wide { position: relative; }
.ab-music-ph { height: clamp(460px, 48vw, 680px); overflow: hidden; }
.ab-music-ph img { width: 100%; height: 100%; object-fit: cover; }
.ab-music-box { position: relative; margin: -180px 0 0 auto; width: min(640px, 92%); margin-right: clamp(0px, 4vw, 60px); padding: clamp(30px, 3.4vw, 48px); background: #171411; color: #fff; border-top: 2px solid #c9a35a; }
.ab-card-h--light { color: #fff; }
.ab-card-h--light em { color: #e3c48a; }
.ab-music-box p { margin: 0 0 14px; font: 400 16px/1.7 var(--font-body); color: #e7e0d4; }
.ab-stats { margin: 22px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(201, 163, 90, .35); }
.ab-stats div { padding: 16px 10px 0 0; }
.ab-stats dt { font: 600 10px/1.35 "Work Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #c9a35a; }
.ab-stats dd { margin: 0 0 4px; order: -1; font: 500 clamp(28px, 2.6vw, 38px)/1 "Bodoni Moda", Georgia, serif; color: #fff; }
.ab-stats div { display: flex; flex-direction: column-reverse; gap: 6px; justify-content: flex-end; }

/* 7 live music: script heading, photo strip, short copy */
.ab-live { background: #fff; padding-block: clamp(90px, 10vw, 140px); }
.ab-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 clamp(40px, 5vw, 64px); padding-inline: 8px; }
.ab-strip-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.ab-strip-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.ab-strip-ph:hover img { transform: scale(1.05); }
.ab-h3 { margin: 0 0 16px; font: 500 clamp(28px, 2.8vw, 40px)/1.15 "Bodoni Moda", Georgia, serif; color: #171411; }
.ab-h3 em { font-style: italic; color: #a8843f; }
.ab-live .ab-narrow p { margin: 0 auto 24px; max-width: 64ch; font: 400 17px/1.75 var(--font-body); color: #3b332b; }
.ab-strip-cap { margin: 40px auto 0; max-width: 1100px; padding-inline: max(16px, var(--gutter)); text-align: center; font: 400 13px/1.5 var(--font-body); color: #6b6158; }

@media (max-width: 899px) {
  .ab-hero { min-height: 82svh; }
  .ab-hello-grid, .ab-std { grid-template-columns: minmax(0, 1fr); }
  .ab-profile { max-width: 520px; }
  .ab-story { min-height: 0; display: block; }
  .ab-story-img { position: relative; height: 62svh; min-height: 360px; }
  .ab-story-in { padding-top: 0; }
  .ab-card { margin-top: -80px; position: relative; }
  .ab-cap--r { top: 14px; bottom: auto; }
  .ab-music-box { margin: -80px auto 0; width: 94%; }
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .ab-strip { grid-template-columns: repeat(5, 60vw); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ab-strip-ph { scroll-snap-align: start; }
}
@media (max-width: 520px) { .ab-profile { grid-template-columns: minmax(0, 1fr); } .ab-profile-ph { aspect-ratio: 4 / 3; } }
.ab-letter .ab-sig { margin: 10px 0 0; font: 400 58px/1 "Waterfall", cursive; color: #171411; text-align: right; }
.ab-std { align-items: start; }
.ab-film { position: sticky; top: 120px; }
@media (max-width: 899px) { .ab-film { position: static; } }

/* /about/ type matched to the homepage (owner, 21 Oct 2026): Playfair Display headings in navy with gold italic turns,
   Work Sans body and labels, Waterfall only for small accents (hello!, the signature) */
:is(.ab-hero, .ab-intro, .ab-hello, .ab-story, .ab-standard, .ab-music, .ab-live) { --ab-ink: #122233; --ab-text: #2f3a47; --ab-gold: #a27a2e; }
.ab-k { font: 600 14px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; color: var(--ab-gold); }
.ab-hero .ab-k, .ab-music .ab-k { color: #e3c48a; }
.ab-k--c { text-align: center; margin-bottom: 14px; }
.ab-h, .ab-h2, .ab-card-h, .ab-h3, .ab-ex b, .ab-stats dd, .ab-profile-name { font-family: "Playfair Display", Georgia, serif; }
.ab-h { font-weight: 500; }
.ab-h2 { font-weight: 500; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.06; color: var(--ab-ink); text-align: center; }
.ab-h2 em, .ab-card-h em, .ab-h3 em { color: var(--ab-gold); font-style: italic; }
.ab-card-h { font-weight: 500; color: var(--ab-ink); }
.ab-card-h--light, .ab-card-h--light em { color: #fff; }
.ab-card-h--light em { color: #e3c48a; }
.ab-intro p, .ab-letter p, .ab-card p, .ab-std-txt > p, .ab-ex li, .ab-live .ab-narrow p, .ab-music-box p, .ab-profile dd {
  font-family: "Work Sans", sans-serif; color: var(--ab-text); }
.ab-intro p, .ab-letter p { font-size: 18px; line-height: 1.7; }
.ab-card p, .ab-std-txt > p, .ab-ex li, .ab-live .ab-narrow p { font-size: 17px; line-height: 1.7; }
.ab-music-box p { color: #e7e0d4; font-size: 17px; line-height: 1.7; }
.ab-ex b { font-weight: 500; font-size: 22px; color: var(--ab-ink); }
.ab-profile-name { font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 28px; color: var(--ab-ink); }
.ab-profile-role, .ab-profile dt { color: var(--ab-gold); }
.ab-btn { background: #122233; font-family: "Work Sans", sans-serif; }
.ab-btn:hover { background: #c9a35a; color: #122233; }
.ab-tl { color: var(--ab-ink); font-family: "Work Sans", sans-serif; }
.ab-letter .ab-hi { color: var(--ab-gold); }
.ab-letter .ab-sig { color: var(--ab-ink); }
.ab-hello .ab-hello-grid { margin-top: clamp(40px, 5vw, 64px); }
.ab-live .ab-h2 { margin-bottom: 0; }
.ab-live .ab-strip { margin-top: clamp(36px, 4vw, 56px); }
.ab-film figcaption, .ab-strip-cap { font-family: "Work Sans", sans-serif; }
.ab-hero-box { background: rgba(18, 34, 51, .92); }
.ab-music-box { background: #122233; }
.ab-stats div { flex-direction: column; justify-content: flex-start; }
.ab-stats dd { order: -1; margin: 0 0 8px; }

/* ---------- /venue-example/: venue page draft after the owner's LuxurySpace reference (Dribbble), in the site's navy, gold and cream ---------- */
:is(.vz-hero, .vz-intro, .vz-spaces, .vz-glance, .vz-played, .vz-notes, .vz-travel, .vz-cta-wrap) { --vz-ink: #122233; --vz-text: #2f3a47; --vz-gold: #a27a2e; --vz-cream: #faf6ef; --vz-line: #e6dfcf; font-family: "Work Sans", sans-serif; }
.vz-wrap { max-width: 1240px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); }
.vz-k { margin: 0; font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #e3c48a; }
.vz-k--dark { color: var(--vz-gold); }
.vz-c { text-align: center; }
.vz-h2 { margin: 14px 0 0; font: 500 clamp(36px, 4vw, 58px)/1.06 "Playfair Display", Georgia, serif; color: var(--vz-ink); text-wrap: balance; }
.vz-h2 em, .vz-h3 em { font-style: italic; color: var(--vz-gold); }
.vz-h2--light { color: #fff; }
.vz-h2--light em { color: #e3c48a; }
.vz-h3 { margin: 10px 0 0; font: 500 clamp(28px, 2.6vw, 38px)/1.1 "Playfair Display", Georgia, serif; color: var(--vz-ink); }
.vz-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: #fff; color: var(--vz-ink); font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.vz-btn:hover { background: #c9a35a; color: var(--vz-ink); transform: translateY(-1px); }
.vz-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.vz-btn--gold { background: #c9a35a; }
.vz-btn--gold:hover { background: #fff; }
.vz-link { display: inline-flex; gap: 10px; margin-top: 10px; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--vz-ink); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid #c9a35a; }

/* hero: a framed photo with rounded corners and a glance bar */
.vz-hero { background: var(--vz-cream); padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px) 0; }
.vz-frame { position: relative; min-height: calc(100svh - 150px); border-radius: clamp(20px, 2.4vw, 34px); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; }
.vz-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vz-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 34, 51, .1) 30%, rgba(18, 34, 51, .72)); }
.vz-hero-in { max-width: 760px; padding: 0 clamp(24px, 4vw, 64px) clamp(28px, 3vw, 40px); color: #fff; }
.vz-h { margin: 16px 0 0; font: 500 clamp(48px, 6.4vw, 96px)/1 "Playfair Display", Georgia, serif; color: #fff; }
.vz-h em { font-style: italic; color: #e3c48a; }
.vz-lede { margin: 18px 0 0; max-width: 46ch; font: 400 18px/1.6 "Work Sans", sans-serif; color: rgba(255, 255, 255, .9); }
.vz-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.vz-bar { margin: 0 clamp(16px, 3vw, 48px) clamp(16px, 3vw, 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(255, 255, 255, .94); border-radius: 18px; padding: 8px; backdrop-filter: blur(8px); }
.vz-bar div { padding: 14px 20px; }
.vz-bar div + div { border-left: 1px solid var(--vz-line); }
.vz-bar dt { font: 600 11px/1.3 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--vz-gold); }
.vz-bar dd { margin: 6px 0 0; font: 500 19px/1.25 "Playfair Display", Georgia, serif; color: var(--vz-ink); }
.vz-cap { margin: 10px 4px 0; font: 400 13px/1.4 "Work Sans", sans-serif; color: #6b6158; }

/* intro with overlapping photos */
.vz-intro { background: var(--vz-cream); padding-block: clamp(90px, 10vw, 140px); }
.vz-intro-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.vz-pair { position: relative; padding: 0 14% 18% 0; }
.vz-ph { display: block; overflow: hidden; border-radius: 22px; }
.vz-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vz-ph--a { aspect-ratio: 5 / 4; }
.vz-ph--b { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 3 / 4; border: 8px solid var(--vz-cream); border-radius: 26px; }
.vz-intro-txt p:not(.vz-k) { margin: 22px 0 18px; font: 400 17px/1.75 "Work Sans", sans-serif; color: var(--vz-text); }

/* spaces: sliding rounded cards */
.vz-spaces { background: #fff; padding-block: clamp(90px, 10vw, 140px); overflow: hidden; }
.vz-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.vz-arrows { display: flex; gap: 10px; }
.vz-arr { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--vz-ink); background: transparent; color: var(--vz-ink); font-size: 20px; cursor: pointer; transition: background .2s, color .2s; }
.vz-arr:hover { background: var(--vz-ink); color: #fff; }
.vz-row { margin-top: 40px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.vz-row::-webkit-scrollbar { display: none; }
.vz-card { position: relative; scroll-snap-align: start; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.vz-card--ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.vz-card--ph:hover img { transform: scale(1.05); }
.vz-card--ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(18, 34, 51, .85)); }
.vz-card--plain { background: var(--vz-ink); }
.vz-card--plain:nth-child(even) { background: #1d3550; }
.vz-card-n { position: absolute; top: 22px; left: 26px; font: italic 400 64px/1 "Playfair Display", serif; color: rgba(227, 196, 138, .35); }
.vz-card-in { padding: 26px; color: #fff; }
.vz-card-k { margin: 0; font: 600 11px/1.4 "Work Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #e3c48a; }
.vz-card h3 { margin: 8px 0 0; font: 500 26px/1.15 "Playfair Display", Georgia, serif; color: #fff; }
.vz-card-in p:not(.vz-card-k) { margin: 10px 0 0; font: 400 15px/1.55 "Work Sans", sans-serif; color: rgba(255, 255, 255, .85); }
.vz-note { margin: 18px 0 0; font: 400 13px/1.5 "Work Sans", sans-serif; color: #6b6158; }

/* at a glance icons */
.vz-glance { background: var(--vz-cream); padding-block: clamp(70px, 8vw, 110px); }
.vz-icons { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; text-align: center; }
.vz-ic { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--vz-line); color: var(--vz-gold); }
.vz-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vz-icons b { display: block; font: 500 19px/1.2 "Playfair Display", Georgia, serif; color: var(--vz-ink); }
.vz-icons span:last-child { display: block; margin-top: 8px; font: 400 14px/1.5 "Work Sans", sans-serif; color: var(--vz-text); }

/* the wedding we played: navy band with stacked photos */
.vz-played { background: #122233; padding-block: clamp(90px, 10vw, 140px); color: #fff; overflow: hidden; }
.vz-played-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.vz-played-txt > p:not(.vz-k):not(.vz-planned) { margin: 22px 0 0; font: 400 17px/1.75 "Work Sans", sans-serif; color: #dfe4ea; }
.vz-q { margin: 28px 0 0; padding-left: 22px; border-left: 2px solid #c9a35a; }
.vz-q p { margin: 0; font: italic 400 26px/1.3 "Playfair Display", Georgia, serif; color: #fff; }
.vz-q cite { display: block; margin-top: 10px; font: 600 12px/1.4 "Work Sans", sans-serif; font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: #e3c48a; }
.vz-ticks { list-style: none; margin: 26px 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vz-ticks li { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(227, 196, 138, .45); font: 500 13px/1 "Work Sans", sans-serif; color: #fff; }
.vz-planned { margin: 22px 0 0; font: 400 13px/1.5 "Work Sans", sans-serif; color: #9fb0c2; }
.vz-planned a { color: #e3c48a; }
.vz-stack { position: relative; height: clamp(460px, 44vw, 600px); }
.vz-st { position: absolute; display: block; overflow: hidden; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.vz-st img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vz-st-0 { left: 0; top: 8%; width: 58%; aspect-ratio: 3 / 2; transform: rotate(-4deg); }
.vz-st-1 { right: 0; top: 0; width: 44%; aspect-ratio: 3 / 4; transform: rotate(3deg); z-index: 1; }
.vz-st-2 { left: 18%; bottom: 0; width: 40%; aspect-ratio: 3 / 4; transform: rotate(-1deg); z-index: 2; border: 6px solid #122233; }

/* notes */
.vz-notes { background: #fff; padding-block: clamp(90px, 10vw, 140px); }
.vz-notes-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.vz-panel { padding: clamp(28px, 3vw, 44px); border-radius: 26px; background: var(--vz-cream); }
.vz-panel--soft { background: #f3ede2; }
.vz-list { list-style: none; margin: 22px 0 0; padding: 0; }
.vz-list li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--vz-line); font: 400 16px/1.55 "Work Sans", sans-serif; color: var(--vz-text); }
.vz-list li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 10px; height: 6px; border-left: 2px solid #c9a35a; border-bottom: 2px solid #c9a35a; transform: rotate(-45deg); }
.vz-src { margin: 16px 0 0; font: 400 13px/1.5 "Work Sans", sans-serif; color: #6b6158; }

/* travel */
.vz-travel { background: var(--vz-cream); padding-block: clamp(80px, 9vw, 120px); }
.vz-travel-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.vz-addr { margin: 14px 0 0; font: 400 16px/1.6 "Work Sans", sans-serif; color: var(--vz-text); }
.vz-stays { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vz-stays li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--vz-line); }
.vz-stays b { font: 500 20px/1.25 "Playfair Display", Georgia, serif; color: var(--vz-ink); }
.vz-stays span { font: 500 13px/1.4 "Work Sans", sans-serif; color: var(--vz-gold); white-space: nowrap; }

/* rounded call-to-action banner */
.vz-cta-wrap { background: var(--vz-cream); padding: 0 clamp(14px, 1.6vw, 24px) clamp(60px, 7vw, 100px); }
.vz-cta { position: relative; max-width: 1400px; margin: 0 auto; min-height: 440px; border-radius: clamp(20px, 2.4vw, 34px); overflow: hidden; isolation: isolate; display: grid; place-items: center; text-align: center; }
.vz-cta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vz-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(18, 34, 51, .55); }
.vz-cta-in { padding: 40px 24px; color: #fff; }
.vz-cta h2 { margin: 0; font: 500 clamp(38px, 4.6vw, 66px)/1.05 "Playfair Display", Georgia, serif; color: #fff; }
.vz-cta h2 em { font-style: italic; color: #e3c48a; }
.vz-cta p { margin: 14px 0 26px; font: 400 18px/1.5 "Work Sans", sans-serif; color: rgba(255, 255, 255, .9); }

@media (max-width: 1099px) { .vz-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .vz-frame { min-height: 86svh; }
  .vz-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-bar div:nth-child(3) { border-left: 0; }
  .vz-bar div:nth-child(n + 3) { border-top: 1px solid var(--vz-line); }
  .vz-intro-in, .vz-played-in, .vz-notes-in, .vz-travel-in { grid-template-columns: minmax(0, 1fr); }
  .vz-row { grid-auto-columns: 78%; }
  .vz-arrows { display: none; }
  .vz-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-stack { height: 420px; }
  .vz-stays li { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.vz-frame::after { background: linear-gradient(90deg, rgba(18, 34, 51, .78) 0%, rgba(18, 34, 51, .35) 50%, rgba(18, 34, 51, 0) 75%), linear-gradient(180deg, transparent 55%, rgba(18, 34, 51, .55)); }
.vz-hero-in { max-width: 640px; }
@media (max-width: 899px) { .vz-frame::after { background: linear-gradient(180deg, rgba(18, 34, 51, .2) 20%, rgba(18, 34, 51, .85)); } }
@media (max-width: 899px) { .vz-frame::after { background: linear-gradient(180deg, rgba(18, 34, 51, .62), rgba(18, 34, 51, .5) 50%, rgba(18, 34, 51, .85)); } .vz-hero-in { padding-top: 40px; } }

/* ---------- /venue-example-b/: venue page as plain questions in boxes (after Here Comes The Guide), site navy/gold/cream ---------- */
:is(.vq-top, .vq-tabs, .vq-body, .vq-end) { --vq-ink: #122233; --vq-text: #2f3a47; --vq-gold: #a27a2e; --vq-cream: #faf6ef; --vq-line: #e6dfcf; font-family: "Work Sans", sans-serif; }
.vq-wrap { max-width: 1240px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); }
.vq-k { margin: 0; font: 600 12px/1.4 "Work Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--vq-gold); }
.vq-top { background: var(--vq-cream); padding-block: 34px 48px; }
.vq-crumbs { display: flex; gap: 10px; font: 500 13px/1 "Work Sans", sans-serif; color: #6b6158; }
.vq-crumbs a { color: inherit; text-decoration: none; }
.vq-crumbs a:hover { color: var(--vq-ink); }
.vq-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; margin-top: 18px; }
.vq-h1 { margin: 0; font: 500 clamp(44px, 5vw, 72px)/1 "Playfair Display", Georgia, serif; color: var(--vq-ink); }
.vq-addr { margin: 0; font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vq-text); }
.vq-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: #122233; color: #fff; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .08em; }
.vq-badge svg { width: 14px; height: 14px; fill: #e3c48a; }
.vq-grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.vq-main { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #122233; }
.vq-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.vq-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--vq-ink); font-size: 18px; cursor: pointer; }
.vq-prev { left: 16px; } .vq-next { right: 16px; }
.vq-count { position: absolute; right: 16px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(18, 34, 51, .75); color: #fff; font: 600 12px/1 "Work Sans", sans-serif; }
.vq-ths { margin-top: 10px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.vq-th { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: pointer; opacity: .55; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .2s, outline-color .2s; background: none; }
.vq-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vq-th:hover, .vq-th.is-on { opacity: 1; }
.vq-th.is-on { outline-color: #c9a35a; }
.vq-credit { margin: 10px 0 0; font: 400 12px/1.4 "Work Sans", sans-serif; color: #6b6158; }
.vq-card { position: sticky; top: 24px; padding: 28px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--vq-line), 0 30px 60px -40px rgba(18, 34, 51, .5); }
.vq-card-h { margin: 10px 0 20px; font: 500 30px/1.1 "Playfair Display", Georgia, serif; color: var(--vq-ink); }
.vq-card-h em { font-style: italic; color: var(--vq-gold); }
.vq-btn { display: flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 999px; background: #122233; color: #fff; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.vq-btn:hover { background: #c9a35a; color: #122233; }
.vq-btn--line { margin-top: 10px; background: transparent; color: var(--vq-ink); box-shadow: inset 0 0 0 1px var(--vq-ink); }
.vq-btn--inline { display: inline-flex; margin-top: 22px; }
.vq-mini { margin: 22px 0 0; border-top: 1px solid var(--vq-line); }
.vq-mini div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--vq-line); }
.vq-mini dt { font: 600 11px/1.4 "Work Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--vq-gold); }
.vq-mini dd { margin: 0; font: 500 15px/1.4 "Playfair Display", Georgia, serif; color: var(--vq-ink); text-align: right; }
.vq-phone { margin: 14px 0 0; font: 400 14px/1.4 "Work Sans", sans-serif; color: var(--vq-text); }
.vq-phone a { color: var(--vq-ink); }
.vq-tabs { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-block: 1px solid var(--vq-line); }
.vq-tabs .vq-wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.vq-tabs .vq-wrap::-webkit-scrollbar { display: none; }
.vq-tabs a { flex: none; padding: 10px 16px; border-radius: 999px; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vq-ink); text-decoration: none; }
.vq-tabs a:hover { background: var(--vq-cream); }
.vq-body { background: #fff; padding-block: clamp(56px, 6vw, 90px); }
.vq-boxes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.vq-box { scroll-margin-top: 90px; padding: clamp(28px, 3vw, 44px); border-radius: 24px; background: var(--vq-cream); }
.vq-box--wide, #vq-spaces, #vq-ours, #vq-faq { grid-column: 1 / -1; }
.vq-n { margin: 0; font: italic 400 34px/1 "Playfair Display", serif; color: #c9a35a; }
.vq-q { margin: 10px 0 22px; font: 500 clamp(28px, 2.8vw, 40px)/1.1 "Playfair Display", Georgia, serif; color: var(--vq-ink); }
.vq-q em { font-style: italic; color: var(--vq-gold); }
.vq-love { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vq-love li { font: 400 16px/1.65 "Work Sans", sans-serif; color: var(--vq-text); }
.vq-love b { display: block; font: 500 19px/1.3 "Playfair Display", Georgia, serif; color: var(--vq-ink); margin-bottom: 4px; }
.vq-table-wrap { overflow-x: auto; }
.vq-table { width: 100%; border-collapse: collapse; font: 400 15px/1.45 "Work Sans", sans-serif; color: var(--vq-text); }
.vq-table th, .vq-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--vq-line); text-align: left; vertical-align: top; }
.vq-table thead th { font: 600 11px/1.3 "Work Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--vq-gold); }
.vq-table tbody th { font: 500 16px/1.3 "Playfair Display", Georgia, serif; color: var(--vq-ink); }
.vq-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vq-rules li { padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--vq-line); }
.vq-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #122233; color: #e3c48a; margin-bottom: 14px; }
.vq-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vq-rules b { display: block; font: 500 19px/1.25 "Playfair Display", Georgia, serif; color: var(--vq-ink); }
.vq-rules li > span:last-child { display: block; margin-top: 6px; font: 400 15px/1.55 "Work Sans", sans-serif; color: var(--vq-text); }
.vq-src { margin: 16px 0 0; font: 400 13px/1.5 "Work Sans", sans-serif; color: #6b6158; }
.vq-src a { color: inherit; }
.vq-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; }
.vq-sp, .vq-inc, .vq-stays { list-style: none; margin: 0; padding: 0; }
.vq-sp li { padding: 14px 0; border-bottom: 1px solid var(--vq-line); }
.vq-sp b { display: block; font: 500 19px/1.25 "Playfair Display", Georgia, serif; color: var(--vq-ink); }
.vq-sp span { display: block; margin-top: 4px; font: 400 15px/1.5 "Work Sans", sans-serif; color: var(--vq-text); }
.vq-inc { padding: 22px 24px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--vq-line); align-self: start; }
.vq-inc li { position: relative; padding: 9px 0 9px 26px; font: 400 15px/1.5 "Work Sans", sans-serif; color: var(--vq-text); }
.vq-inc li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 6px; border-left: 2px solid #c9a35a; border-bottom: 2px solid #c9a35a; transform: rotate(-45deg); }
.vq-box--navy { background: #122233; }
.vq-box--navy .vq-q { color: #fff; }
.vq-box--navy .vq-q em { color: #e3c48a; }
.vq-ours { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: center; }
.vq-ours-ph { display: block; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; }
.vq-ours-ph img { width: 100%; height: 100%; object-fit: cover; }
.vq-lead { margin: 0; font: 400 17px/1.7 "Work Sans", sans-serif; color: #dfe4ea; }
.vq-quote { margin: 22px 0 0; padding-left: 20px; border-left: 2px solid #c9a35a; }
.vq-quote p { margin: 0; font: italic 400 26px/1.3 "Playfair Display", Georgia, serif; color: #fff; }
.vq-quote cite { display: block; margin-top: 8px; font: 600 12px/1.4 "Work Sans", sans-serif; font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: #e3c48a; }
.vq-box--navy .vq-btn { background: #c9a35a; color: #122233; }
.vq-box--navy .vq-btn:hover { background: #fff; }
.vq-box--navy .vq-src { color: #9fb0c2; }
.vq-box--navy .vq-src a { color: #e3c48a; }
.vq-stays { display: grid; gap: 10px; }
.vq-stays li { display: flex; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--vq-line); }
.vq-stays b { font: 500 17px/1.3 "Playfair Display", Georgia, serif; color: var(--vq-ink); }
.vq-stays span { font: 500 13px/1.4 "Work Sans", sans-serif; color: var(--vq-gold); white-space: nowrap; }
.vq-faq details { border-bottom: 1px solid var(--vq-line); }
.vq-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 500 19px/1.35 "Playfair Display", Georgia, serif; color: var(--vq-ink); }
.vq-faq summary::-webkit-details-marker { display: none; }
.vq-faq summary::after { content: "+"; font: 400 26px/1 "Work Sans", sans-serif; color: var(--vq-gold); transition: transform .2s; }
.vq-faq details[open] summary::after { transform: rotate(45deg); }
.vq-faq p { margin: 0 0 18px; max-width: 70ch; font: 400 16px/1.7 "Work Sans", sans-serif; color: var(--vq-text); }
.vq-faq a { color: var(--vq-ink); }
.vq-end { background: #fff; padding: 0 max(16px, var(--gutter)) clamp(60px, 7vw, 100px); }
.vq-end-in { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 5vw, 64px); border-radius: 26px; background: var(--vq-cream); box-shadow: inset 0 0 0 1px var(--vq-line); display: grid; justify-items: center; text-align: center; gap: 12px; }
.vq-end-h { margin: 0; font: 500 clamp(40px, 5vw, 64px)/1 "Playfair Display", Georgia, serif; color: var(--vq-ink); }
.vq-end-h em { font: 400 1.2em/1 "Waterfall", cursive; color: var(--vq-gold); }
.vq-end p:not(.vq-end-h) { margin: 0 0 10px; font: 400 17px/1.5 "Work Sans", sans-serif; color: var(--vq-text); }
@media (max-width: 1099px) { .vq-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .vq-grid, .vq-boxes, .vq-two, .vq-ours { grid-template-columns: minmax(0, 1fr); }
  .vq-card { position: static; }
  .vq-ths { grid-template-columns: repeat(10, 64px); overflow-x: auto; scrollbar-width: none; }
  .vq-rules { grid-template-columns: minmax(0, 1fr); }
  .vq-ours-ph { max-width: 360px; }
  .vq-stays li { flex-direction: column; gap: 4px; }
}
#vq-stay { grid-column: 1 / -1; }
#vq-stay .vq-stays { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#vq-stay .vq-stays li { flex-direction: column; gap: 6px; }
@media (max-width: 899px) { #vq-stay .vq-stays { grid-template-columns: minmax(0, 1fr); } }
#vq-guide { grid-column: 1 / -1; background: #fff; box-shadow: inset 0 0 0 1px var(--vq-line); }
.vq-article { max-width: 760px; }
.vq-article :is(p, li) { font-family: "Work Sans", sans-serif; font-size: 16px; line-height: 1.75; color: var(--vq-text); }
.vq-article :is(h2, h3) { font-family: "Playfair Display", Georgia, serif; font-weight: 500; color: var(--vq-ink); }
.vq-article h2 { font-size: 28px; margin: 34px 0 12px; }
.vq-article h3 { font-size: 21px; margin: 24px 0 8px; }
.vq-article a { color: var(--vq-ink); text-decoration-color: #c9a35a; }
.vq-article h3 { text-transform: none; letter-spacing: 0; }

/* ---------- /venues/: booking-style directory after Zola's venue search (owner, 21 Oct 2026) ---------- */
.vd { --vd-ink: #122233; --vd-text: #2f3a47; --vd-gold: #a27a2e; --vd-cream: #faf6ef; --vd-line: #e6dfcf; background: #fff; padding-block: 36px clamp(70px, 8vw, 110px); font-family: "Work Sans", sans-serif; }
.vd-wrap { max-width: 1300px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); }
.vd-crumbs { display: flex; gap: 10px; font: 500 13px/1 "Work Sans", sans-serif; color: #6b6158; }
.vd-crumbs a { color: inherit; text-decoration: none; }
.vd-head { margin-top: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--vd-line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 24px 40px; align-items: end; }
.vd-h1 { margin: 0; font: 500 clamp(34px, 3.6vw, 52px)/1.06 "Playfair Display", Georgia, serif; color: var(--vd-ink); }
.vd-h1 em { font-style: italic; color: var(--vd-gold); }
.vd-sub { margin: 12px 0 0; max-width: 60ch; font: 400 16px/1.6 "Work Sans", sans-serif; color: var(--vd-text); }
.vd-search { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--vd-line), 0 16px 30px -24px rgba(18, 34, 51, .5); }
.vd-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.vd-field svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--vd-gold); stroke-width: 1.8; }
.vd-field input, .vd-field select { width: 100%; min-width: 0; min-height: 44px; border: 0; background: transparent; font: 400 15px/1 "Work Sans", sans-serif; color: var(--vd-ink); outline: none; }
.vd-field--sel { flex: 0 1 190px; border-left: 1px solid var(--vd-line); }
.vd-go { flex: none; min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--vd-ink); color: #fff; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.vd-go:hover { background: #c9a35a; color: var(--vd-ink); }
.vd-grid { margin-top: 28px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.vd-filters { position: sticky; top: 24px; }
.vd-filters details { border-bottom: 1px solid var(--vd-line); padding: 14px 0; }
.vd-filters summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; font: 600 15px/1.3 "Work Sans", sans-serif; color: var(--vd-ink); }
.vd-filters summary::-webkit-details-marker { display: none; }
.vd-filters summary::after { content: "–"; color: var(--vd-gold); }
.vd-filters details:not([open]) summary::after { content: "+"; }
.vd-opts { display: grid; gap: 8px; margin-top: 12px; }
.vd-opt { display: flex; align-items: center; gap: 10px; cursor: pointer; font: 400 15px/1.3 "Work Sans", sans-serif; color: var(--vd-text); }
.vd-opt input { width: 18px; height: 18px; accent-color: #122233; margin: 0; }
.vd-clear { margin-top: 16px; padding: 0; border: 0; background: none; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vd-gold); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.vd-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; }
.vd-count { margin: 0; font: 400 15px/1.3 "Work Sans", sans-serif; color: var(--vd-text); }
.vd-count b { color: var(--vd-ink); }
.vd-sort { font: 500 14px/1 "Work Sans", sans-serif; color: var(--vd-text); }
.vd-sort select { margin-left: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--vd-line); background: #fff; font: 600 14px/1 "Work Sans", sans-serif; color: var(--vd-ink); }
.vd-list { display: grid; gap: 0; }
.vd-row { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; padding: 26px 0; border-top: 1px solid var(--vd-line); }
.vd-row[hidden] { display: none; }
.vd-ph { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--vd-cream); align-self: start; }
.vd-sl { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.vd-sl.is-on { opacity: 1; }
.vd-sl img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.vd-ph:hover .vd-sl img { transform: scale(1.04); }
.vd-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.vd-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.vd-dots i.is-on { background: #fff; }
.vd-feat { position: absolute; top: 12px; left: 12px; padding: 7px 12px; border-radius: 999px; background: #c9a35a; color: var(--vd-ink); font: 600 11px/1 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.vd-top { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.vd-name { margin: 0; font: 500 28px/1.15 "Playfair Display", Georgia, serif; }
.vd-name a { color: var(--vd-ink); text-decoration: none; }
.vd-name a:hover { color: var(--vd-gold); }
.vd-town { margin: 6px 0 0; font: 500 14px/1.4 "Work Sans", sans-serif; color: #6b6158; }
.vd-badge { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--vd-ink); color: #e3c48a; font: 600 11px/1 "Work Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.vd-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.vd-chips li { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1.3 "Work Sans", sans-serif; color: var(--vd-ink); }
.vd-chips svg { width: 18px; height: 18px; fill: none; stroke: var(--vd-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vd-desc { margin: 12px 0 0; font: 400 15px/1.65 "Work Sans", sans-serif; color: var(--vd-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vd-status { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #fbf3e2; font: 500 13px/1.45 "Work Sans", sans-serif; color: #6b4f0a; }
.vd-note { margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: var(--vd-cream); display: grid; gap: 4px; }
.vd-note p { margin: 0; font: italic 400 18px/1.4 "Playfair Display", Georgia, serif; color: var(--vd-ink); }
.vd-note--story p { font-style: normal; font: 500 15px/1.45 "Work Sans", sans-serif; }
.vd-note span { font: 500 12px/1.4 "Work Sans", sans-serif; color: #6b6158; }
.vd-note a { justify-self: start; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vd-gold); margin-top: 6px; }
.vd-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vd-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--vd-ink); color: #fff; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.vd-btn:hover { background: #c9a35a; color: var(--vd-ink); }
.vd-btn--line { background: transparent; color: var(--vd-ink); box-shadow: inset 0 0 0 1px var(--vd-ink); }
.vd-empty { padding: 40px 0; font: 400 16px/1.5 "Work Sans", sans-serif; color: var(--vd-text); }
.vd-empty button { border: 0; background: none; color: var(--vd-gold); font: inherit; text-decoration: underline; cursor: pointer; }
.vd-foot { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--vd-line); font: 400 14px/1.6 "Work Sans", sans-serif; color: #6b6158; }
.vd-foot a { color: var(--vd-ink); }
@media (max-width: 1099px) { .vd-head { grid-template-columns: minmax(0, 1fr); } .vd-row { grid-template-columns: 280px minmax(0, 1fr); } }
@media (max-width: 899px) {
  .vd-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vd-filters { position: static; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .vd-filters details { flex: none; border: 1px solid var(--vd-line); border-radius: 14px; padding: 10px 14px; }
  .vd-filters details[open] .vd-opts { min-width: 200px; }
  .vd-clear { flex: none; align-self: center; margin: 0 6px; }
  .vd-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vd-search { border-radius: 18px; flex-wrap: wrap; }
  .vd-field--sel { border-left: 0; border-top: 1px solid var(--vd-line); flex-basis: 100%; }
  .vd-go { flex-basis: 100%; }
}
@media (max-width: 899px) { .vd-top { flex-direction: column-reverse; align-items: flex-start; gap: 10px; } .vd-name { font-size: 26px; } }
/* guide venues: designed card instead of a photo */
.vd-ph--card { display: grid; place-items: center; text-decoration: none; background: #122233 radial-gradient(ellipse 80% 70% at 85% 10%, rgba(201, 163, 90, .28), transparent 70%); color: #e3c48a; }
.vd-ph--card:nth-of-type(n) { }
.vd-row--guide:nth-child(3n + 1) .vd-ph--card { background-color: #1d3550; }
.vd-row--guide:nth-child(3n + 2) .vd-ph--card { background-color: #2a2420; }
.vd-mono { position: absolute; left: 18px; top: 12px; font: italic 400 64px/1 "Playfair Display", serif; color: rgba(227, 196, 138, .22); }
.vd-tic svg { width: 76px; height: 76px; fill: none; stroke: #e3c48a; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vd-cardtown { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 600 11px/1.3 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.vd-more { display: block; margin: 26px auto 0; min-height: 50px; padding: 0 28px; border-radius: 999px; border: 1px solid #122233; background: #fff; color: #122233; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.vd-more:hover { background: #122233; color: #fff; }
.vd-more[hidden] { display: none; }
.vq-status { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: #fbf3e2; font: 500 14px/1.5 "Work Sans", sans-serif; color: #6b4f0a; }
.vq-intro { margin: 0 0 22px; max-width: 72ch; font: 400 17px/1.75 "Work Sans", sans-serif; color: var(--vq-text); }
.vq-love--glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.vq-love--glance b { display: inline; font: 500 17px/1.3 "Playfair Display", Georgia, serif; }
.vq-lead-dark { margin: 0; max-width: 72ch; font: 400 17px/1.7 "Work Sans", sans-serif; color: var(--vq-text); }
.vq-ours-acts { display: flex; flex-wrap: wrap; gap: 10px; }
#vq-love.vq-box--wide { grid-column: 1 / -1; }
@media (max-width: 899px) { .vq-love--glance { grid-template-columns: minmax(0, 1fr); } }
#vq-love.vq-box--wide ~ #vq-guests { grid-column: 1 / -1; }

/* ---------- /steps-options/: ten treatments of the homepage steps (draft) ---------- */
.so-page { --ink: #122233; --txt: #2f3a47; --gold: #a27a2e; --gl: #c9a35a; --cream: #faf6ef; background: #f1ede6; font-family: "Work Sans", sans-serif; }
.so-intro { max-width: 1100px; margin: 0 auto; padding: 48px 24px 0; }
.so-intro h1 { margin: 0; font: 500 40px/1.1 "Playfair Display", serif; color: var(--ink); }
.so-intro p { margin: 10px 0 0; color: var(--txt); }
.so-opt { margin-top: 56px; }
.so-label { max-width: 1240px; margin: 0 auto 14px; padding: 0 24px; font: 700 12px/1.4 "Work Sans", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #6b6158; }
.so-label b { margin-left: 10px; font: 500 22px/1 "Playfair Display", serif; letter-spacing: 0; text-transform: none; color: var(--ink); }
.so-label span { display: block; margin-top: 6px; letter-spacing: .04em; text-transform: none; font-weight: 400; font-size: 14px; }
.so { position: relative; overflow: hidden; padding: clamp(70px, 8vw, 110px) max(16px, 4vw); background: #fff; }
.so h3 { margin: 10px 0 0; font: 500 clamp(24px, 2.2vw, 30px)/1.15 "Playfair Display", serif; color: var(--ink); }
.so p { margin: 10px 0 0; font: 400 16px/1.7 "Work Sans", sans-serif; color: var(--txt); }
.so img { display: block; width: 100%; height: 100%; object-fit: cover; }
.so .so-k { font: 600 12px/1.3 "Work Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.so-lk { display: inline-flex; gap: 8px; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid var(--gl); font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.so-head { margin: 0 auto clamp(48px, 5vw, 72px); text-align: center; color: var(--ink); }
.so-lead { display: block; font: italic 400 clamp(26px, 2.6vw, 38px)/1 "Playfair Display", serif; }
.so-big { display: block; margin-top: 8px; font: 500 clamp(48px, 7vw, 104px)/.95 "Bodoni Moda", "Playfair Display", serif; letter-spacing: .02em; text-transform: uppercase; }
.so-tag { display: block; margin-top: 16px; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .4em; text-transform: uppercase; }
/* 1 editorial */
.so1-row { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: 40px 0; }
.so1-flip .so1-ph { order: 2; }
.so1-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.so .so1-n { margin: 0; font: italic 400 110px/.8 "Playfair Display", serif; color: rgba(162, 122, 46, .35); }
.so1 h3 { font-size: clamp(32px, 3.4vw, 48px); }
/* 2 arches */
.so2 { background: var(--ink); }
.so2 .so-head, .so2 h3, .so2 .so-lk { color: #fff; }
.so2 p { color: #d9dee5; }
.so2-row { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.so2-ph { display: block; aspect-ratio: 3 / 4.4; border-radius: 999px 999px 0 0; overflow: hidden; outline: 1px solid rgba(201, 163, 90, .6); outline-offset: 8px; }
.so .so2-n { margin-top: 26px; font: italic 400 34px/1 "Playfair Display", serif; color: var(--gl); }
/* 3 sticky */
.so3 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); background: var(--cream); overflow: visible; }
.so3-l { position: sticky; top: 40px; align-self: start; }
.so3-l .so-head { text-align: left; margin-bottom: 18px; }
.so .so3-p { font: italic 400 22px/1.4 "Playfair Display", serif; color: var(--ink); }
.so3-r { list-style: none; margin: 0; padding: 0 0 0 40px; border-left: 1px solid var(--gl); display: grid; gap: 64px; }
.so3-r li { position: relative; }
.so3-dot { position: absolute; left: -58px; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #e3c48a; display: grid; place-items: center; font: italic 400 18px/1 "Playfair Display", serif; }
.so3-ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 18px; }
/* 4 filmstrip */
.so4 { background: #0d0d0d; }
.so4 .so-head, .so4 h3, .so4 .so-lk { color: #fff; }
.so4 p { color: #c9c4bc; }
.so4-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1400px; margin: 0 auto; border-block: 10px solid #000; background: #000; padding: 14px 0; }
.so4-f { padding: 0 10px 24px; border-right: 1px dashed #333; }
.so4-ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; filter: saturate(.85); }
.so .so4-n { margin-top: 16px; font: 600 11px/1 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gl); }
/* 5 panels */
.so5-row { display: flex; gap: 10px; height: 620px; max-width: 1400px; margin: 0 auto; }
.so5-p { position: relative; flex: 1; overflow: hidden; border-radius: 22px; transition: flex .7s cubic-bezier(.2, .7, .2, 1); outline: none; }
.so5-p:hover, .so5-p:focus-within { flex: 3.2; }
.so5-img { position: absolute; inset: 0; }
.so5-p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(18, 34, 51, .9)); }
.so5-in { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px; }
.so5-in h3 { color: #fff; }
.so5-in p:not(.so5-n), .so5-in .so-lk { opacity: 0; transition: opacity .4s; color: #e6e9ee; }
.so5-p:hover .so5-in p, .so5-p:hover .so-lk, .so5-p:focus-within .so5-in p, .so5-p:focus-within .so-lk { opacity: 1; }
.so .so5-n { font: italic 400 48px/1 "Playfair Display", serif; color: #e3c48a; opacity: 1; }
/* 6 letterpress */
.so6 { background: var(--cream); }
.so6-row { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.so6-c { padding: 40px 26px 32px; background: #fffdf9; text-align: center; box-shadow: inset 0 0 0 12px #fffdf9, inset 0 0 0 13px rgba(201, 163, 90, .7), inset 0 0 0 17px #fffdf9, inset 0 0 0 18px rgba(201, 163, 90, .45); }
.so6-ph { display: block; width: 150px; height: 190px; margin: 0 auto; border-radius: 50%; overflow: hidden; }
.so .so6-n { margin-top: 18px; font: 400 40px/1 "Waterfall", cursive; color: var(--gold); }
/* 7 glass */
.so7 { padding: 0; min-height: 820px; display: grid; }
.so7-bg { position: absolute; inset: 0; }
.so7::after { content: ""; position: absolute; inset: 0; background: rgba(18, 34, 51, .55); }
.so7-in { position: relative; z-index: 1; padding: clamp(70px, 8vw, 110px) max(16px, 4vw); align-self: center; }
.so7 .so-head { color: #fff; }
.so7-row { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.so7-c { padding: 26px; border-radius: 22px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(14px); }
.so7-c h3, .so7-c .so-lk { color: #fff; }
.so7-c p { color: #eef1f5; }
.so .so7-n { margin: 0; font: italic 400 40px/1 "Playfair Display", serif; color: #e3c48a; }
/* 8 timeline */
.so8-line { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; position: relative; display: grid; gap: 70px; }
.so8-line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--gl); }
.so8-line li { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; position: relative; }
.so8-r .so8-ph { order: 2; }
.so8-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; }
.so8-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 1px solid var(--gl); display: grid; place-items: center; font: italic 400 22px/1 "Playfair Display", serif; color: var(--gold); z-index: 1; }
/* 9 scrapbook */
.so9 { background: #efe7da; }
.so9-row { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.so9-pol { margin: 0 0 18px; padding: 10px 10px 44px; background: #fff; box-shadow: 0 20px 34px -18px rgba(18, 34, 51, .5); position: relative; transform: rotate(-3deg); }
.so9-c:nth-child(even) .so9-pol { transform: rotate(2.5deg); }
.so9-pol::before { content: ""; position: absolute; top: -10px; left: 50%; width: 80px; height: 22px; transform: translateX(-50%) rotate(2deg); background: rgba(201, 163, 90, .55); z-index: 1; }
.so9-pol img { aspect-ratio: 1; height: auto; }
.so9-pol figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 400 32px/1 "Waterfall", cursive; color: var(--ink); }
/* 10 black tie */
.so10 { background: #0b0b0c; }
.so10 .so-head { color: #f5efe4; }
.so10-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; border-top: 1px solid rgba(201, 163, 90, .4); }
.so10-i { position: relative; display: grid; grid-template-columns: 120px 1fr auto; gap: 30px; align-items: center; padding: 34px 20px; border-bottom: 1px solid rgba(201, 163, 90, .4); overflow: hidden; isolation: isolate; }
.so .so10-img { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s; filter: brightness(.35); }
.so10-i:hover .so10-img { opacity: 1; }
.so10-n { font: italic 400 64px/1 "Bodoni Moda", serif; color: var(--gl); }
.so10 h3 { color: #f5efe4; }
.so10 p { color: #b9b3a8; max-width: 56ch; }
.so10 .so-lk { color: #f5efe4; margin: 0; white-space: nowrap; }
@media (max-width: 899px) {
  .so1-row, .so3, .so8-line li { grid-template-columns: minmax(0, 1fr); }
  .so1-flip .so1-ph, .so8-r .so8-ph { order: 0; }
  .so3-l { position: static; }
  .so2-row, .so6-row, .so7-row, .so9-row, .so4-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so5-row { flex-direction: column; height: auto; }
  .so5-p { min-height: 320px; }
  .so5-in p, .so5-in .so-lk { opacity: 1; }
  .so8-line::before, .so8-dot { display: none; }
  .so10-i { grid-template-columns: 70px 1fr; }
  .so10 .so-lk { grid-column: 2; }
}
@media (max-width: 560px) { .so2-row, .so6-row, .so7-row, .so9-row, .so4-strip { grid-template-columns: minmax(0, 1fr); } }
.so3 .so-big { font-size: clamp(44px, 4.6vw, 70px); }
/* homepage steps as editorial chapters (option 1) */
.so1-home { padding-top: 0; padding-bottom: clamp(48px, 6vw, 88px); --ink: #122233; --txt: #2f3a47; --gold: #a27a2e; --gl: #c9a35a; }
.so1-home .so1-row:first-child { padding-top: 0; }
.so1-home .so1-ph { position: relative; }
.so1-home .so1-ph img { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.so1-home .so1-ph:hover img { transform: scale(1.04); }
@media (max-width: 899px) { .so1-home .so1-row { gap: 22px; padding: 26px 0; } .so1-home .so1-n { font-size: 80px; } }
.so .so1-n { margin-bottom: 14px; line-height: .9; } .so1 .so-k { margin-top: 0; }
/* homepage chapters: even spacing (owner, 21 Oct 2026) */
.so1-home { display: grid; gap: clamp(56px, 6vw, 96px); padding-top: clamp(48px, 5vw, 72px); padding-bottom: var(--sec-y, clamp(56px, 6vw, 88px)); }
.so1-home .so1-row, .so1-home .so1-row:first-child { padding: 0; width: 100%; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 88px); }
.so1-home .so1-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.so1-home .so1-ph { aspect-ratio: 3 / 2; }
.so1-home .so1-txt { max-width: 440px; }
.so1-home .so1-flip .so1-txt { justify-self: end; }
.so1-home h3 { margin-top: 8px; }
.so1-home .so1-txt > p:not(.so1-n):not(.so-k) { margin-top: 14px; }
.so1-home .so-lk { margin-top: 22px; }
@media (max-width: 899px) { .so1-home { gap: 48px; padding-top: 32px; } .so1-home .so1-row, .so1-home .so1-flip { grid-template-columns: minmax(0, 1fr); gap: 20px; } .so1-home .so1-flip .so1-txt { justify-self: start; } .so1-home .so1-txt { max-width: none; } }
.so1-home .so1-flip .so1-txt { justify-self: start; }

/* ---------- The Oakley vendor page + strip: their navy, white and sand (owner, 22 Oct 2026) ---------- */
.lv-tms--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv-tg-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 26px; }
.lv-tg-links .vx-more { margin: 0; }
.v-oak { --ok-navy: #06204c; --ok-navy-2: #0d2f66; --ok-sand: #b9a27a; --ok-sand-d: #8a7550; --ok-mist: #f3f2f2; --ok-line: #d9dde6; }
.v-oak .lv-hero::after { background: linear-gradient(180deg, rgba(6, 32, 76, .35) 0%, rgba(6, 32, 76, .1) 45%, rgba(6, 32, 76, .6) 100%); }
.v-oak .lv-hero .sv-hero-img { filter: none; }
.v-oak .lv-hero .sv-l1, .v-oak .lv-hero .sv-l2 { font-family: "Questrial", "Work Sans", sans-serif; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.v-oak .lv-hero .sv-l3 { color: #e6d6b4; }
.v-oak .lv-pink, .v-oak .vx-no, .v-oak .lv-tm-r { color: var(--ok-sand-d); }
.v-oak .lv-h em, .v-oak .vx-name em, .v-oak .lv-bt-2 h3, .v-oak .lv-bt-2 .lv-bt-n, .v-oak .lv-bt-4 h3, .v-oak .lv-bt-4 .lv-bt-n { color: var(--ok-navy); }
.v-oak .lv-h, .v-oak .vx-name, .v-oak .lv-pr h3, .v-oak .lv-tm h3 { color: var(--ok-navy); }
.v-oak .vx-no span { border-color: var(--ok-sand); }
.v-oak .vx-seal { color: var(--ok-navy); box-shadow: 0 10px 30px -18px rgba(6, 32, 76, .5); }
.v-oak .vx-seal svg, .v-oak .lv-ct-moon svg { fill: var(--ok-sand); }
.v-oak .vx-facts { border-color: var(--ok-line); }
.v-oak .vx-facts div + div { border-color: var(--ok-line); }
.v-oak .vx-facts dt { color: var(--ok-sand-d); }
.v-oak .vx-facts dd, .v-oak .vx-body p, .v-oak .lv-pr p:last-child, .v-oak .lv-tm p:last-child, .v-oak .lv-bt-2 .lv-bt-d, .v-oak .lv-bt-4 .lv-bt-d { color: #2a3550; }
.v-oak .vx-btn { background: var(--ok-navy); box-shadow: 0 16px 30px -16px rgba(6, 32, 76, .7); }
.v-oak .vx-btn:hover { background: var(--ok-sand-d); }
.v-oak .vx-ig, .v-oak .vx-more { color: var(--ok-navy); border-color: rgba(6, 32, 76, .35); }
.v-oak .lv-meet, .v-oak .lv-team, .v-oak .lv-contact { background: var(--ok-mist); }
.v-oak .lv-promise, .v-oak .lv-together { background: #fff; }
.v-oak .vx-port-ph img { object-position: 30% 30%; }
.v-oak .vx-port::after { border-color: var(--ok-sand); }
.v-oak .vx-port figcaption { color: var(--ok-navy); text-shadow: 0 2px 0 var(--ok-mist); }
.v-oak .lv-pr { border-color: var(--ok-line); }
.v-oak .lv-pr-n { color: var(--ok-sand); }
.v-oak .lv-bt-1 { background: linear-gradient(155deg, #123a7a 0%, var(--ok-navy) 55%, #031330 100%); }
.v-oak .lv-bt-1 .lv-bt-art { stroke: none; fill: rgba(185, 162, 122, .12); width: 80%; right: -22%; top: -10%; }
.v-oak .lv-bt-1 .lv-bt-art path { fill: rgba(185, 162, 122, .14); }
.v-oak .lv-bt-1 .lv-bt-n, .v-oak .lv-bt-1 .lv-bt-d { color: #e6d6b4; }
.v-oak .lv-bt-2 { background: var(--ok-mist); }
.v-oak .lv-bt-2 li { background: #fff; color: var(--ok-navy); border-color: var(--ok-line); }
.v-oak .lv-bt-3 { background: #0b1a33 radial-gradient(ellipse 80% 60% at 100% 0%, rgba(185, 162, 122, .3), transparent 70%); }
.v-oak .lv-bt-3 .lv-bt-n { color: #e6d6b4; }
.v-oak .lv-bt-3 li { border-color: rgba(185, 162, 122, .4); }
.v-oak .lv-bt-4 { background: #fff; border-color: var(--ok-line); }
.v-oak .lv-bt-4 li { background: var(--ok-navy); }
.v-oak .lv-bt-4 .lv-bt-art { fill: rgba(6, 32, 76, .06); }
.v-oak .lv-tm-ph { aspect-ratio: 3 / 2; border-radius: 16px; background: var(--ok-line); }
.v-oak .lv-tm-ph img { object-position: 50% 35%; }
.v-oak .vx-credit { color: #5b6478; }
/* hub spread */
.vx-v.v-oak { background: var(--ok-mist); }
.vx-v.v-oak::before { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 62%); }
.vx-v.v-oak .vx-port-ph { border-radius: 24px; aspect-ratio: 4 / 3; }
.vx-v.v-oak .vx-port::after { border-radius: 24px; }
.vx-v.v-oak .vx-together-head .vx-eyebrow, .vx-v.v-oak .vx-h3 em { color: var(--ok-navy); }
.vx-v.v-oak .vx-h3 { color: var(--ok-navy); }
/* slim venue strip on a wedding story */
.lsp.lsp--oak { background: #f3f2f2 radial-gradient(rgba(6, 32, 76, .06) 1.2px, transparent 1.4px) 0 0 / 18px 18px; border-color: #d9dde6; }
.lsp--oak .lsp-pol::before { background: rgba(185, 162, 122, .6); }
.lsp--oak .lsp-pol figcaption { color: #06204c; }
.lsp--oak .lsp-ph { aspect-ratio: 1; }
.lsp--oak .lsp-ph img { object-position: 30% 30%; }
.lsp.lsp--oak .lsp-eye { color: #8a7550; }
.lsp.lsp--oak .lsp-name { font-family: "Questrial", "Work Sans", sans-serif; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: #06204c; }
.lsp--oak .lsp-name em { font-style: normal; color: #06204c; }
.lsp.lsp--oak .lsp-btn { background: #06204c; }
.lsp.lsp--oak .lsp-btn:hover { background: #8a7550; }
.lsp.lsp--oak .lsp-ig { color: #06204c; }
@media (max-width: 1099px) { .lv-tms--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .lv-tms--3 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }
.v-oak .lv-pr { box-shadow: 0 30px 60px -44px rgba(6, 32, 76, .45); }
.v-oak .vx-port-ph { box-shadow: 0 50px 80px -40px rgba(6, 32, 76, .45); }
.v-oak .lv-tm-ph { box-shadow: 0 30px 50px -36px rgba(6, 32, 76, .5); }
.v-oak .lv-lede { text-wrap: pretty; }
.vx-v.v-oak .vx-seal svg { fill: #b9a27a; } .vx-v.v-oak .vx-seal { color: #06204c; } .vx-v.v-oak .vx-no { color: #8a7550; } .vx-v.v-oak .vx-no span { border-color: #b9a27a; } .vx-v.v-oak .vx-port figcaption { color: #06204c; text-shadow: 0 2px 0 #f3f2f2; }

/* ---------- /live-wedding-band/ (owner, 22 Oct 2026): a dark stage hero with the band's own footage, after Hank Lane,
   Silver Arrow and Bob Hardwick. Site type: Playfair headings with gold italic turns, Work Sans body and labels. ---------- */
:is(.bd-hero, .bd-intro, .bd-watch, .bd-night, .bd-combo, .bd-fit, .bd-history, .bd-plan, .bd-region) {
  --bd-ink: #122233; --bd-text: #2f3a47; --bd-gold: #a27a2e; --bd-brass: #c9a35a; --bd-light: #e3c48a; --bd-stage: #0b1420; --bd-line: #e4dccd; }
.bd-wide { max-width: 1240px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); }
.bd-narrow { max-width: 780px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); text-align: center; }
.bd-k { margin: 0 0 14px; font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--bd-gold); }
.bd-h2 { margin: 0; font: 500 clamp(36px, 4.2vw, 60px)/1.08 "Playfair Display", Georgia, serif; color: var(--bd-ink); text-align: center; text-wrap: balance; }
.bd-h2 em { font-style: italic; color: var(--bd-gold); }
.bd-h2--light { color: #fff; }
.bd-h2--light em { color: var(--bd-light); }
.bd-h2--left { text-align: left; }
.bd-head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.bd-sub { margin: 20px auto 0; max-width: 62ch; font: 400 18px/1.7 "Work Sans", sans-serif; color: #d9dde3; }
.bd-sub--dark { color: var(--bd-text); }
.bd-rule { display: block; width: min(520px, 80%); height: 1px; margin: 26px auto 32px; background: linear-gradient(90deg, transparent, var(--bd-brass), transparent); }
.bd-n { font: italic 500 22px/1 "Playfair Display", Georgia, serif; color: var(--bd-gold); }
.bd-btn { display: inline-flex; align-items: center; min-height: 54px; padding: 0 32px; background: var(--bd-brass); color: #122233; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.bd-btn:hover { background: #fff; }
.bd-tl { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid var(--bd-brass); }
.bd-tl .arr { width: 22px; height: 11px; }
.bd-tl--dark { color: var(--bd-ink); margin-top: 10px; }

/* hero: the stage */
.bd-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(48px, 5vw, 72px); background: var(--bd-stage); color: #fff; }
.bd-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 70% at 78% 30%, rgba(112, 76, 255, .34), transparent 70%), radial-gradient(50% 60% at 10% 100%, rgba(201, 163, 90, .16), transparent 70%); }
.bd-hero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.bd-hero .bd-k { color: var(--bd-light); }
.bd-h { margin: 0; font: 500 clamp(44px, 5.6vw, 84px)/1.02 "Playfair Display", Georgia, serif; color: #fff; text-wrap: balance; }
.bd-h em { display: block; font-style: italic; color: var(--bd-light); }
.bd-lede { margin: 26px 0 0; max-width: 34em; font: 400 clamp(18px, 1.45vw, 20px)/1.7 "Work Sans", sans-serif; color: #d9dde3; }
.bd-btns { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; margin-top: 34px; }
.bd-ticks { list-style: none; margin: 38px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 10px; }
.bd-ticks li { position: relative; padding-left: 26px; font: 400 16px/1.5 "Work Sans", sans-serif; color: #c9ced6; }
.bd-ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 1px; background: var(--bd-brass); }
.bd-hero-media { position: relative; justify-self: center; width: min(100%, 380px, calc((100svh - 300px) * 9 / 16)); min-width: 250px; padding-bottom: 40px; }
.bd-hero-still { position: absolute; left: -38%; bottom: 0; width: 46%; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; border: 6px solid var(--bd-stage); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); z-index: 2; }
.bd-hero-still img { width: 100%; height: 100%; object-fit: cover; }

/* the clips (behaviour from site.js .clip) */
.bd-clip { margin: 0; max-width: none; gap: 12px; }
.bd-clip .clip-media { border-radius: 0; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); outline: 1px solid rgba(201, 163, 90, .35); outline-offset: 10px; }
.bd-clip .clip-sound { left: auto; right: 14px; bottom: 14px; background: rgba(11, 20, 32, .78); color: #fff; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.bd-clip .clip-sound[aria-pressed="true"] { background: var(--bd-brass); color: #122233; }
.bd-clip--hero .bd-cap { text-align: right; }
.bd-cap { margin-top: 14px; font: 400 14px/1.4 "Work Sans", sans-serif; color: #aab1bb; }

/* intro */
.bd-intro { background: #fff; padding-block: clamp(84px, 9vw, 130px); }
.bd-intro .bd-narrow p { margin: 0 auto 18px; max-width: 62ch; font: 400 18px/1.75 "Work Sans", sans-serif; color: var(--bd-text); }
.bd-points { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--bd-line); }
.bd-points li { display: grid; gap: 10px; align-content: start; padding: 32px clamp(20px, 2.5vw, 36px) 8px; border-left: 1px solid var(--bd-line); }
.bd-points li:first-child { border-left: 0; padding-left: 0; }
.bd-points b { font: 500 26px/1.2 "Playfair Display", Georgia, serif; color: var(--bd-ink); }
.bd-points p { margin: 0; font: 400 17px/1.65 "Work Sans", sans-serif; color: var(--bd-text); }

/* watch: clip + stills on the dark stage */
.bd-watch { position: relative; isolation: isolate; padding-block: clamp(84px, 9vw, 130px); background: var(--bd-stage); }
.bd-watch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 50% at 50% 0%, rgba(112, 76, 255, .22), transparent 70%); }
.bd-watch .bd-k { color: var(--bd-light); }
.bd-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); align-items: start; }
.bd-clip--grid { grid-column: 1; }
.bd-clip--grid .clip-media { outline: 0; }
.bd-ph { margin: 0; aspect-ratio: 9 / 16; overflow: hidden; background: #151f2c; }
.bd-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.bd-ph:hover img { transform: scale(1.04); }
.bd-ph--1, .bd-ph--3 { margin-top: clamp(40px, 6vw, 96px); }
.bd-note { margin: 28px 0 0; text-align: center; font: 400 14px/1.4 "Work Sans", sans-serif; color: #8e97a3; }

/* the night */
.bd-night { padding-block: clamp(84px, 9vw, 130px); background: #f7f3ec; }
.bd-moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.bd-moments::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--bd-brass); }
.bd-moments li { position: relative; display: grid; gap: 10px; align-content: start; padding: 40px clamp(14px, 1.6vw, 24px) 0 0; }
.bd-moments li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: #f7f3ec; border: 1px solid var(--bd-brass); }
.bd-moments b { font: 500 23px/1.2 "Playfair Display", Georgia, serif; color: var(--bd-ink); }
.bd-moments p { margin: 0; font: 400 16px/1.65 "Work Sans", sans-serif; color: var(--bd-text); }
.bd-moments a, .bd-q a, .bd-flip a, .bd-hist-txt a:not(.bd-tl), .bd-region a { color: inherit; text-decoration: underline; text-decoration-color: var(--bd-brass); text-underline-offset: 4px; }

/* combos */
.bd-combo { padding-block: clamp(84px, 9vw, 130px); background: #fff; }
.bd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.bd-card { position: relative; display: grid; gap: 10px; align-content: start; padding: clamp(28px, 3vw, 44px); background: #f7f3ec; border-top: 2px solid var(--bd-brass); }
.bd-card:nth-child(2) { background: #122233; }
.bd-card:nth-child(2) h3 { color: #fff; }
.bd-card:nth-child(2) p:not(.bd-card-k) { color: #d9dde3; }
.bd-card:nth-child(2) .bd-card-k, .bd-card:nth-child(2) .bd-n { color: var(--bd-light); }
.bd-card h3 { margin: 8px 0 0; font: 500 clamp(26px, 2.3vw, 32px)/1.15 "Playfair Display", Georgia, serif; color: var(--bd-ink); }
.bd-card-k { margin: 0; font: 600 12px/1.4 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--bd-gold); }
.bd-card p:not(.bd-card-k) { margin: 6px 0 0; font: 400 17px/1.65 "Work Sans", sans-serif; color: var(--bd-text); }
.bd-flip { margin: clamp(36px, 4vw, 52px) auto 0; max-width: 70ch; text-align: center; font: 400 17px/1.7 "Work Sans", sans-serif; color: var(--bd-text); }

/* fit questions */
.bd-fit { padding-block: clamp(84px, 9vw, 130px); background: #efe8dc radial-gradient(rgba(18, 34, 51, .05) 1px, transparent 1.2px) 0 0 / 5px 5px; }
.bd-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.bd-q { padding: clamp(26px, 3vw, 40px); background: #fff; box-shadow: 0 24px 50px -40px rgba(18, 34, 51, .5); }
.bd-q h3 { margin: 0 0 12px; font: 500 26px/1.2 "Playfair Display", Georgia, serif; color: var(--bd-ink); }
.bd-q p { margin: 0; font: 400 17px/1.7 "Work Sans", sans-serif; color: var(--bd-text); }

/* history */
.bd-history { padding-block: clamp(84px, 9vw, 130px); background: #fff; }
.bd-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.bd-hist-ph { position: relative; padding-bottom: 18%; }
.bd-hist-ph figure { margin: 0; }
.bd-hist-ph img { display: block; width: 100%; object-fit: cover; }
.bd-hist-a img { aspect-ratio: 4 / 3; }
.bd-hist-b { position: absolute; right: -4%; bottom: 0; width: 46%; border: 8px solid #fff; background: #fff; box-shadow: 0 30px 60px -30px rgba(18, 34, 51, .5); }
.bd-hist-b img { aspect-ratio: 4 / 5; }
.bd-hist-ph figcaption { margin-top: 8px; font: 400 13px/1.4 "Work Sans", sans-serif; color: #6b7480; }
.bd-hist-a figcaption { max-width: 50%; }
.bd-hist-txt p:not(.bd-k) { margin: 18px 0 0; font: 400 18px/1.75 "Work Sans", sans-serif; color: var(--bd-text); }
.bd-hist-txt .bd-h2 { margin-bottom: 6px; }

/* planning */
.bd-plan { padding-block: clamp(84px, 9vw, 130px); background: #122233; }
.bd-plan .bd-k { color: var(--bd-light); }
.bd-plan-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.bd-steps { list-style: none; margin: 40px 0 0; padding: 0; counter-reset: bd; display: grid; gap: 0; }
.bd-steps li { counter-increment: bd; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.bd-steps li::before { content: "0" counter(bd); grid-row: 1 / span 2; font: italic 500 30px/1 "Playfair Display", Georgia, serif; color: var(--bd-light); }
.bd-steps b { font: 500 23px/1.25 "Playfair Display", Georgia, serif; color: #fff; }
.bd-steps p { margin: 6px 0 0; font: 400 17px/1.65 "Work Sans", sans-serif; color: #c9ced6; }
.bd-asks { padding: clamp(28px, 3vw, 44px); background: #fff; border-top: 2px solid var(--bd-brass); }
.bd-asks h3 { margin: 0 0 18px; font: 500 26px/1.2 "Playfair Display", Georgia, serif; color: var(--bd-ink); }
.bd-asks ul { list-style: none; margin: 0; padding: 0; }
.bd-asks li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--bd-line); font: 400 16px/1.5 "Work Sans", sans-serif; color: var(--bd-text); }
.bd-asks li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 1.5px solid var(--bd-gold); border-bottom: 1.5px solid var(--bd-gold); transform: rotate(-45deg); }
.bd-asks p { margin: 18px 0 0; font: 400 15px/1.6 "Work Sans", sans-serif; color: var(--bd-text); }
.bd-asks a { color: inherit; text-decoration-color: var(--bd-brass); text-underline-offset: 4px; }
.bd-region { padding-block: 44px; background: #f7f3ec; }
.bd-region p { margin: 0; font: 400 16px/1.7 "Work Sans", sans-serif; color: var(--bd-text); }

@media (max-width: 1080px) {
  .bd-moments { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .bd-moments::before { display: none; }
}
@media (max-width: 899px) {
  .bd-hero-in, .bd-split, .bd-plan-in { grid-template-columns: minmax(0, 1fr); }
  .bd-hero-media { width: min(78%, 340px); min-width: 0; justify-self: end; margin-right: 4%; }
  .bd-hero-still { left: -34%; width: 50%; }
  .bd-points { grid-template-columns: minmax(0, 1fr); }
  .bd-points li, .bd-points li:first-child { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--bd-line); }
  .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-clip--grid { grid-column: 1 / -1; width: min(100%, 420px); justify-self: center; }
  .bd-ph--1, .bd-ph--3 { margin-top: 0; }
  .bd-ph--2, .bd-ph--4 { margin-top: 40px; }
  .bd-cards, .bd-qs { grid-template-columns: minmax(0, 1fr); }
  .bd-hist-ph { margin-right: 4%; }
}
@media (max-width: 640px) {
  .bd-moments { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .bd-moments li { padding: 22px 0 22px 30px; border-left: 1px solid var(--bd-brass); }
  .bd-moments li::before { left: -6px; top: 26px; }
  .bd-hero-media { width: 76%; }
  .bd-hist-a figcaption { max-width: 48%; }
  .bd-steps li { grid-template-columns: 46px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .bd-ph img { transition: none; } }

/* footer fix (owner, 22 Oct 2026): with Vendors added the links ran to a third column and under the rule beside MENZO.
   Desktop: links stay in two columns of five, and the outer columns reserve the width of the links and the tagline,
   so the rules only fill the space that's left. */
.afo-links { grid-template-rows: repeat(5, auto); gap: 10px 48px; }
.afo-tag { text-wrap: balance; }
@media (min-width: 1101px) {
  .afo-top { grid-template-columns: minmax(250px, 1fr) minmax(24px, .45fr) auto minmax(24px, .45fr) minmax(250px, 1fr); gap: 24px; }
  .afo-tag { max-width: 250px; margin-top: clamp(22px, calc(22px + (1440px - 100vw) * .1), 60px); }
  .afo-tag span { white-space: nowrap; letter-spacing: .18em; }
}

/* ---------- /thank-you/ (owner, 22 Oct 2026): a note from Dave beside his portrait, then next steps and places to look ---------- */
:is(.ty-letter, .ty-next, .ty-more) { --ty-ink: #122233; --ty-text: #2f3a47; --ty-gold: #a27a2e; --ty-brass: #c9a35a; --ty-light: #e3c48a; --ty-line: #e4dccd; }
.ty-narrow { max-width: 820px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); text-align: center; }
.ty-wide { max-width: 1180px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); }
.ty-letter { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 8vw, 120px); background: #f4f1ec; }
.ty-letter::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 38%; background: #122233; }
.ty-letter-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ty-portrait { position: relative; margin: 0; padding: 0 0 28px 28px; }
.ty-portrait::before { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 82%; height: 82%; border: 1px solid var(--ty-brass); }
.ty-portrait-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.ty-portrait-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ty-portrait figcaption { position: absolute; right: -18px; bottom: 56px; display: grid; gap: 4px; padding: 16px 22px; background: #fff; font: 400 14px/1.3 "Work Sans", sans-serif; color: var(--ty-text); box-shadow: 0 20px 40px -24px rgba(18, 34, 51, .5); }
.ty-portrait figcaption b { font: 500 21px/1.1 "Playfair Display", Georgia, serif; color: var(--ty-ink); }
.ty-note { position: relative; padding: clamp(36px, 4.5vw, 64px) clamp(28px, 4.5vw, 64px); background: #fff; box-shadow: 0 30px 70px -45px rgba(18, 34, 51, .45); }
.ty-note::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--ty-line); pointer-events: none; }
.ty-kick { margin: 0 0 16px; font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--ty-gold); }
.ty-h { margin: 0; font: 500 clamp(40px, 4.4vw, 64px)/1.06 "Playfair Display", Georgia, serif; color: var(--ty-ink); text-wrap: balance; }
.ty-h em { font-style: italic; color: var(--ty-gold); }
.ty-rule { display: block; width: 72px; height: 1px; margin: 26px 0; background: var(--ty-brass); }
.ty-note p:not(.ty-kick):not(.ty-sig):not(.ty-signed) { margin: 0 0 1em; max-width: 38em; font: 400 clamp(18px, 1.4vw, 20px)/1.75 "Work Sans", sans-serif; color: var(--ty-text); }
.ty-note .ty-date { font-family: "Playfair Display", Georgia, serif !important; font-style: italic; font-size: clamp(21px, 1.7vw, 24px) !important; color: var(--ty-ink) !important; }
.ty-sig { margin: 18px 0 0; font: 400 clamp(64px, 6vw, 84px)/1 "Waterfall", cursive; color: var(--ty-gold); }
.ty-signed { margin: 6px 0 0; font: 600 12.5px/1.4 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ty-ink); }
.ty-k { display: block; margin: 0 0 12px; font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--ty-gold); }
.ty-k--c { text-align: center; }
.ty-h2 { margin: 0 0 clamp(36px, 4vw, 56px); text-align: center; font: 500 clamp(34px, 3.8vw, 54px)/1.08 "Playfair Display", Georgia, serif; color: var(--ty-ink); text-wrap: balance; }
.ty-h2 em { font-style: italic; color: var(--ty-gold); }
.ty-next { padding-block: clamp(72px, 8vw, 120px); background: #fff; }
.ty-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ty-line); }
.ty-steps li { display: grid; gap: 10px; align-content: start; padding: 32px clamp(20px, 2.5vw, 36px) 8px; border-left: 1px solid var(--ty-line); }
.ty-steps li:first-child { border-left: 0; padding-left: 0; }
.ty-n { font: italic 500 24px/1 "Playfair Display", Georgia, serif; color: var(--ty-gold); }
.ty-steps b { font: 500 26px/1.2 "Playfair Display", Georgia, serif; color: var(--ty-ink); }
.ty-steps p { margin: 0; font: 400 17px/1.65 "Work Sans", sans-serif; color: var(--ty-text); }
.ty-more { padding-block: clamp(72px, 8vw, 120px); background: #f7f3ec; }
.ty-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ty-card { display: grid; gap: 8px; text-decoration: none; color: var(--ty-ink); }
.ty-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 10px; }
.ty-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.ty-card:hover .ty-ph img { transform: scale(1.04); }
.ty-card .ty-k { margin: 0; }
.ty-card b { display: inline-flex; gap: 10px; align-items: center; font: 500 24px/1.2 "Playfair Display", Georgia, serif; }
.ty-card .arr { width: 22px; height: 11px; color: var(--ty-gold); transition: transform .3s; }
.ty-card:hover .arr { transform: translateX(4px); }
@media (max-width: 899px) {
  .ty-letter-in { grid-template-columns: minmax(0, 1fr); }
  .ty-letter::before { width: 100%; height: 300px; bottom: auto; }
  .ty-portrait { width: min(78%, 360px); margin: 0 auto; }
  .ty-portrait figcaption { right: -12px; bottom: 44px; padding: 12px 16px; }
}
@media (max-width: 760px) {
  .ty-steps, .ty-cards { grid-template-columns: minmax(0, 1fr); }
  .ty-steps li, .ty-steps li:first-child { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--ty-line); }
  .ty-ph { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .ty-ph img, .ty-card .arr { transition: none; } }

/* ---------- editorial template: guides, Planning, For planners, FAQ (owner's pick 22 Oct 2026: option 8.8, larger type) ----------
   Wide cover photo with a white title card over it, key takeaways as cards, contents, then each chapter as a white card that
   opens on a photo, with check bullets and a "Good to know" box. Linen ground. */
:is(.ed-cover, .ed-main) { --ed-ink: #122233; --ed-text: #2f3a47; --ed-muted: #6b7480; --ed-gold: #a27a2e; --ed-brass: #c9a35a; --ed-line: #e4dccd; --ed-ground: #f4f1ec; --ed-col: 880px; }
.ed-wide { max-width: 1180px; margin: 0 auto; padding-inline: max(16px, var(--gutter)); }
.ed-k { margin: 0 0 18px; font: 600 13.5px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--ed-gold); }
.ed-n { font: italic 500 24px/1 "Playfair Display", Georgia, serif; color: var(--ed-gold); }

/* cover */
.ed-cover { position: relative; background: var(--ed-ground); padding-bottom: 8px; }
.ed-cover-ph { aspect-ratio: 16 / 7; max-height: 620px; width: 100%; overflow: hidden; background: var(--ed-line); }
.ed-cover-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ed-card { position: relative; width: min(820px, calc(100% - 2 * max(16px, var(--gutter)))); margin: -140px auto 0; padding: clamp(32px, 4vw, 52px) clamp(24px, 4.5vw, 64px) clamp(30px, 3.5vw, 44px); background: #fff; text-align: center; }
.ed-card .crumbs { margin-bottom: 18px; justify-content: center; font: 400 14px/1.4 "Work Sans", sans-serif; color: var(--ed-muted); }
.ed-card .crumbs a { color: inherit; }
.ed-kick { margin: 0 0 16px; font: 600 13.5px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--ed-gold); }
.ed-h1 { margin: 0; font: 500 clamp(46px, 6vw, 96px)/1.02 "Playfair Display", Georgia, serif; color: var(--ed-ink); text-transform: none; text-wrap: balance; }
.ed-h1 em { font-style: italic; color: var(--ed-gold); }
.ed-lede { margin: 22px auto 0; max-width: 34em; font: 400 clamp(19px, 1.6vw, 22px)/1.6 "Work Sans", sans-serif; color: var(--ed-text); }
.ed-by { display: inline-flex; gap: 12px; align-items: center; margin: 24px 0 0; text-align: left; font: 600 15px/1.3 "Work Sans", sans-serif; color: var(--ed-ink); }
.ed-by small { display: block; font-weight: 400; font-size: 14px; color: var(--ed-muted); }
.ed-av { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--ed-ink); color: #e3c48a; font: italic 500 20px/1 "Playfair Display", Georgia, serif; }
.ed-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 28px; align-items: center; margin-top: 28px; }
.ed-btn { display: inline-flex; align-items: center; min-height: 56px; padding: 0 32px; background: var(--ed-ink); color: #fff; font: 600 14px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.ed-btn:hover { background: var(--ed-brass); color: var(--ed-ink); }
.ed-tl { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font: 600 14px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-ink); text-decoration: none; border-bottom: 1px solid var(--ed-brass); }
.ed-tl .arr { width: 22px; height: 11px; }
.ed-credit { margin: 14px auto 0; padding-inline: 16px; text-align: center; font: 400 14px/1.45 "Work Sans", sans-serif; color: var(--ed-muted); }

/* key takeaways + contents */
.ed-main { background: var(--ed-ground); padding-block: clamp(48px, 5vw, 72px) clamp(72px, 8vw, 120px); }
.ed-glance ol, .ed-toc ol { list-style: none; margin: 0; padding: 0; }
.ed-glance ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.ed-glance li { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 30px); background: #fff; border-radius: 14px; }
.ed-glance b { font: 500 26px/1.22 "Playfair Display", Georgia, serif; color: var(--ed-ink); }
.ed-glance li p { margin: 0; font: 400 17.5px/1.6 "Work Sans", sans-serif; color: var(--ed-text); }
.ed-glance a, .ed-read a:not(.wfeature):not(.tlink) { color: inherit; text-decoration: underline; text-decoration-color: var(--ed-brass); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ed-toc { margin-top: clamp(36px, 4vw, 52px); }
.ed-toc ol { columns: 2; column-gap: 44px; }
.ed-toc li { break-inside: avoid; }
.ed-toc a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 6px; padding: 9px 0; font: 400 17.5px/1.45 "Work Sans", sans-serif; color: var(--ed-ink); text-decoration: none; }
.ed-toc a span { font: italic 500 17.5px/1.45 "Playfair Display", Georgia, serif; color: var(--ed-gold); }
.ed-toc a:hover { color: var(--ed-gold); }

/* the reading column: white cards on linen */
.ed-read { max-width: calc(var(--ed-col) + 2 * max(16px, var(--gutter))); margin: clamp(40px, 5vw, 64px) auto 0; padding-inline: max(16px, var(--gutter)); display: grid; gap: 28px; }
.ed-intro, .ed-ch { background: #fff; border-radius: 14px; overflow: hidden; }
.ed-intro { padding: clamp(28px, 4vw, 48px) clamp(22px, 5vw, 60px); }
.ed-ch-txt { padding: clamp(26px, 3vw, 36px) clamp(22px, 5vw, 60px) clamp(32px, 4vw, 52px); }
.ed-ch { scroll-margin-top: 120px; }
.ed-read p, .ed-read li { font: 400 clamp(18px, 1.45vw, 20.5px)/1.75 "Work Sans", sans-serif; color: var(--ed-text); }
.ed-read p { margin: 0 0 1.1em; }
.ed-read strong, .ed-read b { font-weight: 600; color: var(--ed-ink); }
.ed-intro > p:first-of-type { font-size: clamp(20px, 1.7vw, 23px); line-height: 1.65; color: var(--ed-ink); }
.ed-intro > p:first-of-type::first-letter { float: left; margin: .08em .12em 0 0; font: 500 4.3em/.8 "Playfair Display", Georgia, serif; color: var(--ed-gold); }
.ed-intro > :last-child, .ed-ch-txt > :last-child { margin-bottom: 0; }
.ed-chph { margin: 0; }
.ed-chph span { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--ed-line); }
.ed-chph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ed-chph figcaption { padding: 10px clamp(22px, 5vw, 60px) 0; font: 400 14px/1.45 "Work Sans", sans-serif; color: var(--ed-muted); }
.ed-ch-h { display: grid; gap: 12px; margin-bottom: 22px; }
.ed-ch-n { font: italic 500 24px/1 "Playfair Display", Georgia, serif; color: var(--ed-gold); }
.ed-ch h2 { margin: 0; font: 500 clamp(32px, 3.6vw, 54px)/1.12 "Playfair Display", Georgia, serif; color: var(--ed-ink); text-transform: none; letter-spacing: 0; text-wrap: balance; scroll-margin-top: 120px; }
.ed-ch h2 em { font-style: italic; color: var(--ed-gold); }
.ed-read h3 { margin: 1.8em 0 .55em; font: 500 clamp(23px, 2vw, 28px)/1.25 "Playfair Display", Georgia, serif; color: var(--ed-ink); text-transform: none; letter-spacing: 0; }
.ed-read h4 { margin: 1.6em 0 .4em; font: 600 13.5px/1.4 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-gold); }
.ed-read ul, .ed-read ol { margin: 0 0 1.3em; padding: 0; list-style: none; }
.ed-read ul > li, .ed-read ol > li { position: relative; padding-left: 32px; margin-bottom: .55em; }
.ed-read ul > li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 12px; height: 7px; border-left: 2px solid var(--ed-gold); border-bottom: 2px solid var(--ed-gold); transform: rotate(-45deg); }
.ed-read ol { counter-reset: ed; }
.ed-read ol > li { counter-increment: ed; }
.ed-read ol > li::before { content: counter(ed); position: absolute; left: 0; top: 0; font: italic 500 1em/1.75 "Playfair Display", Georgia, serif; color: var(--ed-gold); }
.ed-read blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 2px solid var(--ed-brass); }
/* "Good to know": the chapter's own closing paragraph */
.ed-tip { margin-top: 26px; padding: 22px 26px; background: #fbf3e2; border-left: 3px solid var(--ed-brass); border-radius: 0 10px 10px 0; }
.ed-tip b { font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-gold); }
.ed-tip p { margin: 8px 0 0 !important; font-size: clamp(18px, 1.45vw, 20px) !important; color: var(--ed-ink) !important; }
/* tables */
.ed-read .table-wrap { margin: 1.6em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ed-read table { width: 100%; min-width: 520px; border-collapse: collapse; font: 400 16px/1.5 "Work Sans", sans-serif; color: var(--ed-text); }
.ed-read th { padding: 12px 14px 10px 0; text-align: left; border-bottom: 1px solid var(--ed-ink); font: 600 12px/1.4 "Work Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-ink); }
.ed-read td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--ed-line); vertical-align: top; }
.ed-read td:first-child { font-weight: 500; color: var(--ed-ink); }
/* photos inside a chapter fill the card's text width */
.ed-read .fig, .ed-read .photos, .ed-read .doc-break, .ed-read .doc-pair { margin: clamp(28px, 3vw, 40px) 0; width: 100%; max-width: 100%; transform: none; }
.ed-read .fig img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 8px; }
.ed-read .photos-row { display: flex; gap: 12px; }
.ed-read .photos-row > span { height: clamp(220px, 28vw, 420px); border-radius: 8px; }
.ed-read .photos-row img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ed-read figcaption { margin-top: 10px; font: 400 14px/1.45 "Work Sans", sans-serif; color: var(--ed-muted); }
/* wedding feature card */
.ed-read .wfeature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); margin: clamp(28px, 3vw, 40px) 0; background: var(--ed-ground); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--ed-ink); }
.ed-read .wfeature-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.ed-read .wfeature-img img { width: 100%; height: 100%; object-fit: cover; }
.ed-read .wfeature-txt { display: grid; align-content: center; gap: 8px; padding: clamp(22px, 3vw, 36px); }
.ed-read .wfeature .label { font: 600 12px/1.4 "Work Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--ed-gold); }
.ed-read .wfeature-name { font: 500 32px/1.1 "Playfair Display", Georgia, serif; color: var(--ed-ink); }
.ed-read .wfeature-where { font: 400 16px/1.5 "Work Sans", sans-serif; color: var(--ed-text); }
.ed-read .wfeature .tlink { margin-top: 8px; display: inline-flex; gap: 10px; align-items: center; font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-ink); }
/* review pull quote between chapters */
.ed-pull { margin: 12px 0; padding: clamp(28px, 4vw, 44px) clamp(22px, 5vw, 60px); background: #0f1b2b; border-radius: 14px; text-align: center; }
.ed-pull blockquote { margin: 0; padding: 0; border: 0; }
.ed-pull p { margin: 0; font: italic 400 clamp(26px, 2.8vw, 38px)/1.3 "Playfair Display", Georgia, serif !important; color: #fff !important; text-wrap: balance; }
.ed-pull figcaption { margin-top: 18px; font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #e3c48a; }

@media (max-width: 899px) {
  .ed-cover-ph { aspect-ratio: 4 / 3; }
  .ed-card { margin-top: -56px; width: calc(100% - 32px); }
  .ed-glance ol { grid-template-columns: minmax(0, 1fr); }
  .ed-toc ol { columns: 1; }
  .ed-chph span { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .ed-read .wfeature { grid-template-columns: minmax(0, 1fr); }
  .ed-read .wfeature-img { aspect-ratio: 16 / 10; }
  .ed-read .photos-row { flex-direction: column; }
  .ed-read .photos-row > span { flex: none !important; height: auto; }
  .ed-read .photos-row img { height: auto; }
  .ed-by { text-align: left; }
}

/* editorial pages: question blocks in the same type as the chapters */
.ed-faq .mk-faq-h { font: 500 clamp(28px, 2.6vw, 38px)/1.15 "Playfair Display", Georgia, serif; text-transform: none; letter-spacing: 0; color: #122233; }
.ed-faq .mk-faq-h span { font: italic 500 .62em/1 "Playfair Display", Georgia, serif; color: #a27a2e; margin-right: 12px; }
.ed-faq .mk-faq summary { font: 500 clamp(19px, 1.5vw, 21px)/1.35 "Playfair Display", Georgia, serif; color: #122233; }
.ed-faq .mk-faq .mk-body p, .ed-faq .mk-prose p { font: 400 17px/1.75 "Work Sans", sans-serif; color: #2f3a47; }

/* ---------- /guide-options/ (preview only): 10 treatments of the editorial guide page ---------- */
.gv-page { --ink: #122233; --text: #2f3a47; --muted: #6b7480; --gold: #a27a2e; --brass: #c9a35a; --light: #e3c48a; --line: #e4dccd; --ivory: #f7f3ec; background: #e9e4da; padding-bottom: 80px; }
.gv-top { max-width: 1100px; margin: 0 auto; padding: 56px max(16px, var(--gutter)) 24px; }
.gv-top h1 { margin: 0; font: 500 44px/1.1 "Playfair Display", Georgia, serif; color: var(--ink); }
.gv-top p { font: 400 17px/1.6 "Work Sans", sans-serif; color: var(--text); max-width: 60ch; }
.gv-top nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gv-top nav a { padding: 8px 14px; background: #fff; border-radius: 999px; font: 500 13px/1 "Work Sans", sans-serif; color: var(--ink); text-decoration: none; }
.gv { position: relative; max-width: 1280px; margin: 56px auto 0; background: #fff; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(18, 34, 51, .45); }
.gv-label { position: absolute; top: 14px; left: 14px; z-index: 9; display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: #e2bf72; color: #122233; font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.gv-label span { padding-right: 10px; border-right: 1px solid rgba(18, 34, 51, .35); }
/* shared bones */
.gv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gv-cover { position: relative; }
.gv-cover-ph { overflow: hidden; }
.gv-crumbs { margin: 0 0 22px; font: 400 13px/1.4 "Work Sans", sans-serif; color: var(--muted); }
.gv-kick, .gv-k { margin: 0 0 16px; font: 600 12px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.gv-h1 { margin: 0; font: 500 clamp(44px, 5vw, 76px)/1.04 "Playfair Display", Georgia, serif; color: var(--ink); }
.gv-h1 em { font-style: italic; color: var(--gold); }
.gv-lede { margin: 22px 0 0; max-width: 34em; font: 400 19px/1.65 "Work Sans", sans-serif; color: var(--text); }
.gv-by { margin: 22px 0 0; font: 500 11.5px/1.5 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gv-acts { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin: 26px 0 0; }
.gv-btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 28px; background: var(--ink); color: #fff; font: 600 12.5px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.gv-tl { display: inline-flex; gap: 10px; align-items: center; font: 600 12.5px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--brass); }
.gv-tl .arr { width: 22px; height: 11px; }
.gv-credit { margin: 10px 0 0; font: 400 12.5px/1.4 "Work Sans", sans-serif; color: var(--muted); }
.gv-main { padding: 64px 7% 80px; }
.gv-glance ol, .gv-toc ol { list-style: none; margin: 0; padding: 0; }
.gv-glance ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.gv-glance li { display: grid; gap: 8px; align-content: start; }
.gv-n { font: italic 500 20px/1 "Playfair Display", Georgia, serif; color: var(--gold); }
.gv-glance b { font: 500 22px/1.25 "Playfair Display", Georgia, serif; color: var(--ink); }
.gv-glance p, .gv-glance li p { margin: 0; font: 400 15.5px/1.6 "Work Sans", sans-serif; color: var(--text); }
.gv-toc { margin-top: 44px; }
.gv-toc ol { columns: 2; column-gap: 36px; }
.gv-toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 7px 0; font: 400 15px/1.45 "Work Sans", sans-serif; color: var(--ink); text-decoration: none; break-inside: avoid; }
.gv-toc a span { font: italic 500 15px/1.45 "Playfair Display", Georgia, serif; color: var(--gold); }
.gv-read { max-width: 680px; margin: 56px auto 0; }
.gv-read p, .gv-read li { font: 400 18px/1.8 "Work Sans", sans-serif; color: var(--text); }
.gv-read p { margin: 0 0 1.1em; }
.gv-read a { color: inherit; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.gv-read ul { list-style: none; padding: 0; margin: 0 0 1.3em; }
.gv-read ul li { position: relative; padding-left: 28px; margin-bottom: .5em; }
.gv-read ul li::before { content: ""; position: absolute; left: 2px; top: .9em; width: 14px; height: 1px; background: var(--brass); }
.gv-intro > p:first-child::first-letter { float: left; margin: .08em .12em 0 0; font: 500 4.3em/.8 "Playfair Display", Georgia, serif; color: var(--gold); }
.gv-intro p { font-size: 20px; color: var(--ink); }
.gv-ch { margin-top: 56px; }
.gv-ch-h { display: grid; gap: 12px; margin-bottom: 22px; padding-top: 24px; border-top: 1px solid var(--line); }
.gv-ch-n { font: italic 500 19px/1 "Playfair Display", Georgia, serif; color: var(--gold); }
.gv-ch h3 { margin: 0; font: 500 clamp(28px, 2.8vw, 40px)/1.15 "Playfair Display", Georgia, serif; color: var(--ink); }
.gv-ch h3 em { font-style: italic; color: var(--gold); }
.gv-chph { display: none; margin: 0 0 28px; }

/* 1 · Ivory split (current draft) */
.gv-1 .gv-cover { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; padding: 88px 7% 72px; background: var(--ivory); }
.gv-1 .gv-cover-ph { order: 2; aspect-ratio: 4 / 5; }
.gv-1 .gv-credit { position: absolute; right: 7%; bottom: 40px; }
.gv-1 .gv-glance ol { border-top: 1px solid var(--ink); padding-top: 24px; }
.gv-1 .gv-toc { max-width: 680px; margin-inline: auto; padding-top: 26px; border-top: 1px solid var(--line); }

/* 2 · Full-bleed cover: the photo is the cover, title centred over it */
.gv-2 .gv-cover { min-height: 640px; display: grid; place-items: end center; text-align: center; padding: 0 8% 72px; color: #fff; isolation: isolate; }
.gv-2 .gv-cover-ph { position: absolute; inset: 0; z-index: -2; }
.gv-2 .gv-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 18, 28, .1) 30%, rgba(10, 18, 28, .78)); }
.gv-2 .gv-h1 { color: #fff; font-size: clamp(52px, 6.4vw, 96px); }
.gv-2 .gv-h1 em, .gv-2 .gv-kick { color: var(--light); }
.gv-2 .gv-crumbs, .gv-2 .gv-by { color: rgba(255, 255, 255, .75); }
.gv-2 .gv-lede { margin-inline: auto; color: rgba(255, 255, 255, .92); }
.gv-2 .gv-acts { justify-content: center; }
.gv-2 .gv-btn { background: var(--brass); color: var(--ink); }
.gv-2 .gv-tl { color: #fff; }
.gv-2 .gv-credit { position: absolute; left: 24px; bottom: 16px; color: rgba(255, 255, 255, .7); }
.gv-2 .gv-glance { text-align: center; }
.gv-2 .gv-glance li { padding: 0 12px; }
.gv-2 .gv-toc { text-align: center; } .gv-2 .gv-toc ol { columns: 1; } .gv-2 .gv-toc a { display: block; } .gv-2 .gv-toc a span { margin-right: 10px; }

/* 3 · Midnight: navy and gold, photo framed */
.gv-3 { background: #0f1b2b; }
.gv-3 .gv-cover { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; padding: 96px 7%; }
.gv-3 .gv-cover-ph { aspect-ratio: 4 / 5; outline: 1px solid rgba(201, 163, 90, .5); outline-offset: 14px; }
.gv-3 .gv-h1, .gv-3 .gv-glance b, .gv-3 .gv-ch h3, .gv-3 .gv-toc a, .gv-3 .gv-intro p { color: #fff; }
.gv-3 .gv-h1 em, .gv-3 .gv-ch h3 em, .gv-3 .gv-kick, .gv-3 .gv-k, .gv-3 .gv-n, .gv-3 .gv-ch-n, .gv-3 .gv-toc a span { color: var(--light); }
.gv-3 .gv-lede, .gv-3 .gv-read p, .gv-3 .gv-read li, .gv-3 .gv-glance p { color: #c9ced6; }
.gv-3 .gv-crumbs, .gv-3 .gv-by, .gv-3 .gv-credit { color: #8e97a3; }
.gv-3 .gv-btn { background: var(--brass); color: var(--ink); } .gv-3 .gv-tl { color: #fff; }
.gv-3 .gv-ch-h { border-color: rgba(255, 255, 255, .14); }
.gv-3 .gv-glance ol { border-block: 1px solid rgba(201, 163, 90, .4); padding-block: 28px; }

/* 4 · Magazine masthead: centred Bodoni title, wide photo below */
.gv-4 .gv-cover { display: flex; flex-direction: column; text-align: center; padding: 96px 7% 0; }
.gv-4 .gv-cover-txt { order: 1; }
.gv-4 .gv-cover-ph { order: 2; margin-top: 56px; aspect-ratio: 21 / 9; }
.gv-4 .gv-credit { order: 3; text-align: left; }
.gv-4 .gv-h1 { font: 400 clamp(60px, 8vw, 128px)/.95 "Bodoni Moda", Georgia, serif; letter-spacing: -.01em; }
.gv-4 .gv-lede { margin-inline: auto; text-align: center; }
.gv-4 .gv-acts { justify-content: center; }
.gv-4 .gv-crumbs { display: none; }
.gv-4 .gv-kick { display: inline-block; padding: 8px 0; border-block: 1px solid var(--ink); color: var(--ink); }
.gv-4 .gv-ch h3 { font-family: "Bodoni Moda", Georgia, serif; font-weight: 400; }
.gv-4 .gv-glance ol { gap: 0; } .gv-4 .gv-glance li { padding: 0 28px; border-left: 1px solid var(--line); } .gv-4 .gv-glance li:first-child { border: 0; padding-left: 0; }

/* 5 · Journal with side contents: sticky contents left, text right */
.gv-5 .gv-cover { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.gv-5 .gv-cover-txt { display: grid; align-content: center; padding: 72px 10% 72px 14%; background: var(--ivory); }
.gv-5 .gv-credit { position: absolute; right: 18px; bottom: 12px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.gv-5 .gv-main { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 72px; padding-top: 72px; }
.gv-5 .gv-glance { grid-column: 1 / -1; padding: 30px; background: var(--ivory); }
.gv-5 .gv-toc { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: 24px; margin-top: 56px; padding-top: 20px; border-top: 2px solid var(--ink); }
.gv-5 .gv-toc ol { columns: 1; }
.gv-5 .gv-read { grid-column: 2; grid-row: 2; margin: 56px 0 0; }

/* 6 · Margin numerals: giant chapter numbers hang in the left margin */
.gv-6 .gv-cover { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: end; padding: 80px 7% 0; }
.gv-6 .gv-cover-ph { order: 2; aspect-ratio: 3 / 4; margin-bottom: -60px; position: relative; z-index: 2; }
.gv-6 .gv-cover-txt { padding-bottom: 60px; }
.gv-6 .gv-credit { display: none; }
.gv-6 .gv-main { background: var(--ivory); padding-top: 120px; }
.gv-6 .gv-read { max-width: 760px; }
.gv-6 .gv-ch-h { position: relative; border: 0; padding: 0; }
.gv-6 .gv-ch-n { position: absolute; right: calc(100% + 28px); top: -.12em; font: italic 400 110px/1 "Playfair Display", Georgia, serif; color: rgba(162, 122, 46, .35); }
.gv-6 .gv-glance ol { gap: 0; } .gv-6 .gv-glance li { padding: 0 24px; } .gv-6 .gv-glance .gv-n { font-size: 54px; color: rgba(162, 122, 46, .45); }

/* 7 · Two-column editorial: chapters run in two newspaper columns */
.gv-7 .gv-cover { display: grid; grid-template-columns: 1fr; padding: 72px 7% 0; }
.gv-7 .gv-cover-txt { display: grid; grid-template-columns: 7fr 5fr; column-gap: 64px; align-items: end; padding-bottom: 40px; border-bottom: 3px double var(--ink); }
.gv-7 .gv-crumbs, .gv-7 .gv-kick, .gv-7 .gv-h1 { grid-column: 1; }
.gv-7 .gv-lede, .gv-7 .gv-by, .gv-7 .gv-acts { grid-column: 2; }
.gv-7 .gv-lede { grid-row: 3; }
.gv-7 .gv-cover-ph { order: 2; margin-top: 32px; aspect-ratio: 16 / 7; }
.gv-7 .gv-read { max-width: none; }
.gv-7 .gv-ch-body { columns: 2; column-gap: 48px; column-rule: 1px solid var(--line); }
.gv-7 .gv-ch-body p, .gv-7 .gv-ch-body li { font-size: 16.5px; break-inside: avoid; }
.gv-7 .gv-intro { columns: 2; column-gap: 48px; }

/* 8 · Photo-led chapters: every chapter opens on a wide photo */
.gv-8 .gv-cover { display: grid; grid-template-columns: 1fr; }
.gv-8 .gv-cover-ph { aspect-ratio: 16 / 7; }
.gv-8 .gv-cover-txt { width: min(760px, 86%); margin: -120px auto 0; position: relative; padding: 48px 56px; background: #fff; text-align: center; }
.gv-8 .gv-lede { margin-inline: auto; } .gv-8 .gv-acts { justify-content: center; }
.gv-8 .gv-credit { text-align: center; }
.gv-8 .gv-chph { display: block; width: min(1080px, 92vw); margin: 0 0 32px 50%; transform: translateX(-50%); aspect-ratio: 16 / 7; }
.gv-8 .gv-ch-h { border: 0; padding: 0; text-align: center; }

/* 9 · Paper cards: chapters sit on white cards over a linen ground */
.gv-9 { background: #efe8dc; }
.gv-9 .gv-cover { display: grid; grid-template-columns: 5fr 7fr; }
.gv-9 .gv-cover-txt { padding: 80px 10%; display: grid; align-content: center; }
.gv-9 .gv-cover-ph { aspect-ratio: 5 / 4; }
.gv-9 .gv-credit { position: absolute; right: 18px; bottom: 12px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.gv-9 .gv-glance li { padding: 26px; background: #fff; border-top: 2px solid var(--brass); }
.gv-9 .gv-toc { padding: 26px; background: #fff; }
.gv-9 .gv-read { max-width: 860px; }
.gv-9 .gv-intro, .gv-9 .gv-ch { padding: 48px 64px; background: #fff; box-shadow: 0 24px 50px -40px rgba(18, 34, 51, .5); }
.gv-9 .gv-ch { margin-top: 24px; } .gv-9 .gv-ch-h { border: 0; padding: 0; }

/* 10 · Swiss minimal: sans capitals, hairlines, a strict grid */
.gv-10 .gv-cover { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; padding: 64px 5% 0; }
.gv-10 .gv-cover-txt { grid-column: 1 / 8; padding-bottom: 40px; }
.gv-10 .gv-cover-ph { grid-column: 8 / 13; grid-row: 1 / 3; aspect-ratio: 3 / 4; }
.gv-10 .gv-credit { grid-column: 1 / 8; align-self: end; }
.gv-10 .gv-h1 { font: 600 clamp(48px, 5.6vw, 88px)/.95 "Inter Tight", "Work Sans", sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.gv-10 .gv-h1 em { font-style: normal; color: var(--gold); }
.gv-10 .gv-ch h3 { font: 600 30px/1.1 "Inter Tight", "Work Sans", sans-serif; letter-spacing: -.02em; text-transform: uppercase; }
.gv-10 .gv-ch h3 em { font-style: normal; }
.gv-10 .gv-glance b { font: 600 18px/1.25 "Inter Tight", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.gv-10 .gv-n, .gv-10 .gv-ch-n, .gv-10 .gv-toc a span { font: 500 13px/1.4 "Inter Tight", sans-serif; font-style: normal; }
.gv-10 .gv-glance ol { border-top: 1px solid var(--ink); padding-top: 18px; }
.gv-10 .gv-ch-h { border-top: 1px solid var(--ink); grid-template-columns: 60px 1fr; align-items: baseline; }
.gv-10 .gv-intro > p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0; }
.gv-10 .gv-btn { border-radius: 0; background: var(--gold); color: #fff; }

/* captions sit under their photo on every option */
.gv-glance .gv-k { font: 600 12px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.gv-3 .gv-glance .gv-k { color: var(--light); }
.gv-3 .gv-credit { grid-column: 1; margin-top: -48px; }
.gv-5 .gv-credit, .gv-9 .gv-credit { position: static; grid-column: 1; margin: 0; padding: 10px 14px; color: var(--muted); text-shadow: none; }
.gv-9 .gv-credit { padding-inline: 0; }
.gv-7 .gv-credit { order: 3; }
@media (max-width: 899px) {
  .gv .gv-cover, .gv-7 .gv-cover-txt, .gv-5 .gv-main { grid-template-columns: minmax(0, 1fr) !important; }
  .gv .gv-cover-ph { order: 2 !important; grid-column: auto !important; grid-row: auto !important; margin: 24px 0 0 !important; aspect-ratio: 4 / 3 !important; }
  .gv-2 .gv-cover-ph { margin: 0 !important; }
  .gv .gv-cover-txt, .gv-7 .gv-cover-txt > * { grid-column: auto !important; grid-row: auto !important; }
  .gv-1 .gv-cover, .gv-3 .gv-cover, .gv-6 .gv-cover { padding: 64px 6% 40px; }
  .gv-5 .gv-cover-txt, .gv-9 .gv-cover-txt { padding: 56px 6%; }
  .gv-8 .gv-cover-txt { width: auto; margin: 0; padding: 40px 6%; }
  .gv-5 .gv-toc, .gv-5 .gv-read { grid-column: auto; grid-row: auto; position: static; }
  .gv-glance ol { grid-template-columns: minmax(0, 1fr); }
  .gv-toc ol, .gv-7 .gv-ch-body, .gv-7 .gv-intro { columns: 1; }
  .gv-6 .gv-ch-n { position: static; font-size: 48px; }
  .gv-9 .gv-intro, .gv-9 .gv-ch { padding: 32px 22px; }
  .gv-1 .gv-credit, .gv-2 .gv-credit, .gv-5 .gv-credit, .gv-9 .gv-credit { position: static; color: var(--muted); text-shadow: none; padding: 0 6%; }
}

/* ---------- /guide-options-8/ (preview only): option 8 "photo-led chapters", ten ways ---------- */
.g8 { position: relative; max-width: 1280px; margin: 56px auto 0; background: #fff; overflow: clip; box-shadow: 0 30px 70px -40px rgba(18, 34, 51, .45);
  --ink: #122233; --text: #2f3a47; --muted: #6b7480; --gold: #a27a2e; --brass: #c9a35a; --light: #e3c48a; --line: #e4dccd; --ivory: #f7f3ec; }
.g8-label { position: absolute; top: 14px; left: 14px; z-index: 20; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; max-width: calc(100% - 28px); padding: 8px 14px; background: #e2bf72; color: #122233; font: 600 12px/1.3 "Work Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.g8-label span { padding-right: 10px; border-right: 1px solid rgba(18, 34, 51, .35); }
.g8-label i { font-style: normal; font-weight: 400; letter-spacing: .02em; text-transform: none; opacity: .8; }
.g8 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g8-progress { display: none; }
/* base = option 8: wide photo, white title card overlapping, centred */
.g8-cover { position: relative; }
.g8-cover-ph { aspect-ratio: 16 / 7; overflow: hidden; }
.g8-card { position: relative; width: min(780px, 88%); margin: -130px auto 0; padding: 48px 56px 40px; background: #fff; text-align: center; }
.g8-crumbs { margin: 0 0 16px; font: 400 13px/1.4 "Work Sans", sans-serif; color: var(--muted); }
.g8-kick, .g8-k { margin: 0 0 14px; font: 600 12px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.g8-h1 { margin: 0; font: 500 clamp(46px, 5.4vw, 80px)/1.03 "Playfair Display", Georgia, serif; color: var(--ink); }
.g8-h1 em { font-style: italic; color: var(--gold); }
.g8-lede { margin: 20px auto 0; max-width: 34em; font: 400 19px/1.65 "Work Sans", sans-serif; color: var(--text); }
.g8-by { display: inline-flex; gap: 12px; align-items: center; margin: 22px 0 0; text-align: left; font: 600 13px/1.3 "Work Sans", sans-serif; color: var(--ink); }
.g8-by small { display: block; font-weight: 400; color: var(--muted); }
.g8-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--light); font: italic 500 18px/1 "Playfair Display", Georgia, serif; }
.g8-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; align-items: center; margin: 24px 0 0; }
.g8-btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 28px; background: var(--ink); color: #fff; font: 600 12.5px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.g8-tl { display: inline-flex; gap: 10px; align-items: center; font: 600 12.5px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--brass); }
.g8-tl .arr { width: 22px; height: 11px; }
.g8-credit { margin: 14px 0 0; text-align: center; font: 400 12.5px/1.4 "Work Sans", sans-serif; color: var(--muted); }
.g8-jump { display: none; }
.g8-main { padding: 56px 7% 88px; }
.g8-glance ol, .g8-toc ol { list-style: none; margin: 0; padding: 0; }
.g8-glance ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.g8-glance li { display: grid; gap: 8px; align-content: start; }
.g8-n { font: italic 500 20px/1 "Playfair Display", Georgia, serif; color: var(--gold); }
.g8-glance b { font: 500 22px/1.25 "Playfair Display", Georgia, serif; color: var(--ink); }
.g8-glance li p { margin: 0; font: 400 15.5px/1.6 "Work Sans", sans-serif; color: var(--text); }
.g8-toc { margin-top: 44px; }
.g8-toc ol { columns: 2; column-gap: 36px; }
.g8-toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 7px 0; font: 400 15px/1.45 "Work Sans", sans-serif; color: var(--ink); text-decoration: none; break-inside: avoid; }
.g8-toc a span { font: italic 500 15px/1.45 "Playfair Display", Georgia, serif; color: var(--gold); }
.g8-read { max-width: 680px; margin: 56px auto 0; }
.g8-read p, .g8-read li { font: 400 18px/1.8 "Work Sans", sans-serif; color: var(--text); }
.g8-read p { margin: 0 0 1.1em; }
.g8-read a { color: inherit; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.g8-read ul { list-style: none; padding: 0; margin: 0 0 1.3em; }
.g8-read ul li { position: relative; padding-left: 28px; margin-bottom: .5em; }
.g8-read ul li::before { content: ""; position: absolute; left: 2px; top: .9em; width: 14px; height: 1px; background: var(--brass); }
.g8-intro > p { font-size: 20px; color: var(--ink); }
.g8-intro > p:first-child::first-letter { float: left; margin: .08em .12em 0 0; font: 500 4.3em/.8 "Playfair Display", Georgia, serif; color: var(--gold); }
.g8-ch { margin-top: 72px; }
.g8-chph { position: relative; width: min(1080px, 92vw); margin: 0 0 36px 50%; transform: translateX(-50%); }
.g8-pa { display: block; aspect-ratio: 16 / 7; overflow: hidden; }
.g8-pb { display: none; }
.g8-chph figcaption { margin-top: 10px; font: 400 12.5px/1.4 "Work Sans", sans-serif; color: var(--muted); }
.g8-ch-over { display: none; }
.g8-ch-h { display: grid; gap: 10px; justify-items: center; text-align: center; margin-bottom: 24px; }
.g8-step { display: none; }
.g8-ch-n { font: italic 500 20px/1 "Playfair Display", Georgia, serif; color: var(--gold); }
.g8-ch h3 { margin: 0; font: 500 clamp(30px, 3vw, 42px)/1.15 "Playfair Display", Georgia, serif; color: var(--ink); }
.g8-ch h3 em, .g8-ch-t em { font-style: italic; color: var(--gold); }
.g8-tip { display: none; }
.g8-pull { display: none; }

/* 8.1 Cover story (Vogue): photo is the cover; serif captions; pull quote */
.g8-1 .g8-cover-ph { aspect-ratio: 16 / 8; }
.g8-1 .g8-card { margin-top: -160px; border-top: 3px solid var(--ink); }
.g8-1 .g8-by { display: flex; justify-content: center; } .g8-1 .g8-av { display: none; } .g8-1 .g8-by span { text-align: center; text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; }
.g8-1 .g8-chph figcaption { font: italic 400 14px/1.4 "Playfair Display", Georgia, serif; }
.g8-1 .g8-pull { display: block; margin: 80px 0 0; text-align: center; }
.g8-1 .g8-pull p { margin: 0; font: italic 400 clamp(30px, 3vw, 42px)/1.25 "Playfair Display", Georgia, serif; color: var(--ink); }
.g8-1 .g8-pull figcaption { margin-top: 18px; font: 600 12px/1.4 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.g8-1 .g8-glance ol { border-block: 1px solid var(--ink); padding-block: 26px; }

/* 8.2 Jump links (The Knot): left-aligned card, author line, sticky jump bar, step labels */
.g8-2 .g8-card { text-align: left; margin-left: 7%; width: min(720px, 80%); }
.g8-2 .g8-lede { margin-left: 0; } .g8-2 .g8-acts { justify-content: flex-start; }
.g8-2 .g8-credit { text-align: right; padding-right: 7%; margin-top: -26px; }
.g8-2 .g8-jump { position: sticky; top: 0; z-index: 10; display: flex; gap: 8px; overflow-x: auto; padding: 14px 7%; background: rgba(255, 255, 255, .96); border-block: 1px solid var(--line); scrollbar-width: none; }
.g8-2 .g8-jump a { flex: none; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font: 500 13.5px/1 "Work Sans", sans-serif; color: var(--ink); text-decoration: none; }
.g8-2 .g8-jump a:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.g8-2 .g8-toc { display: none; }
.g8-2 .g8-ch-h { justify-items: start; text-align: left; } .g8-2 .g8-ch-n { display: none; }
.g8-2 .g8-step { display: inline-block; padding: 7px 12px; background: var(--ivory); font: 600 11.5px/1 "Work Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.g8-2 .g8-chph { width: 100%; margin-left: 0; transform: none; } .g8-2 .g8-pa { aspect-ratio: 3 / 2; border-radius: 6px; }

/* 8.3 Key takeaways (Brides): navy box, contents pinned left */
.g8-3 .g8-main { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 64px; }
.g8-3 .g8-glance { grid-column: 1 / -1; padding: 34px 40px; background: var(--ink); }
.g8-3 .g8-glance .g8-k { color: var(--light); } .g8-3 .g8-glance b { color: #fff; } .g8-3 .g8-glance li p { color: #c9ced6; } .g8-3 .g8-glance .g8-n { color: var(--light); }
.g8-3 .g8-toc { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: 24px; margin-top: 56px; padding: 20px 0 0; border-top: 2px solid var(--ink); }
.g8-3 .g8-toc ol { columns: 1; }
.g8-3 .g8-read { grid-column: 2; grid-row: 2; max-width: 720px; margin: 56px 0 0; }
.g8-3 .g8-chph { width: 100%; margin-left: 0; transform: none; } .g8-3 .g8-pa { aspect-ratio: 3 / 2; }
.g8-3 .g8-ch-h { justify-items: start; text-align: left; }

/* 8.4 Titles on the photo (Condé Nast Traveler) */
.g8-4 .g8-chph { margin-bottom: 40px; }
.g8-4 .g8-pa { aspect-ratio: 16 / 8; }
.g8-4 .g8-pa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 18, 28, .72)); }
.g8-4 .g8-pa { position: relative; }
.g8-4 .g8-ch-over { position: absolute; left: 56px; right: 56px; bottom: 48px; display: grid; gap: 10px; color: #fff; }
.g8-4 .g8-ch-over .g8-ch-n { font-size: 64px; color: var(--light); }
.g8-4 .g8-ch-t { font: 500 clamp(32px, 3.6vw, 54px)/1.08 "Playfair Display", Georgia, serif; }
.g8-4 .g8-ch-t em { color: var(--light); }
.g8-4 .g8-ch-h { display: none; }

/* 8.5 Margin notes (NYT Magazine): progress bar, serif body, captions and tips in the margin */
.g8-5 .g8-progress { display: block; position: sticky; top: 0; z-index: 12; height: 4px; background: var(--line); }
.g8-5 .g8-progress i { display: block; width: 32%; height: 100%; background: var(--gold); }
.g8-5 .g8-card { text-align: left; } .g8-5 .g8-lede { margin-left: 0; } .g8-5 .g8-acts { justify-content: flex-start; }
.g8-5 .g8-h1 { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; }
.g8-5 .g8-read p, .g8-5 .g8-read li { font-family: "Source Serif 4", Georgia, serif; font-size: 20px; line-height: 1.7; color: #1d2733; }
.g8-5 .g8-ch-txt { position: relative; }
.g8-5 .g8-ch-h { justify-items: start; text-align: left; }
.g8-5 .g8-ch h3 { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; }
.g8-5 .g8-tip { display: block; position: absolute; top: 0; left: calc(100% + 48px); width: 200px; padding-top: 12px; border-top: 2px solid var(--ink); }
.g8-5 .g8-tip b { font: 600 11px/1.4 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.g8-5 .g8-tip p { margin: 8px 0 0; font: italic 400 15px/1.5 "Source Serif 4", Georgia, serif; color: var(--text); }
.g8-5 .g8-read { margin-left: 10%; }

/* 8.6 Sticky photo (Apple / Airbnb editorial): photo holds still on the left while the text scrolls */
.g8-6 .g8-read { max-width: none; }
.g8-6 .g8-intro { max-width: 680px; margin: 0 auto; }
.g8-6 .g8-ch { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.g8-6 .g8-chph { position: sticky; top: 24px; width: auto; margin: 0; transform: none; }
.g8-6 .g8-pa { aspect-ratio: 4 / 5; border-radius: 18px; }
.g8-6 .g8-ch-h { justify-items: start; text-align: left; }
.g8-6 .g8-ch:nth-of-type(even) .g8-chph { order: 2; }
.g8-6 .g8-cover-ph { aspect-ratio: 16 / 8; } .g8-6 .g8-card { border-radius: 18px; }

/* 8.7 Soft pairs (Martha Stewart Weddings) */
.g8-7 { background: #fbf8f3; }
.g8-7 .g8-cover-ph { width: 90%; margin: 48px auto 0; border-radius: 28px; }
.g8-7 .g8-card { background: #fbf8f3; border-radius: 24px; }
.g8-7 .g8-kick { font: 400 34px/1 "Great Vibes", cursive; letter-spacing: 0; text-transform: none; color: var(--gold); }
.g8-7 .g8-chph { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; width: min(980px, 92vw); }
.g8-7 .g8-pa, .g8-7 .g8-pb { display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; }
.g8-7 .g8-pa { aspect-ratio: auto; }
.g8-7 .g8-chph figcaption { grid-column: 1 / -1; text-align: center; }
.g8-7 .g8-ch-n { font: 400 40px/1 "Great Vibes", cursive; }
.g8-7 .g8-glance li { padding: 26px; background: #fff; border-radius: 18px; }

/* 8.8 Tip boxes (Zola): chapters in photo cards, check bullets, "Our tip" */
.g8-8 { background: #f4f1ec; }
.g8-8 .g8-read { max-width: 820px; }
.g8-8 .g8-intro { padding: 44px 56px; background: #fff; border-radius: 14px; }
.g8-8 .g8-ch { margin-top: 28px; background: #fff; border-radius: 14px; overflow: hidden; }
.g8-8 .g8-chph { width: 100%; margin: 0; transform: none; } .g8-8 .g8-chph figcaption { padding: 0 56px; }
.g8-8 .g8-pa { aspect-ratio: 16 / 7; }
.g8-8 .g8-ch-txt { padding: 28px 56px 48px; }
.g8-8 .g8-ch-h { justify-items: start; text-align: left; }
.g8-8 .g8-read ul li::before { width: 12px; height: 7px; top: .55em; background: none; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.g8-8 .g8-tip { display: block; margin-top: 24px; padding: 20px 24px; background: #fbf3e2; border-left: 3px solid var(--brass); border-radius: 0 10px 10px 0; }
.g8-8 .g8-tip b { font: 600 12px/1.4 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.g8-8 .g8-tip p { margin: 6px 0 0; font-size: 17px; color: var(--ink); }
.g8-8 .g8-glance li { padding: 24px; background: #fff; border-radius: 14px; }

/* 8.9 Quiet (Kinfolk) */
.g8-9 .g8-cover-ph { width: 76%; margin: 72px auto 0; aspect-ratio: 16 / 9; }
.g8-9 .g8-card { margin-top: -80px; width: min(620px, 80%); padding: 40px; }
.g8-9 .g8-h1 { font-size: clamp(40px, 4vw, 58px); font-weight: 400; }
.g8-9 .g8-h1 em { color: var(--ink); }
.g8-9 .g8-read { max-width: 560px; } .g8-9 .g8-read p, .g8-9 .g8-read li { font-size: 16.5px; line-height: 1.9; }
.g8-9 .g8-chph { width: 70%; margin: 0 0 32px -20%; transform: none; }
.g8-9 .g8-ch:nth-of-type(even) .g8-chph { margin-left: 50%; }
.g8-9 .g8-pa { aspect-ratio: 4 / 3; }
.g8-9 .g8-ch h3 { font-size: 15px; font-family: "Work Sans", sans-serif; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.g8-9 .g8-ch h3 em { font-style: normal; color: var(--ink); }
.g8-9 .g8-ch-h { justify-items: start; text-align: left; }
.g8-9 .g8-intro > p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0; }

/* 8.10 Night edition (Harper's Bazaar) */
.g8-10 .g8-cover { background: #0f1b2b; padding-bottom: 56px; }
.g8-10 .g8-card { background: #0f1b2b; }
.g8-10 .g8-h1 { font: 400 clamp(56px, 7vw, 108px)/.95 "Bodoni Moda", Georgia, serif; color: #fff; }
.g8-10 .g8-h1 em, .g8-10 .g8-kick { color: var(--light); }
.g8-10 .g8-lede { color: #d9dde3; } .g8-10 .g8-by { color: #fff; } .g8-10 .g8-av { background: var(--light); color: var(--ink); }
.g8-10 .g8-btn { background: var(--brass); color: var(--ink); } .g8-10 .g8-tl { color: #fff; } .g8-10 .g8-crumbs, .g8-10 .g8-credit { color: #8e97a3; }
.g8-10 .g8-ch h3 { font-family: "Bodoni Moda", Georgia, serif; font-weight: 400; font-size: clamp(34px, 3.4vw, 50px); }
.g8-10 .g8-chph { padding: 18px; background: #0f1b2b; }
.g8-10 .g8-chph figcaption { color: #8e97a3; }

@media (max-width: 899px) {
  .g8-card { width: auto !important; margin: 0 !important; padding: 32px 6% !important; border-radius: 0 !important; }
  .g8-cover-ph, .g8-7 .g8-cover-ph, .g8-9 .g8-cover-ph { width: 100% !important; margin: 0 !important; aspect-ratio: 4 / 3 !important; border-radius: 0 !important; }
  .g8-glance ol, .g8-6 .g8-ch, .g8-3 .g8-main, .g8-7 .g8-chph { grid-template-columns: minmax(0, 1fr); }
  .g8-toc ol { columns: 1; }
  .g8-3 .g8-toc, .g8-3 .g8-read, .g8-6 .g8-chph { grid-column: auto; grid-row: auto; position: static; }
  .g8-5 .g8-tip { position: static; width: auto; margin-top: 20px; } .g8-5 .g8-read { margin-left: auto; }
  .g8-4 .g8-ch-over { left: 20px; right: 20px; bottom: 20px; } .g8-4 .g8-ch-over .g8-ch-n { font-size: 40px; }
  .g8-8 .g8-intro, .g8-8 .g8-ch-txt { padding: 28px 22px; } .g8-8 .g8-chph figcaption { padding: 0 22px; }
  .g8-9 .g8-chph, .g8-9 .g8-ch:nth-of-type(even) .g8-chph { width: 100%; margin: 0 0 24px; }
}

/* 8.8, 8.9, 8.10, 8.11: larger type (owner, 22 Oct 2026: "increase font sizes") */
:is(.g8-8, .g8-9, .g8-10) .g8-lede { font-size: 22px; }
:is(.g8-8, .g8-9, .g8-10) .g8-h1 { font-size: clamp(56px, 6.4vw, 104px); }
:is(.g8-8, .g8-9, .g8-10) .g8-read p, :is(.g8-8, .g8-9, .g8-10) .g8-read li { font-size: 20.5px; line-height: 1.75; }
:is(.g8-8, .g8-9, .g8-10) .g8-intro > p { font-size: 23px; }
:is(.g8-8, .g8-9, .g8-10) .g8-ch h3 { font-size: clamp(36px, 3.6vw, 54px); }
.g8-9 .g8-ch h3 { font-size: 18px; }
:is(.g8-8, .g8-9, .g8-10) .g8-glance b { font-size: 26px; }
:is(.g8-8, .g8-9, .g8-10) .g8-glance li p { font-size: 17.5px; }
:is(.g8-8, .g8-9, .g8-10) .g8-toc a { font-size: 17.5px; }
:is(.g8-8, .g8-9, .g8-10) .g8-toc a span { font-size: 17.5px; }
:is(.g8-8, .g8-9, .g8-10) .g8-k, :is(.g8-8, .g8-9, .g8-10) .g8-kick { font-size: 13.5px; }
:is(.g8-8, .g8-9, .g8-10) .g8-n, :is(.g8-8, .g8-9, .g8-10) .g8-ch-n { font-size: 24px; }
:is(.g8-8, .g8-9, .g8-10) .g8-by { font-size: 15px; }
:is(.g8-8, .g8-9, .g8-10) .g8-btn, :is(.g8-8, .g8-9, .g8-10) .g8-tl { font-size: 14px; }
:is(.g8-8, .g8-9, .g8-10) .g8-btn { min-height: 56px; padding: 0 32px; }
:is(.g8-8, .g8-9, .g8-10) .g8-credit, :is(.g8-8, .g8-9, .g8-10) .g8-chph figcaption, :is(.g8-8, .g8-9, .g8-10) .g8-crumbs { font-size: 14px; }
:is(.g8-8, .g8-9, .g8-10) .g8-tip p { font-size: 20px; }
:is(.g8-8, .g8-9, .g8-10) .g8-tip b { font-size: 13px; }
.g8-8 .g8-read, .g8-11 .g8-read { max-width: 880px; }

/* 8.11 = 8.10's navy cover and Bodoni headings + 8.8's white cards and tip boxes */
.g8-11 { background: #f4f1ec; }
.g8-11 .g8-chph { padding: 0; background: none; }
.g8-11 .g8-chph figcaption { color: var(--muted); }
.g8-11 .g8-ch h3 { font-family: "Bodoni Moda", Georgia, serif; font-weight: 400; }
.g8-11 .g8-glance li { border-top: 2px solid var(--brass); }
.g8-11 .g8-tip { background: #0f1b2b; border-left-color: var(--brass); }
.g8-11 .g8-tip b { color: var(--light); }
.g8-11 .g8-tip p { color: #fff; }
.g8-11 .g8-intro > p:first-child::first-letter, .g8-10 .g8-intro > p:first-child::first-letter { font-family: "Playfair Display", Georgia, serif; font-weight: 500; }

/* homepage steps: layered photos (owner, 22 Oct 2026). A colour block offset behind, a gold hairline frame, a second photo
   from the same wedding over one corner in a white mat, and the step's first tag as a chip. Colours run linen, navy, gold, blue. */
.so1-home .so1-art { position: relative; isolation: isolate; padding: 0 0 clamp(36px, 4vw, 56px) clamp(36px, 4vw, 56px); }
.so1-home .so1-flip .so1-art { order: 2; padding: 0 clamp(36px, 4vw, 56px) clamp(36px, 4vw, 56px) 0; }
.so1-home .so1-flip .so1-ph { order: 0; }
.so1-home .so1-bg { position: absolute; z-index: -2; left: 0; bottom: 0; width: 78%; height: 78%; background: #efe8dc; }
.so1-home .so1-flip .so1-bg { left: auto; right: 0; }
.so1-home .so1-art--2 .so1-bg { background: #122233; }
.so1-home .so1-art--3 .so1-bg { background: #e8d6ad; }
.so1-home .so1-art--4 .so1-bg { background: #dfe6ee; }
.so1-home .so1-art::after { content: ""; position: absolute; z-index: -1; top: -14px; right: calc(clamp(36px, 4vw, 56px) - 14px); width: 62%; height: 62%; border: 1px solid #c9a35a; pointer-events: none; }
.so1-home .so1-flip .so1-art::after { right: auto; left: -14px; }
.so1-home .so1-art .so1-ph { box-shadow: 0 30px 60px -30px rgba(18, 34, 51, .45); }
.so1-home .so1-ph2 { position: absolute; z-index: 2; right: calc(clamp(36px, 4vw, 56px) * -.4); bottom: clamp(8px, 1.2vw, 18px); width: 30%; aspect-ratio: 4 / 5; padding: 8px; background: #fff; box-shadow: 0 24px 50px -22px rgba(18, 34, 51, .55); overflow: hidden; }
.so1-home .so1-flip .so1-ph2 { right: auto; left: calc(clamp(36px, 4vw, 56px) * -.4); }
.so1-home .so1-ph2 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.so1-home .so1-chip { position: absolute; z-index: 3; top: 18px; left: calc(clamp(36px, 4vw, 56px) + 18px); padding: 9px 14px; background: rgba(255, 255, 255, .94); font: 600 11.5px/1 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #122233; }
.so1-home .so1-flip .so1-chip { left: 18px; }
/* step 1: the rings run along the bottom of the frame, so its small photo sits over the lace at the top instead */
.so1-home .so1-art--1 .so1-ph2 { bottom: auto; top: clamp(-28px, -2vw, -14px); }
.so1-home .so1-art--1 .so1-chip { top: auto; bottom: calc(clamp(36px, 4vw, 56px) + 18px); }
@media (max-width: 899px) {
  .so1-home .so1-row, .so1-home .so1-row:first-child, .so1-home .so1-flip { grid-template-columns: minmax(0, 1fr); }
  .so1-home .so1-flip .so1-txt { justify-self: start; }
  .so1-home .so1-art--1 .so1-ph2 { top: -10px; bottom: auto; }
  .so1-home .so1-art--1 .so1-chip { bottom: 40px; }
  .so1-home .so1-art, .so1-home .so1-flip .so1-art { order: 0; padding: 0 22px 28px 22px; }
  .so1-home .so1-ph2, .so1-home .so1-flip .so1-ph2 { width: 34%; right: 0; left: auto; bottom: 0; padding: 5px; }
  .so1-home .so1-art::after { top: -8px; right: 14px; } .so1-home .so1-flip .so1-art::after { left: 14px; right: auto; }
  .so1-home .so1-chip, .so1-home .so1-flip .so1-chip { left: 34px; top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .so1-home .so1-ph img { transition: none; } }

/* ---------- /thank-you-options/ (preview only): ten thank-you pages built from the About page's blocks ---------- */
.tyo { position: relative; max-width: 1280px; margin: 56px auto 0; background: #fff; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(18, 34, 51, .45); }
.tyo-label { position: absolute; top: 14px; left: 14px; z-index: 20; }
.tyo :is(.tyo-next, .tyo-split, .tyo-script, .tyo-cards, .tyo-band, .tyo-quiet, .tyo-layers) { --ab-ink: #122233; --ab-text: #2f3a47; --ab-gold: #a27a2e; }
.tyo .ab-hero { min-height: 680px; }
.tyo .ab-story { min-height: 820px; }
.tyo .ab-k { font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #a27a2e; margin: 0 0 14px; }
.tyo .ab-hero .ab-k, .tyo .tyo-dark .ab-k { color: #e3c48a; }
.tyo .ab-k--c { text-align: center; }
.tyo .ab-rule { margin: 26px auto 34px; }
.tyo :is(.tyo-split-txt, .tyo-layers-txt, .ab-card) .ab-rule { margin: 22px 0 26px; width: 80px; background: #c9a35a; }
.tyo .ab-card { max-width: 560px; }
.tyo .ab-card .ab-card-h { font-family: "Playfair Display", Georgia, serif; color: #122233; }
.tyo .ab-card .ab-card-h em { color: #a27a2e; }
/* the letter */
.tyo p.tyo-date { font: italic 400 clamp(21px, 1.8vw, 25px)/1.5 "Playfair Display", Georgia, serif !important; color: #122233 !important; }
.tyo :is(.ab-intro, .ab-letter, .ab-card, .tyo-split-txt, .tyo-script, .tyo-quiet, .tyo-layers-txt) p:not(.ab-k):not(.ab-sig):not(.ab-hi):not(.tyo-big) { font: 400 18px/1.75 "Work Sans", sans-serif; color: #2f3a47; margin: 0 0 1em; }
.tyo .ab-intro .ab-narrow, .tyo .tyo-script .ab-narrow, .tyo .tyo-quiet .ab-narrow { max-width: 720px; }
.tyo .ab-sig { margin: 10px 0 0; font: 400 72px/1 "Waterfall", cursive !important; color: #a27a2e !important; }
.tyo :is(.ab-intro, .tyo-script, .tyo-quiet) .ab-sig { text-align: center; }
/* next steps */
.tyo-next { padding-block: clamp(80px, 9vw, 120px); background: #f4f1ec; }
.tyo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tyo-steps li { display: grid; gap: 10px; align-content: start; padding: clamp(26px, 3vw, 38px); background: #fff; border-top: 2px solid #c9a35a; }
.tyo-steps span { font: italic 500 26px/1 "Playfair Display", Georgia, serif; color: #a27a2e; }
.tyo-steps b { font: 500 26px/1.2 "Playfair Display", Georgia, serif; color: #122233; }
.tyo-steps p { margin: 0; font: 400 17px/1.65 "Work Sans", sans-serif; color: #2f3a47; }
.tyo-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 34px; margin: 0; }
.tyo-around .ab-strip { margin-top: 0; }
.tyo-band { padding-block: clamp(72px, 8vw, 110px); background: #c9a35a; text-align: center; }
.tyo-band h2 { margin: 0; font: 500 clamp(34px, 3.6vw, 52px)/1.1 "Playfair Display", Georgia, serif; color: #122233; }
.tyo-band h2 em { font-style: italic; }
.tyo-band p { margin: 16px auto 26px; max-width: 52ch; font: 400 18px/1.7 "Work Sans", sans-serif; color: #122233; }
.tyo-band .ab-btn { background: #122233; color: #fff; }
.tyo-band--steps .tyo-steps { margin-top: 40px; text-align: left; }
.tyo-band--steps .tyo-steps li { border-top-color: #122233; }
/* 4 fireworks night */
.tyo-dark .ab-intro, .tyo-dark .tyo-next { background: #0f1b2b; }
.tyo-dark .ab-h2, .tyo-dark .tyo-date { color: #fff !important; }
.tyo-dark .ab-h2 em { color: #e3c48a; }
.tyo-dark .ab-intro p:not(.tyo-date):not(.ab-sig) { color: #c9ced6 !important; }
.tyo-dark .ab-sig { color: #e3c48a !important; }
.tyo-dark .tyo-steps li { background: #152538; }
.tyo-dark .tyo-steps b { color: #fff; } .tyo-dark .tyo-steps p { color: #c9ced6; } .tyo-dark .tyo-steps span { color: #e3c48a; }
/* 5 portrait split */
.tyo-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; background: #f4f1ec; }
.tyo-split-ph { position: relative; overflow: hidden; }
.tyo-split-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tyo-split-txt { align-self: center; padding: clamp(48px, 6vw, 96px); }
.tyo-split-txt .ab-h, .tyo-layers-txt .ab-h { color: #122233; font-family: "Playfair Display", Georgia, serif; }
.tyo-split-txt .ab-h em, .tyo-layers-txt .ab-h em { color: #a27a2e; }
/* 6 script */
.tyo-script { padding-block: clamp(90px, 10vw, 140px); background: #fff; text-align: center; }
.tyo-big { margin: 0 0 -10px; font: 400 clamp(110px, 13vw, 190px)/.9 "Waterfall", cursive; color: #a27a2e; }
.tyo-script .ab-narrow > p:not(.ab-k):not(.tyo-big):not(.ab-sig) { text-align: left; }
/* 7 card on the right, steps on navy */
.tyo-story--right .ab-story-in { display: flex; justify-content: flex-end; }
.tyo-cards { padding-block: clamp(80px, 9vw, 120px); background: #122233; }
.tyo-cards .ab-h2 { color: #fff; } .tyo-cards .ab-h2 em, .tyo-cards .ab-k { color: #e3c48a; }
/* 9 quiet */
.tyo-quiet { padding-block: clamp(100px, 11vw, 160px); background: #f4f1ec; text-align: center; }
.tyo-av { display: block; width: 132px; height: 132px; margin: 0 auto 28px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: 0 0 0 1px #c9a35a; }
.tyo-av img { width: 100%; height: 100%; object-fit: cover; }
.tyo-quiet .ab-narrow > p:not(.ab-k):not(.ab-sig) { text-align: left; }
/* 10 layered photos */
.tyo-layers { padding-block: clamp(90px, 10vw, 140px); background: #f4f1ec; }
.tyo-layers-in { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(48px, 6vw, 96px); align-items: center; }
.tyo-layers-art { position: relative; isolation: isolate; padding: 0 0 70px 40px; }
.tyo-l1 { display: block; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(18, 34, 51, .5); }
.tyo-l2 { position: absolute; right: -20px; bottom: 0; width: 40%; aspect-ratio: 3 / 4; padding: 8px; background: #fff; overflow: hidden; box-shadow: 0 24px 50px -22px rgba(18, 34, 51, .55); }
.tyo-l3 { position: absolute; z-index: -1; left: 0; top: 40px; width: 70%; height: 90%; background: #122233; }
.tyo-l1 img, .tyo-l2 img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .tyo-steps, .tyo-split, .tyo-layers-in { grid-template-columns: minmax(0, 1fr); }
  .tyo-split-ph { aspect-ratio: 4 / 3; }
  .tyo-story--right .ab-story-in { display: block; }
  .tyo .ab-hero { min-height: 520px; }
}

/* ---------- services: six tall cards (owner, 22 Oct 2026, after toastent.com) ----------
   Black and white until hovered, focused or (on touch screens) scrolled to the middle; they fade up one after another. */
.svc6 { background: #fff; padding: clamp(56px, 6vw, 88px) max(16px, var(--gutter)); }
.svc6-row { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 28px); }
.svc6-card { position: relative; display: block; aspect-ratio: 5 / 9; overflow: hidden; background: #122233; text-decoration: none; isolation: isolate; }
.svc6-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(1.02); transition: filter .6s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.svc6-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(10, 18, 28, .72)); transition: opacity .6s; }
.svc6-txt { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; justify-items: center; padding: 0 12px clamp(20px, 2.2vw, 30px); text-align: center; }
.svc6-tag { font: 600 11px/1.3 "Work Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #e3c48a; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.svc6-name { font: 500 clamp(21px, 1.8vw, 28px)/1.1 "Playfair Display", Georgia, serif; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); text-wrap: balance; }
.svc6-card:is(:hover, :focus-visible, .is-on) img { filter: none; transform: scale(1.07); }
.svc6-card:is(:hover, :focus-visible, .is-on) .svc6-tag { opacity: 1; transform: none; }
.svc6-card:focus-visible { outline: 2px solid #c9a35a; outline-offset: 4px; }
/* staggered entrance */
.svc6.is-wait .svc6-card { opacity: 0; transform: translateY(28px); }
.svc6.is-in .svc6-card { opacity: 1; transform: none; transition: opacity .8s ease calc(var(--i) * 110ms), transform .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 110ms); }
@media (max-width: 1100px) { .svc6-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .svc6-card { aspect-ratio: 4 / 5; } }
@media (max-width: 640px) { .svc6-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .svc6-card { aspect-ratio: 3 / 4; } .svc6-tag { display: none; } .svc6-name { font-size: 18px; } .svc6-txt { padding-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .svc6 .svc6-card, .svc6-card img { transition: none !important; transform: none !important; } }

/* ---------- /about-options/ (preview only): ten arrangements of the About page ---------- */
.abo :is(.abo-founder, .abo-timeline, .abo-mast, .abo-band, .abo-layer) { --ab-ink: #122233; --ab-text: #2f3a47; --ab-gold: #a27a2e; }
.abo .ab-hero { min-height: 700px; }
.abo-band { padding-block: clamp(72px, 8vw, 110px); background: #c9a35a; text-align: center; }
.abo-band h2 { margin: 0; font: 500 clamp(34px, 3.6vw, 52px)/1.1 "Playfair Display", Georgia, serif; color: #122233; }
.abo-band h2 em { font-style: italic; }
.abo-band p { margin: 16px auto 26px; max-width: 52ch; font: 400 18px/1.7 "Work Sans", sans-serif; color: #122233; }
.abo-band .ab-btn { background: #122233; color: #fff; }
.abo-rule { display: block; width: 80px; height: 1px; margin: 24px 0; background: #c9a35a; }
/* 2 founder first */
.abo-founder { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; background: #f4f1ec; }
.abo-founder-ph { position: relative; overflow: hidden; } .abo-founder-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abo-founder-txt { align-self: center; padding: clamp(48px, 6vw, 96px); }
.abo-founder-txt .ab-h { color: #122233; } .abo-founder-txt .ab-h em { display: block; color: #a27a2e; }
.abo-founder-txt > p:not(.ab-k) { font: 400 19px/1.7 "Work Sans", sans-serif; color: #2f3a47; }
.abo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0; padding-top: 20px; border-top: 1px solid #e4dccd; }
.abo-stats dt { font: 500 32px/1 "Playfair Display", Georgia, serif; color: #122233; }
.abo-stats dd { margin: 6px 0 0; font: 600 10.5px/1.35 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #a27a2e; }
/* 3 film */
.abo-film video { object-fit: cover; }
/* 4 midnight */
.abo-night :is(.ab-intro, .ab-hello, .ab-standard) { background: #0f1b2b; }
.abo-night :is(.ab-h2, .ab-ex b, .ab-profile-name) { color: #fff; }
.abo-night .ab-h2 em { color: #e3c48a; }
.abo-night :is(.ab-intro p, .ab-letter p, .ab-std-txt > p, .ab-ex li) { color: #c9ced6 !important; }
.abo-night .ab-letter .ab-hi, .abo-night .ab-sig { color: #e3c48a !important; }
.abo-night .ab-hello { background-image: none; }
.abo-night .ab-music { background: #0b1420; }
/* 5 timeline */
.abo-timeline { padding-block: clamp(90px, 10vw, 140px); background: #f4f1ec; }
.abo-timeline ol { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; position: relative; }
.abo-timeline ol::before { content: ""; position: absolute; left: 150px; top: 8px; bottom: 8px; width: 1px; background: #c9a35a; }
.abo-timeline li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 50px; padding: 0 0 48px; position: relative; }
.abo-timeline li::after { content: ""; position: absolute; left: 145px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: #f4f1ec; border: 1px solid #c9a35a; }
.abo-yr { text-align: right; font: italic 500 26px/1.2 "Playfair Display", Georgia, serif; color: #a27a2e; }
.abo-timeline h3 { margin: 0 0 10px; font: 500 28px/1.2 "Playfair Display", Georgia, serif; color: #122233; }
.abo-timeline li p { margin: 0; font: 400 17px/1.75 "Work Sans", sans-serif; color: #2f3a47; }
/* 6 masthead */
.abo-mast { padding-block: clamp(80px, 9vw, 120px) clamp(56px, 6vw, 80px); background: #fff; text-align: center; }
.abo-mast-h { margin: 0; font: 400 clamp(64px, 9vw, 140px)/.95 "Bodoni Moda", Georgia, serif; color: #122233; }
.abo-mast-h em { color: #a27a2e; }
.abo-mast-sub { margin: 22px 0 48px; font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #2f3a47; }
.abo-collage { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 14px; align-items: end; }
.abo-collage span { display: block; overflow: hidden; } .abo-collage img { width: 100%; height: 100%; object-fit: cover; }
.abo-col-1, .abo-col-3 { aspect-ratio: 3 / 4; } .abo-col-2 { aspect-ratio: 4 / 5; }
/* 7 photo-led */
.abo-wide { margin: 0; height: clamp(360px, 46vw, 640px); overflow: hidden; } .abo-wide img { width: 100%; height: 100%; object-fit: cover; }
/* 8 paper cards */
.abo-cards { background: #f4f1ec; padding-bottom: 40px; }
.abo-cards :is(.ab-intro, .ab-hello, .ab-standard, .ab-music) { width: min(1120px, calc(100% - 32px)); margin: 28px auto 0; border-radius: 14px; background-color: #fff; background-image: none; padding-inline: clamp(20px, 4vw, 56px); }
.abo-cards .ab-music { background: #fff; }
/* 9 letter as the hero */
.abo-letter-hero { padding-top: clamp(110px, 12vw, 170px); }
/* 10 layered chapters */
.abo-layer { padding-block: clamp(64px, 7vw, 100px); background: #fff; }
.abo-layer:nth-of-type(odd) { background: #f4f1ec; }
.abo-layer-in { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.abo-layer--flip .abo-layer-art { order: 2; }
.abo-layer-art { position: relative; isolation: isolate; padding: 0 0 60px 40px; }
.abo-l1 { display: block; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(18, 34, 51, .5); }
.abo-l2 { position: absolute; right: -20px; bottom: 0; width: 38%; aspect-ratio: 3 / 4; padding: 8px; background: #fff; overflow: hidden; box-shadow: 0 24px 50px -22px rgba(18, 34, 51, .55); }
.abo-l3 { position: absolute; z-index: -1; left: 0; top: 40px; width: 70%; height: 90%; background: #e8d6ad; }
.abo-layer:nth-of-type(even) .abo-l3 { background: #122233; }
.abo-l1 img, .abo-l2 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.abo-layer-txt .ab-card-h { font-family: "Playfair Display", Georgia, serif; color: #122233; }
.abo-layer-txt p:not(.ab-k) { font: 400 18px/1.75 "Work Sans", sans-serif; color: #2f3a47; }
@media (max-width: 899px) {
  .abo-founder, .abo-layer-in { grid-template-columns: minmax(0, 1fr); }
  .abo-founder-ph { aspect-ratio: 4 / 3; } .abo-layer--flip .abo-layer-art { order: 0; }
  .abo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abo-timeline ol::before, .abo-timeline li::after { display: none; } .abo-timeline li { grid-template-columns: minmax(0, 1fr); gap: 8px; } .abo-yr { text-align: left; }
  .abo-collage { grid-template-columns: 1fr 1fr; } .abo-col-2 { grid-column: 1 / -1; grid-row: 1; }
}
/* /about/ = option 6 (owner, 22 Oct 2026) */
.abo-mast-cap { margin: 12px 0 0; text-align: left; font: 400 13px/1.45 "Work Sans", sans-serif; color: #6b7480; }
.abo-mast .ab-k { font: 600 13px/1.4 "Work Sans", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #a27a2e; margin: 0 0 18px; }

/* "Planned with you" band: Christina's phone-call review (owner, 22 Oct 2026) */
.hp2-band-q { margin: 0; max-width: 520px; padding: 18px 22px; background: rgba(15, 27, 43, .62); border-left: 2px solid #c9a35a; text-align: left; backdrop-filter: blur(2px); }
.hp2-band-q blockquote { margin: 0; }
.hp2-band-q p { margin: 0; font: italic 400 clamp(18px, 1.5vw, 21px)/1.5 "Playfair Display", Georgia, serif; color: #fff; }
.hp2-band-q figcaption { margin-top: 10px; font: 600 11.5px/1.4 "Work Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #e3c48a; }
.bo-wrap { position: relative; margin-top: 40px; }
/* the quote as a wide strip along the bottom of the band (owner, 22 Oct 2026) */
.hp2-band--wq { padding-bottom: 150px; }
.hp2-band-q--wide { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 22px;
  padding: 26px max(16px, var(--gutter)); background: rgba(15, 27, 43, .72); border-left: 0; border-top: 1px solid rgba(201, 163, 90, .7); text-align: center; }
.hp2-band-q--wide blockquote { max-width: 1060px; }
.hp2-band-q--wide p { font-size: clamp(19px, 1.7vw, 25px); }
.hp2-band-q--wide figcaption { margin: 0; white-space: nowrap; }
.hp2-band--wq .hp2-band-credit { bottom: auto; top: 16px; }
@media (max-width: 760px) { .hp2-band--wq { padding-bottom: 210px; } .hp2-band-q--wide { padding-block: 18px; } }
/* "Planned with you" band with the words on the left (owner, 22 Oct 2026) */
.hp2-band-left { place-items: center start; text-align: left; }
.hp2-band-left .hp2-band-in { justify-items: start; margin-left: clamp(20px, 6vw, 110px); max-width: min(600px, 40vw); }
.hp2-band-left .hp2-band-story { max-width: 40ch; }
.hp2-band-left.hp2-band--wq .hp2-band-credit { left: auto; right: var(--gutter); }
@media (max-width: 760px) { .hp2-band-left .hp2-band-in { max-width: none; margin-right: 20px; } }
/* wide quote, easier to read (owner, 22 Oct 2026): upright type, larger, on a near-solid navy strip */
.hp2-band-q--wide { background: rgba(12, 22, 36, .92); padding-block: 30px; }
.hp2-band-q--wide p { font: 400 clamp(20px, 1.75vw, 26px)/1.5 "Playfair Display", Georgia, serif; font-style: normal; color: #fff; letter-spacing: .005em; }
.hp2-band-q--wide figcaption { font-size: 12.5px; color: #e9cf96; }
/* every option's quote, easier to read (owner: "for all options") */
.hp2-band-q { background: rgba(12, 22, 36, .9); padding: 20px 24px; }
.hp2-band-q p { font: 400 clamp(19px, 1.55vw, 22px)/1.55 "Playfair Display", Georgia, serif; font-style: normal; color: #fff; }
.hp2-band-q figcaption { font-size: 12.5px; color: #e9cf96; }
/* focused quote: shorter words, The Knot logo and stars (owner, 22 Oct 2026) */
.hp2-band-q--wide.hp2-band-q--logo, .hp2-band-q--wide { gap: 10px 34px; }
.hp2-band-q--wide p { font-size: clamp(22px, 2vw, 30px); }
.hp2-band-q figcaption { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hp2-band-q-logo { display: block; height: 18px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.hp2-band-q-stars { display: inline-flex; gap: 2px; color: #e9cf96; }
.hp2-band-q-stars svg { width: 14px; height: 14px; fill: currentColor; }
/* "Planned with you" band: the photo moves with the page, no fixed-background scroll effect (owner, 22 Oct 2026) */
.hp2-band--wq .hp2-band-img { position: absolute; inset: 0; }
.hp2-band--wq .hp2-band-img img { height: 100%; }
/* the 'Step one' bar at the end of the homepage (owner, 22 Oct 2026) */
body.opt-d.lp .os-bandsec--end { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
/* steps → "What we do": tighter, and joined by a gold thread with a small record at its end (owner, 22 Oct 2026) */
body.opt-d.lp .so1-home { padding-bottom: 0 !important; }
body.opt-d.lp .so1-home + .od-svc { position: relative; padding-top: 128px !important; }
body.opt-d.lp .so1-home + .od-svc::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 84px; background: linear-gradient(180deg, rgba(201, 163, 90, 0), #c9a35a); }
body.opt-d.lp .so1-home + .od-svc::after { content: ""; position: absolute; left: 50%; top: 84px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle, #c9a35a 0 2px, #122233 2.5px 4px, #c9a35a 4.5px 5px, #122233 5.5px); }
@media (max-width: 760px) {
  body.opt-d.lp .so1-home + .od-svc { padding-top: 96px !important; }
  body.opt-d.lp .so1-home + .od-svc::before { height: 60px; }
  body.opt-d.lp .so1-home + .od-svc::after { top: 60px; }
}
/* Dave's homepage bio: all three paragraphs in one style (owner, 22 Oct 2026) */
body.opt-d.lp .ob2 .ob2-p, body.opt-d.lp .ob2 .ob2-lead { font: 400 18px/1.75 "Work Sans", sans-serif !important; color: #2f3a47 !important; }
/* Dennis's review: on the warm linen used behind the homepage testimonials (owner, 22 Oct 2026); the card goes white so it still lifts off */
body.opt-d.lp .kds.ofx { background: #f7f3ec; background-image: none; color: #122233; }
body.opt-d.lp .kds.ofx::before, body.opt-d.lp .kds.ofx::after { display: none; }
body.opt-d.lp .kds.ofx .kdr { background: #fff; box-shadow: 0 40px 80px -40px rgba(18, 34, 51, .35); }
/* /about/ masthead easier to read (owner, 22 Oct 2026): Bodoni's display cut has hairline strokes, so pin it to the text cut
   (opsz 11) at a heavier weight, and give the label and the subtitle more size and contrast */
.abo-mast-h { font-weight: 600 !important; font-optical-sizing: none; font-variation-settings: "opsz" 11; letter-spacing: -.01em; }
.abo-mast .ab-k { font-size: 14px !important; color: #8a6420 !important; }
.abo-mast-sub { font: 600 15px/1.5 "Work Sans", sans-serif !important; letter-spacing: .16em !important; color: #122233 !important; }
@media (max-width: 760px) { .abo-mast-sub { font-size: 13px !important; letter-spacing: .12em !important; } }
/* /wedding-dj/ on the band page design (owner, 22 Oct 2026) */
.bd-asks--dj li { padding-left: 0; } .bd-asks--dj li::before { display: none; }
.bd-asks--dj li b { display: block; margin-bottom: 4px; font: 500 19px/1.3 "Playfair Display", Georgia, serif; color: #122233; }
.bd-card p:not(.bd-card-k) a { color: inherit; text-decoration: underline; text-decoration-color: #c9a35a; text-underline-offset: 4px; }

/* /weddings/ spacing pass (owner, 22 Oct 2026): one rhythm between sections, room under every heading, alternating grounds
   so neighbouring sections don't merge into one double-height gap */
.pg-weddings :is(.mk-sec, .sec.films) { padding-block: clamp(64px, 7vw, 104px) !important; }
.pg-weddings .sec.films { background: #fff; }
.pg-weddings :is(.mk-head, .sec-head, .films .wrap > header) { margin-bottom: clamp(32px, 3.5vw, 52px) !important; }
.pg-weddings .films h2, .pg-weddings .mk-h2 { margin-bottom: 0; }
.pg-weddings .films .sec-head + * , .pg-weddings .mk-head + * { margin-top: 0; }
.pg-weddings figure.photos { margin: 0; }
.pg-weddings figure.photos figcaption { margin-top: 14px; }
.pg-weddings .mk-split--intro { align-items: start; gap: clamp(40px, 6vw, 96px); }
.pg-weddings .mk-split--intro .mk-head { margin-bottom: 0 !important; position: sticky; top: 120px; }

/* homepage font trim (owner preview, 27 Oct 2026): 12 families down to 6. The header keeps Oswald and Inter Tight; everything
   else that used Bebas, Cormorant, Source Serif, Instrument Sans, Mulish or Great Vibes moves to the site's Playfair / Work Sans / Waterfall */
body.opt-d.lp :is(.skip, .odh-sr, .od-place, .hp-hero-foot span, .od-btn, .lsp-eye, .lsp-btn, .lsp-ig, .lsp-copy, .kdr-text p, .dock span, .lb button) { font-family: "Work Sans", system-ui, sans-serif !important; }
body.opt-d.lp :is(.reel-cap span, .reel-cap b) { font-family: "Playfair Display", Georgia, serif !important; }
body.opt-d.lp .lsp-pol figcaption { font-family: "Waterfall", cursive !important; font-size: 1.25em; }
body.opt-d.lp .kdr-text p { font-family: "Playfair Display", Georgia, serif !important; font-style: italic; }