/* ==========================================================================
   WordsWorth Publishers — Master Stylesheet
   Custom, framework-free CSS recreating the reference design.
   Sections:
     1.  Design tokens
     2.  Reset & base
     3.  Typography helpers
     4.  Layout primitives (container, section)
     5.  Decorative utilities (ornate rule, ebony panel, textures)
     6.  Buttons
     7.  Animations & scroll reveal
     8.  Navigation
     9.  Hero
     10. Services — The Craft
     11. Genres — The Archive
     12. Philosophy — Legacy
     13. Testimonials
     14. Process — The Atelier
     15. Contact — Correspondence
     16. Footer
     17. Form feedback / accessibility
     18. Responsive breakpoints
   ========================================================================== */

/* ------------------------------------------------------------------ 1. Tokens */
:root {
    /* Palette (oklch — matches the reference exactly) */
    --walnut-deep: oklch(16% 0.02 55);
    --walnut:      oklch(22% 0.035 55);
    --oak:         oklch(35% 0.055 55);
    --oak-light:   oklch(58% 0.075 60);
    --gold:        oklch(76% 0.11 80);
    --gold-soft:   oklch(65% 0.09 78);
    --parchment:     oklch(94% 0.035 82);
    --parchment-dim: oklch(86% 0.04 82);
    --ink:         oklch(14% 0.01 60);
    --oxblood:     oklch(38% 0.11 25);

    /* Inner-page section-background rhythm — supplements the palette above,
       doesn't replace it. Reuses existing tokens (walnut, oak, gold, oxblood,
       parchment) wherever they already match; only adds the shades that
       were genuinely missing (a deeper charcoal, a warmer beige, a lighter
       paper white, a mahogany distinct from walnut/oxblood). */
    --mahogany:    oklch(21% 0.05 38);
    --charcoal:    oklch(11% 0.014 50);
    --beige:       oklch(82% 0.045 74);
    --beige-dim:   oklch(77% 0.05 72);
    --paper-white: oklch(97% 0.018 85);
    --brass:       oklch(66% 0.09 76);

    /* Fonts */
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body:    "EB Garamond", Georgia, serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

    /* Layout */
    --container: 80rem;   /* max-w-7xl */
    --container-6: 72rem; /* max-w-6xl */
    --container-5: 64rem; /* max-w-5xl */
    --pad-x: 1.5rem;
    --pad-x-lg: 3rem;
}

/* ------------------------------------------------------------------ 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    font-size: 17px;
    background-color: var(--walnut-deep);
    color: var(--parchment);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5 { font-weight: 400; line-height: 1.1; }
p { font-size: 23px; }
h2 { font-size: 30px; }

/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ------------------------------------------------------------- 3. Typography */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }
em { font-style: italic; }

/* Small-caps mono eyebrow used throughout */
.eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: var(--gold);
}
.eyebrow--soft { color: var(--gold-soft); }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* ------------------------------------------------------------- 4. Layout */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}
.container--6 { max-width: var(--container-6); }
.container--5 { max-width: var(--container-5); }

.section { position: relative; padding-block: 8rem; overflow: hidden; }

/* ------------------------------------------------------- 5. Decorative utils */

/* Ornate horizontal rule with a centred fleuron */
.ornate-rule {
    position: relative;
    height: 1px;
    background: linear-gradient(90deg, transparent, oklch(76% 0.11 80 / 0.5), transparent);
}
.ornate-rule::before {
    content: "❦";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 0.75rem;
    font-size: 0.85rem;
    color: var(--gold);
    background: var(--walnut-deep);
}
.ornate-rule--oak { background: linear-gradient(90deg, transparent, oklch(35% 0.055 55 / 0.5), transparent); }
.ornate-rule--oak::before { background: var(--parchment); color: var(--oxblood); }

/* Dark, grained "ebony" panel */
.ebony-panel {
    position: relative;
    background-color: oklch(14% 0.015 55);
    background-image:
        repeating-linear-gradient(90deg, oklch(8% 0.01 55 / 0.6) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, oklch(22% 0.03 55 / 0.35) 0 1px, transparent 1px 11px),
        radial-gradient(120% 60% at 30% 20%, oklch(24% 0.035 55 / 0.55), transparent 60%),
        radial-gradient(100% 80% at 80% 90%, oklch(5% 0 0 / 0.7), transparent 70%);
    box-shadow: inset 0 1px oklch(100% 0 0 / 0.06), inset 0 0 60px oklch(0% 0 0 / 0.55);
}
.ebony-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.4;
    pointer-events: none;
    background-image: radial-gradient(oklch(0% 0 0 / 0.35) 1px, transparent 1px);
    background-size: 4px 4px;
}
.ebony-panel > * { position: relative; z-index: 1; }

/* Parchment micro-dot texture */
.parchment-texture {
    background-image: radial-gradient(oklch(40% 0.08 55 / 0.08) 1px, transparent 1px);
    background-size: 4px 4px;
}

/* Vertical set type (genre spines) */
.vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); }

/*
 * Wood-plank background wrapper (services / process).
 * Standard full-bleed treatment — same technique the reference site itself
 * uses: cover + center. The photo always shows in full (no cropping-to-a-
 * strip, no fade to a flat colour partway down); on very tall sections it
 * simply scales up like any hero background photo does. This keeps the
 * actual image visible everywhere instead of substituting a solid colour.
 */
.wood-bg {
    background-image:
        linear-gradient(oklch(0.33 0.03 45.05 / 0.68), oklch(30% 0.05 45 / 0.68)),
        url("../images/finalss.jpg");
    background-size: cover;
    background-position: center;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .wood-bg {
        background-image:
            linear-gradient(oklch(0.33 0.03 45.05 / 0.68), oklch(30% 0.05 45 / 0.68)),
            image-set(
                url("../images/finalss.webp") type("image/webp"),
                url("../images/finalss.jpg") type("image/jpeg")
            );
    }
}

/* ------------------------------------------------------------- 6. Buttons */

/* Primary "book spine" button */
.book-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.4rem 0.7rem 2rem;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: oklch(88% 0.09 82);
    text-shadow: 0 1px 2px oklch(0% 0 0 / 0.7);
    border: 1px solid oklch(12% 0.02 55);
    border-radius: 2px 4px 4px 2px;
    background-image: url("../images/wood-texture.jpg"),
        linear-gradient(oklch(38% 0.08 55), oklch(22% 0.04 55));
    background-size: cover;
    background-blend-mode: multiply;
    box-shadow:
        inset 0 1px oklch(100% 0 0 / 0.18),
        inset -2px 0 4px oklch(0% 0 0 / 0.4),
        4px 4px 0 -1px oklch(14% 0.02 55),
        6px 6px 0 -1px oklch(28% 0.05 55),
        8px 10px 20px -6px oklch(0% 0 0 / 0.7);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
