/* ============================================================
 * Fed by Fed and Ben — site stylesheet
 *
 * Built from the brand palette of the test-subdomain homepage:
 * warm cream + brown wordmark + tan/green CTA buttons +
 * the drips visual signature.
 *
 * Pure vanilla CSS, custom properties for tokens, no build step.
 * ============================================================ */


/* ============================================================
 * Design tokens
 * ============================================================ */

:root {
    /* Colours — anchored from Ben's preferred test-site palette */
    --c-cream:        #f4f0e6;      /* page background */
    --c-cream-soft:   #faf6ec;      /* subtle cards on cream */
    --c-brown-deep:   #3a2c1d;      /* darkest text, wordmark accent */
    --c-brown:        #5a4632;      /* primary text */
    --c-brown-muted:  #8a7560;      /* secondary text */
    --c-tan:          #a0866a;      /* primary CTA */
    --c-tan-hover:    #8a6f53;
    --c-green:        #3a5a3a;      /* secondary CTA */
    --c-green-hover:  #2b4429;
    --c-black:        #000000;      /* drips, sharp accents */
    --c-near-black:   #1f130f;      /* hero / footer background — matches dark hearth in hero image */
    --c-white:        #ffffff;

    /* Type */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

    /* Fluid type scale */
    --t-h1: clamp(2.25rem, 4vw + 1rem, 4rem);
    --t-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
    --t-h3: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);
    --t-body: 1.0625rem;
    --t-small: 0.875rem;

    /* Spacing scale */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;

    /* Layout */
    --container-max: 1200px;
    --header-h: 70px;

    /* Effects */
    --radius-pill: 999px;
    --radius-md: 0.5rem;
    --shadow-soft: 0 2px 12px rgba(58, 44, 29, 0.08);
    --transition-fast: 150ms ease;
}


/* ============================================================
 * Reset (minimal — only what we actually need)
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--c-brown);
    background: var(--c-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

button { font: inherit; cursor: pointer; }

a {
    color: var(--c-brown);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--c-tan); }


/* ============================================================
 * Typography
 * ============================================================ */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--c-brown-deep);
    margin: 0 0 var(--s-4) 0;
    letter-spacing: -0.01em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 var(--s-4) 0; }

.lead {
    font-size: 1.25rem;
    color: var(--c-brown-muted);
    max-width: 50ch;
}


/* ============================================================
 * Layout helpers
 * ============================================================ */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--s-5);
    padding-right: var(--s-5);
}

.section { padding: var(--s-8) 0; }
.section--tight { padding: var(--s-7) 0; }


/* ============================================================
 * Site header (sticky, on cream)
 * ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    background: rgba(244, 240, 230, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid rgba(58, 44, 29, 0.08);
    z-index: 100;
    height: var(--header-h);
}

/* 3-column grid throughout (was flex). Equal-width side columns mean the
   centre column (nav on desktop, hamburger on mobile) is truly
   viewport-centred regardless of how wide the brand or right cluster
   are. The earlier flex layout left-aligned the nav inside a grow box,
   so when the right cluster grew (e.g. "Hi Ben | Order Here") the nav
   visually slid left of centre. */
.site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-5);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--s-5);
    height: 100%;
}
.site-header__brand { justify-self: start; }
.site-header__nav,
.site-header__menu-toggle { justify-self: center; }
.site-header__right { justify-self: end; }

.site-header__brand {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--c-brown-deep);
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.site-header__nav-list {
    display: flex;
    gap: var(--s-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__nav a {
    color: var(--c-brown);
    font-weight: 500;
    font-size: 1rem;
}
.site-header__nav a:hover { color: var(--c-tan); }

.site-header__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--c-tan);
    color: var(--c-white) !important;
    padding: var(--s-2) var(--s-5);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.95rem;
    transition: background var(--transition-fast);
    white-space: nowrap;
}
.site-header__cta:hover { background: var(--c-tan-hover); }
.site-header__cta-icon { width: 1rem; height: 1rem; }

/* Header cart button — only used on /order.php and only swaps in for the
   Order Here CTA below the basket-stacks-under-menu breakpoint (860px). */
.site-header__cart {
    display: none;
    position: relative;
    background: var(--c-tan);
    color: var(--c-white);
    border: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}
