/* =====================================================================
   RUUPALI AHUJA PHOTOGRAPHY — DESIGN SYSTEM
   =====================================================================

   Structure
     1.  Tokens
     2.  Reset & base
     3.  Typography
     4.  Layout
     5.  Buttons & links
     6.  Header & navigation
     7.  Hero
     8.  Sections & headings
     9.  Cards
     10. Portfolio grid & lightbox
     11. Pricing
     12. FAQ
     13. Forms
     14. Blog
     15. Footer
     16. Sticky mobile CTA
     17. Utilities
     18. Motion & accessibility

   The site is deliberately light-only. A photography portfolio is a
   gallery wall: a warm paper ground is part of the design, and inverting
   it would change how every photograph reads. `color-scheme: light` is
   set explicitly so browsers do not auto-darken it.
   ================================================================== */


/* =====================================================================
   1. TOKENS
   ================================================================== */

:root {
    /* --- Colour -----------------------------------------------------
       Warm neutral ground, deep warm ink, one restrained clay accent.
       Contrast pairs are checked against WCAG AA:
         --ink on --paper          15.8:1
         --ink-soft on --paper      7.1:1
         --paper on --accent        4.6:1  (large text / buttons)
         --accent-deep on --paper   6.2:1
    ---------------------------------------------------------------- */
    --paper:        #faf8f5;
    --paper-warm:   #f4efe8;
    --paper-deep:   #ebe3d9;
    --surface:      #ffffff;

    --ink:          #241f1b;
    --ink-soft:     #5f564e;
    --ink-faint:    #8b8178;

    --accent:       #9c6b52;
    --accent-deep:  #7a5240;
    --accent-wash:  #f0e5dd;

    --line:         #e2d9cd;
    --line-strong:  #cbbdaa;

    --success:      #4a6b4f;
    --error:        #a33b2c;

    /* --- Type ------------------------------------------------------- */
    --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
    /* Cormorant Garamond is a high-contrast display serif. Left against the
       raw system stack it fell to Segoe UI on Windows and Roboto on Android,
       so the same page read as two different brands depending on the visitor's
       machine — which is what "the font changed" looks like from the outside.
       Mulish is named first so the pairing is the same everywhere; the system
       stack stays behind it as the fallback while the webfont loads. */
    --font-body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;

    /* Fluid scale, 320px → 1440px viewport */
    --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
    --step-0:  clamp(0.98rem, 0.94rem + 0.18vw, 1.08rem);
    --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
    --step-2:  clamp(1.42rem, 1.29rem + 0.65vw, 1.8rem);
    --step-3:  clamp(1.75rem, 1.51rem + 1.18vw, 2.45rem);
    --step-4:  clamp(2.1rem, 1.7rem + 2vw, 3.3rem);
    --step-5:  clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);

    /* --- Space ------------------------------------------------------ */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2.25rem;
    --space-xl:  3.5rem;
    --space-2xl: 5rem;
    --space-3xl: clamp(4rem, 2rem + 8vw, 8rem);

    /* --- Structure --------------------------------------------------- */
    --measure:      68ch;
    --container:    76rem;
    --container-wide: 92rem;
    --radius:       2px;
    --radius-lg:    3px;

    --shadow-soft:  0 1px 2px rgb(36 31 27 / 0.04),
                    0 8px 24px -12px rgb(36 31 27 / 0.12);
    --shadow-lift:  0 2px 4px rgb(36 31 27 / 0.05),
                    0 20px 44px -20px rgb(36 31 27 / 0.22);

    --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur:          420ms;
    --dur-fast:     200ms;

    --header-h:     4.5rem;

    color-scheme: light;
}

@media (min-width: 60em) {
    :root { --header-h: 5.5rem; }
}


/* =====================================================================
   2. RESET & BASE
   ================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor targets clear the fixed header */
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Locks scroll behind the mobile menu and lightbox */
body.is-locked { overflow: hidden; }

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

/* img() wraps responsive images in <picture>. That wrapper sits between
   the fixed-aspect container and the <img>, so `height: 100%` on the image
   resolves against a wrapper of auto height and the image stops filling
   its box — leaving strips of background inside gallery tiles and cards.
   Giving the wrapper the container's dimensions restores the chain. */
.gallery__item picture,
.card__media picture,
.split__media picture,
.hero__media picture,
.page-hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--space-xl) 0;
}

::selection {
    background: var(--accent);
    color: var(--paper);
}