/* WebP variant (~27% the file size) of the same background-blend-mode
   stack, on a button that repeats many times on every page. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .book-btn {
        background-image: image-set(url("../images/wood-texture.webp") type("image/webp"), url("../images/wood-texture.jpg") type("image/jpeg")),
            linear-gradient(oklch(38% 0.08 55), oklch(22% 0.04 55));
    }
}
.book-btn::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 10px;
    background: linear-gradient(90deg, oklch(14% 0.02 55), oklch(28% 0.05 55));
    border-right: 1px solid oklch(0% 0 0 / 0.5);
}
.book-btn::after {
    content: "";
    position: absolute;
    top: 22%; bottom: 22%; left: 3px;
    width: 4px;
    opacity: 0.75;
    background: linear-gradient(180deg,
        var(--gold) 0 15%, transparent 15% 45%,
        var(--gold) 45% 60%, transparent 60% 85%,
        var(--gold) 85% 100%);
}
.book-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow:
        inset 0 1px oklch(100% 0 0 / 0.2),
        inset -2px 0 4px oklch(0% 0 0 / 0.4),
        6px 6px 0 -1px oklch(14% 0.02 55),
        8px 8px 0 -1px oklch(28% 0.05 55),
        12px 14px 24px -6px oklch(0% 0 0 / 0.75);
}
.book-btn:active { transform: translate(0, 0); }

/* Ghost / outline button */
.ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.9rem 2rem;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    background: transparent;
    border: 1px solid oklch(76% 0.11 80 / 0.4);
    border-radius: 2px;
    transition: background 0.3s, border-color 0.3s;
    cursor: pointer;
}
.ghost-btn:hover {
    border-color: var(--gold);
    background: oklch(76% 0.11 80 / 0.08);
}

/* Visible focus ring for keyboard users */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ------------------------------------------------------- 7. Animations */
@keyframes ken-burns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-1%, -1%); }
}
.ken-burns { animation: ken-burns 24s ease-in-out infinite alternate; }

@keyframes flicker {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.85; }
}
.candle-flicker { animation: flicker 3.6s ease-in-out infinite; }

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s cubic-bezier(0.2, 0.6, 0.2, 1),
                transform 1s cubic-bezier(0.2, 0.6, 0.2, 1);
    will-change: opacity, transform;
}
.reveal[data-visible="true"] { opacity: 1; transform: none; }

/* ------------------------------------------------------------- 8. Navigation */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid oklch(76% 0.11 80 / 0.1);
    background: oklch(16% 0.02 55 / 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.nav__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 1rem var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand__mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: oklch(35% 0.055 55 / 0.6);
    box-shadow: 0 0 0 1px oklch(76% 0.11 80 / 0.3);
    padding: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--parchment);
}
.brand__sub {
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold-soft);
}
.nav__links {
    display: none;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.5rem;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: oklch(94% 0.035 82 / 0.65);
}
.nav__links a { white-space: nowrap; flex-shrink: 0; transition: color 0.3s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--gold); }
.nav__cta { flex-shrink: 0; }

/* Services mega-dropdown (desktop) */
.nav__dropdown-wrap { position: relative; }
.nav__dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s;
    flex-shrink: 0;
}
.nav__dropdown-trigger:hover, .nav__dropdown-trigger.is-active { color: var(--gold); }
.nav__dropdown-chevron { transition: transform 0.25s ease; flex-shrink: 0; }
.nav__dropdown-wrap:hover .nav__dropdown-chevron,
.nav__dropdown-wrap:focus-within .nav__dropdown-chevron,
.nav__dropdown-wrap.is-open .nav__dropdown-chevron { transform: rotate(180deg); }

.nav__dropdown {
    position: absolute;
    top: calc(100% + 1.25rem);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: max-content;
    min-width: 30rem;
    max-width: min(38rem, calc(100vw - 2 * var(--pad-x)));
    background: var(--walnut-deep);
    border: 1px solid oklch(76% 0.11 80 / 0.15);
    border-radius: 6px;
    box-shadow: 0 24px 48px -16px oklch(0% 0 0 / 0.55);
    padding: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav__dropdown-wrap:hover .nav__dropdown,
.nav__dropdown-wrap:focus-within .nav__dropdown,
.nav__dropdown-wrap.is-open .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav__dropdown-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.15rem 1.75rem; }
.nav__dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    border-radius: 4px;
    text-transform: none;
    letter-spacing: normal;
    transition: background-color 0.2s;
}
.nav__dropdown-item:hover, .nav__dropdown-item:focus-visible { background: oklch(76% 0.11 80 / 0.08); }
.nav__dropdown-label {
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--parchment);
    transition: color 0.2s;
}
.nav__dropdown-item:hover .nav__dropdown-label,
.nav__dropdown-item:focus-visible .nav__dropdown-label { color: var(--gold); }
.nav__dropdown-blurb { font-family: var(--font-body); font-size: 17px; line-height: 1.4; color: oklch(94% 0.035 82 / 0.5); }

/* Mobile menu toggle */
.nav__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.6rem;
    background: transparent;
    border: 1px solid oklch(76% 0.11 80 / 0.3);
    border-radius: 3px;
    cursor: pointer;
}
.nav__toggle span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--gold);
    transition: transform 0.3s, opacity 0.3s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile dropdown panel */
.nav__mobile {
    display: none;
    border-top: 1px solid oklch(76% 0.11 80 / 0.1);
    background: oklch(16% 0.02 55 / 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.nav__mobile.open { display: block; }
.nav__mobile ul { display: flex; flex-direction: column; padding: 1rem var(--pad-x) 1.5rem; }
.nav__mobile a {
    padding: 0.9rem 0;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: oklch(94% 0.035 82 / 0.7);
    border-bottom: 1px solid oklch(76% 0.11 80 / 0.08);
    transition: color 0.3s;
}
.nav__mobile a:hover, .nav__mobile a.is-active { color: var(--gold); }
.nav__mobile .book-btn { margin-top: 1.25rem; align-self: flex-start; }

/* Services disclosure (mobile) */
.nav__mobile-disclosure {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.9rem 0;
    background: none;
    border: none;
    border-bottom: 1px solid oklch(76% 0.11 80 / 0.08);
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: oklch(94% 0.035 82 / 0.7);
    cursor: pointer;
    transition: color 0.3s;
}
.nav__mobile-disclosure:hover, .nav__mobile-disclosure.is-active { color: var(--gold); }
.nav__mobile-disclosure[aria-expanded="true"] .nav__dropdown-chevron { transform: rotate(180deg); }
.nav__mobile-submenu {
    display: none;
    flex-direction: column;
    padding-left: 1rem;
}
.nav__mobile-submenu.open { display: flex; }
.nav__mobile-submenu a {
    padding: 0.65rem 0;
    font-family: var(--font-body);
    font-size: 14px;
    text-transform: none;
    letter-spacing: normal;
    color: oklch(94% 0.035 82 / 0.6);
    border-bottom: 1px solid oklch(76% 0.11 80 / 0.05);
}

/* ------------------------------------------------------------- 9. Hero */
.hero {
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 560px;
    overflow: hidden;
}
/* z-index:0 here establishes a stacking context so the video/fallback/scrim
   z-indexes below are contained INSIDE .hero__media and can never compete
   with .hero__content / .hero__scroll for paint order (they explicitly sit
   above at z-index:2). Without this, position:absolute with no z-index does
   NOT create a stacking context, so a child's z-index:1 leaks out and can
   paint over later sibling content that has no z-index of its own. */
.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--walnut-deep); }
/* Base layer: static poster image — always visible beneath the videos, and
   the only thing shown at all if JS never boots or <video> isn't supported. */
.hero__fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
.hero__fallback img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Video layer: two stacked elements crossfade between clips (main.js swaps
   which one carries .is-active); both sit on top of the poster image. */
