/* =====================================================================
   Steven Taylor Photography - Main stylesheet
   Full redesign: Oct 27, 2026 (design pass, "Ember & Espresso").

   HOW THIS FILE IS ORGANISED (search for the numbered headings):
     1.  Design tokens (colours, fonts, spacing) - change the look here
     2.  Base / reset
     3.  Typography helpers
     4.  Layout helpers (container, sections, grids)
     5.  Buttons and links
     6.  Header + logo + navigation (desktop and mobile)
     7.  Home: hero
     8.  Home: marquee, intro, featured work, night band, steps,
         kind words, pricing teaser, final CTA
     9.  Inner page header
     10. Portfolio masonry + lightbox
     11. Pricing cards
     12. FAQ accordion
     13. Contact form + booking path toggle
     14. Process timeline
     15. Venues + blog cards + testimonials page
     16. Footer + sticky mobile CTA
     17. Scroll reveal animation
     18. Reduced motion + print

   PALETTE REASONING (full write-up in design-preview/TRENDS-RESEARCH.md):
   - Paper is a warm natural white close to Pantone's 2026 "Cloud Dancer".
   - Espresso/chocolate replaces black as the dark anchor (the 2026 wedding
     neutral; warmer and softer than black, still huge contrast).
   - Ember is pulled straight from Steven's signature fiery smoke portrait,
     so the brand colour literally comes from his best-known photo.
   - Butter is a tiny highlight on dark sections (a 2026 wedding favourite).
   All text/background pairs below pass WCAG AA contrast (checked).
   ===================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Colours */
    --paper:      #F3EEE6;   /* main background (warm natural white) */
    --paper-2:    #E9E1D4;   /* alternate section background (oat) */
    --espresso:   #1C1410;   /* main text + dark sections (15.7:1 on paper) */
    --cocoa:      #4A3227;   /* chocolate, for borders/secondary dark */
    --ember:      #C4552B;   /* brand accent: decorative use, large text only */
    --ember-deep: #A2431F;   /* accent for small text + buttons (5.4:1 on paper, 6.3:1 with white text) */
    --ember-glow: #E58A5C;   /* accent on dark backgrounds (7:1 on espresso) */
    --butter:     #EED9A0;   /* soft highlight on dark backgrounds */
    --muted:      #6B5D52;   /* secondary text on paper (5.5:1) */
    --muted-dark: #B9AEA3;   /* secondary text on espresso (8.3:1) */
    --line:       rgba(28, 20, 16, 0.14);   /* hairline borders on paper */
    --line-dark:  rgba(243, 238, 230, 0.16);/* hairline borders on espresso */

    /* Fonts: Instrument Serif for display, Manrope for everything you read.
       Fallbacks are chosen to look similar while the web fonts load. */
    --font-display: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
    --font-text:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Fluid type scale: clamp(min, preferred, max) grows smoothly with the screen. */
    --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --step-2:  clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
    --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
    --step-4:  clamp(2.8rem, 1.9rem + 4.4vw, 5.8rem);
    --step-5:  clamp(3.2rem, 1.8rem + 7vw, 8.5rem);

    /* Spacing + shape */
    --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 3rem);     /* page side padding */
    --section: clamp(4.5rem, 3rem + 7vw, 10rem);       /* vertical section padding */
    --radius: 4px;            /* barely-there rounding: editorial, not "app" */
    --max: 1320px;            /* widest content column */
    --header-h: 76px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);            /* smooth "settle" easing */
}

/* ---------- 2. Base / reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--espresso);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Film-grain overlay over the whole site (very faint). A nod to the film look
   couples love right now, done with a tiny inline SVG instead of an image file. */
body::after {
    content: "";
    position: fixed; inset: 0; z-index: 999;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
::selection { background: var(--ember); color: #fff; }

/* Visible keyboard focus everywhere (never remove this - accessibility). */
:focus-visible { outline: 2px solid var(--ember-deep); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color: var(--butter); }

/* Hidden visually but still read by screen readers */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* Skip link: appears only when focused with the keyboard */
.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 1000;
    background: var(--espresso); color: var(--paper); padding: 0.7rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Typography helpers ---------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;              /* Instrument Serif has one weight; size does the work */
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h2 em, h1 em, h3 em, .display em { font-style: italic; color: var(--ember-deep); }
.on-dark h2 em, .on-dark h1 em, .hero em { color: var(--butter); }

/* Small uppercase label above headings ("eyebrow") */
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.75rem;
    font-family: var(--font-text);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ember-deep);
    margin: 0 0 1.25rem;
}
.eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; }
.on-dark .eyebrow { color: var(--ember-glow); }

.lede { font-size: var(--step-1); line-height: 1.55; max-width: 38ch; }
.muted { color: var(--muted); }
.on-dark .muted { color: var(--muted-dark); }

/* ---------- 4. Layout helpers ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 860px; }
.section { padding: var(--section) 0; position: relative; }
.section--tight { padding: calc(var(--section) * 0.6) 0; }
.section--oat { background: var(--paper-2); }
.on-dark { background: var(--espresso); color: var(--paper); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) {
    .section-head--split { grid-template-columns: 1.3fr 1fr; gap: 4rem; }
}
.section-head h2 { margin: 0; }
.section-head p { margin: 0; max-width: 46ch; }

/* ---------- 5. Buttons and links ---------- */
.btn, button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 52px;                     /* big thumb-friendly tap target */
    padding: 0.9rem 1.9rem;
    font: 600 0.95rem/1 var(--font-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--ember-deep);
    border: 1px solid var(--ember-deep);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover, button[type="submit"]:hover { background: var(--espresso); border-color: var(--espresso); transform: translateY(-2px); }
