/* ================================
   REDESIGN (Sept 2026)
   Loaded by public pages only. admin.html and quote.html do not load this
   file, so the dashboard and the html2canvas quote image are unaffected.

   Depends on the REDESIGN TOKENS block at the foot of variables-crimson.css.
   Load order: variables -> main -> animations -> header -> footer ->
   responsive -> redesign. Last, so it wins without needing !important.
   ================================ */

/* ================================
   1. BASE
   ================================ */

body {
    font-family: var(--font-ui);
    font-size: var(--step-base);
    line-height: 1.65;
    background: var(--color-white);
    /* Karla's default figures are proportional; tabular reads better in the
       trust strip and anywhere a number sits next to a label. */
    font-variant-numeric: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    letter-spacing: -0.015em;
    line-height: 1.1;
    text-wrap: balance;
}

h1 { font-size: var(--step-h1); font-weight: 700; }
h2 { font-size: var(--step-h2); font-weight: 600; }
h3 { font-size: var(--step-h3); font-weight: 600; }

p {
    text-wrap: pretty;
    max-width: 68ch;
}

/* 22 Oct (Jayden): on a phone, `pretty` cut article lines well short of the edge
   ("…on their feet and keeps / them there."). Plain wrapping fills each line, at
   the cost of an occasional one-word last line. Justified text was tried on the
   same page and rejected: too few words per line, so the gaps between them showed.
   Covers the service pages, the wedding hub and the blog posts (everything with
   .article-main); reena-kaur.html already had the same via `.profile p`. */
@media (max-width: 1024px) {
    .article-main p,
    .article-main li {
        text-wrap: wrap;
    }
}

/* Focus only for keyboard users — the blanket a:focus rule in main.css
   fires a ring on every mouse click too. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--gold-ink);
    outline-offset: 3px;
    border-radius: 2px;
}

/* The dark-gold ring is invisible on the hero and the crimson CTA. */
.hero-section a:focus-visible,
.hero-section button:focus-visible,
.closing a:focus-visible,
.closing button:focus-visible,
.site-footer a:focus-visible,
.on-ink a:focus-visible,
.on-ink button:focus-visible {
    outline-color: #FFE9A8;
}

/* ================================
   2. SIGNATURE — THE BEAT RULE

   Punjabi folk is played over an eight-beat cycle. The first beat (sam) and
   the fifth (khali) are the two the whole cycle is felt against, so they are
   the two marks that carry weight. This replaces the 80px gold bar that sat
   under every section title.
   ================================ */

.beat-rule {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 4px;
}

.beat-rule .beat {
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.45;
}

.beat-rule .beat.is-sam,
.beat-rule .beat.is-khali {
    height: 4px;
    opacity: 1;
}

.beat-rule .beat.is-sam { width: 22px; }

/* Centred variant used under section titles */
.beat-rule--centred {
    justify-content: center;
    margin: 0 auto;
}

/* The one orchestrated moment on the page: the cycle counts itself in once,
   on load, then holds still. */
.beat-rule--hero .beat {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    animation: beatIn 380ms var(--ease-out) forwards;
}

.beat-rule--hero .beat:nth-child(1) { animation-delay: calc(var(--beat) * 0); }
.beat-rule--hero .beat:nth-child(2) { animation-delay: calc(var(--beat) * 1); }
.beat-rule--hero .beat:nth-child(3) { animation-delay: calc(var(--beat) * 2); }
.beat-rule--hero .beat:nth-child(4) { animation-delay: calc(var(--beat) * 3); }
.beat-rule--hero .beat:nth-child(5) { animation-delay: calc(var(--beat) * 4); }
.beat-rule--hero .beat:nth-child(6) { animation-delay: calc(var(--beat) * 5); }
.beat-rule--hero .beat:nth-child(7) { animation-delay: calc(var(--beat) * 6); }
.beat-rule--hero .beat:nth-child(8) { animation-delay: calc(var(--beat) * 7); }

@keyframes beatIn {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 0.34; transform: scaleX(1); }
}

.beat-rule--hero .beat.is-sam,
.beat-rule--hero .beat.is-khali {
    animation-name: beatInAccent;
}

