/* =========================================================================
   ZHAR MAISON — launching page (pre-launch / Phase 1)
   -------------------------------------------------------------------------
   A single-screen coming-soon experience.

   Design language: calm · crafted · considered.
   Palette: warm ivory, deep olive, blossom, terracotta, sage, brass.
   Typography: Cormorant Garamond (display) · Manrope (UI) · Noto Naskh Arabic.

   NO images as background — only hand-drawn geometry.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
    /* --- Palette (ZHAR MAISON — from the brand brief) --- */
    --bg:            #F5F0E7;   /* primary background — Warm Ivory */
    --soft-cream:    #EEE5D8;   /* soft secondary background */
    --text-primary:  #24231F;   /* main body text */
    --olive:         #34382B;   /* Deep Forest Green — primary dark, headlines */
    --olive-soft:    #4F5B4A;   /* hover / supporting text on ivory */
    --warm-brown:    #59483D;   /* Warm Brown — secondary text */
    --walnut-soft:   #7A5A4D;   /* tertiary / captions */
    --terracotta:    #9A5944;   /* terracotta — secondary editorial accent */
    --accent:        #B65E3C;   /* ZHAR accent — italic flourish + zellige pattern line */
    --sage:          #8B9474;   /* Sage Olive — secondary, dividers */
    --sage-soft:     #C4CDB6;   /* very light sage */
    --brass:         #B68B52;   /* Aged Brass — metallic accent */
    --brass-soft:    #D9C39A;   /* very light brass */
    --zhar-gold:     #cd9b22;   /* The exact ZHAR gold baked into the supplied SVG */
    --blossom:       #D97A48;   /* Zhar Blossom — CTA accent (kept from prior system) */
    --blossom-dark:  #B45E2F;   /* hover state for blossom */
    --blossom-soft:  #F0D5C0;   /* backgrounds for blossom elements */

    --danger:        #B5492E;   /* form error */
    --success:       #5C7A52;   /* form success */

    /* Backward-compatible aliases — the page CSS still references
       the older token names; they now resolve to the new palette. */
    --ivory:        var(--bg);
    --ivory-deep:   var(--soft-cream);
    --walnut:       var(--warm-brown);
    --terracotta:   #9A5944;
    --gold:         var(--zhar-gold);

    /* --- Typography --- */
    --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
    --font-ui:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-ar:      'Noto Naskh Arabic', 'Geeza Pro', 'Amiri', serif;

    /* Type scale (fluid) */
    --fs-eyebrow:   0.72rem;
    --fs-body:      1rem;
    --fs-lead:      1.0625rem;
    --fs-h3:        clamp(1.25rem, 2.4vw, 1.625rem);
    --fs-h2:        clamp(1.75rem, 3.4vw, 2.5rem);
    --fs-h1:        clamp(2.75rem, 7vw, 5.25rem);

    /* --- Layout --- */
    --max-w:        68rem;        /* 1088 px — comfortable editorial column */
    --gutter:       clamp(1.25rem, 4vw, 2.5rem);
    --section-gap:  clamp(4rem, 9vh, 7rem);

    /* Radii — restrained, near-square fashion */
    --radius-sm:    2px;
    --radius-md:    4px;

    /* Motion */
    --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast:     180ms;
    --dur-base:     320ms;
    --dur-slow:     720ms;

    color-scheme: light;
}


/* -------------------------------------------------------------------------
   2. Reset + base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body, h1, h2, h3, h4, p, ol, ul, figure, blockquote, fieldset {
    margin: 0;
    padding: 0;
}

ol, ul { list-style: none; }

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

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

button {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

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

:focus-visible {
    outline: 2px solid var(--blossom);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

::selection {
    background: var(--blossom-soft);
    color: var(--olive);
}


/* -------------------------------------------------------------------------
   3. Page base
   ------------------------------------------------------------------------- */
html, body {
    background: var(--bg);
    color: var(--text-primary);
}

body {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-weight: 400;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    /* Warm field gradient — no images */
    background:
        linear-gradient(180deg,
            var(--bg) 0%,
            var(--bg) 35%,
            var(--soft-cream) 100%);
    background-attachment: fixed;
}

/* Ambient warm wash — radial, very subtle */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(1100px 700px at 50% -10%, rgba(217, 122, 72, 0.06), transparent 70%),
        radial-gradient(900px 700px at 100% 100%, rgba(139, 148, 116, 0.09), transparent 70%),
        radial-gradient(800px 500px at 0% 100%, rgba(182, 139, 82, 0.05), transparent 70%);
}