.btn::after { content: "\2192"; transition: transform 0.3s var(--ease); } /* small arrow */
.btn:hover::after { transform: translateX(4px); }
.btn--small { min-height: 44px; padding: 0.65rem 1.25rem; font-size: 0.8rem; }
.btn--small::after { content: none; }
/* Ghost button (outline) for secondary actions */
.btn--ghost { background: transparent; color: var(--espresso); border-color: currentColor; }
.btn--ghost:hover { background: var(--espresso); color: var(--paper); }
/* Light button for dark/photo backgrounds */
.btn--light { background: var(--paper); color: var(--espresso); border-color: var(--paper); }
.btn--light:hover { background: var(--butter); border-color: var(--butter); color: var(--espresso); }
.btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(243,238,230,0.7); }
.btn--ghost-light:hover { background: var(--paper); color: var(--espresso); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* Underlined text link with an animated underline */
.link {
    font-weight: 600; text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
    padding-bottom: 2px; transition: background-size 0.4s var(--ease), color 0.3s;
}
.link:hover { color: var(--ember-deep); background-size: 0 1px; background-position: 100% 100%; }
.on-dark .link:hover { color: var(--ember-glow); }
/* Plain links inside body copy */
.prose a:not(.btn), .contact-alt a:not(.btn), .faq a:not(.btn) {   /* Oct 28, 2026: :not(.btn) so buttons inside text (About page "Check My Date") keep their white label instead of turning ember-on-ember (invisible) */
    color: var(--ember-deep); text-underline-offset: 3px; }

/* ---------- 6. Header + logo + navigation ---------- */
/* =====================================================================
   HEADER (menu + logo redesign, Oct 27, 2026)

   WHY THIS CHANGED - the old mobile menu was broken on phones:
   the frosted-glass blur (backdrop-filter) sat on .site-header itself.
   In CSS, an element with backdrop-filter (or filter/transform) becomes
   the "containing block" for every position:fixed child. So the menu's
   "position: fixed; inset: 0" stopped meaning "the whole screen" and
   started meaning "the 76px header box": once the page was scrolled
   (or on any inner page) the menu was a short dark strip, the lower
   links were cut off and the CTA + phone spilled transparently over
   the page. See qa/menu-before/ and Steven's own iPhone screenshots.

   THE FIX: the blurred background now lives on a ::before layer
   BEHIND the header content. The header element itself has no
   backdrop-filter, so the menu can be truly full-screen again.
   ===================================================================== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    color: var(--espresso);
    /* NO background / backdrop-filter here on purpose (see note above). */
    transition: color 0.4s var(--ease);
}
/* The frosted bar: a separate layer so blur never traps the fixed menu. */
.site-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(243, 238, 230, 0.9);              /* --paper at 90% */
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--line);
    transition: opacity 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* Once scrolled, a whisper of shadow so the bar lifts off photos. */
.site-header.is-solid::before { box-shadow: 0 6px 24px -14px rgba(28, 20, 16, 0.35); }
/* Inner pages: push content below the fixed header */
.page--inner main { padding-top: var(--header-h); }
/* HOME: header starts transparent with cream text over the (dark) hero photo... */
.page--home .site-header:not(.is-solid) { color: var(--paper); }
.page--home .site-header:not(.is-solid)::before { opacity: 0; }
/* ...and main.js adds .is-solid once you scroll past the top (solid paper bar,
   espresso text), so the logo and menu button are always legible over any photo. */
.site-header__inner {
    max-width: 1500px; margin: 0 auto; padding: 0 var(--gutter);
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

/* ---------------------------------------------------------------------
   LOGO: Steven's handwritten signature sits BEHIND the spaced-out
   "STEVEN TAYLOR" text logo (like the old Duda site).
   Signature = images/signature.svg, inlined by header.php.
   - ONE solid colour (Steven: "no gradient"): fill="currentColor" in
     the SVG, and the colour is set here with "color". No gradients,
     masks or clip paths anywhere.
   - The SVG used to be malformed (unclosed <path> tags), so only one
     stroke ("dy") ever drew. Fixed in the SVG file itself.
   - position:absolute so the full signature can be big without
     making the header any taller.
   - z-index 130 keeps the logo above the open mobile menu.
   --------------------------------------------------------------------- */
.brand {
    position: relative; z-index: 130; display: grid; place-items: center;
    text-decoration: none; color: inherit; padding: 0.4rem 0.2rem; isolation: isolate;
}
.brand__signature {
    position: absolute; z-index: -1;
    width: 196px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg);
    color: var(--ember);          /* the one solid brand colour (rust / terracotta) */
    opacity: 0.28;                /* one flat tint: sits behind the text without fighting it (lightened from 0.5, Steven Oct 28, 2026: "more transparent") */
    pointer-events: none;
}
/* Over the dark home hero and inside the open menu: same idea, warm butter tone. */
.page--home .site-header:not(.is-solid) .brand__signature { color: var(--ember-glow); opacity: 0.28; }
/* Desktop: the text logo is bigger, so the signature grows with it (still absolute = no extra height). */
@media (min-width: 1081px) { .brand__signature { width: 250px; } }
.brand__text {
    font-family: var(--font-display);
    font-size: 1.45rem; line-height: 1;
    text-transform: uppercase; letter-spacing: 0.32em;
    margin-right: -0.32em;          /* balances the trailing letter-spacing so it centres */
}
.brand__sub {
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase;
    margin-top: 0.35rem; margin-right: -0.42em; opacity: 0.8;
}

/* ---------------------------------------------------------------------
   6a. DESKTOP NAVIGATION (above 1080px): one row of small caps links,
   thin animated underline on hover / current page, "Check My Date" pill.
   --------------------------------------------------------------------- */
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 2rem); }
.site-nav a:not(.btn) {
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    text-decoration: none; padding: 0.4rem 0; position: relative; color: inherit;
}
.site-nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease);
}
.site-nav a:not(.btn):hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.page--home .site-header:not(.is-solid) .site-nav .btn { background: var(--paper); color: var(--espresso); border-color: var(--paper); }
.site-nav__extras { display: none; }    /* phone / Facebook row: mobile overlay only */