/* =====================================================================
   3. TYPOGRAPHY
   ================================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-s);
    color: var(--ink);
    text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-s); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 56ch;
}

/* Small uppercase label above section headings */
.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-xs);
}

.script {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
}

strong { font-weight: 600; }

blockquote {
    margin: var(--space-l) 0;
    padding-left: var(--space-m);
    border-left: 2px solid var(--accent);
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-style: italic;
    line-height: 1.4;
    color: var(--ink-soft);
}


/* =====================================================================
   4. LAYOUT
   ================================================================== */

.container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
}

.container--wide { width: min(100% - 2.5rem, var(--container-wide)); }
.container--narrow { width: min(100% - 2.5rem, 46rem); }

@media (min-width: 48em) {
    .container,
    .container--wide,
    .container--narrow { width: min(100% - 4rem, var(--container)); }
    .container--wide   { width: min(100% - 4rem, var(--container-wide)); }
    .container--narrow { width: min(100% - 4rem, 46rem); }
}

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--warm { background: var(--paper-warm); }
.section--deep { background: var(--paper-deep); }
.section--ink  { background: var(--ink); color: var(--paper); }

.section--ink h2,
.section--ink h3 { color: var(--paper); }
.section--ink .lede { color: rgb(250 248 245 / 0.72); }
.section--ink .eyebrow { color: #d9b49c; }

/* Generic responsive grid */
.grid { display: grid; gap: var(--space-m); }

@media (min-width: 40em) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
    .grid { gap: var(--space-l); }
}


/* =====================================================================
   5. BUTTONS & LINKS
   ================================================================== */

a {
    color: var(--accent-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--dur-fast) var(--ease);
}

a:hover { color: var(--ink); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: 0.95em 1.9em;
    min-height: 44px;               /* touch target */
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.btn--primary:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--paper);
}

.btn--accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn--accent:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
}

.btn--outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}
.btn--outline:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}

.btn--ghost {
    background: transparent;
    color: var(--paper);
    border-color: rgb(250 248 245 / 0.35);
}
.btn--ghost:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

/* WhatsApp keeps its own recognisable green — the one colour on the site
   that is not from the palette, because recognition beats consistency
   for a channel people are looking for. */
.btn--whatsapp {
    background: #1faa54;
    border-color: #1faa54;
    color: #fff;
}
.btn--whatsapp:hover { background: #178a43; border-color: #178a43; color: #fff; }

.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 0.7em 1.3em; font-size: 0.78rem; }

.btn .icon { width: 1.05em; height: 1.05em; flex: none; }

/* Underline that draws on hover */
.link-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    padding-bottom: 2px;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.link-line:hover {
    color: var(--accent-deep);
    background-size: 0% 1px;
    background-position: 100% 100%;
}


/* =====================================================================
   6. HEADER & NAVIGATION
   ================================================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-s);
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-s); color: var(--paper); }

.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: transparent;
    transition: background var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
    border-bottom: 1px solid transparent;
}

/* Solid once scrolled, or on any page without a full-bleed hero */
.header.is-solid,
.header.is-static {
    background: rgb(250 248 245 / 0.94);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom-color: var(--line);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    width: min(100% - 2.5rem, var(--container-wide));
    margin-inline: auto;
}

@media (min-width: 48em) {
    .header__inner { width: min(100% - 4rem, var(--container-wide)); }
}

.brand {
    display: flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none;
    color: var(--ink);
    flex: none;
}

.brand__name {
    font-family: var(--font-display);
    font-size: 1.32rem;
    letter-spacing: 0.02em;
}

/* Logo lockup. Height-driven so it sits inside the header band at any
   breakpoint; width follows the artwork's own 2.13:1 ratio. */
.brand--logo {
    display: block;
    flex: none;
}

/* The supplied artwork carried ~65% empty transparent margin, which made
   any CSS height misleading; it is trimmed to its alpha bounds on import,
   so these values size the visible wordmark itself. Ratio is ~3.1:1, and
   the header band is 5.5rem on desktop. */
.brand--logo img {
    height: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
    width: auto;
}

.footer__logo {
    height: 2.4rem;
    width: auto;
    margin-bottom: var(--space-xs);
}

.brand__sub {
    font-size: 0.58rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 0.35em;
}