.hero__video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.hero__video.is-active { opacity: 1; }
.hero__media::after,
.hero__scrim-v, .hero__scrim-h { content: ""; position: absolute; inset: 0; z-index: 2; }
.hero__scrim-v {
    background: linear-gradient(to bottom,
        oklch(16% 0.02 55 / 0.4), oklch(16% 0.02 55 / 0.28), oklch(16% 0.02 55 / 0.62));
}
.hero__scrim-h {
    background: linear-gradient(to right,
        oklch(16% 0.02 55 / 0.35), transparent, oklch(16% 0.02 55 / 0.3));
}
/* Flat wash on top of the directional scrims — a light safety margin for
   text contrast, layered on top of the scrims above (both now correctly
   z-indexed above the video/poster; previously they had no z-index and the
   active video painted over them, so this and the scrims had no visible
   effect). Kept light because it compounds with the two scrim layers below
   — stacking three dark layers at the strengths tuned for a single opaque
   wash quickly crushes darker footage to near-black. Plain black rather
   than the walnut-deep brand tint: neutral, and a warm tint here would
   fight for perceptual "darkness budget" against the video's own warmth. */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.22) 0%,
        rgba(0, 0, 0, 0.34) 15%,
        rgba(0, 0, 0, 0.34) 85%,
        rgba(0, 0, 0, 0.22) 100%);
}
.hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-inline: 1.5rem;
}
.hero__eyebrow {
    margin-bottom: 2rem;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: var(--gold);
}
.hero__title {
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: 3.75rem;
    line-height: 1.02;
    color: var(--parchment);
    text-wrap: balance;
}
.hero__title em { color: var(--gold); }
.hero__lead {
    margin: 2rem auto 0;
    max-width: 42rem;
    font-size: 23px;
    color: oklch(94% 0.035 82 / 0.75);
    text-wrap: pretty;
}
.hero__actions {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.hero__scroll {
    position: absolute;
    z-index: 2;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: oklch(94% 0.035 82 / 0.5);
}

/* ------------------------------------------------------ 9b. Thank-you page */
.thankyou {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 6rem;
}
.thankyou__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.thankyou__title { margin-top: 2rem; }
.thankyou__lead { margin-top: 2rem; }
.thankyou__rule { margin-top: 3rem; width: 12rem; }

/* -------------------------------------------------- 10. Services / The Craft */
.services { position: relative; padding-block: 8rem; }
.section-head { margin-bottom: 5rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.section-head .eyebrow { margin-bottom: 1.25rem; }
.section-title {
    max-width: 24ch;
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1.15;
    text-wrap: balance;
}
.services .section-title { color: var(--gold-soft); text-shadow: 0 2px 6px rgba(0,0,0,0.55); }
.services .ornate-rule { margin-top: 2.5rem; width: 16rem; }

.services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: oklch(76% 0.11 80 / 0.1);
}
.service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem;
    transition: filter 0.5s;
}
.service:hover { filter: brightness(1.25); }
.service__num {
    margin-bottom: 2rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2.25rem;
    color: var(--gold);
}
.service__title {
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--parchment);
}
.service__text {
    max-width: 42ch;
    line-height: 1.65;
    color: oklch(94% 0.035 82 / 0.7);
    text-wrap: pretty;
}
.service__flourish {
    margin-top: 2rem;
    height: 1px;
    width: 2.5rem;
    background: oklch(76% 0.11 80 / 0.4);
    transition: width 0.5s;
}
.service:hover .service__flourish { width: 6rem; }

/* --------------------------------------------------- 11. Genres / The Archive */
.genres {
    background: var(--ink);
    overflow: hidden;               /* clip the staggered spine offset (matches reference) */
    padding-block: 9rem 10rem;      /* extra bottom room so shifted spines never bleed out */
}
.genres__head {
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
.genres__title {
    max-width: 22ch;
    font-family: var(--font-display);
    font-size: 3rem;
    text-wrap: balance;
}
.genres__lead { max-width: 28rem; color: oklch(94% 0.035 82 / 0.6); text-wrap: pretty; }

.genres__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    height: 560px;
}
.genre {
    position: relative;
    overflow: hidden;
    border: 1px solid oklch(76% 0.11 80 / 0.1);
    background: var(--walnut);
}
.genre img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
    mix-blend-mode: luminosity;
    transition: transform 0.7s ease-out, opacity 0.7s ease-out;
}
.genre:hover img { transform: scale(1.25); opacity: 0.9; mix-blend-mode: normal; }
.genre__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--ink), oklch(14% 0.01 60 / 0.4) 45%, transparent);
}
.genre__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    z-index: 1;
}
.genre__num {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: oklch(76% 0.11 80 / 0.7);
}
.genre__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--parchment);
}
.genre__sub {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: oklch(94% 0.035 82 / 0.5);
}

/* ------------------------------------------------- 12. Philosophy / Legacy */
.legacy {
    background: var(--parchment);
    color: var(--ink);
    padding-block: 9rem;            /* generous top/bottom breathing room */
}
.legacy__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: start;
}
.legacy__figure { position: relative; }
.legacy__figure::before,
.legacy__figure::after {
    content: "";
    position: absolute;
    border: 1px solid oklch(35% 0.055 55 / 0.3);
    pointer-events: none;
}
.legacy__figure::before { inset: -1rem; }
.legacy__figure::after  { inset: -0.5rem; border-color: oklch(35% 0.055 55 / 0.2); }
.legacy__plate { position: relative; background: var(--parchment-dim); }
.legacy__plate img { width: 100%; height: auto; }
/* SVG-engraving variant of the plate (no photo yet) — same parchment frame,
   sized as a square so the ornament sits centred with generous margin
   instead of stretching to fill the frame like a photo would. */
.legacy__plate--engraving { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 3rem; }
.legacy__plate--engraving .page-hero__visual svg { max-width: 14rem; filter: none; opacity: 0.92; }
.legacy__caption { border-top: 1px solid oklch(35% 0.055 55 / 0.2); padding: 1.25rem; text-align: center; }
.legacy__caption-title { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--oak); }
.legacy__caption-sub {
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: oklch(14% 0.01 60 / 0.5);
}
.legacy__body .eyebrow { color: var(--oak); margin-bottom: 1.25rem; }
.legacy__title {
    margin-bottom: 2rem;
    max-width: 24ch;
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1.05;
    color: var(--ink);
    text-wrap: balance;
}
.legacy__prose { display: flex; flex-direction: column; gap: 1.25rem; line-height: 1.65; color: oklch(14% 0.01 60 / 0.8); text-wrap: pretty; }
.legacy__prose p:first-child::first-letter {
    float: left;
    margin-right: 0.75rem;
    font-family: var(--font-display);
    font-size: 4.5rem;
    line-height: 0.8;
    color: var(--oxblood);
}
.legacy__body .ornate-rule { margin-top: 2.5rem; width: 10rem; }
.legacy__stats {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.legacy__stat { border-left: 2px solid oklch(38% 0.11 25 / 0.6); padding-left: 1rem; }
.legacy__stat dt { font-family: var(--font-display); font-style: italic; font-size: 2.25rem; color: var(--oxblood); }
.legacy__stat dd { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.35; color: oklch(14% 0.01 60 / 0.7); }
.legacy__editor {
    margin-top: 3rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid oklch(35% 0.055 55 / 0.2);
    padding-top: 1.5rem;
}
.legacy__editor-name { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--oxblood); }
.legacy__editor-title { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4em; color: oklch(14% 0.01 60 / 0.5); }
.legacy__badge {
    width: 3.5rem; height: 3.5rem; flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid oklch(38% 0.11 25 / 0.4);
    padding: 0.25rem;
}
.legacy__badge span {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: oklch(38% 0.11 25 / 0.1);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--oxblood);
}

