/* =============================================================
   ALEXANDRA CHEN - Premium Lifestyle Creator
   Warm editorial system · scroll-driven
   ============================================================= */

/* -------------------------------------------------------------
   1. TOKENS - Created by Nicol
   Blush and cream as the ground, black as the anchor, rose as a
   restrained accent. Every text tone below is measured against
   --cream: rose-text 5.0:1, ink-40 5.5:1, ink-60 7.7:1.
   ------------------------------------------------------------- */
:root {
    /* Blush surfaces */
    --blush:          #F3D9DC;
    --blush-light:    #FAECEE;
    --blush-lighter:  #FDF6F7;
    --blush-deep:     #E9C3C9;

    /* Rose accent - decorative, display, then text-safe */
    --rose-pale:      #F8E4E7;
    --rose-soft:      #E3A9B3;
    --rose:           #C9808C;
    --rose-deep:      #B96B79;   /* display sizes only - 3.65:1 on cream */
    --rose-text:      #A15464;   /* small text / links - 5.0:1 on cream */

    /* Neutrals */
    --cream:          #FBF8F6;
    --off-white:      #F5F0EB;
    --white:          #FFFFFF;
    --line:           rgba(20, 16, 15, 0.12);
    --line-soft:      rgba(20, 16, 15, 0.07);
    --ink:            #14100F;
    --ink-80:         #2A2422;
    --ink-60:         #574E4A;
    --ink-40:         #6E635E;

    /* Type */
    --serif:  'Playfair Display', Georgia, serif;
    --serif-2:'Cormorant Garamond', Georgia, serif;
    --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-micro:   0.75rem;
    --fs-sm:      clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
    --fs-body:    clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
    --fs-lead:    clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
    --fs-h3:      clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    --fs-h2:      clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
    --fs-display: clamp(2.75rem, 1.4rem + 7.4vw, 8.5rem);

    /* Space */
    --gap:        clamp(1.5rem, 1rem + 2vw, 3rem);
    --pad-x:      clamp(1.25rem, 0.5rem + 4vw, 5rem);
    --sec-y:      clamp(3.25rem, 1.75rem + 5vw, 7rem);
    --shell-max:  1360px;

    /* Motion */
    --ease:       cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast:     220ms var(--ease-soft);
    --t-base:     420ms var(--ease);
    --t-slow:     760ms var(--ease);

    /* Elevation */
    --sh-sm: 0 2px 10px rgba(20, 16, 15, 0.05);
    --sh-md: 0 12px 34px -14px rgba(20, 16, 15, 0.22);
    --sh-lg: 0 30px 70px -30px rgba(20, 16, 15, 0.34);

    --r-sm: 8px;
    --r-md: 16px;
    --r-lg: 26px;
    --r-xl: 34px;
    --r-pill: 999px;
}

/* -------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    /* clip, not hidden: hidden on <html> turns it into a scroll container and
       breaks ScrollTrigger's pinning. clip contains the overflow without that. */
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--ink);
    background: var(--cream);
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
picture { display: contents; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--rose-pale); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--rose-text);
    outline-offset: 3px;
    border-radius: 4px;
}
/* The rose ring is tuned for cream; on the dark panels it needs to invert. */
.faceless :focus-visible,
.footer :focus-visible,
.menu :focus-visible {
    outline-color: var(--blush);
}

/* Elements animated by JS start hidden - only when JS is present */
.js [data-reveal],
.js [data-split] { opacity: 0; }
.js [data-split].is-split { opacity: 1; }

/* -------------------------------------------------------------
   3. AMBIENT LAYERS
   ------------------------------------------------------------- */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--cream);
    overflow: hidden;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    /* No filter: blur(). These are radial gradients, already soft - blurring
       them forced a re-raster of a 46vw surface on every parallax frame. */
    will-change: transform;
}
/* Kept faint on purpose: the ambient wash should read as paper warmth,
   not as a second thing moving while you scroll. */
.orb--1 { width: 46vw; height: 46vw; left: -12vw; top: 4vh;  background: radial-gradient(circle, rgba(227,169,179,.22), transparent 70%); }
.orb--2 { width: 40vw; height: 40vw; right: -10vw; top: 34vh; background: radial-gradient(circle, rgba(243,217,220,.30), transparent 70%); }
.orb--3 { width: 34vw; height: 34vw; left: 32vw; bottom: -12vh; background: radial-gradient(circle, rgba(201,128,140,.12), transparent 70%); }

.grain {
    position: fixed;
    inset: -120px;
    z-index: 9000;
    pointer-events: none;
    /* No mix-blend-mode: blending a full-viewport overlay against everything
       beneath it re-composites the page on every scroll frame. At this opacity
       a plain overlay is visually equivalent and costs nothing. */
    opacity: 0.16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------
   4. PRELOADER
   ------------------------------------------------------------- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: var(--cream);
    display: grid;
    place-items: center;
}
.preloader.is-done { pointer-events: none; }

.preloader__inner {
    width: min(560px, 82vw);
    text-align: left;
}

.preloader__mark {
    font-family: var(--serif);
    line-height: 0.95;
    color: var(--ink);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.preloader__name { display: block; font-size: clamp(2.25rem, 7vw, 4rem); font-weight: 500; letter-spacing: -0.03em; }
.preloader__sur  { display: block; font-size: clamp(2.25rem, 7vw, 4rem); font-style: italic; font-weight: 400; color: var(--rose-deep); padding-left: 0.08em; }

.preloader__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    font-size: var(--fs-micro);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-40);
}
.preloader__count { font-variant-numeric: tabular-nums; color: var(--ink-60); }
.preloader__count i { font-style: normal; opacity: 0.5; }

.preloader__rail { height: 2px; background: var(--line-soft); overflow: hidden; }
.preloader__fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--blush-deep), var(--rose));
}

.preloader__curtain {
    position: absolute;
    inset: 0;
    background: var(--cream);
    transform: translateY(100%);
    z-index: -1;
}