/* ---------------------------------------------------------------------
   MENU BUTTON: "Menu" word + two hairlines. Morphs into "Close" + an X.
   48px tall minimum (comfortable thumb target, beats the 44px guideline).
   --------------------------------------------------------------------- */
.menu-toggle {
    display: none; align-items: center; gap: 0.7rem;
    min-width: 48px; height: 48px; padding: 0 0.15rem 0 0.6rem; margin-right: -0.35rem;
    border: 0; background: transparent; color: inherit; cursor: pointer;
    position: relative; z-index: 130;                 /* above the open overlay */
    -webkit-tap-highlight-color: transparent;
}
/* The two words are stacked in one grid cell and cross-fade. */
.menu-toggle__label { display: grid; font: 600 0.68rem/1 var(--font-text); letter-spacing: 0.22em; text-transform: uppercase; }
.menu-toggle__word { grid-area: 1 / 1; text-align: right; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.menu-toggle__word--close { opacity: 0; transform: translateY(6px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__word--open { opacity: 0; transform: translateY(-6px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__word--close { opacity: 1; transform: none; }
/* Two lines: the lower one is shorter (editorial asymmetry) until it becomes an X. */
.menu-toggle__bars { position: relative; display: block; width: 26px; height: 10px; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
    content: ""; position: absolute; right: 0; height: 1.5px; background: currentColor; border-radius: 2px;
    transition: transform 0.45s var(--ease), width 0.45s var(--ease), top 0.45s var(--ease);
}
.menu-toggle__bars::before { top: 0; width: 26px; }
.menu-toggle__bars::after  { top: 8.5px; width: 17px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after  { top: 4.25px; width: 26px; transform: rotate(-45deg); }
.menu-toggle:focus-visible { outline-offset: 2px; border-radius: 6px; }

/* ---------------------------------------------------------------------
   6b. MOBILE MENU (1080px and below): full-screen editorial overlay.
   - Truly full viewport: inset 0 + 100dvh (dvh = the real visible height
     on iPhone, ignoring the collapsing Safari bars; 100vh is the fallback).
   - Opaque espresso, sits above everything on the page (the header is
     z-index 100, the sticky bottom CTA is 90; the overlay is inside the
     header at 110, logo + button at 130 on top of it).
   - Scrolls internally if a short phone (or landscape) can't fit it.
   - Opens with a curtain wipe from the top + links rising in one by one.
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .menu-toggle { display: inline-flex; }

    .site-nav {
        position: fixed; inset: 0; z-index: 110;
        height: 100vh; height: 100dvh;
        overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        background: var(--espresso); color: var(--paper);
        display: flex; flex-direction: column;
        padding: calc(var(--header-h) + clamp(1rem, 5vh, 3rem)) var(--gutter) max(1.75rem, env(safe-area-inset-bottom));
        /* Closed: hidden + clipped to a 0-height strip at the top */
        visibility: hidden; opacity: 0;
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.7s var(--ease), opacity 0.35s var(--ease), visibility 0s linear 0.7s;
    }
    .site-nav.is-open {
        visibility: visible; opacity: 1; clip-path: inset(0 0 0 0);
        transition: clip-path 0.7s var(--ease), opacity 0.25s var(--ease), visibility 0s;
    }
    /* Hairline under the header area so the logo row reads as a masthead */
    .site-nav::before {
        content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: var(--header-h);
        height: 1px; background: var(--line-dark);
    }

    /* Links: one per row, full-width tap targets, big serif type */
    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 40rem; }
    .site-nav__list > li { border-bottom: 1px solid var(--line-dark); }
    .site-nav__list > li.site-nav__cta { border-bottom: 0; }
    .site-nav a:not(.btn) {
        display: flex; align-items: baseline; gap: 1rem;
        padding: 0.7rem 0 0.6rem;               /* about 64px tall rows on a phone */
        font-family: var(--font-display); font-weight: 400;
        font-size: clamp(2.1rem, 9.5vw, 3.6rem); line-height: 1;
        text-transform: none; letter-spacing: -0.01em;
        transition: color 0.3s var(--ease), transform 0.45s var(--ease);
    }
    /* Small "01 02 03" index numbers (decorative; from data-menu-index) */
    .site-nav a:not(.btn)::before {
        content: attr(data-menu-index);
        flex: 0 0 1.6rem;
        font: 600 0.66rem/1 var(--font-text); letter-spacing: 0.16em; color: var(--muted-dark);
        transform: translateY(-0.9em);
    }
    .site-nav a:not(.btn)::after { content: none; }      /* no desktop underline in the overlay */
    .site-nav a:not(.btn):hover, .site-nav a:not(.btn):focus-visible { color: var(--butter); transform: translateX(0.35rem); }
    /* Current page: italic rust-glow + "you are here" dot */
    .site-nav a[aria-current="page"]:not(.btn) { font-style: italic; color: var(--ember-glow); }
    .site-nav a[aria-current="page"]:not(.btn)::before { color: var(--ember-glow); }
    .site-nav a[aria-current="page"]:not(.btn) { position: relative; }
    .site-nav__list a[aria-current="page"]:not(.btn) { padding-right: 1.5rem; }
    .site-nav__list a[aria-current="page"]:not(.btn)::after {
        content: ""; position: static; display: block; width: 7px; height: 7px; border-radius: 50%;
        background: currentColor; transform: none; align-self: center; margin-left: auto;
    }

    /* Big clear CTA: same rust button as the rest of the site, full width */
    .site-nav__cta { margin-top: 1.75rem; }
    .site-nav .btn {
        width: 100%; min-height: 56px; justify-content: center;
        background: var(--ember-deep); border-color: var(--ember-deep); color: #fff;
        font-size: 0.9rem; letter-spacing: 0.12em;
    }
    .site-nav .btn::after { content: "\2192"; }            /* bring back the arrow here */
    .site-nav .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--espresso); }
    .page--home .site-header:not(.is-solid) .site-nav .btn { background: var(--ember-deep); border-color: var(--ember-deep); color: #fff; }

    /* Footer row inside the menu: phone, Facebook, service area.
       margin-top:auto pushes it to the bottom on tall phones. */
    .site-nav__extras {
        display: grid; gap: 0.6rem; width: 100%; max-width: 40rem;
        margin-top: auto; padding-top: 2rem;
        font-size: 0.85rem; color: var(--muted-dark);
    }
    .site-nav__extras p { margin: 0; }
    .site-nav__phone { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
    .site-nav__phone span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
    .site-nav .site-nav__phone a {
        font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.02em; text-transform: none;
        color: var(--paper); padding: 0.55rem 0; display: inline-block;   /* 44px+ tap target */
    }
    .site-nav .site-nav__social a {
        display: inline-flex; align-items: center; min-height: 44px; padding: 0;
        font: 600 0.72rem/1 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase;
        color: var(--paper); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-dark);
    }
    .site-nav .site-nav__phone a::before, .site-nav .site-nav__social a::before { content: none; }
    .site-nav__area { font-size: 0.75rem; letter-spacing: 0.08em; }

    /* Stagger: each row rises in just after the curtain (--d = delay step) */
    .site-nav__list > li, .site-nav__extras { opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
    .site-nav.is-open .site-nav__list > li, .site-nav.is-open .site-nav__extras { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--d, 0) * 0.05s); }
    .site-nav__list > li:nth-child(2) { --d: 1; }
    .site-nav__list > li:nth-child(3) { --d: 2; }
    .site-nav__list > li:nth-child(4) { --d: 3; }
    .site-nav__list > li:nth-child(5) { --d: 4; }
    .site-nav__list > li:nth-child(6) { --d: 5; }
    .site-nav__list > li:nth-child(7) { --d: 6; }
    .site-nav__extras { --d: 8; }

    /* While open: header goes see-through (the overlay is its background),
       text turns cream, signature switches to the warm glow tone. */
    body.menu-open .site-header { color: var(--paper); }
    body.menu-open .site-header::before { opacity: 0; box-shadow: none; }
    body.menu-open .brand__signature { color: var(--ember-glow); opacity: 0.28; }
    /* Hide the sticky bottom "Check My Date" bar: the menu has its own CTA. */
    body.menu-open .mobile-cta { visibility: hidden; opacity: 0; }
    /* Scroll lock: main.js pins <body> at the current scroll position
       (position:fixed + top) because iOS Safari ignores overflow:hidden. */
    html.menu-open { overflow: hidden; }
    body.menu-open { position: fixed; left: 0; right: 0; overflow: hidden; }
}
/* Very small phones (iPhone SE / mini): slightly smaller logo, drop the word "Menu". */
@media (max-width: 480px) {
    .brand__text { font-size: 1.15rem; letter-spacing: 0.26em; margin-right: -0.26em; }
    .brand__sub { font-size: 0.55rem; letter-spacing: 0.36em; margin-right: -0.36em; }
    .brand__signature { width: 158px; }
}
@media (max-width: 359px) {
    .menu-toggle__label { display: none; }
}
/* Reduced motion: no curtain wipe, no rising rows, no sliding - it simply appears.
   (The global reduced-motion rule in section 18 also removes transitions.) */
@media (prefers-reduced-motion: reduce) {
    .site-nav, .site-nav.is-open { clip-path: none; }
    .site-nav__list > li, .site-nav__extras { transform: none; }
    .site-nav a:not(.btn):hover, .site-nav a:not(.btn):focus-visible { transform: none; }
}

/* ---------- 7. Home: hero ---------- */
.hero {
    position: relative; min-height: 100vh; min-height: 100svh;  /* svh = no jump on phones */
    display: flex; align-items: flex-end;
    color: var(--paper); background: var(--espresso); overflow: hidden; isolation: isolate;
}
.hero__media, .hero__media picture, .hero__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
}
.hero__media img { object-fit: cover; object-position: 50% 45%; animation: hero-zoom 18s var(--ease) both; }
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
/* Dark gradient so the white headline always passes contrast over the photo */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(to top, rgba(28,20,16,0.88) 0%, rgba(28,20,16,0.45) 38%, rgba(28,20,16,0.05) 70%),
        linear-gradient(to right, rgba(28,20,16,0.55), transparent 60%);
}
.hero__content { width: 100%; padding-bottom: clamp(3rem, 8vh, 6rem); padding-top: calc(var(--header-h) + 3rem); }
.hero h1 { margin: 0 0 1.5rem; max-width: 14ch; }
.hero__kicker {   /* the SEO keyword line, styled small above the big display words */
    display: block; font-family: var(--font-text); font-size: var(--step--1); font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--butter); margin-bottom: 1.25rem;
}
.hero__display { display: block; font-size: var(--step-5); line-height: 0.92; letter-spacing: -0.02em; }
.hero__text { font-size: var(--step-1); max-width: 34ch; color: rgba(243,238,230,0.9); margin-bottom: 2rem; }
/* Hero trust line (added Oct 27, 2026): "5.0 stars on Google · 11+ years photographing weddings · Fully insured".
   Small, quiet text under the buttons; wraps neatly on phones. Stars reuse the ember accent. */