@keyframes beatInAccent {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

/* ================================
   3. SECTION RHYTHM

   Three grounds in sequence — ink, paper, white — instead of five
   near-identical peach washes. A section declares its ground; it does not
   carry an inline gradient.
   ================================ */

.band {
    padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0;
    position: relative;
}

.band--blush { background: var(--wash-blush); }
.band--cream { background: var(--wash-cream); }
.band--amber { background: var(--wash-amber); }
.band--white { background: var(--color-white); }

.band--ink {
    background: var(--ink);
    color: var(--on-ink);
}

.band--ink h2,
.band--ink h3,
.band--ink h4 { color: var(--on-ink); }

.band--ink p { color: var(--on-ink-muted); }

/* Hairline between two consecutive light bands, so they read as separate
   sections without needing a different tint each time. */
.band--blush + .band--blush,
.band--cream + .band--cream,
.band--amber + .band--amber,
.band--white + .band--white {
    border-top: 1px solid var(--hairline-paper);
}

/* ===== Eyebrow ===== */
.eyebrow {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin-bottom: 0.9rem;
}

.band--ink .eyebrow,
.on-ink .eyebrow { color: var(--gold-leaf); }

/* Centred action row that closes a band */
.band-actions {
    text-align: center;
    margin-top: clamp(2rem, 1rem + 2vw, 3rem);
}

/* ===== Section header ===== */
.band .section-header {
    text-align: center;
    margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.band .section-title {
    font-size: var(--step-h2);
    color: var(--color-primary);
    margin-bottom: 1.25rem;
    display: block;
}

.band--ink .section-title { color: var(--on-ink); }

/* Override the 80px gold bar from main.css with the beat rule. */
.band h2,
.split h2,
.prose h2 { color: var(--color-primary); }

.band .section-title::after {
    content: '';
    position: static;
    display: block;
    transform: none;
    width: 154px;
    height: 4px;
    margin: 1.1rem auto 0;
    border-radius: 0;
    background: none;
    background-image:
        linear-gradient(to right, currentColor 0 22px, transparent 22px),
        repeating-linear-gradient(to right, currentColor 0 14px, transparent 14px 20px);
    background-size: 22px 4px, 154px 2px;
    background-position: 0 0, 28px 1px;
    background-repeat: no-repeat, repeat-x;
    color: var(--gold-deco);
    opacity: 1;
}

.band--ink .section-title::after { color: var(--gold-leaf); opacity: 0.7; }

.band .section-subtitle {
    font-size: var(--step-lead);
    color: var(--color-text-secondary);
    max-width: 58ch;
    margin: 0 auto;
    line-height: 1.6;
}

.band--ink .section-subtitle { color: var(--on-ink-muted); }

/* ================================
   4. HEADER

   The mark is grey type with peach chevrons on transparency, so it needs a
   light ground to stay legible. The header therefore stays a solid surface
   rather than going transparent over the hero.
   ================================ */

.site-header {
    background: rgba(251, 247, 242, 0.94);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 2px solid rgba(196, 30, 58, 0.18);
    box-shadow: none;
}

.site-header.scrolled {
    background: rgba(251, 247, 242, 0.98);
    box-shadow: 0 1px 24px rgba(26, 11, 16, 0.08);
    padding: 0;
}

/* No blur on the mobile layout (6 Oct). backdrop-filter makes the header the
   containing block for the position: fixed menu panel inside it, and with the
   header's mobile overflow-x: clip (main.css) Safari cut the open panel off at
   the header's 85px height: the menu showed as a white strip beside the logo.
   Chrome does not clip it, so nothing local shows it. A solid ground instead. */
@media (max-width: 1024px) {
    .site-header,
    .site-header.scrolled {
        background: var(--paper);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.navigation { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* The bar is 60 + 24 + 1 = 85px, so the body reserves 88. Previously the logo
   carried an inline height:75px, making the bar 100px against 80px of
   reserved space — the first 20px of every page sat behind the header. */
.logo img { height: 60px; margin-right: 0; }
.site-header.scrolled .logo img { height: 50px; }

body { padding-top: 88px; }

.nav-link {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.nav-link::after { background: var(--color-primary); height: 2px; }

.nav-dropdown { border-radius: 10px; }

.nav-dropdown-item {
    font-family: var(--font-ui);
    font-size: 0.9rem;
}

/* ================================
   5. HERO

   Centred over full-saturation footage (was left-aligned until 22 Sep). The old treatment laid a flat
   crimson film at 0.6 over the whole frame, which muddied the one asset the
   page cannot replace. This scrim is directional: solid under the words on
   the left, clear on the right where the dancing is.
   ================================ */

/* The box is 600px tall, as it was before, because object-fit: cover derives
   the crop from the box. A taller hero showed ~83% of the 1918x1078 frame
   instead of the middle ~56%, which changed which part of the wedding you
   see. Content is sized to fit inside 600px so the crop stays put. */
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 600px;
    padding: 2.5rem 0;
    overflow: hidden;
    background: var(--ink);
    color: var(--on-ink);
    isolation: isolate;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: opacity 900ms ease-in-out;
}

/* Directional scrim. Two layers: a horizontal wash that anchors the text
   column, and a short bottom fade that carries the trust strip. */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Centre-weighted now the text is centred: darkest behind the text column,
       easing off towards both edges so the footage still reads at the sides. */
    background:
        radial-gradient(ellipse 62% 85% at 50% 50%,
            rgba(26, 11, 16, 0.80) 0%,
            rgba(26, 11, 16, 0.66) 55%,
            rgba(26, 11, 16, 0.34) 100%),
        linear-gradient(to top,
            rgba(26, 11, 16, 0.75) 0%,
            rgba(26, 11, 16, 0) 42%);
}

/* A single crimson veil at low opacity keeps the brand in the frame without
   flattening the footage the way the old 0.6 film did. */
.hero-scrim::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 90% at 50% 50%,
        rgba(196, 30, 58, 0.45) 0%,
        rgba(196, 30, 58, 0.22) 100%);
    mix-blend-mode: multiply;
}

/* Centred (22 Sep, Jayden). Was left-aligned with a left-weighted scrim. */
.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 70ch;
    margin: 0 auto;
    text-align: center;
}

/* .hero-section prefix so this beats the later section-14 rules (.hero-support
   and .hero-title set their own margins, which pinned them to the left). */
.hero-section .hero-inner > * {
    margin-left: auto;
    margin-right: auto;
}

.hero-section .beat-rule,
.hero-actions,
.hero-facts {
    justify-content: center;
}

.hero-section .eyebrow {
    color: var(--gold-leaf);
    margin-bottom: 0;
}

.hero-section .beat-rule {
    color: var(--gold-leaf);
    margin-bottom: 1.1rem;
}

.hero-title {
    font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem);
    font-weight: 700;
    font-variation-settings: 'SOFT' 24, 'WONK' 1;
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--on-ink);
    margin: 0 0 1.1rem;
    max-width: 22ch;
}