/* -------------------------------------------------------------
   5. CURSOR
   ------------------------------------------------------------- */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
    .cursor {
        display: block;
        position: fixed;
        top: 0; left: 0;
        z-index: 8000;
        pointer-events: none;
        mix-blend-mode: normal;
    }
    .cursor__dot {
        position: absolute;
        width: 6px; height: 6px;
        margin: -3px 0 0 -3px;
        border-radius: 50%;
        background: var(--rose-deep);
    }
    .cursor__ring {
        position: absolute;
        width: 40px; height: 40px;
        margin: -20px 0 0 -20px;
        border: 1px solid rgba(198, 130, 96, 0.55);
        border-radius: 50%;
        display: grid;
        place-items: center;
        transition: background-color var(--t-fast), border-color var(--t-fast);
    }
    .cursor__label {
        font-size: 9px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--white);
        opacity: 0;
        transform: scale(0.6);
        transition: opacity var(--t-fast), transform var(--t-fast);
    }
    .cursor.is-view .cursor__ring { background: var(--rose-deep); border-color: var(--rose-deep); }
    .cursor.is-view .cursor__label { opacity: 1; transform: scale(1); }
    .cursor.is-link .cursor__ring { background: rgba(185, 107, 121, 0.14); border-color: var(--rose-deep); }
    body.has-cursor, body.has-cursor * { cursor: none !important; }
}

/* -------------------------------------------------------------
   6. LAYOUT PRIMITIVES
   ------------------------------------------------------------- */
.shell {
    width: 100%;
    max-width: var(--blush-lighter-max);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.section { position: relative; padding-block: var(--sec-y); }

/* Word / char split masks.
   Italic Playfair overhangs its own advance width badly: at the hero size the
   italic f measures 38px wide but paints 59px, and drops 22px below the
   baseline. The mask has to carry that ink or it slices the glyph. Padding
   gives it room; the matching negative margin keeps the layout box identical.
   Horizontal room is free - the reveal only travels vertically. */
.w, .c {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding: 0.06em 0.2em 0.22em;
    margin: -0.06em -0.2em -0.22em;
}
.w-i, .c-i { display: inline-block; will-change: transform; }

/* -------------------------------------------------------------
   7. TYPOGRAPHY BLOCKS
   ------------------------------------------------------------- */
.label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-40);
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.label i {
    font-style: normal;
    font-family: var(--serif);
    font-size: 0.95rem;
    letter-spacing: 0;
    color: var(--rose-deep);
}
.label::after {
    content: '';
    flex: 0 0 auto;
    width: clamp(28px, 6vw, 64px);
    height: 1px;
    background: var(--line);
}
.label--light { color: rgba(251, 248, 246, 0.62); }
.label--light::after { background: rgba(251, 248, 246, 0.25); }
.label--light i { color: var(--rose-soft); }

.h2 {
    font-family: var(--serif);
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--ink);
    max-width: 16ch;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.h2 em { font-style: italic; font-weight: 400; color: var(--rose-deep); }
.h2--light { color: var(--blush-lighter); }
.h2--light em { color: var(--rose-soft); }

.h3 {
    font-family: var(--serif);
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.h3 em { font-style: italic; color: var(--rose-deep); }

.lead {
    font-family: var(--serif-2);
    font-size: var(--fs-lead);
    line-height: 1.45;
    color: var(--ink-60);
    max-width: 34ch;
    margin-bottom: 1.5rem;
}
.lead em { font-style: italic; color: var(--rose-deep); }

.body { color: var(--ink-60); max-width: 46ch; }
.body--light { color: rgba(251, 248, 246, 0.74); }

/* -------------------------------------------------------------
   8. BUTTONS
   ------------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.05rem 1.9rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.btn span, .btn i { position: relative; z-index: 2; }
.btn i { font-size: 0.8em; transition: transform var(--t-base); }
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    transition: transform 560ms var(--ease);
}

/* Transparent border so solid and ghost compute the same box - without it
   a solid button sits 2px shorter than the ghost beside it. */
.btn--solid { color: var(--white); background: var(--ink); border: 1px solid transparent; box-shadow: var(--sh-md); }
.btn--solid::before { background: var(--rose-deep); transform: translateY(101%); }
.btn--solid:hover::before { transform: translateY(0); }
.btn--solid:hover i { transform: translateX(4px); }
.btn--solid:hover { box-shadow: var(--sh-lg); }

.btn--ghost { color: var(--ink); border: 1px solid var(--line); }
.btn--ghost::before { background: var(--blush-light); transform: translateY(101%); }
.btn--ghost:hover::before { transform: translateY(0); }
.btn--ghost:hover { border-color: var(--blush-deep); }

.btn--sm { padding: 0.72rem 1.35rem; font-size: 0.8125rem; }
.btn--block { width: 100%; }

.round {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-60);
    background: var(--white);
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.round:hover { background: var(--ink); border-color: var(--ink); color: var(--white); transform: translateY(-2px); }

/* -------------------------------------------------------------
   9. NAV
   ------------------------------------------------------------- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: transform 520ms var(--ease), background-color var(--t-base), box-shadow var(--t-base);
}
.nav.is-stuck {
    background: rgba(253, 248, 240, 0.82);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 var(--line-soft);
}
.nav.is-hidden { transform: translateY(-102%); }

.nav__progress { height: 2px; background: transparent; }
.nav__progress span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--blush-deep), var(--rose-deep));
}

.nav__inner {
    max-width: var(--blush-lighter-max);
    margin-inline: auto;
    padding: clamp(0.85rem, 2vw, 1.35rem) var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, 2vw, 3rem);
}

.wordmark {
    display: grid;
    align-content: center;
    min-height: 44px;
    font-family: var(--serif);
    line-height: 1;
    display: grid;
    letter-spacing: -0.02em;
}
.wordmark__a { font-size: clamp(1rem, 2.2vw, 1.35rem); font-weight: 500; color: var(--ink); }
.wordmark__b { font-size: clamp(1rem, 2.2vw, 1.35rem); font-style: italic; color: var(--rose-deep); padding-left: 0.1em; margin-top: -0.14em; }

/* Centred between the wordmark and the actions. Never `margin-left: auto`:
   once the links are hidden, an adjacent-sibling override of that leaves the
   actions floating in the middle of the bar. space-between handles both. */
.nav__links { display: flex; gap: clamp(1.25rem, 2.6vw, 2.4rem); margin-inline: auto; }
.nav__link {
    position: relative;
    /* Padded to a 44px hit area; the visual size is unchanged. */
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-60);
    transition: color var(--t-base);
    overflow: hidden;
}
.nav__link span { display: block; transition: transform 420ms var(--ease); }
.nav__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--rose-deep);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 420ms var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--ink); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

.nav__right { display: flex; align-items: center; gap: clamp(0.4rem, 2vw, 0.9rem); flex: 0 0 auto; }