/* Over a dark hero, before scroll */
.header:not(.is-solid):not(.is-static) .brand,
.header:not(.is-solid):not(.is-static) .nav__link {
    color: var(--paper);
}
.header:not(.is-solid):not(.is-static) .brand__sub {
    color: rgb(250 248 245 / 0.7);
}
.header:not(.is-solid):not(.is-static) .nav-toggle__bar {
    background: var(--paper);
}

.nav { display: none; }

@media (min-width: 64em) {
    .nav {
        display: flex;
        align-items: center;
        gap: clamp(1rem, 2vw, 2rem);
    }
}

.nav__link {
    position: relative;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    padding-block: 0.5rem;
    white-space: nowrap;
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.15rem;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur) var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.header__cta { display: none; }
@media (min-width: 64em) { .header__cta { display: inline-flex; } }

/* --- Hamburger --- */

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
}

@media (min-width: 64em) { .nav-toggle { display: none; } }

.nav-toggle__bar {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--ink);
    transition: transform var(--dur-fast) var(--ease),
                opacity var(--dur-fast) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* --- Mobile menu --- */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + var(--space-l)) var(--space-m) var(--space-l);
    background: var(--paper);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    /* visibility is delayed to the END of the close transition, but flips
       INSTANTLY on open (see .is-open). Transitioning it symmetrically
       would leave the menu visibility:hidden for the duration of the
       opening animation — and .focus() on a hidden element is a silent
       no-op, which strands keyboard users outside the menu they just
       opened. */
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility 0s linear var(--dur);
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility 0s;
}

@media (min-width: 64em) { .mobile-menu { display: none; } }

.mobile-menu__link {
    display: block;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: var(--step-2);
    text-decoration: none;
    color: var(--ink);
}

.mobile-menu__link[aria-current="page"] { color: var(--accent-deep); }

.mobile-menu__actions {
    display: grid;
    gap: var(--space-2xs);
    margin-top: var(--space-l);
}

.mobile-menu__meta {
    margin-top: auto;
    padding-top: var(--space-l);
    font-size: var(--step--1);
    color: var(--ink-soft);
}


/* =====================================================================
   7. HERO
   ================================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
    color: var(--paper);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero film. Sits over the photograph and fades in once it is actually
   playing, so a stalled or blocked video never leaves a blank hero - the
   photograph simply stays visible. */
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 900ms var(--ease);
    pointer-events: none;
}

.hero__video.is-playing { opacity: 1; }

/* The film is a pale, cream-toned album sequence, far lighter than the
   photograph the scrim above was balanced for, so the nav needs more help at
   the top of the frame. It no longer needs to be dark enough for a headline,
   though — the album itself is the point now, and burying it under 60% black
   was the whole reason it looked murky. So: 60% across the header band only,
   which is what white nav links need to clear 4.5:1 against the palest page
   in the sequence, and 10% over the album itself. Applied only while the film
   is actually showing. */
.hero--film::after {
    background: linear-gradient(
        to top,
        rgb(20 16 13 / 0.26) 0%,
        rgb(20 16 13 / 0.10) 26%,
        rgb(20 16 13 / 0.10) 74%,
        rgb(20 16 13 / 0.22) 86%,
        rgb(20 16 13 / 0.64) 96%,
        rgb(20 16 13 / 0.68) 100%
    ) !important;
}

@media (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }
}

/* Gradient keeps text legible over any photograph */
/* The scrim used to be heavy enough to carry white body copy over a
   photograph. The hero holds no text any more, so all it has left to do is
   keep the transparent header's white nav links legible against whatever
   happens to be at the top of the frame, and stop the picture running flat
   into the section below. Hence a vignette rather than a wash, with the dark
   band confined to the top ~10% — the header's own height — so the middle
   of the frame is left alone.

   The band is as strong as it is because the hero photograph is high-key
   black and white: the top of the frame is near-white fur, which is the
   worst case white nav links can be asked to sit on. Measured, not guessed
   — see the commit. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgb(20 16 13 / 0.30) 0%,
        rgb(20 16 13 / 0.10) 26%,
        rgb(20 16 13 / 0.10) 74%,
        rgb(20 16 13 / 0.22) 86%,
        rgb(20 16 13 / 0.64) 96%,
        rgb(20 16 13 / 0.68) 100%
    );
}

/* .hero__inner sits on the same element as .container, inside a flex
   parent. It must not set width OR flex-grow: either one overrides the
   container's `width: min(100% - gutter, max)` + `margin-inline: auto`
   and pushes the headline flush against the viewport edge.
   flex: none keeps the container's own sizing intact. */