.hero-lead {
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
    line-height: 1.55;
    color: var(--on-ink);
    max-width: 52ch;
    margin: 0 0 1.6rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 1.75rem;
}

/* ===== Trust strip ===== */
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hairline-ink);
    list-style: none;
    margin: 0;
    font-size: var(--step-sm);
    letter-spacing: 0.04em;
    color: var(--on-ink-muted);
}

.hero-facts li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
}

.hero-facts strong {
    color: var(--gold-leaf);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ================================
   6. BUTTONS
   ================================ */

.btn {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    border-radius: 8px;
    padding: 0.95rem 1.9rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: transform 180ms var(--ease-out),
                box-shadow 180ms var(--ease-out),
                background-color 180ms var(--ease-out),
                color 180ms var(--ease-out);
}

.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 6px 20px rgba(196, 30, 58, 0.30);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(196, 30, 58, 0.36);
}

.btn-primary:active { transform: translateY(0); }

/* Ghost button for the secondary action on ink */
.btn-ghost {
    background: transparent;
    color: var(--on-ink);
    border: 1px solid rgba(251, 247, 242, 0.5);
}

.btn-ghost:hover {
    background: rgba(251, 247, 242, 0.14);
    border-color: #FFE9A8;
    color: #FFE9A8;
}

/* Gold button reads as the primary action on the ink ground */
/* Text inside the button is 8.4:1. The hairline keeps its edge legible when
   it sits on the crimson band, where gold-on-crimson is only 2.6:1. */
.btn-gold {
    background: var(--gold-leaf);
    color: var(--ink);
    border: 1px solid rgba(255, 233, 168, 0.9);
    box-shadow: 0 6px 22px rgba(26, 11, 16, 0.22);
}

.btn-gold:hover {
    background: #E5B849;
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 165, 55, 0.32);
}

/* ================================
   7. CARDS
   ================================ */

.card {
    border-radius: 14px;
    border: 1px solid var(--hairline-paper);
    box-shadow: 0 1px 2px rgba(26, 11, 16, 0.04);
    transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out),
                border-color 220ms var(--ease-out);
}

.card:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 30, 58, 0.35);
    box-shadow: 0 18px 40px rgba(26, 11, 16, 0.12);
}

.card-title {
    font-family: var(--font-display);
    font-size: var(--step-h3);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    margin-bottom: 0.6rem;
    color: var(--color-primary);
}

.card-text {
    font-size: var(--step-sm);
    line-height: 1.65;
    margin-bottom: 1.1rem;
}

/* ===== Service card ===== */
/* The three cards used to carry unrelated pink, orange and purple bars. One
   brand gradient, same on every card. */
.service-card .card-media {
    position: relative;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--color-primary) 0%, var(--gold-leaf) 100%) 1;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ink);
}

.service-card .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease-out);
}

.service-card:hover .card-media img { transform: scale(1.05); }

.service-card {
    display: flex;
    flex-direction: column;
}

.service-card .card-content {
    padding: 1.6rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* The three cards carry different amounts of copy; the link still lines up. */
.service-card .card-link { margin-top: auto; }

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-primary);
}

.card-link svg { transition: transform 200ms var(--ease-out); }
.service-card:hover .card-link svg { transform: translateX(4px); }

/* The whole card is the target; the title link spans it so the hit area is
   the card, not just the six words of the heading. */
.service-card { position: relative; }

.service-card .card-title a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.service-card .card-title a {
    color: var(--color-primary);
    text-decoration: none;
}

.service-card:hover .card-title a { color: var(--color-primary-dark); }

/* ================================
   8. FEATURE LIST ("What makes us special")
   ================================ */

.feature-panel {
    background: var(--color-white);
    border: 1px solid var(--hairline-paper);
    border-radius: 14px;
    padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
    box-shadow: 0 2px 4px rgba(26, 11, 16, 0.04);
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    font-size: var(--step-sm);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.feature-list li + li {
    border-top: 1px solid var(--hairline-paper);
    padding-top: 1.1rem;
}

.feature-list strong {
    display: block;
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.15rem;
}

.feature-list .tick {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--gold-ink);
}