.hero__trust { margin-top: 1.5rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(243,238,230,0.85); display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.hero__trust .stars { color: var(--ember); letter-spacing: 0.15em; }
.hero__caption {   /* tiny caption bottom-right, like a magazine photo credit */
    position: absolute; right: var(--gutter); bottom: clamp(1.5rem, 4vh, 2.5rem);
    font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243,238,230,0.75);
    writing-mode: vertical-rl; transform: rotate(180deg);
}
@media (max-width: 700px) { .hero__caption { display: none; } }
.hero__scroll {
    display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2.5rem;
    font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243,238,230,0.8); text-decoration: none;
}
.hero__scroll span { width: 1px; height: 36px; background: currentColor; transform-origin: top; animation: scroll-line 2.4s var(--ease) infinite; }
@keyframes scroll-line { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- 8. Home sections ---------- */

/* 8a. Marquee strip: service areas scrolling slowly (pauses on hover; static if reduced motion) */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper); padding: 1.1rem 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
    font-family: var(--font-display); font-size: var(--step-2); white-space: nowrap; padding: 0 1.4rem;
    display: inline-flex; align-items: center; gap: 2.8rem;
}
.marquee__track span::after { content: "\2726"; font-size: 0.5em; color: var(--ember); } /* small star */
@keyframes marquee { to { transform: translateX(-50%); } }