/* While the dark menu panel is open the nav sits on top of it. */
.nav.is-inverted {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.nav.is-inverted .wordmark__a { color: var(--blush-lighter); }
.nav.is-inverted .wordmark__b { color: var(--rose-soft); }
.nav.is-inverted .burger { border-color: rgba(251, 248, 246, 0.28); }
.nav.is-inverted .burger span { background: var(--blush-lighter); }

/* --- language switcher --- */
.lang {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}
.lang__btn {
    /* Visual size stays small; the hit area is padded out to 44px. */
    min-height: 40px;
    padding: 0.7rem 0.8rem;
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--ink-40);
    line-height: 1;
    transition: color var(--t-base), background var(--t-base);
}
.lang__btn:hover { color: var(--ink); }
.lang__btn.is-active { background: var(--ink); color: var(--white); }

.lang--invert { border-color: rgba(251, 248, 246, 0.28); align-self: flex-start; }
.lang--invert .lang__btn { color: rgba(251, 248, 246, 0.62); }
.lang--invert .lang__btn:hover { color: var(--blush-lighter); }
.lang--invert .lang__btn.is-active { background: var(--blush-lighter); color: var(--ink); }

.nav.is-inverted .lang { border-color: rgba(251, 248, 246, 0.28); }
.nav.is-inverted .lang__btn { color: rgba(251, 248, 246, 0.62); }
.nav.is-inverted .lang__btn.is-active { background: var(--blush-lighter); color: var(--ink); }

.burger {
    display: none;
    width: 46px; height: 46px;
    border: 1px solid var(--line);
    border-radius: 50%;
    position: relative;
}
.burger span {
    position: absolute;
    left: 50%; top: 50%;
    width: 17px; height: 1.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 380ms var(--ease), opacity 200ms;
}
.burger span:nth-child(1) { transform: translate(-50%, -4px); }
.burger span:nth-child(2) { transform: translate(-50%, 3px); }
.burger.is-open span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

/* Mobile menu */
.menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
    pointer-events: none;
    /* The overlay carries the ink itself, not just the panel inside it. If the
       panel's wipe never runs - a frozen animation clock, a stalled frame - the
       menu still reads as a menu instead of becoming an invisible sheet that
       swallows every click on the page. */
    background: var(--ink);
}
.menu.is-open { visibility: visible; pointer-events: auto; }
.menu__panel {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #1E1A18, var(--ink));
    clip-path: inset(0 0 100% 0);
    transition: clip-path 700ms var(--ease);
}
.menu__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    color: var(--blush-lighter);
    padding: clamp(6rem, 18vw, 9rem) var(--pad-x) clamp(2rem, 6vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.menu.is-open .menu__panel { clip-path: inset(0 0 0% 0); }

.menu__links { display: grid; gap: clamp(0.5rem, 2vw, 1rem); }
.menu__links a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    opacity: 0;
    transform: translateY(1.2em);
    transition: opacity 460ms var(--ease), transform 460ms var(--ease), color var(--t-base);
    font-family: var(--serif);
    font-size: clamp(2rem, 10vw, 3.5rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    border-bottom: 1px solid rgba(251, 248, 246, 0.12);
    padding-bottom: 0.4rem;
    transition: color var(--t-base);
}
.menu__links a i {
    font-style: normal;
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--rose-soft);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: 160ms; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 220ms; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 280ms; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: 340ms; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: 400ms; }
.menu.is-open .menu__links a:nth-child(6) { transition-delay: 460ms; }

.menu__foot { opacity: 0; transition: opacity 400ms var(--ease) 380ms; }
.menu.is-open .menu__foot { opacity: 1; }

.menu__links a:hover { color: var(--rose-soft); }
.menu__foot { display: grid; gap: 1.25rem; font-size: var(--fs-sm); color: rgba(251,248,246,.74); }
.menu__social { display: flex; gap: 0.5rem; font-size: 1.1rem; }
.menu__social a { display: grid; place-items: center; width: 44px; height: 44px; }

/* -------------------------------------------------------------
   10. HERO
   ------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: clamp(7rem, 13vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
}

.hero__inner {
    width: 100%;
    max-width: var(--blush-lighter-max);
    margin-inline: auto;
    padding-inline: var(--pad-x);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.hero__title {
    font-family: var(--serif);
    font-size: var(--fs-display);
    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -0.045em;
    color: var(--ink);
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
/* Char-splitting turns every letter into an inline-block, so the line
   must be told not to break between them. */
.hero__title-line { display: block; white-space: nowrap; }
.hero__title-line--alt { padding-left: 0.09em; }
.hero__title-line em { font-style: italic; font-weight: 400; color: var(--rose-deep); }

.hero__lead {
    font-family: var(--serif-2);
    font-size: clamp(1.125rem, 0.9rem + 0.85vw, 1.65rem);
    line-height: 1.45;
    color: var(--ink-60);
    max-width: 32ch;
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.hero__lead em { font-style: italic; color: var(--rose-deep); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-soft);
}
.hero__facts dt {
    font-size: var(--fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-40);
    margin-bottom: 0.25rem;
}
.hero__facts dd { font-family: var(--serif); font-size: 1.0625rem; color: var(--ink); }

/* Hero visual */
.hero__visual { position: relative; justify-self: end; width: 100%; }

.frame { position: relative; }
.frame__mask {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    background: var(--blush-light);
}
.frame__mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Photography comes from many sources; a light warm grade keeps the whole
   page reading as one palette. Subtle enough that skin tones stay natural. */
.frame__mask img,
.card__media img,
.quote figcaption img {
    filter: saturate(0.9) sepia(0.1) contrast(1.03);
}

.frame__mask::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(227, 169, 179, 0.14), rgba(243, 217, 220, 0.12));
    mix-blend-mode: multiply;
}
.frame--hero .frame__mask { aspect-ratio: 4 / 5; }
.frame--hero .frame__mask img { transform: scale(1.14); }

/* Keep the hero to a single screen on desktop: the portrait is sized
   from the viewport height, and the column width follows from it. */
@media (min-width: 1025px) {
    .frame--hero .frame__mask {
        height: min(64svh, 720px);
        width: auto;
        max-width: 100%;
        margin-left: auto;
    }
}

/* -------------------------------------------------------------
   11. MARQUEE / BRANDS / TICKER
   ------------------------------------------------------------- */
.marquee { overflow: hidden; width: 100%; }
.marquee__row { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex: 0 0 auto; }