/* ================================
   9. VALUES (replaces the emoji-in-a-circle row)
   ================================ */

.value {
    text-align: center;
    padding: 2.25rem 1.5rem;
    border: 1px solid var(--hairline-paper);
    border-radius: 14px;
    background: var(--color-white);
    transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.value:hover {
    border-color: rgba(196, 30, 58, 0.35);
    transform: translateY(-3px);
}

.value-icon {
    display: block;
    color: var(--color-primary);
    margin: 0 auto 1.25rem;
}

.value h3 {
    font-size: var(--step-h3);
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.value h3 + p { margin-bottom: 0; }

.value p {
    font-size: var(--step-sm);
    color: var(--color-text-secondary);
    margin: 0 auto;
    max-width: 34ch;
}

/* ================================
   10. PORTRAIT / MEDIA FRAMES
   ================================ */

.portrait-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
}

.portrait-frame img { width: 100%; height: auto; display: block; }

/* Offset gold hairline instead of a drop shadow */
.portrait-offset { position: relative; }

.portrait-offset::before {
    content: '';
    position: absolute;
    inset: 14px -14px -14px 14px;
    border: 2px solid var(--gold-deco);
    border-radius: 14px;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
}

.portrait-offset > * { position: relative; z-index: 1; }

.signature {
    max-width: 190px;
    height: auto;
    margin-top: 1.75rem;
}

/* ===== Team ===== */
.team-member { text-align: center; }

.team-photo {
    width: clamp(130px, 14vw, 172px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.1rem;
    box-shadow: 0 0 0 2px var(--gold-leaf), 0 0 0 7px rgba(196, 30, 58, 0.12);
    transition: box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out);
}

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

.team-member:hover .team-photo {
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px var(--gold-ink), 0 0 0 9px rgba(196, 30, 58, 0.2);
}

.team-member h3 {
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
}

.team-role {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-ink);
    font-weight: 600;
    margin: 0;
}

/* ===== Video carousel ===== */
.video-carousel {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    background: var(--ink);
    box-shadow: 0 24px 60px rgba(26, 11, 16, 0.28);
    touch-action: pan-y;
}

.video-carousel video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.unmute-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 20;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(251, 247, 242, 0.3);
    border-radius: 50%;
    background: rgba(26, 11, 16, 0.6);
    backdrop-filter: blur(6px);
    color: var(--on-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.unmute-btn:hover {
    background: rgba(26, 11, 16, 0.85);
    border-color: var(--gold-leaf);
}

.carousel-dots {
    position: absolute;
    bottom: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

/* 10px dots are below the 44px minimum, so the button is padded out and the
   visible dot sits inside it. */
.carousel-indicator {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.carousel-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--on-ink);
    opacity: 0.45;
    transition: opacity 200ms var(--ease-out), width 200ms var(--ease-out);
}

.carousel-indicator.active::before {
    width: 22px;
    border-radius: 4px;
    opacity: 1;
    background: var(--gold-leaf);
}

/* ================================
   11. SPLIT LAYOUT
   ================================ */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 1rem + 5vw, 5rem);
    align-items: center;
}

.split--narrow-left { grid-template-columns: 5fr 7fr; }
.split--narrow-right { grid-template-columns: 7fr 5fr; }

.prose p { color: var(--color-text-secondary); }
.prose p:last-of-type { margin-bottom: 0; }

/* ================================
   12. CLOSING CTA
   ================================ */

.closing {
    position: relative;
    background: var(--gradient-primary);
    color: var(--color-white);
    text-align: center;
    padding: clamp(4rem, 2.5rem + 8vw, 8rem) 0;
    overflow: hidden;
}

/* Gold edge, echoing the beat rule's weight without repeating the motif */
.closing::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(to right,
        transparent, var(--gold-leaf) 20%, var(--gold-leaf) 80%, transparent);
}

.closing h2 {
    font-size: var(--step-h2);
    color: var(--color-white);
    margin-bottom: 1.25rem;
}

/* 5.6:1 on the crimson, 9.4:1 by the dark end of the gradient. */
.closing p {
    font-size: var(--step-lead);
    color: var(--color-off-white);
    max-width: 52ch;
    margin: 0 auto 2.5rem;
}

.closing .eyebrow { color: #FFE9A8; }

.closing .hero-actions { justify-content: center; margin-bottom: 0; }

/* ================================
   13. NOTE / CALLOUT
   ================================ */

.note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding: 1.1rem 1.5rem;
    background: var(--color-white);
    border: 1px solid rgba(196, 30, 58, 0.22);
    border-radius: 999px;
    font-size: var(--step-sm);
    color: var(--color-text-primary);
    text-align: left;
}

.note svg { color: var(--color-primary); flex: 0 0 auto; }
.note p { margin: 0; max-width: none; }

/* ================================
   14. BACK TO TOP
   ================================ */