.site-header__cart:hover { background: var(--c-tan-hover); }
.site-header__cart-icon { width: 1.25rem; height: 1.25rem; }
.site-header__cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 0.625rem;
    background: var(--c-green);
    color: var(--c-white);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

/* On the order page below 860px, swap CTA for cart button. The 860px
   breakpoint matches ordering.css where the basket stacks under the menu. */
@media (max-width: 860px) {
    body.page-order .site-header__cta  { display: none; }
    body.page-order .site-header__cart { display: inline-flex; }
}

/* Right-side cluster — wraps the account block + Order Here CTA (+ cart
   icon on order page) into a single flex unit with tight spacing.
   Treated as one item by the parent flex/grid, so the layout's centre
   slot (hamburger on mobile) lines up cleanly. */
.site-header__right {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

/* Account block — "Sign in" if logged out, "Hi <name>" if logged in.
   Sits inside .site-header__right just to the left of the Order Here
   CTA on desktop. Hidden on mobile (the cluster keeps just the CTA /
   cart so the hamburger stays centred); members reach /account via
   the URL or the hamburger nav. */
.site-header__account {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-size: 0.9rem;
}
.site-header__account-link {
    color: var(--c-brown);
    text-decoration: none;
    font-weight: 500;
}
.site-header__account-link:hover { color: var(--c-tan); }
.site-header__account-link--muted { color: var(--c-brown-muted); font-size: 0.85rem; }

/* Mobile account icon — a small green circle that lets signed-in
   customers reach /account from the mobile header (the text-based
   .site-header__account block is hidden on mobile to keep the grid
   tidy). Hidden on desktop; shown at ≤768px. */
.site-header__account-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-green);
    color: var(--c-white);
    text-decoration: none;
    transition: background var(--transition-fast);
    flex: 0 0 auto;
}
.site-header__account-icon:hover { background: var(--c-green-hover); }
.site-header__account-icon svg { width: 18px; height: 18px; display: block; }

/* Base hamburger styles. display:none here; the <=1024px block below
   overrides to inline-flex. This base rule MUST come BEFORE the media
   query — when it followed it, the unconditional display:none won the
   cascade and the hamburger stayed hidden at tablet width. */
.site-header__menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: var(--s-2);
    cursor: pointer;
    color: var(--c-brown-deep);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.site-header__menu-toggle:hover { background: rgba(58, 44, 29, 0.05); }
.site-header__menu-icon { display: block; }

/* Header collapse breakpoint (<=1024px). Two things flip together:
   - account text → green icon (text crowds the nav on tablet)
   - full nav → hamburger drawer (same crowding problem, made worse
     by the icon nudging the right cluster wider)
   They flip at the same width so the layout doesn't go through an
   awkward "both shown, both fighting for space" zone. */
@media (max-width: 1024px) {
    .site-header__account { display: none; }
    .site-header__account-icon { display: inline-flex; }

    .site-header__menu-toggle { display: inline-flex; align-items: center; justify-content: center; }

    /* Nav becomes a top-drawer panel; slides in on toggle. Closed-state
       translate covers BOTH the drawer's own height and the
       `top: var(--header-h)` offset, otherwise the drawer's bottom edge
       peeks back into the viewport (e.g. a 257px tall drawer at top:70px
       with translateY(-110%) leaves its last item visible at the top). */
    .site-header__nav {
        position: fixed;
        left: 0; right: 0;
        top: var(--header-h);
        background: var(--c-cream);
        padding: var(--s-5);
        border-bottom: 1px solid rgba(58, 44, 29, 0.08);
        box-shadow: 0 8px 20px rgba(58, 44, 29, 0.08);
        transform: translateY(calc(-100% - var(--header-h)));
        transition: transform 0.25s ease;
        z-index: 50;
    }
    .site-header__nav[data-open="true"] { transform: translateY(0); }

    .site-header__nav-list {
        flex-direction: column;
        gap: var(--s-4);
        font-size: 1.125rem;
    }
}

/* Mobile-only refinements (<=768px). Hamburger + nav-as-drawer + account
   icon already live in the 1024px block above. This block is just the
   true-mobile tweaks: shrink the brand, tighten the CTA, drop "Here"
   from the CTA label, pin the order-page cart to the right grid column. */