.hero__inner { flex: none; }

.hero__eyebrow {
    color: rgb(250 248 245 / 0.78);
    letter-spacing: 0.24em;
}

/* Compact hero for interior pages */
.page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(20rem, 46vh, 32rem);
    padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-xl);
    color: var(--paper);
    overflow: hidden;
}

.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
        rgb(20 16 13 / 0.74), rgb(20 16 13 / 0.34) 60%, rgb(20 16 13 / 0.4));
}

.page-hero h1 { color: var(--paper); margin-bottom: var(--space-2xs); }
.page-hero__lede { color: rgb(250 248 245 / 0.85); max-width: 52ch; }

/* Text-only page header, shared by About, Services, Portfolio, Pricing,
   Blog, Contact, the legal pages and 404.

   The gradient is the clay-to-cream direction from the approved sample,
   but pitched much lighter. The sample was designed as a photo-box fill
   with nothing on top of it; here the band carries a heading, a lede and
   breadcrumbs. Full-strength clay (#9c6b52) measures 3.60:1 against the
   ink and 1.58:1 against the muted lede — both fail WCAG AA. Starting at
   #e8d5c8 keeps the same warmth and still measures 11.5:1 and 5.1:1. */
.page-head {
    padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-xl);
    background: linear-gradient(135deg,
        #e8d5c8 0%,
        #f1e6dc 42%,
        var(--paper) 100%);
    border-bottom: 1px solid var(--line);
}


/* =====================================================================
   8. SECTIONS & HEADINGS
   ================================================================== */

.section-head {
    max-width: 44rem;
    margin-bottom: var(--space-xl);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head--center p { margin-inline: auto; }

.section-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-m);
    max-width: none;
    margin-bottom: var(--space-xl);
}

.section-head__row .section-head { margin-bottom: 0; }

/* Statistics strip */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-m);
    text-align: center;
}

.stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-4);
    line-height: 1;
    color: var(--accent);
}

.stat__label {
    display: block;
    margin-top: var(--space-3xs);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.section--ink .stat__value { color: #d9b49c; }
.section--ink .stat__label { color: rgb(250 248 245 / 0.66); }


/* =====================================================================
   9. CARDS
   ================================================================== */

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

.card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lift);
    transform: translateY(-3px);
}

.card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--paper-deep);
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease);
}

.card:hover .card__media img { transform: scale(1.04); }

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-m);
}

.card__title {
    font-size: var(--step-2);
    margin-bottom: var(--space-2xs);
}

.card__title a {
    color: inherit;
    text-decoration: none;
}

/* Makes the whole card clickable while keeping one real link for a11y */
.card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card { position: relative; }

.card__text {
    color: var(--ink-soft);
    font-size: var(--step--1);
    margin-bottom: var(--space-s);
}

.card__foot {
    margin-top: auto;
    padding-top: var(--space-xs);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

/* Service card with the image bleeding to the card edge */
.service-card .card__media { aspect-ratio: 3 / 4; }

/* Card media for a service whose photographs have not arrived yet. The
   brand gradient reads as a deliberate design choice; a grey generated
   placeholder reads as a broken image. Same clay-to-cream direction used
   elsewhere on the site, pitched light. */
.card__media--pending {
    background: linear-gradient(135deg, #c9a68f 0%, #e6d5c6 45%, #f4efe8 100%);
}


/* =====================================================================
   10. PORTFOLIO GRID & LIGHTBOX
   ================================================================== */

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xs);
}

@media (min-width: 48em) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xs);
    }
}

@media (min-width: 80em) {
    .gallery { grid-template-columns: repeat(4, 1fr); }
}

/* Tiles are 3:2 landscape because that is what the studio actually
   shoots — every photograph in the library is landscape. A portrait tile
   would centre-crop roughly half the width away, and in styled newborn
   sets the props spread horizontally, so the crop would cut off the part
   of the frame that makes the picture. Match the photography, not the
   other way round. */
.gallery__item {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--paper-deep);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    cursor: zoom-in;
}

/* The library is mostly landscape but not entirely. A portrait frame
   forced into a landscape tile loses the top and bottom of the picture —
   on a full-length maternity portrait that means cropping off heads or
   feet. Portrait tiles keep their own shape and span two rows so the grid
   still lines up. */