.back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--gold-leaf);
    background: var(--gradient-primary);
    color: var(--color-secondary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out),
                visibility 220ms;
    z-index: var(--z-dropdown);
}

.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-primary-dark); }

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

/* The auto-fit floor of 250px plus a 4rem gap needs 1192px of the 1136px
   available, so the fourth column dropped to its own row. */
.footer-grid {
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}

@media (min-width: 900px) {
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
}

.site-footer {
    background: var(--color-primary-dark);
    margin-top: 0;
    border-top: none;
}

.site-footer h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    color: var(--color-secondary);   /* 6.7:1 on the crimson-dark ground */
    letter-spacing: 0;
}

.site-footer p, .site-footer .footer-link, .site-footer a {
    font-size: var(--step-sm);
}

.site-footer p { color: var(--color-off-white); }
.footer-link { color: var(--color-off-white); }
.footer-link:hover { color: var(--color-secondary); }

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: var(--color-off-white);
    transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out),
                background 200ms var(--ease-out);
}

.social-link:hover {
    color: var(--color-primary-dark);
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* ================================
   16. RESPONSIVE
   ================================ */

@media (max-width: 1024px) {
    .split,
    .split--narrow-left,
    .split--narrow-right {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .portrait-offset::before { inset: 10px -10px -10px 10px; }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 400px;
        align-items: center;
        padding: 2rem 0;
    }

    .hero-scrim {
        background:
            linear-gradient(to top,
                rgba(26, 11, 16, 0.94) 0%,
                rgba(26, 11, 16, 0.78) 38%,
                rgba(26, 11, 16, 0.42) 70%,
                rgba(26, 11, 16, 0.25) 100%);
    }

    .hero-title { max-width: 100%; }
    .hero-lead { max-width: 100%; }

    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }

    .hero-facts { gap: 0.5rem 1.1rem; font-size: 0.82rem; }
    .hero-facts li { white-space: normal; }

    .video-carousel { max-width: 300px; }

    .note { flex-direction: column; text-align: center; border-radius: 14px; }
}

@media (max-width: 480px) {
    .portrait-offset::before { display: none; }

    /* 12px of gutter is tight for a thumb; 20px is the floor here. */
    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ===== Touch targets =====
   Text links in the slide-in menu and the footer default to their line box,
   which lands around 24px. On touch they get the full 44px. */
@media (max-width: 1024px) {
    .nav-dropdown-item,
    .footer-link,
    .footer-bottom-link,
    .footer-contact a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-links { gap: 0; }
    .footer-contact .contact-item { min-height: 44px; align-items: center; }
}

/* ================================
   17. REDUCED MOTION
   ================================ */

@media (prefers-reduced-motion: reduce) {
    .beat-rule--hero .beat {
        animation: none;
        opacity: 0.34;
        transform: none;
    }

    .beat-rule--hero .beat.is-sam,
    .beat-rule--hero .beat.is-khali { opacity: 1; }

    .card:hover,
    .value:hover,
    .team-member:hover .team-photo,
    .btn:hover { transform: none; }

    .service-card:hover .card-media img { transform: none; }
}

/* ================================
   14. HOMEPAGE H1 / ENTITY COPY  (Sept 2026 SEO pass)
   ================================ */

/* The H1 now carries the descriptive "Punjabi Singers & Entertainment for
   Weddings and Events". The old H1 line survives underneath as a supporting
   headline. The hero has to stay inside min-height: 600px or object-fit
   re-crops the video (see CLAUDE.md), so the H1 is allowed to run wider than
   the old 22ch and the supporting line is deliberately small. */
.hero-title {
    max-width: 30ch;
    margin-bottom: 0.45rem;
}

.hero-support {
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 0.92rem + 0.42vw, 1.3rem);
    font-weight: 400;
    font-style: italic;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    line-height: 1.25;
    color: var(--gold-leaf);
    margin: 0 0 0.7rem;
    max-width: 34ch;
}

.hero-lead { margin-bottom: 1.25rem; }

/* Entity paragraph: the third-person definition of Reena Kaur that opens the
   "Meet Reena Kaur" band. Set a step up from body copy so it reads as a
   standfirst rather than as the first of the first-person paragraphs. */
.standfirst {
    font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem);
    line-height: 1.65;
    color: var(--color-text-primary);
}

.prose--centred {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.prose--centred .beat-rule {
    justify-content: center;
    margin: 1.1rem 0 1.4rem;
}

.prose--centred .band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* Ghost button for the light bands. .btn-ghost is built for the ink ground
   and its translucent white hairline disappears on blush/white/amber. */
.btn-ghost-ink {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--gold-deco);
}

.btn-ghost-ink:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* ================================
   15. INNER PAGES  (18 Sep 2026)

   The homepage opens on video over ink. Inner pages cannot, and faking it
   with a stock photo would be worse than not trying. They open instead on
   the same ink ground, carrying the beat rule so the signature is what ties
   the site together rather than the footage. The crimson gradient these
   headers used before competed with the crimson closing CTA at the foot of
   the very same page; ink → warm bands → crimson close now gives every inner
   page the same arc as the homepage.
   ================================ */