/* 8b. Intro: big statement + reasons */
.intro { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 960px) { .intro { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.intro__statement { font-size: var(--step-4); line-height: 0.98; margin: 0; }
.reasons { list-style: none; display: grid; gap: 0; counter-reset: reason; }
.reasons li { counter-increment: reason; padding: 1.5rem 0 1.5rem 3.5rem; border-top: 1px solid var(--line); position: relative; }
.reasons li:last-child { border-bottom: 1px solid var(--line); }
.reasons li::before {
    content: counter(reason, decimal-leading-zero); position: absolute; left: 0; top: 1.6rem;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; color: var(--ember-deep);
}
.reasons strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.1; margin-bottom: 0.35rem; }
.reasons p { margin: 0; color: var(--muted); }

/* 8c. Featured work: asymmetric editorial grid (12 columns on desktop) */
.editorial-grid { display: grid; gap: clamp(0.75rem, 1.5vw, 1.5rem); grid-template-columns: repeat(2, 1fr); }
.editorial-grid figure { margin: 0; position: relative; overflow: hidden; }
.editorial-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.editorial-grid a:hover img { transform: scale(1.04); }
.editorial-grid figcaption { font-size: var(--step--1); color: var(--muted); padding-top: 0.6rem; }
.editorial-grid .eg-1 { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.editorial-grid .eg-2, .editorial-grid .eg-3 { aspect-ratio: 4 / 5; }
.editorial-grid .eg-4 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.editorial-grid .eg-5, .editorial-grid .eg-6 { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
    .editorial-grid { grid-template-columns: repeat(12, 1fr); align-items: start; }
    .editorial-grid .eg-1 { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
    .editorial-grid .eg-2 { grid-column: 9 / span 4; aspect-ratio: 4 / 5; margin-top: 18%; }
    .editorial-grid .eg-3 { grid-column: 2 / span 4; aspect-ratio: 4 / 5; margin-top: -8%; }
    .editorial-grid .eg-4 { grid-column: 7 / span 6; aspect-ratio: 3 / 2; margin-top: 6%; }
    .editorial-grid .eg-5 { grid-column: 1 / span 5; aspect-ratio: 3 / 2; margin-top: 4%; }
    .editorial-grid .eg-6 { grid-column: 7 / span 4; aspect-ratio: 4 / 5; margin-top: -10%; }
}
.editorial-grid figure > a, .editorial-grid picture { display: block; height: 100%; }
.editorial-grid .eg-media { height: calc(100% - 2rem); overflow: hidden; }

/* 8d. Signature night-portrait band (dark, cinematic) */
.night { overflow: hidden; }
.night__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 960px) { .night__grid { grid-template-columns: 1.25fr 1fr; } }
.night__main { position: relative; }
.night__main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.night__badge {   /* round "signature" stamp overlapping the photo */
    position: absolute; right: -1rem; bottom: -1.5rem; width: 128px; height: 128px; border-radius: 50%;
    background: var(--ember); color: #fff; display: grid; place-items: center; text-align: center;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4;
    transform: rotate(-10deg); box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}
.night__badge span { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0; text-transform: none; font-style: italic; display: block; font-weight: 400; }
.night__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 2.5rem; }
.night__strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; opacity: 0.9; transition: opacity 0.4s; }
.night__strip a:hover img { opacity: 1; }
.night h2 { font-size: var(--step-4); }

/* 8e. "What happens next" steps (home teaser) */
.steps { list-style: none; display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.steps li { counter-increment: step; padding: 2rem 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); position: relative; }
.steps li::before {
    content: counter(step); display: block; font-family: var(--font-display); font-size: 3.6rem; line-height: 1;
    color: var(--ember); margin-bottom: 1.25rem; font-style: italic;
}
.steps h3 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.steps p { margin: 0; color: var(--muted); }