/* Skip link */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.visually-hidden:focus {
    position: fixed !important;
    top: 1rem;
    left: 1rem;
    width: auto; height: auto;
    clip: auto;
    padding: 0.6rem 0.9rem;
    background: var(--olive);
    color: var(--ivory);
    border-radius: var(--radius-sm);
    z-index: 1000;
}


/* -------------------------------------------------------------------------
   4. Background geometry — refined zellige pattern (fixed, decorative)
   -------------------------------------------------------------------------
   A quiet, large-scale Moroccan field made of:
     · a central 8-point star (khatim)
     · an octagon frame that opens 'petal' spaces around the star
     · a small inner diamond and centre dot
     · 4 small accent diamonds in the inner-corner positions
     · 4 subtle radial axes

   Rendered as an inline SVG <pattern> inside a fixed div. The pattern
   sits ON TOP of the body's warm gradient but BEHIND all content. The
   perceived opacity is ~4–8% across the page, with extra ivory fades
   behind the hero, countdown, and notify copy via .bg__vignette.
   ------------------------------------------------------------------------- */
body {
    /* Establish a stacking context so .bg (z-index: 0) sits on top of the
       body background, not behind it. */
    position: relative;
    z-index: 0;
    isolation: isolate;
}

.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* ZHAR terracotta at low alpha for the zellige line work */
    color: rgba(182, 94, 60, 0.55);
}

.bg__pattern {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    /* Perceived opacity target: ~3–5% on desktop, ~2.5–4% on mobile.
       Element-level stroke-opacity inside the SVG layers further
       depth (0.70 for the 4 main tessellating lines, 0.55 for the
       secondary diagonals, 0.70 for the centre diamond, 0.60 for
       the 4 mid-edge diamonds, 0.45 for the 4 quarter-position
       diamonds). The container opacity below multiplies with those
       to land in the 3–5% range. */
    opacity: 0.07;
    /* Gentle fade at the very bottom edge of the page. */
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 78%, rgba(0,0,0,0.70) 100%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 78%, rgba(0,0,0,0.70) 100%);
}

@media (max-width: 768px) {
    .bg__pattern { opacity: 0.06; }
}

/* Soft warm vignette — a single very soft ivory halo centred on the
   hero. The brief explicitly forbids an obvious spotlight or white
   rectangle behind the content, so the alpha is gentle and the
   falloff is wide. The zellige remains slightly more visible toward
   the outer edges of the viewport and quieter behind the woman,
   launch line, headline, copy and CTA. */
.bg__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 55% at 50% 42%, rgba(245, 240, 231, 0.78), transparent 78%);
    pointer-events: none;
}


/* -------------------------------------------------------------------------
   5. Header — language toggle only.
   The hero woman symbol carries the brand identity, so the header
   shows only the EN | العربية control, right-aligned, with generous
   negative space (the brief's 48–72 px from the top).
   ------------------------------------------------------------------------- */
.topbar {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: clamp(1.5rem, 2.8vw, 2.25rem) var(--gutter) 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

/* The brand slot was removed in this revision. The .topbar__brand and
   .topbar__logo rules are kept only as a hidden no-op so any stray
   reference in a future asset can never re-introduce a duplicate
   logo. They are also helpful for the inline footer lockup. */
.topbar__brand,
.topbar__logo {
    display: none !important;
}

/* Language toggle */
.lang {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--walnut);
}
.lang__btn {
    padding: 0.3rem 0.1rem;
    color: var(--walnut);
    transition: color var(--dur-fast) var(--ease);
    letter-spacing: 0.22em;
    cursor: pointer;
    position: relative;
}
.lang__btn:hover { color: var(--olive); }
.lang__btn[data-active="true"] {
    color: var(--olive);
    font-weight: 600;
}
.lang__btn[data-active="true"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -0.25rem;
    height: 1px;
    background: var(--blossom);
}
.lang__sep {
    color: var(--brass);
    opacity: 0.7;
    font-weight: 400;
    letter-spacing: 0;
}


/* -------------------------------------------------------------------------
   6. Page container
   ------------------------------------------------------------------------- */
.page {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
}