/* 22 Sep: Jayden asked for the inner-page header to be a lighter red that matches
   the rest of the site, so it now takes the same crimson gradient as buttons and
   the closing CTA rather than ink. Text colours below are chosen for crimson:
   white 5.8:1, lead #FDF1E6 5.3:1, eyebrow #FFE9A8 4.9:1 (at the light end). */
.page-head {
    background: var(--gradient-primary);
    color: var(--color-white);
    text-align: center;
    /* Equal above and below. body already reserves the 88px fixed header, so the
       old extra top padding (120px vs 64px below at desktop) pushed the text low. */
    padding: clamp(3rem, 2.2rem + 3vw, 5rem) 0;
    position: relative;
    overflow: hidden;
}

/* Warm floor so the ink hands over to the band below it rather than stopping
   dead on a hard edge. */
.page-head::after {
    display: none; /* was a crimson fade out of ink; redundant on a crimson ground */
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, rgba(196, 30, 58, 0.14));
    pointer-events: none;
}

.page-head > .container {
    position: relative;
    z-index: 1;
}

.page-head .eyebrow {
    color: #FFE9A8;
    /* The global p rule caps it at 68ch; without auto margins that box sat at
       the left of the container, so on wide screens the eyebrow was off-centre. */
    margin-left: auto;
    margin-right: auto;
}

/* A step below --step-h1. The homepage hero is the thesis and gets the full
   display size; an inner page header is a signpost and must not out-shout it.
   At 1440px this is ~50px against the hero's 88px, which keeps every inner
   header shorter than the 600px hero. */
.page-head h1 {
    font-size: clamp(1.95rem, 1.4rem + 2.1vw, 3.1rem);
    font-weight: 700;
    font-variation-settings: 'SOFT' 24, 'WONK' 1;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--color-white);
    max-width: 24ch;
    margin: 0 auto 0.9rem;
}

.page-head .lead {
    font-size: var(--step-lead);
    line-height: 1.55;
    color: #FDF1E6;
    max-width: 58ch;
    margin: 0 auto;
}

/* Quote button in the header of the service pages and the wedding hub (22 Oct,
   Jayden). Up to 1024px the nav's "Get a quote" is inside the hamburger panel, so
   a phone showed no quote button until the end of the article. Desktop keeps the
   nav button on screen at all times, so this one is hidden there. */
.page-head-cta {
    margin-top: 1.5rem;
}

@media (min-width: 1025px) {
    .page-head-cta {
        display: none;
    }
}

/* The signature, centred under the eyebrow on every inner page. */
.page-head .beat-rule {
    justify-content: center;
    margin: 0 auto 1.4rem;
}

/* ===== Section headings inside prose ===== */

/* These carried `font-size: 2rem; color: var(--color-primary)` inline on 107
   headings, which overrode the fluid scale. The class keeps the crimson and
   the rhythm while letting --step-h2 do the sizing. */
.h-section {
    font-size: var(--step-h2);
    color: var(--color-primary);
    margin: clamp(2.25rem, 1.5rem + 2vw, 3rem) 0 1.1rem;
}

.h-section:first-child {
    margin-top: 0;
}

/* Sub-heading inside a card or panel, not a section break. */
.h-panel {
    font-size: var(--step-h3);
    color: var(--color-primary);
    margin: 0 0 0.85rem;
}

/* ===== Standfirst callout ===== */
/* The bordered intro paragraph at the top of every service and blog page. */
.standfirst-note {
    font-size: var(--step-lead);
    line-height: 1.7;
    padding: 1.4rem 1.6rem;
    background: var(--wash-cream);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 10px 10px 0;
    margin: 0 0 2.25rem;
    max-width: none;
}

/* ===== Breadcrumbs ===== */
.breadcrumbs {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    padding-top: 1.25rem;
}

.breadcrumbs a { color: var(--color-text-secondary); }
.breadcrumbs a:hover { color: var(--color-primary); }

/* ===== Tick lists ===== */
/* The check glyph was --color-secondary (#FFD700), 1.4:1 on white. */
.band .tick,
.article-main .tick,
.tick {
    color: var(--gold-deco);
}

/* ===== Back to top ===== */
.back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px minimum touch target */
    width: 48px;
    height: 48px;
}

.back-to-top svg {
    width: 20px;
    height: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .page-head .beat-rule .beat {
        transform: none;
        opacity: 1;
    }
}

/* ===== Touch targets on coarse pointers =====
   Footer link lists, breadcrumbs and dropdown items were 15-18px tall rows.
   That is fine for a mouse and poor for a thumb. Padding is added only where
   the pointer is coarse, so the desktop rhythm is untouched. Inline links
   inside running prose are deliberately excluded - WCAG exempts them, and
   padding them would wreck the line spacing. */