.brands {
    overflow: hidden;          /* the marquee row is wider than the viewport */
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
    border-block: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.35);
}
.brands .marquee__group b {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 2.4vw, 1.6rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-40);
    padding-inline: clamp(1rem, 3vw, 2.25rem);
    transition: color var(--t-base);
}
.brands .marquee__group i { font-style: normal; font-size: 0.5rem; color: var(--rose-soft); }
.brands:hover .marquee__group b { color: var(--ink-60); }

/* -------------------------------------------------------------
   11b. STUDIO 3D SCENE
   Everything here is CSS 3D primitives, generated in JS the way anime.js
   builds its hero: many small elements moving together. Because it is DOM
   rather than a bitmap it stays razor sharp all the way through the zoom.
   ------------------------------------------------------------- */
.studio { position: relative; }
.studio__pin {
    position: relative;
    height: 100svh;
    overflow: hidden;
}

.stage3d {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    perspective: 1500px;
    perspective-origin: 50% 50%;
}
.world, .idle {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Everything is laid out around the phone, which sits at the origin. */
.idle > * {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-style: preserve-3d;
}

/* --- sand --- */
.surface {
    width: 3400px; height: 2500px;
    margin: -1250px 0 0 -1700px;
    transform: translateZ(-40px);
    border-radius: 160px;
    background:
        radial-gradient(60% 60% at 30% 25%, rgba(227, 169, 179, 0.16), transparent 70%),
        linear-gradient(150deg, #FAECEE, #F0DADE);
}
.surface span {
    position: absolute;
    height: 2px;
    border-radius: 2px;
    background: #E9C3C9;
    opacity: 0.5;
}

/* --- sun: concentric rings + tick marks --- */
.ring {
    width: 820px; height: 820px;
    margin: -1000px 0 0 -1330px;
    transform: translateZ(12px);
}
.ring i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 5px solid rgba(161, 84, 100, 0.7);
}
.ring b {
    position: absolute;
    left: 50%; top: 0;
    width: 3px;
    background: rgba(161, 84, 100, 0.8);
    transform-origin: 50% 410px;
    border-radius: 2px;
}
.ring em {
    position: absolute;
    left: 50%; top: 50%;
    width: 260px; height: 260px;
    margin: -130px 0 0 -130px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--rose) 0%, rgba(255, 140, 97, 0.35) 60%, transparent 75%);
}

/* --- travelling dots --- */
.orbit {
    width: 2300px; height: 2300px;
    margin: -1150px 0 0 -1150px;
    transform: translateZ(0);
}
.orbit i {
    position: absolute;
    left: 50%; top: 50%;
    width: 14px; height: 14px;
    margin: -7px;
    border-radius: 50%;
    background: var(--rose-text);
}