@media (max-width: 768px) {
    .site-header__brand { font-size: 1.5rem; }

    .site-header__cta {
        padding: var(--s-2) var(--s-4);
        font-size: 0.875rem;
    }

    /* Drop the " Here" suffix on mobile — the CTA label becomes just
       "Order" so the right cluster (icon + CTA) fits without crowding. */
    .site-header__cta-label-extra { display: none; }

    /* On the order page at <=768px the CTA is hidden and the cart icon
       takes its place — explicitly pin the cart to the right grid column
       so it doesn't float into an auto-placed cell. */
    body.page-order .site-header__cart { justify-self: end; }
}


/* ============================================================
 * Hero (dark, full-bleed pizza background + circular logo)
 * ============================================================ */

.hero {
    position: relative;
    background: var(--c-near-black);
    /* Hero fills the visible space BELOW the sticky header so the
       scroll cue lands inside the viewport, not just off the bottom.
       Header is `position: sticky; height: var(--header-h)` and sits
       in flow, so 100dvh hero overflowed by exactly the header
       height. dvh handles mobile browser-chrome collapse cleanly. */
    min-height: calc(100dvh - var(--header-h));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(var(--s-5), 5vh, var(--s-7));
    overflow: hidden;
    isolation: isolate;
}

/* Picture-with-img instead of a background-image div: the <picture>
   element handles per-breakpoint art-direction (mobile portrait /
   tablet 4:3 / desktop 16:9 crops) AND per-format negotiation
   (AVIF → WebP → JPEG fallback) natively. Each crop is purpose-built
   for its aspect ratio, so no per-breakpoint object-position
   acrobatics — object-fit: cover + centred origin is plenty. */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    display: block;
}
.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Vertical letterbox: subtle black at top + bottom, image breathes
   through the middle band. The previous top stop (0.9 opacity) was
   crushing the image into pure black at desktop widths — backed off
   to 0.55 so the photo actually reads as a photo. Bottom fades to
   var(--c-near-black) so the join with the drips section is seamless. */
.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.15) 22%,
        rgba(0, 0, 0, 0.15) 65%,
        rgba(31, 19, 15, 0.95) 92%,
        var(--c-near-black) 100%
    );
}

.hero__logo {
    width: clamp(220px, 32vw, 420px);
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

/* Scroll cue — small chevron at the bottom-centre of the full-screen
   hero, gently bouncing. Tells the user there's content below the fold
   without screaming it. */
.hero__scroll-cue {
    position: absolute;
    bottom: clamp(var(--s-5), 4vh, var(--s-7));
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-radius: 50%;
    transition: color var(--transition-fast);
    animation: hero-scroll-bounce 2s ease-in-out infinite;
}
.hero__scroll-cue:hover { color: rgba(255, 255, 255, 1); }
.hero__scroll-cue svg { width: 28px; height: 28px; }
@keyframes hero-scroll-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(8px); }
    60% { transform: translateX(-50%) translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__scroll-cue { animation: none; }
}


/* ============================================================
 * Drips — black wavy transition. Reusable.
 * ============================================================ */

/* Drips divider — responsive sizing.
   SVG asset is at /assets/images/drips.svg (dark fill on cream bg
   = drop shapes hang from the dark hero above). Heights bumped per
   breakpoint so each drip reads as a distinct fluid blob rather than
   noise; background-size widened so there are fewer, larger drips
   visible at once (the SVG has ~50 small bumps — at 200% we see
   roughly half of them, at the right scale to look like drips). */
/* Drip SIZE locked at 3500px × 130px so every drip is physically the
   same on screen regardless of viewport. Position via the
   --drip-offset-x custom property: 0px = leftmost (post-flip = visual
   right), negative values slide the SVG left in pre-flip coords
   (= right in visual coords), positive slide right (= left visual).
   Easier to tune than juggling background-position-x in source. */
.drips {
    --drip-offset-x: 50%;
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: var(--c-cream);
    background-image: url('/assets/images/drips.svg?v=4');
    background-repeat: no-repeat;
    background-size: 3500px 130px;
    background-position: var(--drip-offset-x) 0%;
    transform: rotateY(180deg);
    height: 130px;
}


/* ============================================================
 * Buttons
 * ============================================================ */

/* :not([hidden]) so the explicit display doesn't override the hidden HTML
   attribute — buttons toggled via el.hidden = true must actually disappear.
   See feedback_css_hidden_attribute memory. */