@media (pointer: coarse) {
    .footer-links a,
    .footer-bottom-links a,
    .rail-links a {
        display: inline-block;
        padding: 0.6rem 0;
        min-height: 44px;
        line-height: 1.6;
    }

    .breadcrumbs a,
    .breadcrumbs span {
        display: inline-block;
        padding: 0.55rem 0;
    }

    .nav-dropdown-item {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .social-link {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ===== Reduced motion =====
   redesign.css animates the beat rule and main.js drives scroll reveals. With
   reduced motion requested, everything lands in its final state immediately
   rather than never appearing. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .scroll-animate,
    .scroll-slide-left,
    .scroll-slide-right {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ================================
   16. MOBILE NAV  (18 Sep 2026)

   The slide-in panel inherited the desktop dropdown wholesale: a floating
   menu's `white-space: nowrap` clipped "Punjabi Wedding Entertainment" off the
   panel edge, and the pillar/child hairline tree read as fussy at phone size
   where there is no hover to explain it. The panel now shows one level of
   indent and no connector rules. "All services" was hidden here while tapping
   Services went to services.html; since 22 Oct that tap opens the list
   instead, so the row is back and is the panel's only route to the page.
   ================================ */

@media (max-width: 1024px) {
    /* Needed for a floating desktop panel; wrong for a full-width mobile one. */
    .nav-dropdown-item {
        white-space: normal;
    }

    .nav-dropdown {
        /* One quiet rule for the whole group rather than a rule per child */
        border-left: 1px solid var(--hairline-paper, rgba(26, 11, 16, 0.12));
        padding-left: 1rem;
        margin-left: 0.15rem;
    }

    /* The pillar is the only thing that needs weight at this size. */
    .nav-dropdown-pillar {
        font-weight: 600;
        color: var(--color-primary);
    }

    /* Drop the per-child connector hairline and the second indent step. */
    .nav-dropdown-child {
        padding-left: 0.9rem;
        font-weight: 400;
    }

    .nav-dropdown-child::before {
        display: none;
    }

    /* Give the panel a sane measure so long labels wrap rather than clip. */
    .nav-menu {
        max-width: min(88vw, 340px);
    }

    .nav-item,
    .nav-dropdown li {
        width: 100%;
    }

    /* Collapsible Services list (30 Sep). The chevron is added by navigation.js,
       so the list only collapses when the button exists. Open, the full list
       pushed every other top-level link below the fold on a phone. */
    .nav-item.has-sub-toggle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .nav-item.has-sub-toggle > .nav-link {
        flex: 1 1 auto;
        width: auto;
    }

    .nav-item.has-sub-toggle > .nav-dropdown {
        flex: 0 0 100%;
        display: none;
    }

    .nav-item.has-sub-toggle.is-open > .nav-dropdown {
        display: block;
    }

    .nav-sub-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -0.6rem;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: none;
        color: var(--color-text-primary);
        cursor: pointer;
    }

    .nav-sub-toggle svg {
        transition: transform 0.2s ease;
    }

    .nav-item.is-open > .nav-sub-toggle svg {
        transform: rotate(180deg);
    }
}

/* The hover dropdown handles desktop. */
@media (min-width: 1025px) {
    .nav-sub-toggle {
        display: none;
    }
}

/* ================================
   18. REENA KAUR PAGE  (23 Sep 2026)

   reena-kaur.html is the entity page for Reena. It reuses the article layout;
   these are the only pieces the service pages do not already have: a fact
   panel, a pull quote and a portrait video set beside the prose.
   ================================ */

/* Safari's text-wrap: pretty (set on every p, section 1) evens out the whole
   paragraph rather than just the last lines, so on an iPhone this page's long
   story paragraphs stopped well short of the right edge (6 Oct). Plain wrapping
   here; the rest of the site keeps pretty. */
.profile p { text-wrap: wrap; }

/* Inline prose links: the service pages style these inline, this page by class. */
.profile p a:not(.btn) {
    color: var(--color-primary);
    font-weight: 600;
}

/* Reena's name as the page H1 (30 Sep): her name large, in Cormorant Garamond
   capitals, with "Punjabi Folk Singer" set under it in Fraunces italic. The
   subtitle stays inside the h1 so the heading still says what she does.
   Cormorant is loaded on reena-kaur.html only. Capped below the homepage hero. */
.page-head h1.profile-name {
    font-family: 'Cormorant Garamond', var(--font-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
    font-variation-settings: normal;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.02;
    /* letter-spacing trails the last letter; pull it back so the name centres */
    text-indent: 0.14em;
    max-width: none;
}

.page-head .profile-name-title {
    display: block;
    margin-top: 0.7rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem);
    text-transform: none;
    letter-spacing: 0.01em;
    text-indent: 0;
    color: #FFE9A8;
}

/* At a glance. A <dl> so each label stays tied to its value for screen
   readers and for anything extracting facts from the page.
   30 Sep: was a two-column grid; Reena wanted it to feel more elegant. Now one
   column, read like a concert programme: a gold label set against each fact,
   on cream inside a fine inner gold frame. */
.fact-list {
    position: relative;
    margin: 0 0 2.25rem;
    padding: 1.1rem 2rem;
    background: var(--wash-cream);
    border-radius: 6px;
}

/* The inner frame. Decoration only, so --gold-deco rather than --gold-ink. */
.fact-list::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(168, 120, 10, 0.35);
    border-radius: 3px;
    pointer-events: none;
}

.fact-list > div {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: baseline;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--hairline-paper);
}

.fact-list > div:last-child { border-bottom: 0; }

.fact-list dt {
    font-family: var(--font-ui);
    font-size: var(--step-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold-ink);
    margin: 0;
}

.fact-list dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

@media (max-width: 560px) {
    .fact-list { padding: 0.9rem 1.35rem; }
    .fact-list > div { grid-template-columns: minmax(0, 1fr); row-gap: 0.25rem; }
}

/* Marks the switch from the third-person entity copy to Reena's own voice. */
.story-intro {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-lead);
    color: var(--gold-ink);
    margin: 0 0 0.5rem;
}