/* -------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */
.hero {
    /* The hero takes most of the first viewport so the composition
       feels intentional while keeping the language selector and the
       hero body visually connected. Content is centred vertically
       using flex. */
    min-height: 78svh;
    padding: clamp(1.75rem, 4vh, 3rem) 0 clamp(2rem, 5vh, 3.5rem);
    text-align: center;
    max-width: 56rem;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Eyebrow with refined side rules — thin, short, subtle */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: clamp(2.75rem, 4.5vh, 4rem);
}
.hero__eyebrow::before,
.hero__eyebrow::after {
    content: "";
    width: clamp(1.5rem, 3vw, 2.25rem);
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

/* The signature ZHAR MAISON caftan woman, displayed as a small
   emblem above the launch announcement. We use a plain <img> of
   the supplied 8.svg (which already carries its own gold colour)
   — no background fill, no mask — so the emblem floats on the
   cream canvas without any opaque rectangle behind it.

   Size per the brief:
     mobile  : ~80–105 px
     tablet  : ~100–120 px
     desktop : ~110–150 px (start ~130 px) */
.hero__emblem {
    display: block;
    width: clamp(90px, 13vw, 130px);
    height: clamp(90px, 13vw, 130px);
    margin: 0 auto clamp(2rem, 3.5vh, 2.75rem);
    object-fit: contain;
}

/* Headline — editorial, italic flourish on second line.
   The two lines should feel connected (small line-height). */
.hero__headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h1);
    line-height: 1.02;
    letter-spacing: -0.005em;
    color: var(--olive);
    margin-bottom: clamp(2rem, 3vh, 3rem);
    /* Slight optical tightening on big text */
    text-wrap: balance;
}
.hero__headline em {
    font-style: italic;
    color: var(--accent);
    font-weight: 500;
}

/* Subhead — narrow measure, soft colour.
   Generous space between the headline and this copy. */
.hero__subhead {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.7;
    color: var(--warm-brown);
    max-width: 32rem;
    margin: 0 auto clamp(1.75rem, 2.5vh, 2.5rem);
    text-wrap: pretty;
}

/* Arabic tagline — quiet, deliberate */
.hero__ar {
    font-family: var(--font-ar);
    font-size: clamp(1.65rem, 4.2vw, 2.5rem);
    color: var(--terracotta);
    letter-spacing: 0.01em;
    line-height: 1.25;
    margin-top: 0.25rem;
    /* Add a subtle ornament above */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.hero__ar::before {
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1 L23 12 L12 23 L1 12 Z' fill='none' stroke='%23B68B52' stroke-width='1.2'/><circle cx='12' cy='12' r='2' fill='%23B68B52'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.85;
}


/* -------------------------------------------------------------------------
   8. (Section dividers removed — the page now flows continuously.
       Whitespace + the section paddings + the zellige field carry the
       rhythm; the previous 'line · diamond · line' plate-marker is
       gone to honour the calmer, more continuous editorial system.)    */

/* -------------------------------------------------------------------------
   9. COUNTDOWN
   ------------------------------------------------------------------------- */
.countdown {
    padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(2.5rem, 6vh, 4.5rem);
    text-align: center;
    max-width: 38rem;
    margin: 0 auto;
}

.countdown__title {
    font-family: var(--font-ui);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: var(--fs-eyebrow);
    color: var(--walnut);
    margin-bottom: 2rem;
}

/* Pure typographic countdown — no chunky cards */
.countdown__grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(1rem, 3.5vw, 2.25rem);
    padding: 0 0.5rem;
}

.countdown__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    min-width: 4ch;
}

.countdown__num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.75rem, 7.5vw, 4.5rem);
    line-height: 1;
    color: var(--olive);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    /* Slight contrast lift for the seconds */
    transition: color var(--dur-base) var(--ease);
}

.countdown__cell--seconds .countdown__num {
    color: var(--blossom);
}

.countdown__lbl {
    font-family: var(--font-ui);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.65rem;
    color: var(--walnut);
}

.countdown__sep {
    width: 1px;
    height: clamp(2rem, 5vw, 3rem);
    background: var(--brass);
    opacity: 0.5;
    margin-top: 0.6em;
    flex: 0 0 auto;
}

.countdown__expired {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--blossom);
    margin-top: 1rem;
}


/* -------------------------------------------------------------------------
   10. NOTIFY (email capture)
   ------------------------------------------------------------------------- */
.notify {
    padding: clamp(2.5rem, 6vh, 4rem) 0;
    max-width: 34rem;
    margin: 0 auto;
    text-align: center;
}

.notify__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.1;
    color: var(--olive);
    margin-bottom: 0.85rem;
    letter-spacing: -0.005em;
}
.notify__title em {
    font-style: italic;
    color: var(--terracotta);
}

.notify__lede {
    font-family: var(--font-ui);
    color: var(--walnut);
    font-size: clamp(0.95rem, 1.8vw, 1.0625rem);
    line-height: 1.65;
    margin-bottom: 2rem;
    max-width: 30rem;
    margin-inline: auto;
    text-wrap: pretty;
}