/* --- tray the product sits on --- */
.tray {
    width: 1180px; height: 2200px;
    margin: -1000px 0 0 -590px;
    transform: translateZ(0);
}
.tray__rail {
    position: absolute;
    top: 0; bottom: 0;
    width: 54px;
    border-radius: 27px;
    background: linear-gradient(90deg, #F2EAE6, #FFFFFF 45%, #E3D8D3);
    transform: translateZ(26px);
    box-shadow: 0 26px 40px -18px rgba(20, 16, 15, 0.5);
}
.tray__rail--l { left: 0; }
.tray__rail--r { right: 0; }

.tray__slats { position: absolute; inset: 0; transform-style: preserve-3d; }
.tray__slats span {
    position: absolute;
    left: 40px; right: 40px;
    height: 26px;
    border-radius: 13px;
    background: linear-gradient(180deg, #FFFFFF, #EFE6E1);
    transform: translateZ(14px);
}

.tray__leg {
    position: absolute;
    width: 44px; height: 260px;
    border-radius: 22px;
    background: linear-gradient(180deg, #E3D8D3, #C9B9B3);
    transform: translateZ(-14px);
}
.tray__leg--a { left: 60px;  bottom: 90px; }
.tray__leg--b { right: 60px; bottom: 90px; }

/* --- soft mat --- */
.mat {
    width: 980px; height: 1560px;
    margin: -700px 0 0 -490px;
    transform: translateZ(34px);
    border-radius: 26px;
    background: linear-gradient(155deg, #E3A9B3, #C9808C);
    box-shadow: 0 30px 50px -26px rgba(120, 60, 70, 0.6);
}
.mat span {
    position: absolute;
    left: 40px; right: 40px;
    height: 16px;
    border-radius: 8px;
    background: rgba(250, 236, 238, 0.75);
}

/* --- props, drawn from circles --- */
.prop { transform-style: preserve-3d; }
.prop i, .prop b {
    position: absolute;
    left: 50%; top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.prop--jar { width: 560px; height: 560px; margin: 120px 0 0 -1180px; transform: translateZ(30px); }
.prop--jar i:nth-child(1) { width: 620px; height: 620px; background: #F3D9DC; box-shadow: 0 24px 40px -18px rgba(20, 16, 15, 0.55); }
.prop--jar i:nth-child(2) { width: 340px; height: 340px; background: #FAECEE; transform: translate(-50%, -50%) translateZ(26px); }
.prop--jar i:nth-child(3) { width: 340px; height: 340px; border: 22px solid rgba(161, 84, 100, 0.7); background: none; transform: translate(-50%, -50%) translateZ(28px); }

.prop--clip { width: 460px; height: 200px; margin: -700px 0 0 940px; transform: translateZ(18px) rotate(16deg); }
.prop--clip i { width: 190px; height: 190px; border: 20px solid #14100F; opacity: 0.85; }
.prop--clip i:nth-child(1) { margin-left: -110px; }
.prop--clip i:nth-child(2) { margin-left: 110px; }
.prop--clip b { width: 60px; height: 20px; border-radius: 10px; background: #14100F; opacity: 0.85; }

.prop--bottle { width: 300px; height: 300px; margin: 470px 0 0 1010px; transform: translateZ(40px); }
.prop--bottle i:nth-child(1) { width: 320px; height: 320px; background: rgba(233, 195, 201, 0.5); }
.prop--bottle i:nth-child(2) { width: 240px; height: 240px; background: #F8E4E7; transform: translate(-50%, -50%) translateZ(40px); }
.prop--bottle b { width: 120px; height: 120px; background: #E3A9B3; transform: translate(-50%, -50%) translateZ(44px); }

/* --- the phone body the camera flies into --- */
.world > .phone3d {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-style: preserve-3d;
}
.phone3d {
    width: 330px; height: 596px;
    margin: -298px 0 0 -165px;
    /* Sits above the mat (z 34) for the whole flight. */
    transform: translateZ(52px);
    border-radius: 46px;
    background: var(--ink);
    box-shadow: 0 40px 60px -24px rgba(90, 60, 40, 0.65);
}
/* The screen starts off and lights up as the camera arrives. */
.phone3d__glow {
    position: absolute;
    inset: 10px;
    border-radius: 37px;
    background: #0D0A09;
}
.phone3d__glow i {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--cream);
    opacity: 0;
}

/* --- the screen content, living inside the one phone --- */
.phone {
    position: absolute;
    inset: 10px;
    z-index: 2;
    border-radius: 37px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.phone.is-live { pointer-events: auto; }

.phone__screen {
    height: 100%;
    padding: 1.4rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.phone__handle {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 0.2rem;
}
.phone__bio { font-size: 0.75rem; line-height: 1.5; color: var(--ink-60); }

.phone__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0.9rem 0;
    padding: 0.8rem 0;
    border-block: 1px solid var(--line);
}
.phone__stats dt {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-40);
    margin-bottom: 0.15rem;
}
.phone__stats dd { font-family: var(--serif); font-size: 1.0625rem; color: var(--ink); }

.phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.phone__grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 5px;
    filter: saturate(0.9) sepia(0.1) contrast(1.03);
}

.phone__cta {
    display: block;
    margin-top: auto;
    padding: 0.72rem;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    transition: background var(--t-base);
}
.phone__cta:hover { background: var(--rose-text); }

.studio__cue {
    position: absolute;
    bottom: clamp(1.25rem, 4vw, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: var(--fs-micro);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-40);
    z-index: 3;
}
/* Only the decorative rule - the sibling span carries the cue text. */
@keyframes cue {
    0%   { transform: translateX(-100%); }
    55%  { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

.studio__cue > span:first-child {
    width: 44px; height: 1px;
    flex: 0 0 auto;
    background: var(--line);
    position: relative;
    overflow: hidden;
}
.studio__cue > span:first-child::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--rose-text);
    transform: translateX(-100%);
    animation: cue 2.4s var(--ease-soft) infinite;
}

/* Without JS nothing is generated or animated - show the card on its own. */
.no-js .studio__pin { height: auto; padding-block: var(--sec-y); }
.no-js .stage3d { display: none; }
.no-js .phone { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------------
   12. CREATIVE LAB - filterable, video-first grid
   ------------------------------------------------------------- */
.work__head { max-width: 640px; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.filters button {
    padding: 0.65rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-60);
    transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
}
.filters button:hover { color: var(--ink); border-color: var(--ink-40); }
.filters button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.tile { position: relative; display: block; text-align: left; width: 100%; }
.tile[hidden] { display: none; }

.tile__media {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--r-md);
    overflow: hidden;
    background: linear-gradient(150deg, var(--blush-light), var(--blush));
    box-shadow: var(--sh-sm);
    transition: box-shadow var(--t-base), transform var(--t-base);
}
/* Every tile is 9:16 in the grid - it is the native shape of the work and
   keeps rows aligned at every breakpoint. The per-item ratio still drives
   the lightbox, so 4:5 and 1:1 pieces open in their true proportions. */
.tile__media { aspect-ratio: 9 / 16; }

/* The caption under each tile has to occupy the same height whether its
   subtitle wraps or not. Without this the media boxes line up but the cards
   below them do not, and the row reads as uneven even though every box is
   exactly the same size. */
.tile__meta { min-height: 4.6rem; }
.tile__sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile:hover .tile__media { transform: translateY(-4px); box-shadow: var(--sh-md); }

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

/* Placeholder state while the footage is in production. Deliberately
   designed rather than a grey box - it has to look intentional. */
.tile__ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0.6rem;
    justify-items: center;
    text-align: center;
    padding: 1rem;
}
.tile__ph::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(20, 16, 15, 0.16);
    border-radius: calc(var(--r-md) - 4px);
}
.tile__play {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(251, 248, 246, 0.86);
    color: var(--ink);
    font-size: 0.7rem;
    box-shadow: var(--sh-sm);
}
.tile__ratio {
    font-size: var(--fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-60);
}

.tile__spec {
    position: absolute;
    top: 0.7rem; left: 0.7rem;
    z-index: 2;
    padding: 0.3rem 0.6rem;
    border-radius: var(--r-pill);
    background: rgba(20, 16, 15, 0.82);
    color: var(--white);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tile__spec--client { background: var(--rose-text); }

.tile__meta { padding-top: 0.85rem; }
.tile__cat {
    display: block;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rose-text);
    margin-bottom: 0.3rem;
}
.tile__title {
    font-family: var(--serif);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 0.15rem;
}
.tile__sub { font-size: var(--fs-sm); color: var(--ink-40); }

.work__note {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-sm);
    color: var(--ink-40);
    max-width: 52ch;
}

/* -------------------------------------------------------------
   13. WHY FACELESS
   ------------------------------------------------------------- */
.faceless {
    background: var(--ink);
    color: var(--cream);
    /* A slab in the middle of the page closes at both ends; the footer is the
       only panel that runs off the bottom of the document. */
    border-radius: var(--r-xl);
    overflow: hidden;
}
.faceless__head { max-width: 780px; margin-bottom: clamp(2rem, 3.6vw, 3rem); }

.reasons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
}
.reason { padding-top: 1.5rem; border-top: 1px solid rgba(251, 248, 246, 0.18); }
.reason__num {
    display: block;
    font-family: var(--serif);
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    color: var(--rose-soft);
    margin-bottom: 0.9rem;
}
.reason h3 {
    font-family: var(--serif);
    font-size: clamp(1.125rem, 1.7vw, 1.5rem);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.reason p { font-size: var(--fs-sm); color: rgba(251, 248, 246, 0.7); }

/* -------------------------------------------------------------
   14. LANGUAGES
   ------------------------------------------------------------- */
.langs__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}
.langs__list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.langs__list li {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    align-items: baseline;
    gap: 1rem;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    background: var(--cream);
}
.langs__code { font-family: var(--serif); font-size: 1.35rem; color: var(--rose-text); }
.langs__name { font-family: var(--serif); font-size: 1.125rem; }
.langs__note { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-40); }
/* -------------------------------------------------------------
   15. SERVICES
   ------------------------------------------------------------- */
.services { position: relative; }
.services__head { margin-bottom: clamp(1.75rem, 3.2vw, 2.5rem); }
/* --- 3D production rig ---------------------------------------------------
   Same primitive approach as the studio scene: ring light, phone on a tripod
   and a few clip cards, all CSS 3D. Scroll tilts the rig and fans the clips.  */
.rig {
    --rig-scale: 0.86;
    position: relative;
    height: clamp(300px, 32vw, 420px);
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
    display: grid;
    place-items: center;
    perspective: 1400px;
    overflow: hidden;
}
.rig__stage, .rig__world { transform-style: preserve-3d; position: relative; }
/* The rig is built around the phone, which sits above centre - nudge the whole
   stage down so the ring, tripod and clips balance inside the box. */
.rig__stage { transform: translateY(70px) scale(var(--rig-scale)); }
.rig__world { width: 0; height: 0; will-change: transform; }
.rig__world > * { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }

.rig__ring {
    width: 280px; height: 280px;
    margin: -180px 0 0 -140px;
    border-radius: 50%;
    border: 26px solid var(--blush-light);
    box-shadow: 0 0 60px rgba(227, 169, 179, 0.55), inset 0 0 30px rgba(248, 228, 231, 0.8);
    transform: translateZ(-60px);
}
.rig__ring i {
    position: absolute;
    left: 50%; top: -20px;
    width: 4px; height: 14px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--rose-soft);
    transform-origin: 50% 160px;
}

.rig__phone {
    width: 86px; height: 172px;
    margin: -150px 0 0 -43px;
    border-radius: 14px;
    background: linear-gradient(160deg, #2A2422, #14100F);
    transform: translateZ(30px);
    box-shadow: 0 18px 30px -12px rgba(90, 60, 40, 0.6);
}
.rig__screen {
    position: absolute;
    inset: 5px;
    border-radius: 10px;
    background: linear-gradient(150deg, var(--blush-light), var(--rose-pale));
}
.rig__rec {
    position: absolute;
    left: 50%; bottom: 10px;
    width: 10px; height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--rose-text);
}

.rig__stand {
    width: 10px; height: 150px;
    margin: 20px 0 0 -5px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--blush-deep), var(--rose));
    transform: translateZ(20px);
}
.rig__legs {
    width: 190px; height: 10px;
    margin: 164px 0 0 -95px;
    border-radius: 5px;
    background: var(--rose);
    transform: translateZ(20px) rotateX(64deg);
}

.rig__clips { width: 0; height: 0; }
.rig__clips span {
    position: absolute;
    width: 74px; height: 128px;
    margin: -64px 0 0 -37px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--line-soft);
    box-shadow: var(--sh-md);
    overflow: hidden;
}
.rig__clips span::before {
    content: '';
    position: absolute;
    inset: 6px 6px 34px;
    border-radius: 6px;
    background: linear-gradient(150deg, var(--blush-light), var(--blush-light));
}
.rig__clips span::after {
    content: '';
    position: absolute;
    left: 6px; right: 26px; bottom: 20px;
    height: 5px;
    border-radius: 3px;
    background: var(--blush-deep);
}