.pull-quote {
    margin: 2.25rem 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 3px solid var(--gold-deco);
}

.pull-quote p {
    font-family: var(--font-display);
    font-size: var(--step-h3);
    line-height: 1.4;
    color: var(--color-primary);
    margin: 0;
}

/* A small figure set beside the prose: the childhood school photo (578px square)
   under "Music was woven into my childhood". It replaced a floated 9:16 video in the
   same slot on 3 Oct. Floats right from 640px; capped and centred below that. */
.article-figure--aside {
    margin: 0 auto 2rem;
    max-width: 20rem;
}

@media (min-width: 640px) {
    .article-figure--aside {
        float: right;
        width: 17rem;
        margin: 0.35rem 0 1.5rem 2rem;
    }

    /* The next section heading must start below the float, not beside it. */
    .profile .h-section { clear: both; }
}

.profile-links {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
}

.profile-links li + li { margin-top: 0.6rem; }

.profile-links a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.profile-links a:hover { text-decoration: underline; }

/* The opening pair mixes a 4:5 portrait with a 2:3 Sangeet shot. Left to their
   own ratios the shorter one ends early and leaves a white gap under it. */
.profile .article-figure-pair img {
    aspect-ratio: 4 / 5;
    max-height: none;
    object-position: center 20%;
}

/* Soft photo behind the page head (3 Oct, from Reena's 30 Sep feedback). A greyscale
   crop set on the right and faded out towards the name. multiply can only darken the
   crimson, so the white, cream and #FFE9A8 text keep at least their plain-crimson
   contrast wherever the photo sits under them. Decorative: alt="" and aria-hidden. */
.page-head--photo {
    isolation: isolate;
}

.page-head-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: min(34%, 500px);
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    mix-blend-mode: multiply;
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
    mask-image: linear-gradient(to right, transparent, #000 45%);
    pointer-events: none;
}

/* Below 1024px the centred text runs into the photo whatever its width, so it is
   widened and turned down; multiply still only darkens what sits behind the text. */
@media (max-width: 1023px) {
    .page-head-photo {
        width: 60%;
        opacity: 0.4;
    }
}

/* ================================
   19. ENQUIRY CONFIRMATION MODAL  (3 Oct 2026)

   contact.html shows this <dialog> with showModal() once an enquiry has been sent,
   replacing the small inline message above the form. The browser centres it in the
   top layer and dims the page with ::backdrop. Padding sits on the inner card so a
   click on the backdrop is the only click that targets the dialog itself.
   ================================ */
/* margin: auto and inset: 0 are what centre a modal dialog. They are the browser
   defaults, but the global `* { margin: 0 }` reset strips the margin and pins it top-left. */
.enquiry-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(28rem, calc(100vw - 2rem));
    height: fit-content;
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--color-white);
    box-shadow: 0 30px 60px -20px rgba(26, 11, 16, 0.45);
    color: var(--color-text-primary);
    overscroll-behavior: contain;
}

.enquiry-modal::backdrop {
    background: rgba(26, 11, 16, 0.62);
    backdrop-filter: blur(3px);
}

.enquiry-modal-inner {
    position: relative;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    background: var(--wash-cream);
}

/* The same fine inner gold frame as the fact panel on reena-kaur.html. */
.enquiry-modal-inner::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(168, 120, 10, 0.35);
    border-radius: 12px;
    pointer-events: none;
}

.enquiry-modal-icon {
    display: block;
    margin: 0 auto 1rem;
    color: var(--gold-deco);
}

.enquiry-modal .eyebrow {
    margin: 0 auto 0.5rem;
}

.enquiry-modal-title {
    font-family: var(--font-display);
    font-size: var(--step-h2);
    line-height: 1.15;
    color: var(--color-primary);
    margin: 0 0 0.75rem;
}

.enquiry-modal-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 auto 1.75rem;
    max-width: 30ch;
}

.enquiry-modal form {
    margin: 0;
}

.enquiry-modal[open] {
    animation: enquiry-modal-in 0.28s ease-out;
}

.enquiry-modal[open]::backdrop {
    animation: enquiry-backdrop-in 0.28s ease-out;
}

@keyframes enquiry-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes enquiry-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .enquiry-modal[open],
    .enquiry-modal[open]::backdrop {
        animation: none;
    }
}