.notify__form {
    display: flex;
    gap: 0;
    align-items: stretch;
    max-width: 30rem;
    margin: 0 auto;
    /* Hairline frame around the form */
    border: 1px solid rgba(57, 70, 52, 0.22);
    background: var(--ivory-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition:
        border-color var(--dur-base) var(--ease),
        box-shadow var(--dur-base) var(--ease);
}
.notify__form:focus-within {
    border-color: var(--blossom);
    box-shadow: 0 0 0 4px rgba(217, 122, 72, 0.10);
}

.notify__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.05rem 1.2rem;
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--olive);
    letter-spacing: 0.005em;
}
.notify__input::placeholder {
    color: rgba(91, 64, 53, 0.55);
    font-style: italic;
}

.notify__btn {
    flex: 0 0 auto;
    padding: 0 1.5rem;
    background: var(--olive);
    color: var(--ivory);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        background var(--dur-base) var(--ease),
        color var(--dur-base) var(--ease);
    min-height: 48px;
    position: relative;
}
.notify__btn::after {
    content: "→";
    margin-left: 0.6rem;
    display: inline-block;
    transition: transform var(--dur-base) var(--ease);
}
.notify__btn:hover:not(:disabled) {
    background: var(--blossom);
}
.notify__btn:hover:not(:disabled)::after {
    transform: translateX(3px);
}
.notify__btn:active:not(:disabled) {
    transform: translateY(1px);
}
.notify__btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

.notify__consent {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--walnut-soft);
    opacity: 0.85;
    margin-top: 1rem;
    line-height: 1.55;
    max-width: 30rem;
    margin-inline: auto;
}

/* Honeypot */
.hp {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0; padding: 0; margin: -1px;
}

/* Banner — appears on success / error */
.banner {
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    background: rgba(92, 122, 82, 0.08);
    border: 1px solid rgba(92, 122, 82, 0.32);
    border-radius: var(--radius-md);
    display: none;
    align-items: flex-start;
    gap: 0.85rem;
    text-align: start;
    color: var(--olive);
    max-width: 30rem;
    margin-inline: auto;
}
.banner[data-state="visible"] {
    display: flex;
    animation: banner-in 0.45s var(--ease);
}
.banner[data-state="error"] {
    background: rgba(181, 73, 46, 0.07);
    border-color: rgba(181, 73, 46, 0.32);
}
@keyframes banner-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.banner__icon {
    flex: 0 0 auto;
    width: 1.5rem; height: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--success);
    border-radius: 999px;
    background: rgba(92, 122, 82, 0.14);
}
.banner[data-state="error"] .banner__icon {
    color: var(--danger);
    background: rgba(181, 73, 46, 0.12);
}
.banner__text { flex: 1 1 auto; line-height: 1.45; min-width: 0; }
.banner__title {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--olive);
    margin-bottom: 0.15rem;
}
.banner__body {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    color: var(--walnut);
}
.banner__close {
    background: transparent;
    border: 0;
    color: var(--walnut);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.4rem;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease);
}
.banner__close:hover { color: var(--olive); }


/* -------------------------------------------------------------------------
   11. SOCIAL — Instagram / WhatsApp / Email
   ------------------------------------------------------------------------- */
.social {
    padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(2rem, 5vh, 3rem);
    text-align: center;
}
.social__title {
    font-family: var(--font-ui);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: var(--fs-eyebrow);
    color: var(--walnut);
    margin-bottom: 1.85rem;
}
.social__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    max-width: 32rem;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .social__list {
        flex-direction: row;
        justify-content: center;
        gap: 0;
    }
}

.social__item { flex: 1 1 0; }

.social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
    color: var(--olive);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition:
        color var(--dur-base) var(--ease),
        background var(--dur-base) var(--ease),
        border-color var(--dur-base) var(--ease);
    text-align: start;
}
@media (min-width: 640px) {
    .social__link {
        border-left: 1px solid rgba(57, 70, 52, 0.10);
        border-radius: 0;
    }
    .social__item:first-child .social__link {
        border-left: 0;
    }
}
.social__link:hover {
    color: var(--blossom);
    background: rgba(217, 122, 72, 0.04);
}

.social__icon {
    flex: 0 0 auto;
    width: 2.1rem; height: 2.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--blossom);
    border: 1px solid currentColor;
    border-radius: 999px;
    transition:
        background var(--dur-base) var(--ease),
        color var(--dur-base) var(--ease);
}
.social__link:hover .social__icon {
    background: var(--blossom);
    color: var(--ivory);
}