/* 8f. Kind words (testimonials) */
.quotes { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote { margin: 0; position: relative; padding-top: 3.2rem; }
.quote::before {   /* big decorative quotation mark */
    content: "\201C"; position: absolute; top: -1.2rem; left: -0.3rem;
    font-family: var(--font-display); font-size: 7rem; line-height: 1; color: var(--ember);
}
.quote p { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.22; margin-bottom: 1.25rem; }
.quote cite { font-style: normal; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.on-dark .quote cite { color: var(--muted-dark); }
.rating-line { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-weight: 600; }
.rating-line .stars { color: var(--ember); letter-spacing: 0.15em; }

/* 8g. Pricing teaser uses the pricing cards (section 11) */

/* 8h. Final CTA band (photo background) */
.cta-band { position: relative; color: var(--paper); text-align: center; overflow: hidden; isolation: isolate; background: var(--espresso); }
.cta-band picture, .cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: rgba(28,20,16,0.62); z-index: -1; }
.cta-band h2 { font-size: var(--step-5); line-height: 0.95; max-width: 12ch; margin: 0 auto 1.5rem; }
.cta-band p { max-width: 44ch; margin: 0 auto 2rem; color: rgba(243,238,230,0.88); }
.cta-band .btn-row { justify-content: center; }
.cta-band__small { margin-top: 1.5rem !important; font-size: var(--step--1); }
.cta-band__small a { color: var(--paper); }

/* ---------- 9. Inner page header ---------- */
.page-head { padding: clamp(3.5rem, 8vw, 7.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 16ch; margin-bottom: 1.5rem; }
.page-head .lede { color: var(--muted); max-width: 52ch; margin: 0; }
.page-head__grid { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 960px) { .page-head__grid { grid-template-columns: 1.4fr 1fr; } }

/* Simple readable text column for about/venues/etc. */
.prose { max-width: 66ch; }
.prose p { font-size: var(--step-0); }
.prose > p:first-of-type::first-letter {   /* editorial drop cap. Oct 28, 2026: ">" added so it no longer hits the first <p> inside a blockquote (About page quote showed a giant "...p") */
    font-family: var(--font-display); float: left; font-size: 4.6em; line-height: 0.8; padding: 0.08em 0.12em 0 0; color: var(--ember-deep);
}
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.3fr 1fr; } }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sticky-media { position: sticky; top: calc(var(--header-h) + 2rem); }

/* ---------- 10. Portfolio masonry + lightbox ---------- */
/* CSS columns = true masonry that keeps every photo's real shape (no cropping). */
.masonry { columns: 1; column-gap: clamp(0.75rem, 1.5vw, 1.25rem); }
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1100px) { .masonry { columns: 3; } }
.masonry__item { break-inside: avoid; margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem); }
.masonry__item a { display: block; overflow: hidden; cursor: zoom-in; }
.masonry__item img { width: 100%; transition: transform 1s var(--ease), filter 0.6s; }
.masonry__item a:hover img { transform: scale(1.03); }
.masonry__item figcaption { font-size: var(--step--1); color: var(--muted); padding: 0.55rem 0 0.2rem; }
.on-dark .masonry__item figcaption { color: var(--muted-dark); }
.chapter-nav { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 2rem; }
.chapter-nav a {
    text-decoration: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.6rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; transition: background 0.3s, color 0.3s;
}
.chapter-nav a:hover { background: var(--espresso); color: var(--paper); }

/* Lightbox (built by main.js). Native <dialog> = built-in focus handling + Esc. */
.lightbox {
    width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: rgba(18, 12, 9, 0.97); color: var(--paper);
}
.lightbox::backdrop { background: rgba(18, 12, 9, 0.9); }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; }
.lightbox__stage { display: grid; place-items: center; padding: 4.5rem 4.5rem 1rem; min-height: 0; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.5rem 1.5rem; font-size: var(--step--1); }
.lightbox__caption { color: var(--muted-dark); margin: 0; }
.lightbox__count { letter-spacing: 0.15em; font-weight: 600; white-space: nowrap; }
.lightbox button {
    position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-dark);
    background: rgba(28,20,16,0.6); color: var(--paper); font-size: 1.4rem; cursor: pointer; display: grid; place-items: center;
    transition: background 0.3s, border-color 0.3s;
}
.lightbox button:hover { background: var(--ember-deep); border-color: var(--ember-deep); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
    .lightbox__stage { padding: 4.5rem 0.5rem 1rem; }
    .lightbox__prev, .lightbox__next { top: auto; bottom: 4.2rem; transform: none; }
}

/* ---------- 11. Pricing cards ---------- */
.packages { display: grid; gap: 1.25rem; align-items: stretch; }
/* 4 collections (approved ladder): 2-up on tablets, 4-up on wide screens.
   With 3 packages, change repeat(4, ...) to repeat(3, ...). */
@media (min-width: 700px) { .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1180px) { .packages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }  /* minmax(0,1fr): cards never push past the container */
.package {
    display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); position: relative;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.package:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(28,20,16,0.08); }
.package h3 { font-size: var(--step-2); margin-bottom: 0.3rem; }
.package__for { color: var(--muted); font-size: var(--step--1); margin-bottom: 1.25rem; }
.package .price { font-family: var(--font-display); font-size: clamp(2.8rem, 2rem + 3vw, 4rem); line-height: 1; margin: 0 0 1.5rem; }
.package .price small { font-family: var(--font-text); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; margin-left: 0.3rem; }
.package ul { list-style: none; display: grid; gap: 0.7rem; margin-bottom: 2rem; flex: 1; align-content: start; } /* start: short lists stay tight, buttons still line up */
.package li { padding-left: 1.6rem; position: relative; }
.package li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.8rem; height: 1px; background: var(--ember); }
.package .btn { width: 100%; white-space: nowrap; justify-content: center; }
/* 4-up cards are narrower: trim button padding so "Check my date" stays on one line */
@media (min-width: 1180px) { .packages .package .btn { padding-inline: 0.75rem; gap: 0.4rem; font-size: 0.8rem; letter-spacing: 0.04em; } }
/* "Most popular" card is the dark one: the eye goes there first (anchoring). */
.package.popular { background: var(--espresso); color: var(--paper); border-color: var(--espresso); }
@media (min-width: 1180px) { .package.popular { transform: translateY(-1.25rem); } .package.popular:hover { transform: translateY(-1.6rem); } }
.package.popular .package__for, .package.popular .price small { color: var(--muted-dark); }
.package.popular li::before { background: var(--ember-glow); }
.package.popular .btn { background: var(--paper); color: var(--espresso); border-color: var(--paper); }
.package.popular .btn:hover { background: var(--butter); border-color: var(--butter); }
.package__tag {
    position: absolute; top: -0.85rem; left: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--ember); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.4rem 0.8rem; border-radius: 999px;
}
.package-note { margin-top: 2.5rem; text-align: center; color: var(--muted); }
/* Add-ons list (empty until add-on prices are set in includes/packages.php) */
.addons { display: grid; gap: 0; list-style: none; }
.addons li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.included { display: grid; gap: 1.5rem; list-style: none; }
@media (min-width: 760px) { .included { grid-template-columns: repeat(3, 1fr); } }
.included li { border-top: 1px solid var(--espresso); padding-top: 1rem; }
.included strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); }