/* ------------------------------------------------------- 13. Testimonials */
.testimonials { position: relative; padding-block: 8rem; }
.testimonials__emblem {
    position: absolute; inset: 0;
    opacity: 0.35;
    pointer-events: none;
}
.testimonials__emblem img { margin-inline: auto; height: 100%; width: auto; object-fit: contain; }
.testimonials__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
/* Side quote boxes: small panels with a translucent overlay behind the text
   so they stay legible over the ornate emblem background. */
.testimonial-aside {
    display: none;
    padding: 1.75rem 1.5rem;
    background: oklch(16% 0.02 55 / 0.55);
    border: 1px solid oklch(76% 0.11 80 / 0.15);
    box-shadow: inset 0 1px oklch(100% 0 0 / 0.05), 0 10px 30px -12px oklch(0% 0 0 / 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.testimonial-aside p { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1.4; color: oklch(94% 0.035 82 / 0.85); }
.testimonial-aside .src {
    display: block;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 9px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--gold-soft);
}
.testimonial-aside--left  { text-align: right; border-right: 2px solid oklch(76% 0.11 80 / 0.4); }
.testimonial-aside--right { text-align: left;  border-left: 2px solid oklch(76% 0.11 80 / 0.4); }

.testimonial-feature { position: relative; min-width: 0; }
.testimonial-feature::before,
.testimonial-feature::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
}
.testimonial-feature::before { margin: -1rem; border: 1px solid oklch(76% 0.11 80 / 0.25); }
.testimonial-feature::after  { margin: -0.5rem; border: 1px solid oklch(76% 0.11 80 / 0.15); }
.testimonial-feature__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem;
    background: oklch(16% 0.02 55 / 0.6);
}
.testimonial-feature__rule {
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.75rem;
    color: var(--gold);
}
.testimonial-feature__rule span:first-child,
.testimonial-feature__rule span:last-child { height: 1px; width: 2.5rem; background: oklch(76% 0.11 80 / 0.4); }
.testimonial-feature__rule .fleuron { font-family: var(--font-display); font-size: 1.5rem; }
.testimonial-feature blockquote {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.35;
    text-wrap: balance;
    color: var(--parchment);
}
.testimonial-feature__author { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; }
.testimonial-feature__badge {
    width: 3.5rem; height: 3.5rem;
    border-radius: 50%;
    border: 1px solid oklch(76% 0.11 80 / 0.3);
    background: oklch(35% 0.055 55 / 0.4);
    padding: 0.25rem;
}
.testimonial-feature__badge span {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--walnut);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--gold);
}
.testimonial-feature cite {
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 10px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: oklch(94% 0.035 82 / 0.6);
}
.testimonial-feature cite em { color: var(--gold-soft); }

/* Swiper slider inside the framed feature */
.testimonial-slider { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
/* Equal-height slides (tallest wins) so there is no height jump per slide */
.testimonial-slider .swiper-wrapper { align-items: stretch; }
.testimonial-slider .swiper-slide { height: auto; display: flex; }
.testimonial-slider .testimonial-feature__inner {
    width: 100%;
    height: 100%;
    justify-content: center;       /* centre shorter quotes vertically */
    padding: 2.5rem 3rem 3.5rem;   /* extra bottom room for pagination dots */
}
/* Prev / next chevrons */
.testimonial-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--gold);
    background: oklch(16% 0.02 55 / 0.6);
    border: 1px solid oklch(76% 0.11 80 / 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.testimonial-nav:hover { background: oklch(76% 0.11 80 / 0.15); border-color: var(--gold); }
.testimonial-nav--prev { left: 0.5rem; }
.testimonial-nav--next { right: 0.5rem; }
.testimonial-nav.swiper-button-disabled { opacity: 0.35; cursor: default; }
/* Pagination dots */
.testimonial-pagination {
    position: absolute;
    bottom: 1.25rem;
    left: 0; right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.testimonial-pagination .swiper-pagination-bullet {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: oklch(76% 0.11 80 / 0.35);
    opacity: 1;
    transition: background 0.3s, transform 0.3s;
    cursor: pointer;
}
.testimonial-pagination .swiper-pagination-bullet-active { background: var(--gold); transform: scale(1.25); }

/* --------------------------------------------------- 14. Process / Atelier */
.process { position: relative; padding-block: 8rem; }
.process__head { margin-bottom: 5rem; text-align: center; }
.process__head .eyebrow { margin-bottom: 1.25rem; }
.process__title {
    margin-inline: auto;
    max-width: 26ch;
    font-family: var(--font-display);
    font-size: 3rem;
    text-wrap: balance;
}
.process__head .ornate-rule { margin: 2.5rem auto 0; width: 16rem; }

.process__timeline { position: relative; }
.process__timeline::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 1.5rem;
    width: 1px;
    background: linear-gradient(to bottom, transparent, oklch(76% 0.11 80 / 0.4), transparent);
}
.process-step {
    position: relative;
    margin-bottom: 4rem;
    padding-left: 3.5rem;
}
.process-step__node {
    position: absolute;
    left: 1.5rem;
    top: 2rem;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid oklch(76% 0.11 80 / 0.4);
    background: var(--walnut-deep);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--gold);
    box-shadow: 0 0 0 6px oklch(35% 0.055 55 / 0.85);
}
.process-step__panel { padding: 2rem; }
.process-step__when {
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--gold-soft);
}
.process-step__title { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.875rem; color: var(--parchment); }
.process-step__text { margin-top: 1rem; line-height: 1.65; color: oklch(94% 0.035 82 / 0.7); }
.process-step__figure { display: none; }
.process-fig { position: relative; width: 100%; max-width: 24rem; }
.process-fig::before,
.process-fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.process-fig::before { margin: -0.75rem; border: 1px solid oklch(76% 0.11 80 / 0.25); }
.process-fig::after  { margin: -0.375rem; border: 1px solid oklch(76% 0.11 80 / 0.15); }
.process-fig__inner { position: relative; overflow: hidden; background: var(--parchment-dim); }
.process-fig__inner img {
    height: 18rem; width: 100%; object-fit: cover;
    filter: sepia(0.25);
    transition: transform 1.2s ease-out;
}
.process-fig__inner img:hover { transform: scale(1.05); }
.process-fig figcaption {
    border-top: 1px solid oklch(35% 0.055 55 / 0.3);
    background: var(--parchment);
    padding: 0.5rem 1rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: oklch(14% 0.01 60 / 0.6);
}
.process__outro { margin-top: 4rem; text-align: center; }
.process__outro p { margin-inline: auto; max-width: 36rem; color: oklch(94% 0.035 82 / 0.6); }
.process__outro .book-btn { margin-top: 2rem; }

/* --------------------------------------------- 15. Contact / Correspondence */
.contact { position: relative; background: var(--walnut-deep); padding-block: 8rem; }
.contact__bg { position: absolute; inset: 0; opacity: 0.25; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; }
.contact__bg::after { content: ""; position: absolute; inset: 0; background: oklch(16% 0.02 55 / 0.8); }
.contact__head { margin-bottom: 3.5rem; text-align: center; }
.contact__head .eyebrow { margin-bottom: 1.25rem; }
.contact__title {
    margin-inline: auto;
    max-width: 22ch;
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1.15;
    text-wrap: balance;
}
.contact__title em { color: var(--gold); }
.contact__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.contact__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem;
}
.contact__aside-name { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--gold); }
.contact__addr {
    margin-top: 1.5rem;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.8;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: oklch(94% 0.035 82 / 0.6);
}
.contact__divider { margin: 2rem 0; height: 1px; width: 4rem; background: oklch(76% 0.11 80 / 0.4); }
.contact__meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: oklch(94% 0.035 82 / 0.6); }
.contact__meta + .contact__meta { margin-top: 0.5rem; }
.contact__aside-quote { margin-top: 2.5rem; }
.contact__aside-quote p { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: oklch(94% 0.035 82 / 0.7); }
.contact__aside-quote .attr {
    display: block; margin-top: 1rem;
    font-family: var(--font-mono); font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.35em; color: var(--gold-soft);
}