.social__label {
    display: flex; flex-direction: column; gap: 0.1rem;
    line-height: 1.2;
    min-width: 0;
}
.social__kind {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--walnut);
}
.social__handle {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 0.95rem;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* -------------------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------------------- */
.foot {
    flex-shrink: 0;
    padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) 2.5rem;
    text-align: center;
    /* The previous hairline border-top was a subtle but visible break
       between the social row and the footer. With the page now flowing
       continuously, we let the footer's soft gradient field carry the
       transition instead of a line. */
    background: linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(238, 227, 210, 0.28) 100%);
}
.foot__signature {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    color: var(--warm-brown);
    margin-bottom: 1rem;
    letter-spacing: 0.005em;
}
/* The typographic ZHAR MAISON wordmark, shown in the footer.
   Genuinely transparent background, no background-color, no border,
   no box-shadow — the cream page background must remain visible
   through and around the lettering. */
.foot__wordmark {
    display: block;
    width: clamp(180px, 22vw, 320px);
    height: auto;
    margin: 0 auto 1.5rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    object-fit: contain;
}
/* The old text-only fallback (kept for screen readers in case the
   SVG wordmark ever fails to load — the .foot__wordmark alt
   attribute already covers the visible identity, so these are
   visually hidden but remain in the DOM for a11y). */
.foot__brand,
.foot__brand-ar {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.foot__meta {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--walnut-soft);
    letter-spacing: 0.02em;
    line-height: 1.7;
}
.foot__sep { margin: 0 0.4rem; opacity: 0.5; }
.foot__sep-ar { margin: 0 0.4rem; opacity: 0.4; }


/* -------------------------------------------------------------------------
   13. RTL overrides (when <html dir="rtl">)
   ------------------------------------------------------------------------- */
html[dir="rtl"] body {
    font-family: var(--font-ui);
}

html[dir="rtl"] .hero__headline,
html[dir="rtl"] .notify__title,
html[dir="rtl"] .foot__signature,
html[dir="rtl"] .foot__brand {
    font-family: var(--font-ar);
    letter-spacing: 0;
}

html[dir="rtl"] .hero__headline em {
    color: var(--terracotta);
}

html[dir="rtl"] .hero__subhead,
html[dir="rtl"] .notify__lede,
html[dir="rtl"] .notify__consent,
html[dir="rtl"] .countdown__title,
html[dir="rtl"] .social__title,
html[dir="rtl"] .foot__meta,
html[dir="rtl"] .lang,
html[dir="rtl"] .notify__input,
html[dir="rtl"] .notify__btn {
    font-family: var(--font-ui);
}

html[dir="rtl"] .hero__ar {
    font-family: var(--font-ar);
}

html[dir="rtl"] .countdown__num {
    font-family: var(--font-display);
    font-weight: 500;
}

html[dir="rtl"] .hero__eyebrow::before,
html[dir="rtl"] .hero__eyebrow::after {
    transform: scaleX(-1);
}

/* Notify form keeps the input/button visual order in RTL (LTR localised
   for the form group only, so the button stays on the trailing side). */
html[dir="rtl"] .notify__form { direction: ltr; }
html[dir="rtl"] .notify__form .notify__input { direction: rtl; text-align: right; }
html[dir="rtl"] .notify__form .notify__btn { direction: ltr; }

html[dir="rtl"] .social__link { direction: rtl; }
html[dir="rtl"] .social__label { direction: rtl; text-align: right; }

html[dir="rtl"] .bg__pattern {
    transform: scaleX(-1);
}

html[dir="rtl"] .banner__text { direction: rtl; text-align: right; }


/* -------------------------------------------------------------------------
   14. Mobile fine-tuning
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .topbar { padding-top: 1.1rem; }
    .topbar__logo { width: 140px; }
    .lang { font-size: 0.68rem; gap: 0.5rem; }

    .notify__form {
        flex-direction: column;
        border-radius: var(--radius-md);
    }
    .notify__input {
        padding: 0.95rem 1.1rem;
        border-bottom: 1px solid rgba(57, 70, 52, 0.10);
    }
    .notify__btn {
        width: 100%;
        padding: 1rem 1.2rem;
        min-height: 50px;
    }
    .notify__btn::after {
        margin-left: 0.4rem;
    }

    /* Countdown: 2x2 grid on mobile, hide the in-row separators */
    .countdown__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem 0.5rem;
        max-width: 20rem;
        margin: 0 auto;
        padding: 0;
    }
    .countdown__sep { display: none; }
    .countdown__cell { min-width: 0; }
    .countdown__num  { font-size: clamp(2.25rem, 12vw, 3rem); }
    .countdown__lbl  { font-size: 0.6rem; letter-spacing: 0.2em; }

    .social__link { padding: 0.85rem 1rem; }
}


/* -------------------------------------------------------------------------
   15. Reduced motion
   ------------------------------------------------------------------------- */
@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;
    }
}