.btn:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-6);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 0;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    text-decoration: none;
    line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--c-tan); color: var(--c-white); }
.btn--primary:hover { background: var(--c-tan-hover); color: var(--c-white); }

.btn--secondary { background: var(--c-green); color: var(--c-white); }
.btn--secondary:hover { background: var(--c-green-hover); color: var(--c-white); }

.btn--large { padding: var(--s-4) var(--s-7); font-size: 1.05rem; }


/* ============================================================
 * Auth pages (login, register, password reset, /account)
 * ============================================================ */

.auth-form {
    display: grid;
    gap: var(--s-4);
    max-width: 420px;
    margin: var(--s-5) 0;
}
.auth-form__row { display: block; }
.auth-form__row > span {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-brown-muted);
    margin-bottom: var(--s-1);
}
.auth-form__row > span small { font-weight: 400; font-size: 0.8rem; }
.auth-form__row input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--s-3);
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid rgba(58, 44, 29, 0.2);
    border-radius: var(--radius-md);
    background: var(--c-white);
    color: var(--c-brown-deep);
}
.auth-form__row input:focus {
    outline: none;
    border-color: var(--c-tan);
    box-shadow: 0 0 0 3px rgba(184, 142, 92, 0.15);
}
.auth-form__actions { margin-top: var(--s-3); }

.auth-links { margin-top: var(--s-4); font-size: 0.9rem; color: var(--c-brown-muted); }
.auth-links a { color: var(--c-tan); }

.auth-msg {
    margin: 0;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}
.auth-msg--ok    { background: #e8f5e9; color: #1b5e20; border: 1px solid #1b5e20; }
.auth-msg--error { background: #fce8e6; color: #a32018; border: 1px solid #a32018; }

/* Past orders list on /account.php. Each item is a card with a
   when/total row, a one-line items summary, and a Reorder button. */
.past-orders {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-5) 0;
}
.past-orders__item {
    background: var(--c-cream-soft);
    border: 1px solid rgba(58, 44, 29, 0.1);
    border-radius: var(--radius-md);
    padding: var(--s-4);
    margin-bottom: var(--s-3);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "row     row"
        "summary actions";
    gap: var(--s-3) var(--s-4);
    align-items: center;
}
.past-orders__row     { grid-area: row; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.past-orders__when    { font-weight: 600; color: var(--c-brown-deep); }
.past-orders__total   { font-weight: 700; color: var(--c-brown-deep); }
.past-orders__summary { grid-area: summary; color: var(--c-brown); font-size: 0.95rem; }
.past-orders__discount { color: var(--c-green); font-weight: 500; }
.past-orders__actions { grid-area: actions; justify-self: end; }

.past-orders__pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
}

/* Compact button — used for inline actions in lists where the
   standard padding is too chunky. Pairs with btn--primary/secondary. */
.btn--small {
    padding: var(--s-2) var(--s-3);
    font-size: 0.85rem;
}

/* Ghost button — transparent background, brown text, subtle outline.
   For secondary actions next to a btn--primary/--secondary where two
   filled buttons would look heavy (e.g. Delete next to Use this). */
.btn--ghost {
    background: transparent;
    color: var(--c-brown-deep);
    border: 1px solid rgba(58, 44, 29, 0.2);
    text-decoration: none;
}
.btn--ghost:hover {
    background: rgba(58, 44, 29, 0.05);
    color: var(--c-brown-deep);
}

/* Favourites action row — Use this + Delete side-by-side. */
.favourites__actions {
    display: flex;
    gap: var(--s-2);
}


/* ============================================================
 * Site footer (dark)
 * ============================================================ */

.site-footer {
    background: var(--c-near-black);
    color: var(--c-cream);
    padding: var(--s-8) 0 var(--s-7);
    margin-top: var(--s-9);
}
.site-footer a { color: var(--c-cream); }
.site-footer a:hover { color: var(--c-tan); }

.site-footer__inner {
    display: grid;
    gap: var(--s-7);
    grid-template-columns: 1fr;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--s-5);
    text-align: center;
}

.site-footer__brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-cream);
    margin-bottom: var(--s-2);
}

.site-footer__small {
    color: var(--c-brown-muted);
    font-size: var(--t-small);
    margin-top: var(--s-5);
}