.contact__form-wrap { position: relative; background: var(--parchment); color: var(--ink); padding: 2.5rem; border-radius: 4px; box-shadow: 0 30px 60px -30px oklch(0% 0 0 / 0.5); }
.contact__form-wrap::before { content: ""; position: absolute; inset: 1rem; border: 1px solid oklch(35% 0.055 55 / 0.25); pointer-events: none; }
.contact-form { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.field { display: flex; flex-direction: column; }
.field label {
    margin-bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--oak);
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.5rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid oklch(35% 0.055 55 / 0.4);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.125rem;
    transition: border-color 0.3s;
}
.field textarea { font-family: var(--font-body); font-size: 1rem; resize: none; }
.field input::placeholder,
.field textarea::placeholder { color: oklch(14% 0.01 60 / 0.3); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--oxblood); }
.field select { cursor: pointer; }
/* Honeypot — hidden from humans, visible to bots */
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* File upload */
.field--file input[type="file"] {
    padding: 0.6rem 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    border-bottom: 1px dashed oklch(35% 0.055 55 / 0.4);
    cursor: pointer;
}
.field__hint { margin-top: 0.4rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: oklch(14% 0.01 60 / 0.45); }

/* Consent checkbox */
.field--checkbox { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.field--checkbox input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--oxblood);
    cursor: pointer;
}
.field--checkbox label {
    margin-bottom: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    text-transform: none;
    letter-spacing: normal;
    color: oklch(14% 0.01 60 / 0.75);
    line-height: 1.5;
    cursor: pointer;
}

.contact-form__footer {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    border-top: 1px solid oklch(35% 0.055 55 / 0.2);
    padding-top: 1.5rem;
}
.contact-form__notice {
    max-width: 24rem;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: oklch(35% 0.055 55 / 0.7);
}
.contact-form .book-btn { color: oklch(88% 0.09 82); }

/* Form feedback message */
.form-message {
    grid-column: 1 / -1;
    padding: 0.9rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-radius: 2px;
}
.form-message[hidden] { display: none; }
.form-message--success { background: oklch(45% 0.09 145 / 0.15); border: 1px solid oklch(45% 0.09 145 / 0.5); color: oklch(30% 0.09 145); }
.form-message--error   { background: oklch(50% 0.15 25 / 0.12);  border: 1px solid oklch(45% 0.15 25 / 0.5);  color: var(--oxblood); }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--oxblood); }
.field__error { margin-top: 0.35rem; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--oxblood); text-transform: uppercase; }

/* ------------------------------------------------------ 15b. Inner pages */

/* Generic section wrapper reused by the inner-page partials below —
   default inherits the dark body background; --light switches to the
   parchment band used elsewhere (e.g. .legacy) for section-to-section
   contrast rhythm down a page. */
/* Base dark variant: a real wood photograph (the same one the homepage's
   .wood-bg sections use) rather than a CSS-drawn grain — the one inner-page
   section still on this default tone (supporting-visual) now reads as an
   actual timbered surface, not a pattern. A dark walnut wash keeps text
   contrast identical to the previous CSS-texture version. */
.section-block {
    position: relative;
    padding-block: 6rem;
    background-color: var(--walnut-deep);
    background-image:
        linear-gradient(oklch(16% 0.02 55 / 0.86), oklch(16% 0.02 55 / 0.86)),
        url("../images/finalss.jpg");
    background-size: cover;
    background-position: center;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .section-block {
        background-image:
            linear-gradient(oklch(16% 0.02 55 / 0.86), oklch(16% 0.02 55 / 0.86)),
            image-set(
                url("../images/finalss.webp") type("image/webp"),
                url("../images/finalss.jpg") type("image/jpeg")
            );
    }
}
/* Hairline brass seam between every section — the only separator, so
   adjacent same-tone sections (e.g. two light ones in a row) still read
   as distinct rather than bleeding together. Deliberately not a border on
   every side: a single top seam is enough and stays out of the way. */
.section-block::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, oklch(76% 0.11 80 / 0.28) 50%, transparent);
    pointer-events: none;
}
.section-block--light {
    background-color: var(--parchment);
    background-image: radial-gradient(oklch(40% 0.08 55 / 0.08) 1px, transparent 1px);
    background-size: 4px 4px;
    color: var(--ink);
}
.section-block--light .section-title { color: var(--ink); }
.section-block--light .eyebrow { color: var(--oxblood); }
.section-block--light::before { background: linear-gradient(90deg, transparent, oklch(38% 0.11 25 / 0.18) 50%, transparent); }

/* Soft beige — a second light tone so content-heavy sections don't all
   read as the identical parchment fill; same fine paper-grain technique,
   warmer and slightly deeper. */
.section-block--beige {
    background-color: var(--beige);
    background-image: radial-gradient(oklch(35% 0.06 55 / 0.1) 1px, transparent 1px);
    background-size: 4px 4px;
    color: var(--ink);
}
.section-block--beige .section-title { color: var(--ink); }
.section-block--beige .eyebrow { color: var(--oxblood); }
.section-block--beige::before { background: linear-gradient(90deg, transparent, oklch(38% 0.11 25 / 0.2) 50%, transparent); }

/* Mahogany — a warmer, more red-leaning dark than the default walnut grain,
   for the occasional feature section that wants to feel a shade richer
   without reaching all the way to the CTA band's oxblood. */
.section-block--mahogany {
    background-color: var(--mahogany);
    background-image:
        repeating-linear-gradient(90deg, oklch(9% 0.02 35 / 0.4) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, oklch(28% 0.05 38 / 0.25) 0 1px, transparent 1px 15px),
        radial-gradient(120% 70% at 85% 0%, oklch(30% 0.05 38 / 0.4), transparent 60%);
}

/* Charcoal — the darkest tone in the system, reserved for a single
   high-contrast highlight per page (testimonials) rather than general use. */
.section-block--charcoal {
    background-color: var(--charcoal);
    background-image:
        repeating-linear-gradient(90deg, oklch(6% 0.01 50 / 0.5) 0 1px, transparent 1px 3px),
        radial-gradient(90% 60% at 50% 0%, oklch(20% 0.02 50 / 0.5), transparent 65%);
}
.section-block--charcoal .ornate-rule::before { background: var(--charcoal); }

/* Woodgrain — the exact photo treatment used by the homepage's .wood-bg
   sections (lighter overlay than the default section-block wash), for inner
   sections that want that same brighter, more visible timber look. */
.section-block--woodgrain {
    background-color: var(--walnut);
    background-image:
        linear-gradient(oklch(0.33 0.03 45.05 / 0.68), oklch(30% 0.05 45 / 0.68)),
        url("../images/finalss.jpg");
    background-size: cover;
    background-position: center;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .section-block--woodgrain {
        background-image:
            linear-gradient(oklch(0.33 0.03 45.05 / 0.68), oklch(30% 0.05 45 / 0.68)),
            image-set(
                url("../images/finalss.webp") type("image/webp"),
                url("../images/finalss.jpg") type("image/jpeg")
            );
    }
}