.gallery__item--portrait {
    /* No aspect-ratio here on purpose. Setting one alongside grid-row:
       span 2 gives the tile a definite height that is shorter than the two
       rows it occupies, so it stops stretching and leaves a band of empty
       background above the picture. Letting the span define the height and
       object-fit handle the rest keeps the grid flush. */
    grid-row: span 2;
    aspect-ratio: auto;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease), opacity var(--dur) var(--ease);
}

.gallery__item:hover img { transform: scale(1.045); }

.gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(20 16 13 / 0);
    transition: background var(--dur) var(--ease);
}

.gallery__item:hover::after { background: rgb(20 16 13 / 0.12); }

/* Category filter */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-bottom: var(--space-l);
}

.filter {
    padding: 0.55em 1.15em;
    min-height: 40px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.filter:hover { border-color: var(--ink); color: var(--ink); }

.filter[aria-current="true"],
.filter.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* --- Lightbox --- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgb(16 13 11 / 0.96);
    opacity: 0;
    visibility: hidden;
    /* Same instant-on / delayed-off pattern as .mobile-menu, so the close
       button can take focus the moment the viewer opens. */
    transition: opacity var(--dur) var(--ease),
                visibility 0s linear var(--dur);
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease), visibility 0s;
}

.lightbox__figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
}

.lightbox__img {
    max-width: 100%;
    max-height: 78svh;
    width: auto;
    object-fit: contain;
}

.lightbox__caption {
    color: rgb(250 248 245 / 0.72);
    font-size: var(--step--1);
    text-align: center;
    max-width: 60ch;
}

.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background: rgb(250 248 245 / 0.1);
    border: 1px solid rgb(250 248 245 / 0.24);
    border-radius: 50%;
    color: var(--paper);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}

.lightbox__btn:hover { background: rgb(250 248 245 / 0.24); }

.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev  { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

.lightbox__count {
    position: absolute;
    bottom: clamp(1rem, 3vw, 2rem);
    left: 50%;
    transform: translateX(-50%);
    color: rgb(250 248 245 / 0.6);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
}


/* =====================================================================
   11. PRICING
   ================================================================== */

.package {
    display: flex;
    flex-direction: column;
    padding: var(--space-l);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.package:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-soft);
}

.package--featured {
    border-color: var(--accent);
    box-shadow: var(--shadow-soft);
}

.package__flag {
    align-self: flex-start;
    margin-bottom: var(--space-s);
    padding: 0.3em 0.85em;
    background: var(--accent-wash);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.package__name {
    font-size: var(--step-2);
    margin-bottom: var(--space-2xs);
}

.package__summary {
    font-size: var(--step--1);
    color: var(--ink-soft);
    margin-bottom: var(--space-m);
}

.package__price {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    padding-bottom: var(--space-m);
    margin-bottom: var(--space-m);
    border-bottom: 1px solid var(--line);
}

.package__price-label {
    font-size: var(--step--1);
    color: var(--ink-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.package__price-value {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1;
    color: var(--ink);
}

.package__specs {
    display: grid;
    gap: var(--space-2xs);
    margin-bottom: var(--space-l);
    font-size: var(--step--1);
}

.package__specs li {
    display: grid;
    grid-template-columns: 1.1em 1fr;
    gap: var(--space-2xs);
    align-items: start;
    color: var(--ink-soft);
}

.package__specs .icon {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.28em;
    color: var(--accent);
    flex: none;
}

.package__actions {
    display: grid;
    gap: var(--space-2xs);
    margin-top: auto;
}

@media (min-width: 30em) {
    .package__actions { grid-template-columns: 1fr 1fr; }
}

.price-note {
    padding: var(--space-m);
    background: var(--accent-wash);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius);
    font-size: var(--step--1);
    color: var(--ink-soft);
}


/* =====================================================================
   12. FAQ
   ================================================================== */

.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    width: 100%;
    padding: var(--space-m) 0;
    background: none;
    border: 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.3;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}

.faq__q:hover { color: var(--accent-deep); }

.faq__icon {
    position: relative;
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.4em;
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: var(--accent);
    transition: transform var(--dur) var(--ease);
}

.faq__icon::after { transform: rotate(90deg); }

.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

.faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease);
}

.faq__a > div { overflow: hidden; }

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a p {
    padding-bottom: var(--space-m);
    color: var(--ink-soft);
    max-width: 62ch;
}


/* =====================================================================
   13. FORMS
   ================================================================== */

.form { display: grid; gap: var(--space-m); }