@media (max-width: 900px) {
    .rig { --rig-scale: 0.58; height: clamp(250px, 52vw, 320px); }
}
@media (max-width: 520px) {
    .rig { --rig-scale: 0.46; height: 230px; margin-bottom: 2rem; }
}

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

.svc {
    position: relative;
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr) 3.5rem;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3.4vw, 2.5rem) 0;
    border-bottom: 1px solid var(--line);
    transition: color var(--t-base);
}
.svc::before {
    content: '';
    position: absolute;
    left: calc(var(--pad-x) * -0.5); right: calc(var(--pad-x) * -0.5);
    top: 0; bottom: 0;
    background: var(--white);
    border-radius: var(--r-md);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity var(--t-base), transform var(--t-base);
    z-index: -1;
    box-shadow: var(--sh-md);
}
.svc:hover::before { opacity: 1; transform: scale(1); }

.svc__num {
    font-family: var(--serif);
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    color: var(--ink-40);
    transition: color var(--t-base);
}
.svc__title {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
    transition: transform 520ms var(--ease);
}
/* What you get, as chips - replaces a sentence per row. */
.svc__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.svc__tags i {
    font-style: normal;
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-60);
    padding: 0.34rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    white-space: nowrap;
    transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
}
.svc:hover .svc__tags i {
    border-color: rgba(161, 84, 100, 0.35);
    background: rgba(227, 169, 179, 0.12);
    color: var(--rose-text);
}
.svc__go {
    justify-self: end;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 0.75rem;
    color: var(--ink-60);
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.svc:hover .svc__num { color: var(--rose-text); }
.svc:hover .svc__title { transform: translateX(10px); }
.svc:hover .svc__go { background: var(--rose-deep); border-color: var(--rose-deep); color: var(--white); transform: rotate(-45deg); }

/* -------------------------------------------------------------
   16. PROCESS
   ------------------------------------------------------------- */
.process__head { margin-bottom: clamp(1.75rem, 3.2vw, 2.5rem); }

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2.5rem);
}
.step { position: relative; padding-top: 2.5rem; }

/* The rail draws itself across the row as the section enters. */
.step__rail {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--line-soft);
    overflow: hidden;
}
.step__rail i {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--blush-deep), var(--rose-deep));
    transform: scaleX(0);
    transform-origin: left;
}

.step__num {
    display: block;
    font-family: var(--serif);
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    color: var(--rose-text);
    margin-bottom: 0.9rem;
}
.step__title {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 0.6rem;
}
.step__meta {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-40);
}

@media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}
@media (max-width: 520px) {
    .steps { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   17. CONTACT
   ------------------------------------------------------------- */
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}

.contact__list { display: grid; gap: 1.15rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.contact__list li { display: flex; align-items: center; gap: 1.15rem; }
.contact__ico {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: linear-gradient(140deg, var(--blush-light), var(--blush-light));
    color: var(--rose-deep);
    font-size: 0.9rem;
}
.contact__list span { display: grid; }
.contact__list i {
    font-style: normal;
    font-size: var(--fs-micro);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-40);
}
.contact__list a, .contact__value { font-family: var(--serif); font-size: 1.0625rem; }
.contact__list a { transition: color var(--t-base); }
.contact__list a:hover { color: var(--rose-text); }

.contact__social { display: flex; gap: 0.75rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.contact__social a {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-60);
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.contact__social a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); transform: translateY(-3px); }