/* Faint corner engraving — a large, barely-there flourish sitting behind
   a section's content, never behind body copy directly (kept to a top
   corner, well clear of the centred text column). Opt-in per section via
   an extra class so it stays occasional, not blanket decoration. */
.section-block--engraved::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
    background-repeat: no-repeat;
    background-position: right -4rem top -4rem;
    background-size: min(28rem, 60%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Ccircle cx='210' cy='210' r='170' fill='none' stroke='%23A8864A' stroke-width='1.5'/%3E%3Ccircle cx='210' cy='210' r='140' fill='none' stroke='%23A8864A' stroke-width='1'/%3E%3Ctext x='210' y='232' text-anchor='middle' font-family='Georgia, serif' font-style='italic' font-size='80' fill='%23A8864A'%3E%26%2310086;%3C/text%3E%3C/svg%3E");
}
.section-block--engraved > * { position: relative; z-index: 1; }

/* Faint quotation mark behind testimonial copy — sits in the top-left,
   clear of the centred quote column. */
.section-block--charcoal.section-block--quoted::after {
    content: "\201C";
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-15rem);
    font-family: var(--font-display);
    font-size: 14rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.08;
    pointer-events: none;
}
/* supporting-visual.php reuses .legacy__grid (the homepage Philosophy split-
   screen) but its text column is usually much shorter than the illustration
   — center them on the cross-axis instead of the default stretch, which
   left a slab of dead space under short text. Scoped to .section-block so
   the homepage's own .legacy section (longer body copy) is untouched. */
.section-block .legacy__grid { align-items: center; }

/* Breadcrumb trail */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: oklch(94% 0.035 82 / 0.5);
}
.breadcrumb a { transition: color 0.3s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb__sep { color: oklch(76% 0.11 80 / 0.35); }
.breadcrumb__current { color: var(--gold-soft); }
/* Light-background variant (used when a breadcrumb sits on a parchment section) */
.breadcrumb--dark { color: oklch(14% 0.01 60 / 0.55); }
.breadcrumb--dark .breadcrumb__sep { color: oklch(38% 0.11 25 / 0.4); }
.breadcrumb--dark .breadcrumb__current { color: var(--oxblood); }

/* Inner-page hero — full-bleed cinematic banner shared by every inner page:
   a wide photograph (sepia-graded to match the homepage's aged-plate look)
   with a dark walnut-to-transparent scrim so breadcrumb, eyebrow, H1, lead
   and CTAs stay readable over the left/centre of the frame. Pages with no
   photo (privacy-policy, terms) fall back to the SVG-illustration treatment
   on the same wood-texture ground the homepage uses elsewhere. */
.page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 26rem;
    overflow: hidden;
    background: var(--walnut-deep);
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg picture { display: block; width: 100%; height: 100%; }
.page-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.22) saturate(1.05) brightness(0.92); }
.page-hero__bg-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(oklch(16% 0.02 55 / 0.94), oklch(16% 0.02 55 / 0.94)), url("../images/wood-texture.jpg");
    background-size: cover;
    background-position: center;
}

/* Standalone illustration frame — reused for the hero's no-photo fallback
   AND for supporting_visual sections between page sections. */
.page-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; }
.page-hero__visual svg { width: 100%; height: auto; max-width: 20rem; filter: drop-shadow(0 20px 40px oklch(0% 0 0 / 0.45)); }
.page-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(90deg, oklch(16% 0.02 55 / 0.96) 0%, oklch(16% 0.02 55 / 0.88) 30%, oklch(16% 0.02 55 / 0.4) 62%, oklch(16% 0.02 55 / 0.14) 100%),
        linear-gradient(0deg, oklch(16% 0.02 55 / 0.6), transparent 42%);
}
.page-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-6);
    margin-inline: auto;
    padding: 6rem var(--pad-x) 3.5rem;
}
.page-hero__label { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.page-hero__label-rule { width: 2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); flex-shrink: 0; }
.page-hero__label-icon { display: flex; flex-shrink: 0; width: 1.1rem; height: 1.1rem; color: var(--gold); opacity: 0.9; }
.page-hero__label-icon svg { width: 100%; height: 100%; }
.page-hero__eyebrow { display: block; margin-bottom: 0; }
.page-hero__title { font-family: var(--font-display); font-size: 65px; line-height: 1.05; color: var(--parchment); text-wrap: balance; max-width: 20ch; }
.page-hero__title em { color: var(--gold); font-style: italic; }
.page-hero__lead { margin-top: 1.5rem; font-size: 23px; line-height: 1.65; color: oklch(94% 0.035 82 / 0.85); max-width: 34rem; text-wrap: pretty; }
.page-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

/* Credibility / trust strip — light band directly under the hero */
.trust-strip {
    background-color: var(--parchment);
    background-image: radial-gradient(oklch(40% 0.08 55 / 0.08) 1px, transparent 1px);
    background-size: 4px 4px;
    color: var(--ink);
    padding: 3rem var(--pad-x);
}
.trust-strip__grid {
    max-width: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
.trust-strip__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: oklch(100% 0 0 / 0.5);
    border: 1px solid oklch(38% 0.11 25 / 0.1);
    border-radius: 8px;
    box-shadow: 0 12px 28px -20px oklch(38% 0.11 25 / 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.trust-strip__item:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -18px oklch(38% 0.11 25 / 0.3); }
.trust-strip__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: oklch(38% 0.11 25 / 0.1);
    color: var(--oxblood);
}
.trust-strip__icon svg { width: 20px; height: 20px; }
.trust-strip__text { padding-top: 0.4rem; font-size: 1rem; line-height: 1.5; color: oklch(14% 0.01 60 / 0.8); }

/* Long-form prose (service intro, about/legal copy) */
.prose { max-width: 46rem; }
.prose p + p { margin-top: 1.25rem; }
.prose p { line-height: 1.7; color: oklch(94% 0.035 82 / 0.75); text-wrap: pretty; }
.prose--dark p { color: oklch(14% 0.01 60 / 0.78); }

/* Benefit / deliverable cards — discrete elevated cards (not a flush hairline
   grid), so they read as "layered cards" rather than a spec-sheet table. */
.benefits-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.benefit-card {
    position: relative;
    background: var(--walnut);
    border: 1px solid oklch(76% 0.11 80 / 0.12);
    border-radius: 10px;
    padding: 2.25rem;
    box-shadow: 0 24px 48px -30px oklch(0% 0 0 / 0.6);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card:hover {
    transform: translateY(-5px);
    border-color: oklch(76% 0.11 80 / 0.4);
    box-shadow: 0 32px 56px -24px oklch(0% 0 0 / 0.65);
}
.benefit-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: oklch(76% 0.11 80 / 0.1);
    color: var(--gold);
}
.benefit-card__icon svg { width: 22px; height: 22px; }
.benefit-card__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--parchment); margin-bottom: 0.75rem; }
.benefit-card__text { font-size: 1.0625rem; line-height: 1.6; color: oklch(94% 0.035 82 / 0.65); }

/* Numbered process steps (light background variant for inner pages) — a
   connecting spine through the numbered circles gives it a true "timeline"
   read instead of a plain divided list. */