.form__row { display: grid; gap: var(--space-m); }

@media (min-width: 40em) {
    .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: var(--space-3xs); }

.field__label {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.field__hint {
    font-size: 0.78rem;
    color: var(--ink-faint);
}

.field__required { color: var(--accent); }

.input,
.select,
.textarea {
    width: 100%;
    padding: 0.85em 1em;
    min-height: 48px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder { color: var(--ink-faint); }

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.textarea { min-height: 9rem; resize: vertical; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235f564e' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--error);
}

.field__error {
    font-size: 0.78rem;
    color: var(--error);
    font-weight: 600;
}

/* Checkbox group */
.checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xs);
    align-items: start;
    font-size: var(--step--1);
    color: var(--ink-soft);
    cursor: pointer;
}

.checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.2em 0 0;
    accent-color: var(--accent);
}

/* Service checkboxes rendered as selectable chips */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.chip {
    position: relative;
    display: inline-flex;
}

.chip input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.chip span {
    padding: 0.55em 1.1em;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: var(--step--1);
    color: var(--ink-soft);
    transition: all var(--dur-fast) var(--ease);
}

.chip input:checked + span {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.chip input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Honeypot — must stay invisible to humans but reachable to bots.
   Not display:none, which some bots detect and skip. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Feedback banners */
.notice {
    padding: var(--space-m);
    border-radius: var(--radius);
    border-left: 3px solid;
    font-size: var(--step--1);
}

.notice--success {
    background: #eef3ee;
    border-color: var(--success);
    color: #2f4a34;
}

.notice--error {
    background: #f9edeb;
    border-color: var(--error);
    color: #7d2c20;
}

.notice h3 { margin-bottom: var(--space-3xs); font-size: var(--step-1); }


/* =====================================================================
   14. BLOG
   ================================================================== */

.prose { max-width: 68ch; }

.prose h2 { margin-top: var(--space-xl); font-size: var(--step-3); }
.prose h3 { margin-top: var(--space-l); font-size: var(--step-1); }

.prose p,
.prose li { color: var(--ink-soft); }

.prose ul,
.prose ol {
    margin: 0 0 var(--space-s);
    padding-left: var(--space-m);
    display: grid;
    gap: var(--space-2xs);
}

.prose li { list-style: disc; }
.prose ol li { list-style: decimal; }

.prose img { margin-block: var(--space-l); border-radius: var(--radius); }

.prose a { color: var(--accent-deep); }

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--step--1);
    color: var(--ink-faint);
}

.post-meta__dot { color: var(--line-strong); }

.tag {
    display: inline-block;
    padding: 0.25em 0.8em;
    background: var(--accent-wash);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    font-size: 0.78rem;
    color: var(--ink-faint);
    margin-bottom: var(--space-m);
}

.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-deep); text-decoration: underline; }

.share {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-wrap: wrap;
}

.share__btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--ink-soft);
    transition: all var(--dur-fast) var(--ease);
}

.share__btn:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}


/* =====================================================================
   15. FOOTER
   ================================================================== */

.footer {
    background: var(--ink);
    color: rgb(250 248 245 / 0.72);
    padding-block: var(--space-2xl) var(--space-l);
    /* Clear the sticky mobile CTA */
    padding-bottom: calc(var(--space-l) + 4.5rem);
}

@media (min-width: 64em) {
    .footer { padding-bottom: var(--space-l); }
}

.footer a { color: rgb(250 248 245 / 0.72); text-decoration: none; }
.footer a:hover { color: var(--paper); text-decoration: underline; }

.footer__grid {
    display: grid;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

@media (min-width: 40em) {
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
    .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.footer__brand .brand__name { color: var(--paper); font-size: 1.5rem; }
.footer__brand .brand__sub { color: rgb(250 248 245 / 0.5); }

.footer__text {
    margin-top: var(--space-s);
    font-size: var(--step--1);
    max-width: 34ch;
}

.footer__title {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--paper);
    margin-bottom: var(--space-s);
}

.footer__list { display: grid; gap: var(--space-2xs); font-size: var(--step--1); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-top: var(--space-l);
    border-top: 1px solid rgb(250 248 245 / 0.14);
    font-size: 0.78rem;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
}

.socials { display: flex; gap: var(--space-2xs); margin-top: var(--space-s); }

.socials a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(250 248 245 / 0.22);
    border-radius: 50%;
    transition: all var(--dur-fast) var(--ease);
}