/* Form */
.contact__form-wrap {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: var(--sh-md);
}
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.field { position: relative; }
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 1.5rem 1rem 0.65rem;
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.field label {
    position: absolute;
    left: 1rem;
    top: 1.05rem;
    font-size: var(--fs-body);
    color: var(--ink-40);
    pointer-events: none;
    transform-origin: left top;
    transition: transform 260ms var(--ease), color 260ms var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    background: var(--white);
    border-color: var(--rose-deep);
    box-shadow: 0 0 0 4px rgba(185, 107, 121, 0.1);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
/* A select always shows its option text, so its label stays floated. */
.field--select label {
    transform: translateY(-0.7rem) scale(0.72);
    color: var(--ink-40);
}
.field--select select { appearance: none; cursor: pointer; }
.field--select > i {
    position: absolute;
    right: 1.1rem; top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--ink-40);
    pointer-events: none;
}
.field--trap {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--rose-text); }

.form__msg {
    font-size: var(--fs-sm);
    text-align: center;
    padding: 0.85rem;
    border-radius: var(--r-sm);
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity var(--t-base);
}
.form__msg.is-show { opacity: 1; height: auto; }
.form__msg.is-success { background: rgba(201, 128, 140, 0.12); color: var(--ink-60); }
.form__msg.is-error   { background: rgba(185, 107, 121, 0.1);  color: var(--rose-text); }
.form__msg.is-info    { background: var(--blush-lighter); color: var(--ink-60); }

/* -------------------------------------------------------------
   18. FOOTER
   ------------------------------------------------------------- */
.footer {
    position: relative;
    background: var(--ink);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    color: var(--blush-lighter);
    padding-block: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
}
.footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
}
.footer__tag {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    color: var(--blush);
    margin-bottom: 1rem;
}
.footer__mail {
    display: inline-block;
    padding-block: 0.5rem;
    font-size: var(--fs-sm);
    color: rgba(251, 248, 246, 0.74);
    border-bottom: 1px solid rgba(251, 248, 246, 0.25);
    padding-bottom: 2px;
    transition: color var(--t-base), border-color var(--t-base);
}
.footer__mail:hover { color: var(--rose-soft); border-color: var(--rose-soft); }

.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer__nav h4 {
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(251, 248, 246, 0.62);
    margin-bottom: 1.15rem;
}
.footer__nav a {
    display: block;
    font-size: var(--fs-sm);
    color: rgba(251, 248, 246, 0.75);
    padding-block: 0.6rem;
    transition: color var(--t-base), transform var(--t-base);
}
.footer__nav a:hover { color: var(--rose-soft); transform: translateX(5px); }

.footer__mark {
    display: block;
    font-family: var(--serif);
    font-size: clamp(2.5rem, 13vw, 11rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 0.9;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1px rgba(251, 248, 246, 0.28);
    transition: color 700ms var(--ease);
    padding-block: clamp(1rem, 3vw, 2rem);
    white-space: nowrap;
}
.footer__mark:hover { color: rgba(251, 248, 246, 0.08); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid rgba(251, 248, 246, 0.14);
    font-size: var(--fs-sm);
    color: rgba(251, 248, 246, 0.62);
}

/* -------------------------------------------------------------
   19. LIGHTBOX & BACK TO TOP
   ------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(28, 21, 17, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 420ms var(--ease), visibility 420ms;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__figure { max-width: min(1100px, 88vw); text-align: center; }
.lightbox__media {
    margin-inline: auto;
    max-height: 76vh;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6);
    background: linear-gradient(150deg, var(--blush-light), var(--blush));
}
.lightbox__media--r916 { aspect-ratio: 9 / 16; width: min(400px, 82vw); }
.lightbox__media--r45  { aspect-ratio: 4 / 5;  width: min(520px, 86vw); }
.lightbox__media--r11  { aspect-ratio: 1 / 1;  width: min(560px, 86vw); }
.lightbox__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__ph {
    width: 100%; height: 100%;
    display: grid; place-content: center; gap: 0.5rem;
    color: var(--ink-60);
}
.lightbox__ph span { font-family: var(--serif); font-size: 2rem; }
.lightbox__ph em {
    font-style: normal;
    font-size: var(--fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-40);
}
.lightbox__figure figcaption {
    margin-top: 1.25rem;
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(251, 248, 246, 0.65);
}

.lightbox__close, .lightbox__nav {
    position: absolute;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: var(--white);
    transition: background var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--rose-deep); border-color: var(--rose-deep); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__close:hover { transform: rotate(90deg); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: clamp(0.75rem, 3vw, 2rem); }
.lightbox__nav--next { right: clamp(0.75rem, 3vw, 2rem); }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }

.to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 900;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--white);
    box-shadow: var(--sh-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), background var(--t-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--rose-deep); }

/* -------------------------------------------------------------
   19b. COMPONENTS ADDED FOR CREATED BY NICOL
   ------------------------------------------------------------- */

/* Skip link - first tab stop, invisible until focused. */
.skip-link {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 10000;
    padding: 0.8rem 1.2rem;
    background: var(--ink);
    color: var(--white);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    transition: top var(--t-base);
}
.skip-link:focus-visible { top: 1rem; }

/* --- hero showreel slot --- */
.reel { position: relative; width: 100%; max-width: 380px; margin-left: auto; }
.reel__frame {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: linear-gradient(155deg, var(--blush-light), var(--blush) 60%, var(--blush-deep));
    box-shadow: var(--sh-lg);
    display: grid;
    place-items: center;
}
.reel__frame::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(251, 248, 246, 0.5);
    border-radius: calc(var(--r-xl) - 8px);
    pointer-events: none;
}
.reel__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__badge {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    color: var(--ink-60);
    font-size: var(--fs-micro);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.reel__badge span {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(251, 248, 246, 0.9);
    color: var(--ink);
    box-shadow: var(--sh-sm);
}
.reel__cap {
    margin-top: 0.9rem;
    text-align: right;
    font-size: var(--fs-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-40);
}

/* --- production notes --- */
.production__notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--line-soft);
}
.production__notes li { font-size: var(--fs-sm); color: var(--ink-60); line-height: 1.6; }
.production__notes b { font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; color: var(--ink); display: block; margin-bottom: 0.3rem; }

/* --- packages --- */
.packages__head { margin-bottom: clamp(1.75rem, 3.2vw, 2.5rem); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.tier {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--white);
}
.tier--mid { background: var(--blush-lighter); border-color: var(--blush-deep); }
.tier__name { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose-text); }
.tier__count { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; }
.tier__count span { font-size: 0.36em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-40); display: block; margin-top: 0.5rem; }
.tier__list { display: grid; gap: 0.6rem; margin-top: auto; padding-top: 0.5rem; }
.tier__list li { position: relative; padding-left: 1.1rem; font-size: var(--fs-sm); color: var(--ink-60); }
.tier__list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--rose-soft); }
.packages__note { margin-top: clamp(1.75rem, 3vw, 2.5rem); font-size: var(--fs-sm); color: var(--ink-40); max-width: 56ch; }