.steps { position: relative; max-width: var(--container-6); margin-inline: auto; display: flex; flex-direction: column; gap: 0; }
.steps::before {
    content: "";
    position: absolute;
    top: 3.5rem;
    bottom: 3.5rem;
    left: 1.5rem;
    width: 1px;
    background: oklch(38% 0.11 25 / 0.2);
}
.step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding-block: 2rem; }
.step__num {
    position: relative;
    z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--oxblood); color: var(--parchment);
    font-family: var(--font-display); font-style: italic; font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 10px 20px -6px oklch(38% 0.11 25 / 0.5);
}
.step__title { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); margin-bottom: 0.5rem; }
.step__text { font-size: 1.0625rem; line-height: 1.6; color: oklch(14% 0.01 60 / 0.75); max-width: 38rem; }

/* Genre / project-type grid — original book-cover mockups (never a real or
   invented-title cover): a small portrait card per genre with a spine edge
   and stacked-page shadow, reusing the same layered-shadow technique as
   .book-btn so it reads as part of the same "book" visual language. */
.book-covers { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem 1.5rem; }
.book-cover {
    position: relative;
    width: 9.5rem;
    aspect-ratio: 2 / 3;
    border-radius: 2px 6px 6px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem 1rem;
    gap: 0.85rem;
    box-shadow:
        inset 3px 0 0 oklch(0% 0 0 / 0.22),
        4px 5px 0 -2px oklch(14% 0.02 55 / 0.5),
        7px 10px 22px -10px oklch(0% 0 0 / 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.book-cover:hover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow:
        inset 3px 0 0 oklch(0% 0 0 / 0.22),
        5px 7px 0 -2px oklch(14% 0.02 55 / 0.55),
        10px 16px 30px -10px oklch(0% 0 0 / 0.65);
}
.book-cover__icon svg { width: 26px; height: 26px; }
.book-cover__rule { width: 2rem; height: 1px; background: currentColor; opacity: 0.4; }
.book-cover__label { font-family: var(--font-display); font-size: 0.95rem; line-height: 1.25; text-wrap: balance; }

.book-cover--oxblood { background: linear-gradient(160deg, var(--oxblood), oklch(28% 0.09 25)); color: var(--parchment); }
.book-cover--oxblood .book-cover__icon { color: var(--gold); }
.book-cover--walnut { background: linear-gradient(160deg, var(--walnut), var(--walnut-deep)); color: var(--parchment); }
.book-cover--walnut .book-cover__icon { color: var(--gold); }
.book-cover--parchment { background: linear-gradient(160deg, var(--parchment), var(--parchment-dim)); color: var(--oxblood); }
.book-cover--parchment .book-cover__icon { color: var(--oxblood); }

/* Related services */
.related-services { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.related-service-card {
    display: block;
    padding: 1.75rem;
    background: var(--walnut);
    border: 1px solid oklch(76% 0.11 80 / 0.12);
    border-radius: 8px;
    box-shadow: 0 20px 40px -28px oklch(0% 0 0 / 0.6);
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.related-service-card:hover {
    transform: translateY(-5px);
    border-color: oklch(76% 0.11 80 / 0.4);
    box-shadow: 0 28px 48px -22px oklch(0% 0 0 / 0.65);
}
.related-service-card__icon {
    display: block;
    width: 2rem;
    height: 2rem;
    margin-bottom: 1.25rem;
    color: var(--gold-soft);
    opacity: 0.85;
    transition: opacity 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.related-service-card__icon svg { width: 100%; height: 100%; }
.related-service-card:hover .related-service-card__icon { color: var(--gold); opacity: 1; transform: translateY(-3px); }
.related-service-card__title { font-family: var(--font-display); font-size: 1.15rem; color: var(--parchment); }
.related-service-card__arrow { display: inline-block; margin-top: 0.75rem; color: var(--gold); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }

/* Testimonial cards (lightweight — not the homepage slider) */
.testimonial-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.testimonial-card {
    padding: 2rem;
    background: oklch(100% 0 0 / 0.6);
    color: var(--ink);
    border-radius: 10px;
    border: 1px solid oklch(38% 0.11 25 / 0.1);
    box-shadow: 0 20px 40px -28px oklch(38% 0.11 25 / 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -22px oklch(38% 0.11 25 / 0.4); }
.testimonial-card__quote { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1.6; color: var(--ink); }
.testimonial-card__foot { margin-top: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.testimonial-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--oxblood);
    color: var(--parchment);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
}
.testimonial-card__attr { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--oxblood); }
.placeholder-badge {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.2rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--oxblood);
    border: 1px solid oklch(38% 0.11 25 / 0.4);
    border-radius: 2px;
}

/* FAQ accordion — the group reads as one elevated card; hairlines between
   items are the conventional accordion pattern and don't need individual
   card treatment the way the benefit/related cards do. */
.accordion {
    max-width: 46rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: oklch(38% 0.11 25 / 0.15);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 48px -30px oklch(38% 0.11 25 / 0.35);
}
.accordion__item { background: var(--parchment); }
.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.25s;
}
.accordion__trigger:hover { background: oklch(38% 0.11 25 / 0.045); }
.accordion__icon { flex-shrink: 0; color: var(--oxblood); transition: transform 0.3s ease; }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.accordion__panel-inner { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel p { padding: 0 1.5rem 1.5rem; font-size: 18px; line-height: 1.65; color: oklch(14% 0.01 60 / 0.75); }

/* CTA band — oxblood accent section, distinct from the walnut-deep default.
   A faint wood-grain blend (same texture used inside .book-btn) adds tactile
   depth without competing with the oxblood — kept subtle via multiply +
   low opacity so text contrast is unaffected. */
.cta-band {
    position: relative;
    padding: 5.5rem var(--pad-x);
    text-align: center;
    background-image: linear-gradient(oklch(38% 0.11 25 / 0.94), oklch(38% 0.11 25 / 0.94)), url("../images/wood-texture.jpg");
    background-size: cover;
    background-position: center;
    border-block: 1px solid oklch(76% 0.11 80 / 0.25);
    overflow: hidden;
}
/* WebP variant — this section renders on nearly every page in the site. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .cta-band {
        background-image: linear-gradient(oklch(38% 0.11 25 / 0.94), oklch(38% 0.11 25 / 0.94)),
            image-set(url("../images/wood-texture.webp") type("image/webp"), url("../images/wood-texture.jpg") type("image/jpeg"));
    }
}
.cta-band::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, oklch(76% 0.11 80 / 0.18), transparent 65%);
    pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 42rem; margin-inline: auto; }
.cta-band__title { font-family: var(--font-display); font-size: 2.25rem; line-height: 1.15; color: var(--parchment); margin-top: 1rem; text-wrap: balance; }
.cta-band__text { margin-top: 1rem; line-height: 1.6; color: oklch(94% 0.035 82 / 0.8); }
.cta-band__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; }
.cta-band__note { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: oklch(94% 0.035 82 / 0.55); }

/* ------------------------------------------------------------- 16. Footer */
.footer {
    position: relative;
    border-top: 1px solid oklch(76% 0.11 80 / 0.1);
    background-color: var(--walnut-deep);
    background-image: repeating-linear-gradient(90deg, oklch(8% 0.01 55 / 0.35) 0 1px, transparent 1px 15px);
    padding-block: 5rem;
}
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 4rem; }
.footer__brand-text { margin-top: 1.5rem; max-width: 24rem; line-height: 1.65; color: oklch(94% 0.035 82 / 0.55); text-wrap: pretty; }
.footer__col h5 { margin-bottom: 1.5rem; font-family: var(--font-display); font-size: 1.125rem; color: var(--parchment); }
.footer__col ul { display: flex; flex-direction: column; gap: 0.75rem; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.25em; color: oklch(94% 0.035 82 / 0.5); }
.footer__col a { transition: color 0.3s; }
.footer__col a:hover { color: var(--gold); }
.footer .ornate-rule { margin-top: 4rem; }
.footer__legal {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: oklch(94% 0.035 82 / 0.3);
    text-align: center;
}
.footer__legal p { font-size: 14px; }

/* Skip link */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--gold);
    color: var(--walnut-deep);
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* Visually hidden (screen-reader only) */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   18. RESPONSIVE BREAKPOINTS
   Mobile-first base above; the following queries scale up to match the
   reference and guarantee no overflow / overlap at every target width.
   ===================================================================== */

