/* ============ FOUNDATION ============ */
:root {
    --rich-black: #0b0b0b;
    --ink: #1a1818;
    --taupe-dark: #504a4a;
    --taupe: #bfb5b3;
    --cream: #e5e4df;
    --bone: #f3f1ec;
    --off-white: #ffffff;
    --gold: #b8a285;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    scroll-behavior: smooth;
}

body { font-family: 'Montserrat', sans-serif; }

.font-display { font-family: 'Fraunces', 'Cormorant Garamond', serif; }
.font-editorial { font-family: 'Cormorant Garamond', serif; }

::selection { background: #0b0b0b; color: #e5e4df; }

/* ============ NOISE / GRAIN ============ */
.grain::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============ CUSTOM CURSOR ============ */
@media (hover: hover) and (pointer: fine) {
    body { cursor: none; }
    a, button, input, textarea, select, [role="button"], summary, label { cursor: none; }
    .cursor-dot, .cursor-ring {
        position: fixed;
        top: 0; left: 0;
        pointer-events: none;
        z-index: 10000;
        transform: translate(-50%, -50%);
        mix-blend-mode: difference;
    }
    .cursor-dot {
        width: 6px; height: 6px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.15s ease, opacity 0.2s ease;
    }
    .cursor-ring {
        width: 36px; height: 36px;
        border: 1px solid rgba(255,255,255,0.55);
        border-radius: 50%;
        transition: transform 0.25s cubic-bezier(.2,.7,.2,1), width .3s, height .3s, opacity .3s, background .3s;
    }
    .cursor-ring.hover {
        width: 64px; height: 64px;
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.8);
    }
    .cursor-ring.text {
        width: 20px; height: 20px;
        background: rgba(255,255,255,0.4);
    }
}
@media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-ring { display: none; }
}

/* ============ ANIMATIONS ============ */
@keyframes scrollPulse {
    0%   { opacity: 0; transform: translateY(-5px) scaleY(1); }
    50%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(5px) scaleY(1); }
}
.scroll-pulse { animation: scrollPulse 3s ease-in-out infinite; }

@keyframes textReveal {
    from { transform: translateY(110%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.reveal-mask { overflow: hidden; display: inline-block; }
.reveal-mask > * {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    animation: textReveal 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframes slowZoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}
.slow-zoom { animation: slowZoom 8s ease-out forwards; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.float { animation: float 6s ease-in-out infinite; }

/* ============ NAV ============ */
.nav-link { position: relative; transition: color 0.4s ease; }
.nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -6px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left center; }

#site-nav { transition: background-color 0.5s ease, border-color 0.5s ease, padding 0.5s ease, backdrop-filter 0.5s ease; }
#site-nav.scrolled {
    background-color: rgba(229, 228, 223, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 767px) {
    #nav-menu.open { display: flex !important; }
}

/* ============ UTILITIES ============ */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Buttons — refined editorial */
.btn-primary, .btn-ghost {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.5s ease, border-color 0.5s ease;
}
.btn-primary::before, .btn-ghost::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: currentColor;
    transform: translateY(101%);
    transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.btn-primary:hover::before, .btn-ghost:hover::before { transform: translateY(0); }
.btn-primary .label, .btn-ghost .label { transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.btn-primary:hover .label, .btn-ghost:hover .label { transform: translateX(2px); }
.btn-arrow { transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.btn-primary:hover .btn-arrow, .btn-ghost:hover .btn-arrow { transform: translateX(4px); }

/* Vertical text helper */
.vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); }

/* ============ MARQUEE ============ */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-container {
    display: flex;
    width: max-content;
    animation: marquee 40s linear infinite;
}
.marquee-container.fast { animation-duration: 25s; }
.marquee-wrapper { position: relative; width: 100%; overflow: hidden; }
.marquee-wrapper:hover .marquee-container { animation-play-state: paused; }
.marquee-wrapper::before,
.marquee-wrapper::after {
    content: ""; position: absolute; top: 0;
    width: 12%; height: 100%; z-index: 2; pointer-events: none;
}
.marquee-wrapper.dark::before { left: 0; background: linear-gradient(to right, #0b0b0b, transparent); }
.marquee-wrapper.dark::after  { right: 0; background: linear-gradient(to left, #0b0b0b, transparent); }
.marquee-wrapper.light::before { left: 0; background: linear-gradient(to right, #f3f1ec, transparent); }
.marquee-wrapper.light::after  { right: 0; background: linear-gradient(to left, #f3f1ec, transparent); }

/* ============ HERO HEADLINE ============ */
.hero-headline {
    font-family: 'Fraunces', 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    line-height: 0.88;
    letter-spacing: -0.02em;
}

/* Magnetic-button container */
.magnetic { display: inline-block; transition: transform 0.3s cubic-bezier(.2,.7,.2,1); }

/* AOS overrides */
[data-aos="editorial-up"] {
    opacity: 0;
    transform: translateY(40px);
    transition-property: transform, opacity;
}
[data-aos="editorial-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax image wrapper */
.parallax-wrap { overflow: hidden; }
.parallax-img { will-change: transform; transition: transform 0.1s linear; }

/* Section divider mark */
.editorial-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--taupe-dark);
    font-size: 0.6rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    font-weight: 500;
}
.editorial-mark::before {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}
.editorial-mark.right::after {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

/* Service card image reveal — only on desktop hover */
@media (hover: hover) and (min-width: 768px) {
    .service-card .card-media {
        clip-path: inset(0 100% 0 0);
        transition: clip-path 0.9s cubic-bezier(.2,.7,.2,1);
    }
    .service-card:hover .card-media { clip-path: inset(0 0 0 0); }
}
.service-card .card-index {
    transition: transform 0.6s cubic-bezier(.2,.7,.2,1), color 0.6s ease;
}
.service-card:hover .card-index { transform: translateX(8px); color: var(--taupe-dark); }

/* FAQ details polish */
details.faq-item { transition: background-color 0.5s ease; }
details.faq-item[open] { background-color: rgba(80, 74, 74, 0.03); }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item .faq-icon { transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
details.faq-item[open] .faq-icon { transform: rotate(45deg); }

/* Vignette */
.vignette::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%);
}

/* Reviews swiper */
.review-swiper .swiper-pagination-bullet {
    background: #bfb5b3 !important;
    opacity: 0.2;
}
.review-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 32px;
    border-radius: 2px;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll progress bar */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 1px;
    background: #0b0b0b;
    z-index: 9998;
    width: 0%;
    transition: width 0.05s linear;
}

/* Page header (used on all sub-pages) */
.page-header {
    position: relative;
    overflow: hidden;
    padding-top: 11rem;
    padding-bottom: 6rem;
}
@media (min-width: 768px) {
    .page-header { padding-top: 13rem; padding-bottom: 8rem; }
}
.page-header__big-letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
}
.page-header__big-letter span {
    font-family: 'Fraunces', 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
    font-size: clamp(20rem, 50vw, 48rem);
}