@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg: #040404;
    --text: #f4f0e8;
    --muted: #9a958c;
    --accent: #d2b47f;
    --accent-strong: #f0d49a;
    --accent-deep: #9c7b48;
    --line: rgba(244, 240, 232, 0.11);
    --line-strong: rgba(244, 240, 232, 0.16);
    --panel: rgba(255, 255, 255, 0.028);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 86px 86px,
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 86px 86px,
        #040404 !important;
    color: var(--text) !important;
    font-family: 'Manrope', sans-serif !important;
}

body * {
    letter-spacing: 0 !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(115deg, rgba(210,180,127,0.12), transparent 34%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.58) 100%);
}

.wrap {
    position: relative;
    z-index: 1;
    width: min(1180px, 90vw) !important;
    padding-top: 38px !important;
}

nav {
    border-bottom: 1px solid var(--line);
    padding-bottom: 26px !important;
    margin-bottom: 74px !important;
}

.logo,
nav a {
    color: var(--text) !important;
}

nav a:hover,
a {
    color: var(--accent) !important;
}

h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 5.2rem !important;
    line-height: 0.92 !important;
    text-transform: none !important;
    color: var(--text) !important;
    max-width: 850px;
}

h2 {
    color: var(--accent) !important;
}

.lead {
    color: var(--muted) !important;
    max-width: 820px !important;
}

.grid {
    gap: 22px !important;
}

.panel.meta {
    padding: 30px !important;
    gap: 28px 42px !important;
}

.panel.meta > div {
    min-width: 0;
}

.value {
    overflow-wrap: anywhere;
}

.card,
.panel {
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px;
}

.card {
    padding: 32px !important;
}

.card h2 {
    font-family: 'Cormorant Garamond', serif !important;
    color: var(--text) !important;
    font-size: 2.05rem !important;
    text-transform: none !important;
}

.num,
.tag,
.label {
    color: var(--accent) !important;
}

.label {
    text-transform: none !important;
    font-size: 0.76rem !important;
    font-weight: 800;
}

p,
li,
.value,
.legal,
footer {
    color: var(--muted) !important;
}

.tag {
    border-color: rgba(210,180,127,0.34) !important;
    border-radius: 4px;
}

.legal,
footer {
    border-color: var(--line) !important;
}

/* ===========================================================================
   ELEVATION LAYER FOR SUB-PAGES
   Brings the homepage's atmosphere, depth and editorial rhythm to
   case-studies / privacy / terms. Scoped with .cs-page / .doc-page where the
   treatment must differ between the work page and the legal documents.
   ===========================================================================*/

/* shared eyebrow ---------------------------------------------------------- */
.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font: 700 0.7rem 'Manrope', sans-serif;
    letter-spacing: 0.28em !important;
    text-transform: uppercase;
    color: var(--accent) !important;
}
.page-eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

/* hero -------------------------------------------------------------------- */
.cs-hero { margin-bottom: 70px; }
.cs-hero h1 { margin: 0 0 24px; }
.cs-hero .lead { font-size: 1.1rem !important; line-height: 1.8 !important; }

/* reveal motion (driven by elevation.js observer) ------------------------- */
.reveal { opacity: 0; transform: translateY(34px); filter: blur(6px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.reveal.active { opacity: 1; transform: none; filter: none; }

/* ---- CASE STUDIES : full-width editorial "case rows" -------------------- */
.cs-cases { display: flex; flex-direction: column; gap: 26px; }

.cs-case {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 38px;
    padding: 44px 46px;
    border: 1px solid var(--line) !important;
    border-radius: 12px;
    background:
        linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012) 42%),
        var(--panel) !important;
    box-shadow: 0 24px 60px -34px rgba(0,0,0,0.9);
    transition: transform .5s var(--ease-out), border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.cs-case::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent-strong), var(--accent), transparent);
    transition: width .6s var(--ease-out);
    z-index: 2;
}
.cs-case::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(120% 100% at 0% 0%, rgba(210,180,127,0.14), transparent 55%);
    opacity: 0; transition: opacity .6s var(--ease-out);
}
.cs-case:hover {
    transform: translateY(-5px);
    border-color: rgba(210,180,127,0.5) !important;
    box-shadow: 0 44px 90px -44px rgba(0,0,0,0.95);
}
.cs-case:hover::before { width: 100%; }
.cs-case:hover::after { opacity: 1; }