/* ---- ≥576px : comfortable phones / small tablets ---- */
@media (min-width: 576px) {
    .contact-form { grid-template-columns: repeat(2, 1fr); }
    .contact-form__footer { flex-direction: row; align-items: center; justify-content: space-between; }
    .field--full { grid-column: 1 / -1; }
    .contact-form .form-message { grid-column: 1 / -1; }
}

/* ---- ≥768px : md breakpoint (matches reference `md:`) ---- */
@media (min-width: 768px) {
    :root { --pad-x: 3rem; }
    .nav__inner { padding-inline: var(--pad-x); }

    .hero__title { font-size: 6rem; }
    .hero__lead  { font-size: 23px; }

    .section-title, .genres__title, .legacy__title,
    .process__title, .contact__title { font-size: 3.75rem; }

    .services__grid { grid-template-columns: repeat(2, 1fr); }

    .genres__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .genres__grid { grid-template-columns: repeat(6, 1fr); }

    .legacy__grid { grid-template-columns: 1fr 1fr; }
    .legacy__body { padding-top: 1rem; }

    .testimonials__grid { grid-template-columns: 1fr 2fr 1fr; }
    .testimonial-aside { display: block; }
    .testimonial-feature__inner { padding: 2.5rem; }
    .testimonial-feature blockquote { font-size: 1.875rem; }

    .contact__grid { grid-template-columns: 1fr 2fr; }
    .contact__form-wrap { padding: 3.5rem; }

    /* 4 equal columns: brand + 3 link groups (Services/Company/Correspondence) —
       widened from a 2-link-column + span-2-brand layout so the footer can
       carry the site-wide services/company/legal links every inner page needs. */
    .footer__grid { grid-template-columns: repeat(4, 1fr); }
    .footer__legal { flex-direction: row; text-align: left; }

    /* ---- Process: alternating two-column timeline ---- */
    .process__timeline::before { left: 50%; }
    .process-step {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
        padding-left: 0;
    }
    .process-step__node { left: 50%; top: 50%; transform: translate(-50%, -50%); }
    /* Pin BOTH cells to row 1 with explicit columns — otherwise sparse grid
       auto-placement drops the second-column item into row 2 (misalignment). */
    .process-step__panel,
    .process-step__figure { grid-row: 1; }
    .process-step__figure { display: flex; }
    .process-step__figure .process-fig { margin-left: 0; }
    /* Odd steps: text left, image right */
    .process-step:nth-child(odd) .process-step__panel  { grid-column: 1; }
    .process-step:nth-child(odd) .process-step__figure { grid-column: 2; justify-content: flex-start; }
    /* Even steps: image left, text right (right-aligned) */
    .process-step:nth-child(even) .process-step__figure { grid-column: 1; justify-content: flex-end; }
    .process-step:nth-child(even) .process-step__panel  { grid-column: 2; text-align: right; }

    /* ---- Inner-page components ---- */
    .page-hero { min-height: 34rem; }
    .trust-strip__grid { grid-template-columns: repeat(4, 1fr); }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .related-services { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
    .testimonial-cards { grid-template-columns: repeat(3, 1fr); }
    .cta-band__title { font-size: 2.75rem; }
}

/* ---- ≥1024px : lg breakpoint ---- */
@media (min-width: 1024px) {
    :root { --pad-x: 3rem; }
    .services__grid { grid-template-columns: repeat(3, 1fr); }
    .benefits-grid { grid-template-columns: repeat(3, 1fr); }
    .page-hero { min-height: 47.5rem; }
}

/* ---- ≥1280px : keep large type generous ---- */
@media (min-width: 1280px) {
    .hero__title { font-size: 6rem; }

    /* Full-text nav only fits from here down (verified: brand + 6 nav items +
       CTA need ~1185px minimum). Below this, the hamburger menu carries the
       full item list instead of squeezing/wrapping the text nav. */
    .nav__links { display: flex; }
    .nav__toggle { display: none; }
    .nav__mobile { display: none !important; }
}

/* ---- ≥1600px : very large desktops — scale the type scale up slightly ---- */
@media (min-width: 1600px) {
    :root { --container: 88rem; --container-6: 78rem; --container-5: 70rem; }
}
@media (min-width: 1920px) {
    :root { --container: 96rem; }
    body { font-size: 17px; }
}

/* =====================================================================
   Downward scaling — guarantee no overflow at narrow widths
   ===================================================================== */

/* ---- ≤640px ---- */
@media (max-width: 640px) {
    .section, .services, .genres, .testimonials, .process, .contact { padding-block: 5rem; }
    .legacy { padding-block: 5rem; }
    .section-head { margin-bottom: 3rem; }
    .genres__grid { height: 460px; }
}

/* ---- ≤480px (≈425px target) ---- */
@media (max-width: 480px) {
    .hero__title { font-size: 3rem; }
    .hero__lead { font-size: 1.1rem; }
    .section-title, .genres__title, .legacy__title,
    .process__title, .contact__title { font-size: 2.25rem; }
    .page-hero { min-height: 22rem; }
    .page-hero__title { font-size: 2.25rem; }
    .page-hero__lead { font-size: 1rem; }
    .service { padding: 2rem; }
    .genre__name { font-size: 1.25rem; letter-spacing: 0.3em; }
    .genres__grid { gap: 0.35rem; height: 420px; }
    .legacy__stats { gap: 1rem; }
    .legacy__stat dt { font-size: 1.875rem; }
    .testimonial-feature blockquote { font-size: 1.35rem; }
    .contact__form-wrap, .contact__aside { padding: 1.75rem; }
    .process-step__panel { padding: 1.25rem 0 1.25rem 0; }
    .process-step__title { font-size: 1.5rem; }
    .footer__legal { letter-spacing: 0.25em; font-size: 9px; }
    /* genre grid becomes a scroll-free 2-col on very small screens for legibility */
}

/* ---- ≤380px (≈375px & 320px targets) ---- */
@media (max-width: 380px) {
    :root { --pad-x: 1.1rem; }
    .hero__title { font-size: 2.6rem; }
    .brand__name { font-size: 1rem; letter-spacing: 0.16em; }
    .nav__inner { gap: 0.5rem; }
    .section-title, .genres__title, .legacy__title,
    .process__title, .contact__title { font-size: 2rem; }
    .page-hero__title { font-size: 2rem; }
    .genres__grid { gap: 0.3rem; height: 380px; }
    .genre__name { font-size: 1.05rem; letter-spacing: 0.25em; }
    .hero__actions { gap: 1rem; }
    .book-btn, .ghost-btn { font-size: 0.66rem; letter-spacing: 0.22em; }
}