.site-footer__social {
    display: flex;
    gap: var(--s-5);
    justify-content: center;
}
.site-footer__social a { font-size: 1.5rem; }


/* ============================================================
 * Section primitives
 * ============================================================ */

.section--cream-soft { background: var(--c-cream-soft); }

.container--narrow { max-width: 760px; }

.section__title { text-align: center; }

.section__intro {
    max-width: 60ch;
    margin: 0 auto var(--s-7);
    text-align: center;
    color: var(--c-brown-muted);
    font-size: 1.125rem;
}

.text-center { text-align: center; }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-tan);
    margin: 0 0 var(--s-3) 0;
}
.eyebrow--center { text-align: center; }

.lead--center { margin-left: auto; margin-right: auto; }

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: center;
    margin-top: var(--s-5);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Honeypot — hidden from humans (by CSS, aria, tabindex) but rendered to bots
   that ignore CSS and fill every visible input. Anything in `name="website"`
   on a submission is treated as a bot and silently dropped. */
.form-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* ============================================================
 * Family grid (3 cards on desktop, 1 column on mobile)
 * ============================================================ */

.family-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-6);
}

.family-card {
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.08);
    border-radius: var(--radius-md);
    padding: var(--s-6);
    box-shadow: var(--shadow-soft);
}
.family-card h3 { margin-bottom: var(--s-2); }
.family-card__role {
    color: var(--c-tan);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    margin-bottom: var(--s-4);
}

@media (max-width: 768px) {
    .family-grid { grid-template-columns: 1fr; }
}


/* ============================================================
 * Split section (image + content side by side)
 * ============================================================ */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    align-items: center;
}

.split__media img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 860px) {
    .split { grid-template-columns: 1fr; gap: var(--s-6); }
    .split--reverse .split__media { order: -1; }
}


/* ============================================================
 * Classes grid (2 cards)
 * ============================================================ */

.classes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
}

.class-card {
    background: var(--c-cream-soft);
    border: 1px solid rgba(58, 44, 29, 0.08);
    border-radius: var(--radius-md);
    padding: var(--s-7);
}
.class-card h3 { margin-bottom: var(--s-2); }
.class-card__price {
    color: var(--c-green);
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: var(--s-4);
}

@media (max-width: 768px) {
    .classes-grid { grid-template-columns: 1fr; }
}


/* ============================================================
 * Newsletter sign-up
 * ============================================================ */

.section--newsletter {
    background:
        linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-soft) 100%);
}

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
    margin: var(--s-6) auto 0;
    max-width: 620px;
}

.newsletter-form input {
    flex: 1 1 200px;
    padding: var(--s-3) var(--s-4);
    font: inherit;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid rgba(58, 44, 29, 0.15);
    border-radius: var(--radius-pill);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.newsletter-form input:focus {
    outline: 0;
    border-color: var(--c-tan);
    box-shadow: 0 0 0 3px rgba(160, 134, 106, 0.18);
}
.newsletter-form button { flex: 0 0 auto; }

.newsletter-form__note {
    margin-top: var(--s-4);
    color: var(--c-brown-muted);
    font-size: var(--t-small);
}


/* ============================================================
 * Contact grid (intro + form)
 * ============================================================ */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--s-8);
    align-items: start;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: var(--s-5) 0 0;
}
.contact-list li {
    padding: var(--s-3) 0;
    border-bottom: 1px solid rgba(58, 44, 29, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list__label {
    color: var(--c-brown-muted);
    font-size: var(--t-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.contact-form,
.checkout-form {
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.08);
    border-radius: var(--radius-md);
    padding: var(--s-6);
    box-shadow: var(--shadow-soft);
}
.contact-form__row { margin-bottom: var(--s-4); }
.contact-form label,
.checkout-form label {
    display: block;
    margin-bottom: var(--s-2);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--c-brown-deep);
}
.contact-form input,
.contact-form textarea,
.checkout-form input,
.checkout-form textarea {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    font: inherit;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid rgba(58, 44, 29, 0.15);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form textarea,
.checkout-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus,
.contact-form textarea:focus,
.checkout-form input:focus,
.checkout-form textarea:focus {
    outline: 0;
    border-color: var(--c-tan);
    box-shadow: 0 0 0 3px rgba(160, 134, 106, 0.18);
}

@media (max-width: 860px) {
    .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}