/* --- about silhouette (no photograph, by design) --- */
.silhouette {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 460px;
    margin-inline: auto;
    border-radius: var(--r-xl);
    background: linear-gradient(160deg, var(--blush-light), var(--blush-deep));
    overflow: hidden;
    display: grid;
    place-items: center;
}
.silhouette__ring {
    position: absolute;
    width: 62%; aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(251, 248, 246, 0.65);
}
.silhouette__form {
    position: absolute;
    bottom: 0;
    width: 46%; height: 62%;
    border-radius: 50% 50% 0 0 / 62% 62% 0 0;
    background: rgba(20, 16, 15, 0.14);
}
.silhouette__mark {
    position: relative;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(4rem, 12vw, 8rem);
    color: rgba(251, 248, 246, 0.85);
}

/* --- phone content slots --- */
.phone__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.phone__slots span {
    aspect-ratio: 4 / 5;
    border-radius: 5px;
    background: linear-gradient(150deg, var(--blush-light), var(--blush));
}

/* --- FAQ --- */
.faq__head { margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
.faq__list { border-top: 1px solid var(--line); max-width: 900px; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--serif);
    font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    transition: color var(--t-base);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
    content: '';
    flex: 0 0 auto;
    width: 13px; height: 13px;
    background:
        linear-gradient(var(--ink-40), var(--ink-40)) center/100% 1px no-repeat,
        linear-gradient(var(--ink-40), var(--ink-40)) center/1px 100% no-repeat;
    transition: transform var(--t-base);
}
.qa[open] summary::after { transform: rotate(135deg); }
.qa summary:hover { color: var(--rose-text); }
.qa__body { padding-bottom: clamp(1.1rem, 2.4vw, 1.6rem); }
.qa__body p { font-size: var(--fs-body); color: var(--ink-60); max-width: 62ch; }

/* --- select chevron --- */
.field__chev {
    position: absolute;
    right: 1.1rem; top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--ink-40);
    pointer-events: none;
}

/* -------------------------------------------------------------
   20. RESPONSIVE
   Mobile is not the desktop layout stacked: the grid, the reel and the
   type scale are all reconsidered per breakpoint.
   ------------------------------------------------------------- */
@media (max-width: 1180px) {
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
    .svc { grid-template-columns: 3.5rem minmax(0, 1fr) 3rem; }
    .svc__tags { grid-column: 2 / -1; margin-top: 0.6rem; }
}

@media (max-width: 1024px) {
    .nav__links { display: none; }
    .burger { display: block; }

    .hero { min-height: auto; }
    .hero__inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 4rem); }
    .hero__visual { justify-self: stretch; }
    .reel { max-width: 320px; margin-inline: 0; }
    .reel__cap { text-align: left; }
    
    .langs__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .about__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 4rem); }
    .about__visual { max-width: 420px; }
    .contact__grid { grid-template-columns: 1fr; }
    .footer__top { grid-template-columns: 1fr; }
    .tiers { grid-template-columns: 1fr; max-width: 520px; }
    .production__notes { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 720px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

    .reasons { grid-template-columns: 1fr; gap: 0; }
    .reason { padding-block: 1.5rem; }

    .form__row { grid-template-columns: 1fr; }
    .footer__nav { grid-template-columns: 1fr 1fr; }
    .btn { width: 100%; }
    .hero__actions .btn { width: auto; flex: 1 1 auto; }
    .nav__right .btn { display: none; }
    .footer__mark { font-size: clamp(1.75rem, 11vw, 3.5rem); }
    .footer__bottom { gap: 1.25rem; }
}

@media (max-width: 420px) {
    .grid { grid-template-columns: 1fr; }
    .tile__media { max-height: 78vh; }
    .filters { gap: 0.4rem; }
    .filters button { padding: 0.55rem 0.85rem; }
}

/* -------------------------------------------------------------
   21b. MOBILE PERFORMANCE
   A phone spends its frame budget on the scroll-driven transforms, not on
   decorative layers it can barely see. These two are the expensive ones:
   three 46vw radial gradients behind a 90px blur, and a full-viewport
   blended noise overlay that repaints on every scroll.
   ------------------------------------------------------------- */
@media (max-width: 900px) {
    .orb { display: none; }
    .grain { display: none; }
    .nav.is-stuck {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(253, 248, 240, 0.96);
    }
}

/* -------------------------------------------------------------
   21. 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;
    }
    .js [data-reveal], .js [data-split] { opacity: 1 !important; }
    .grain { display: none; }
    .cursor { display: none; }
}

/* Print */
@media print {
    .nav, .preloader, .cursor, .grain, .page-bg, .to-top, .lightbox, .menu { display: none !important; }
    body { background: #fff; color: #000; }
}

/* --- the notice strip (lives on the main page, so it belongs here) ---------------------------------------------------- */
.notice {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(120%);
  bottom: clamp(12px, 3vw, 24px); z-index: 90;
  width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(20,16,15,.94); color: #FBF8F6;
  box-shadow: 0 8px 30px rgba(20,16,15,.22);
  font-size: 14px; line-height: 1.5;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.notice.is-in { transform: translateX(-50%) translateY(0); }
.notice p { margin: 0; flex: 1 1 260px; }
.notice a { color: #F3D9DC; }
.notice button {
  flex: 0 0 auto; font: inherit; font-size: 13.5px; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(251,248,246,.35); background: transparent; color: #FBF8F6;
}
.notice button:hover { background: rgba(251,248,246,.12); }

@media (prefers-reduced-motion: reduce) {
  .notice { transition: none; }
}

/* --- blog list ----------------------------------------------------------- */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { padding: 18px 0; border-bottom: 1px solid rgba(20,16,15,.10); }
.posts__title { font-family: var(--serif); font-size: 20px; text-decoration: none; }
.posts__meta { font-size: 13px; color: var(--ink-40); margin: 4px 0 8px; }
.posts__excerpt { margin: 0; color: var(--ink-60); }
.post__cover { width: 100%; height: auto; border-radius: 12px; margin: 8px 0 22px; }
.post__body { line-height: 1.75; }