.socials a:hover {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

.socials .icon { width: 1.05rem; height: 1.05rem; }


/* =====================================================================
   16. STICKY MOBILE CTA
   ================================================================== */

.sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px -8px rgb(36 31 27 / 0.18);
    /* Sit above the iOS home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 64em) { .sticky-cta { display: none; } }

.sticky-cta__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0.65rem 0.25rem;
    min-height: 58px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    border-right: 1px solid var(--line);
}

.sticky-cta__btn:last-child { border-right: 0; }
.sticky-cta__btn .icon { width: 1.15rem; height: 1.15rem; }

.sticky-cta__btn--whatsapp { color: #178a43; }
.sticky-cta__btn--primary { background: var(--ink); color: var(--paper); }


/* =====================================================================
   17. UTILITIES
   ================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

[hidden] { display: none !important; }

/* --- No-JS fallbacks ------------------------------------------------
   Without JS the hamburger cannot open the mobile menu, so the primary
   nav is shown inline instead and the toggle is removed. The site stays
   fully navigable with scripting disabled. */

html:not(.js) .nav-toggle,
html:not(.js) .mobile-menu { display: none; }

html:not(.js) .nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    justify-content: flex-end;
}

html:not(.js) .header {
    position: static;
    height: auto;
    padding-block: var(--space-s);
    background: var(--paper);
    border-bottom-color: var(--line);
}

html:not(.js) .header__inner { flex-wrap: wrap; }

/* Heroes assume a fixed header sitting over them; without one they need
   their normal top padding back. */
html:not(.js) .hero,
html:not(.js) .page-hero,
html:not(.js) .page-head { padding-top: var(--space-2xl); }

html:not(.js) .hero { min-height: 70svh; }

/* Filters and the lightbox are JS-driven; links still work as pages. */
html:not(.js) .lightbox { display: none; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }

.stack { display: grid; gap: var(--space-s); align-content: start; }
.stack--l { gap: var(--space-l); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;
}

.icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* Split layout: text one side, image the other */
.split {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

@media (min-width: 56em) {
    .split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
    .split--reverse > *:first-child { order: 2; }
}

.split__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper-deep);
}

.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Behind-the-scenes video. max-height caps a portrait reel so it never
   towers over the page; width adapts to whichever orientation the file
   actually is. */
.bts-video {
    display: flex;
    justify-content: center;
}

.bts-video video {
    max-width: 100%;
    max-height: 75svh;
    width: auto;
    border-radius: var(--radius-lg);
    background: var(--ink);
    box-shadow: var(--shadow-lift);
}

/* Empty-state block, used where real content is not yet available */
.empty {
    display: grid;
    place-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xl) var(--space-m);
    background: var(--paper-warm);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    text-align: center;
    color: var(--ink-soft);
}


/* =====================================================================
   18. MOTION & ACCESSIBILITY
   ================================================================== */

/* Focus rings: only for keyboard users, never suppressed entirely */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 1px;
}

.lightbox :focus-visible,
.hero :focus-visible,
.footer :focus-visible,
.section--ink :focus-visible {
    outline-color: #e5c3ad;
}

/* Scroll-reveal. Elements start hidden ONLY when JS is available to
   reveal them — .js is set on <html> by the inline head script, so a
   no-JS visitor sees everything immediately.
   .reveal-off is the failsafe: the head script adds it if main.js has not
   started within a few seconds, so a blocked or failed script can never
   leave whole sections permanently invisible. */
.js:not(.reveal-off) .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
    will-change: opacity, transform;
}

.js .reveal.is-visible,
.js.reveal-off .reveal {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Reveal animations are removed rather than merely shortened */
    .js .reveal { opacity: 1 !important; transform: none !important; }
    .card:hover { transform: none; }
    .card:hover .card__media img,
    .gallery__item:hover img { transform: none; }
}

@media (prefers-contrast: more) {
    :root {
        --ink-soft: #423b34;
        --ink-faint: #5f564e;
        --line: #b9ab98;
        --line-strong: #8b8178;
    }
}


/* =====================================================================
   PRINT
   ================================================================== */

@media print {
    /* Scroll-reveal never fires when printing — the browser paints the
       whole document without scrolling it — so without this, every
       revealed section prints blank. */
    .reveal { opacity: 1 !important; transform: none !important; }

    .header, .mobile-menu, .sticky-cta, .lightbox,
    .footer, .btn { display: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }
    .section { padding-block: 1rem; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}