/* ---------- 12. FAQ accordion (<details>/<summary>, works without JS) ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    list-style: none; cursor: pointer; padding: 1.6rem 3rem 1.6rem 0; position: relative;
    display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h2 { font-size: var(--step-2); margin: 0; line-height: 1.15; }
/* plus sign that rotates into an x */
.faq summary::after, .faq summary::before {
    content: ""; position: absolute; right: 0.4rem; top: 50%; width: 18px; height: 1.5px; background: var(--ember-deep);
    transition: transform 0.4s var(--ease);
}
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0deg); }
.faq summary:hover h2 { color: var(--ember-deep); }
.faq__answer { padding: 0 0 1.8rem; max-width: 62ch; color: var(--muted); }
.faq__answer p:last-child { margin: 0; }

/* ---------- 13. Contact form + booking path toggle ---------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.form-card { background: #FBF8F3; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 3rem); box-shadow: 0 30px 60px rgba(28,20,16,0.06); }
.inquiry-form { display: grid; gap: 1.2rem; }
.inquiry-form label { display: grid; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; }
.inquiry-form .optional { font-weight: 400; color: var(--muted); }
.inquiry-form input, .inquiry-form textarea, .inquiry-form select {
    width: 100%; font: inherit; font-size: 16px; font-weight: 400; letter-spacing: 0;   /* 16px stops iOS zoom */
    padding: 0.85rem 0.95rem; color: var(--espresso);
    border: 1px solid rgba(28,20,16,0.25); border-radius: var(--radius); background: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.inquiry-form input:focus, .inquiry-form textarea:focus {
    outline: none; border-color: var(--ember-deep); box-shadow: 0 0 0 3px rgba(196,85,43,0.18);
}
.form-row { display: grid; gap: 1.2rem; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field-error { color: #9B2C2C; font-weight: 500; font-size: 0.85rem; letter-spacing: 0; }
.form-message { padding: 1.25rem 1.5rem; border-radius: var(--radius); margin: 0 0 1.5rem; }
.form-message.success { background: #EAF1E6; }
.form-message.error { background: #F8E7E3; }
.hp { position: absolute; left: -9999px; }   /* honeypot stays off-screen */
.form-note { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* Booking path toggle: two big radio "cards" that look like a segmented switch */
.path-toggle { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.path-toggle legend { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 0.6rem; padding: 0; }
.path-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.path-option { position: relative; }
.path-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }  /* real radio stays accessible */
.path-option span {
    display: grid; gap: 0.2rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid rgba(28,20,16,0.25); border-radius: var(--radius);
    background: #fff; cursor: pointer; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.path-option strong { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
.path-option small { color: var(--muted); font-size: 0.8rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.path-option input:checked + span { border-color: var(--ember-deep); background: #FFF7F1; box-shadow: inset 0 0 0 1px var(--ember-deep); }
.path-option input:focus-visible + span { outline: 2px solid var(--ember-deep); outline-offset: 2px; }
/* "How should we chat?" pills, only shown for the Chat first path */
.chat-via { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chat-via label { display: block; }
.chat-via input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chat-via span { display: inline-block; padding: 0.55rem 1rem; border: 1px solid rgba(28,20,16,0.25); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 500; letter-spacing: 0; }
.chat-via input:checked + span { background: var(--espresso); color: var(--paper); border-color: var(--espresso); }
.chat-via input:focus-visible + span { outline: 2px solid var(--ember-deep); outline-offset: 2px; }
.js .inquiry-form[data-path="book"] [data-chat-only] { display: none; }

.next-steps { list-style: none; counter-reset: ns; display: grid; gap: 1.25rem; margin: 2rem 0; }
.next-steps li { counter-increment: ns; display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.9rem; align-items: start; }
.next-steps li::before {
    content: counter(ns); width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--ember-deep);
    display: grid; place-items: center; font-family: var(--font-display); font-size: 1.3rem; color: var(--ember-deep);
}
.next-steps strong { display: block; }
.next-steps p { margin: 0; color: var(--muted); }
.contact-alt { font-size: var(--step-1); }

/* ---------- 14. Process timeline ---------- */
.timeline { list-style: none; position: relative; display: grid; gap: clamp(3rem, 7vw, 6rem); counter-reset: tl; }
.timeline::before {   /* the vertical line */
    content: ""; position: absolute; top: 0; bottom: 0; left: 1.6rem; width: 1px; background: var(--line);
}
.timeline__step { counter-increment: tl; position: relative; padding-left: 4.75rem; display: grid; gap: 1.5rem; }
.timeline__step::before {   /* numbered circle on the line */
    content: counter(tl, decimal-leading-zero); position: absolute; left: 0; top: 0;
    width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--ember-deep);
    display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ember-deep);
}
.section--oat .timeline__step::before { background: var(--paper-2); }
.timeline__step h2 { font-size: var(--step-3); margin-bottom: 0.4rem; }
.timeline__when { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember-deep); margin: 0.6rem 0 0.8rem; }
.timeline__body p { color: var(--muted); max-width: 52ch; }
.timeline__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.timeline__icon { width: 64px; height: 64px; color: var(--ember); }
.timeline__icon svg { width: 100%; height: 100%; }
@media (min-width: 960px) {
    /* Desktop: line in the centre, steps alternate left/right */
    .timeline::before { left: 50%; }
    .timeline__step { padding-left: 0; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
    .timeline__step::before { left: 50%; transform: translateX(-50%); }
    .timeline__step:nth-child(even) .timeline__body { order: 2; }
    .timeline__step:nth-child(odd) .timeline__body { text-align: right; justify-self: end; }
    .timeline__step:nth-child(odd) .timeline__body p { margin-left: auto; }
    .timeline__step:nth-child(odd) .timeline__icon { margin-left: auto; }
}
.question-tag {   /* small inline marker (currently unused) */
    display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--butter); color: var(--espresso); padding: 0.15rem 0.5rem; border-radius: 3px; vertical-align: middle;
}

/* ---------- 15. Venues, blog cards, testimonials page ---------- */
.venue-list { list-style: none; border-top: 1px solid var(--line); counter-reset: v; }
.venue-list li {
    counter-increment: v; display: grid; grid-template-columns: 3rem 1fr; align-items: baseline;
    padding: 1.5rem 0; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; transition: padding 0.4s var(--ease), color 0.3s;
}
.venue-list li::before { content: counter(v, decimal-leading-zero); font-family: var(--font-text); font-size: 0.8rem; font-weight: 700; color: var(--ember-deep); }
.venue-list li:hover { padding-left: 0.75rem; color: var(--ember-deep); }
.venue-list small { display: block; font-family: var(--font-text); font-size: var(--step--1); color: var(--muted); margin-top: 0.3rem; }

.cards { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card { display: grid; gap: 1rem; text-decoration: none; color: inherit; }
.card__media { overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card h2 { font-size: var(--step-2); margin: 0; }
.card__meta { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember-deep); margin: 0; }
.card p { margin: 0; color: var(--muted); }

/* ---------- 16. Footer + sticky mobile CTA ---------- */
.site-footer { background: var(--espresso); color: var(--paper); padding: clamp(4rem, 8vw, 7rem) 0 2rem; position: relative; overflow: hidden; }
.site-footer__signature { position: absolute; right: -4%; top: -6%; width: min(760px, 80vw); color: var(--ember); opacity: 0.09; pointer-events: none; }
.site-footer__grid { display: grid; gap: 2.5rem; position: relative; }
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.site-footer__brand { font-family: var(--font-display); font-size: var(--step-3); text-transform: uppercase; letter-spacing: 0.22em; line-height: 1; margin-bottom: 1.25rem; }
.site-footer__intro p:not(.site-footer__brand) { color: var(--muted-dark); max-width: 40ch; margin-bottom: 1.75rem; }
.site-footer__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember-glow); margin-bottom: 1rem; }
.site-footer ul { list-style: none; display: grid; gap: 0.4rem; }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--butter); text-decoration: underline; text-underline-offset: 3px; }
.site-footer address { color: var(--muted-dark); margin-top: 1rem; }
.site-footer__legal { position: relative; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); font-size: var(--step--1); color: var(--muted-dark); }
.site-footer__legal p { margin: 0; }

.mobile-cta { display: none; }
@media (max-width: 700px) {
    .mobile-cta {
        display: flex; position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 90;
        box-shadow: 0 10px 30px rgba(28,20,16,0.35);
        transform: translateY(150%); transition: transform 0.5s var(--ease);
    }
    /* main.js shows it after the hero, so it never covers the hero's own button */
    .mobile-cta.is-visible, .no-js .mobile-cta { transform: none; }
    body { padding-bottom: 5.25rem; }
}

/* ---------- 17. Scroll reveal (fade-up). Only hides things when JS is running. ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal-delay="1"] { transition-delay: 0.12s; }
.js [data-reveal-delay="2"] { transition-delay: 0.24s; }
.js [data-reveal-delay="3"] { transition-delay: 0.36s; }

/* ---------- 18. Reduced motion + print ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
    .marquee__track { transform: none; }
}
@media print {
    .site-header, .mobile-cta, .marquee, body::after { display: none !important; }
    .page--inner main { padding-top: 0; }
}

/* Inline signature SVGs scale to their wrapper's width */
.brand__signature svg, .site-footer__signature svg { width: 100%; height: auto; }
.quote blockquote { margin: 0; }

/* ---- Fixes after first screenshot review ---- */
.cta-band h2 em { color: var(--butter); }                 /* contrast on the dark photo band */
.site-footer a.btn--light { color: var(--espresso); }      /* footer link colour must not override the button */
.site-footer a.btn--light:hover { color: var(--espresso); text-decoration: none; }
.site-footer__signature { top: auto; bottom: -12%; right: -6%; width: min(980px, 95vw); }
/* (signature opacity now set in section 6, header + logo) */
/* Form labels as blocks, so "(optional)" stays on the same line as the label text */
.inquiry-form > label, .form-row > label { display: block; }
.inquiry-form > label input, .inquiry-form > label textarea, .form-row > label input { display: block; margin-top: 0.45rem; }
.inquiry-form .field-error { display: block; margin-top: 0.35rem; }
.site-footer__signature { opacity: 0.12; }

/* ---------------------------------------------------------------------
   About page photos of Steven (added Oct 28, 2026)
   - .about-portrait: main portrait beside the text. Square (1 / 1) instead of
     the usual 4 / 5 so his crossed arms and shoulders aren't cut off.
     On phones (single column) it moves above the text so his face comes first.
   - .about-figure: the supporting camera shot inside the text column.
   --------------------------------------------------------------------- */
.about-portrait { margin: 0; }
.about-portrait img { aspect-ratio: 1 / 1; object-position: center top; }
@media (max-width: 959px) { .about-portrait { order: -1; position: static; } }
.about-figure { margin: 2.5rem 0; }
.about-figure img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.about-figure figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 0.6rem; }
/* Oct 28, 2026: a quote inside .prose (About page) was shrunk by ".prose p";
   this restores the intended .quote size. */
.prose .quote p { font-size: var(--step-2); }