.cs-case-index {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.6rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.7;
}
.cs-case-kicker {
    font: 700 0.66rem 'Manrope', sans-serif;
    letter-spacing: 0.24em !important;
    text-transform: uppercase;
    color: var(--accent) !important;
    margin-bottom: 12px;
}
.cs-case h2 {
    font-family: 'Cormorant Garamond', serif !important;
    color: var(--text) !important;
    font-size: 2.3rem !important;
    line-height: 1.05;
    text-transform: none !important;
    margin: 0 0 14px;
}
.cs-case > .cs-case-body > p { margin: 0 0 26px; line-height: 1.8; max-width: 760px; }

.cs-case-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 24px 0 4px;
    border-top: 1px solid var(--line);
}
.cs-col-label {
    font: 700 0.62rem 'Manrope', sans-serif;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    color: rgba(244,240,232,0.5) !important;
    margin-bottom: 14px;
}
.cs-build ul { list-style: none; margin: 0; padding: 0; }
.cs-build li {
    position: relative;
    padding-left: 20px;
    margin: 9px 0;
    color: var(--muted) !important;
    font-size: 0.92rem;
    line-height: 1.5;
}
.cs-build li::before {
    content: '';
    position: absolute; left: 0; top: 9px;
    width: 6px; height: 6px;
    border: 1px solid var(--accent);
    transform: rotate(45deg);
}
.cs-kpis { display: flex; flex-wrap: wrap; gap: 9px; }
.cs-kpis span {
    border: 1px solid var(--line-strong);
    background: rgba(255,255,255,0.025);
    border-radius: 5px;
    padding: 9px 12px;
    font-size: 0.78rem;
    color: rgba(244,240,232,0.82) !important;
}
.cs-case .tags { margin-top: 26px; }

/* closing CTA ------------------------------------------------------------- */
.cs-closing {
    margin-top: 70px;
    padding: 64px 40px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(210,180,127,0.10), transparent 60%),
        var(--panel);
}
.cs-closing h2 {
    font-family: 'Cormorant Garamond', serif !important;
    color: var(--text) !important;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem) !important;
    margin: 0 0 12px;
}
.cs-closing p { margin: 0 auto 30px; max-width: 560px; }
.cs-cta {
    display: inline-block;
    background: var(--accent);
    color: #11100e !important;
    padding: 16px 40px;
    border: 1px solid var(--accent);
    border-radius: 5px;
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em !important;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background .35s var(--ease-out);
}
.cs-cta:hover { background: var(--accent-strong); color: #11100e !important; }
.cs-cta::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55), transparent 70%);
    transform: translateX(-120%); transition: transform .65s var(--ease-out);
}
.cs-cta:hover::after { transform: translateX(120%); }

/* ---- LEGAL DOCS : privacy / terms --------------------------------------- */
.doc-page h1 { margin-bottom: 20px; }
.doc-page > .doc-updated {
    color: rgba(244,240,232,0.45) !important;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em !important;
    margin-bottom: 26px;
}
.doc-page h2 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 800;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
    color: var(--accent) !important;
    margin-top: 58px !important;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    counter-increment: docsec;
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.doc-page h2::before {
    content: counter(docsec, decimal-leading-zero);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: rgba(210,180,127,0.6);
    letter-spacing: 0 !important;
}
.doc-page { counter-reset: docsec; }
.doc-page .panel.meta {
    background:
        linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01) 46%),
        var(--panel) !important;
    border-radius: 10px;
    box-shadow: 0 24px 60px -38px rgba(0,0,0,0.9);
}
.doc-page p { line-height: 1.85; }
.doc-page strong { color: var(--text) !important; }

/* ------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .cs-case { grid-template-columns: 1fr; gap: 18px; padding: 32px 26px; }
    .cs-case-index { font-size: 2.6rem; }
    .cs-case-cols { grid-template-columns: 1fr; gap: 22px; }
    .cs-closing { padding: 48px 24px; }
}

@media (max-width: 760px) {
    .wrap {
        width: min(100% - 36px, 1180px) !important;
        padding-top: 28px !important;
    }
    nav {
        align-items: flex-start;
        gap: 22px;
        margin-bottom: 54px !important;
    }
    h1 { font-size: 3.45rem !important; }
    .card { padding: 26px !important; }
    .panel.meta { padding: 22px !important; gap: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { transition-duration: .35s; filter: none; transform: none; }
}