:root {
    --bg: #0a0b0d;
    --bg-soft: #101215;
    --surface: #14171a;
    --surface-2: #191c20;
    --line: rgba(235, 232, 223, .12);
    --line-strong: rgba(235, 232, 223, .22);
    --text: #ece9e2;
    --muted: #9e9c96;
    --gold: #c5a66a;
    --gold-light: #e2c98d;
    --danger: #c67878;
    --success: #82af91;
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --container: 1240px;
    --header: 88px;
    --radius: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.is-loading { cursor: progress; }
body.menu-open { overflow: hidden; }

::selection { color: #090a0b; background: var(--gold-light); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }

.film-grain {
    position: fixed;
    inset: -50%;
    z-index: 9999;
    pointer-events: none;
    opacity: .055;
    width: 200%;
    height: 200%;
    background-image: url("../images/grain.svg");
    animation: grain-shift .28s steps(2) infinite;
    mix-blend-mode: screen;
}
@keyframes grain-shift {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(1.8%, -1.2%, 0); }
    50% { transform: translate3d(-1.4%, 1.8%, 0); }
    75% { transform: translate3d(.8%, 1.1%, 0); }
    100% { transform: translate3d(-1.5%, -.8%, 0); }
}

.cursor-glow {
    position: fixed;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197,166,106,.055), transparent 67%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .5s ease;
}
body:hover .cursor-glow { opacity: 1; }

.container { width: min(calc(100% - 64px), var(--container)); margin: 0 auto; position: relative; z-index: 2; }
.section { padding: 130px 0; position: relative; }
.eyebrow {
    margin: 0 0 20px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
}
.eyebrow::before { content: ""; display: inline-block; width: 34px; height: 1px; margin: 0 14px 3px 0; background: currentColor; }

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header);
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, rgba(8,9,10,.94), rgba(8,9,10,.72), transparent);
    transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
    border-bottom: 1px solid transparent;
}
.site-header.scrolled {
    background: rgba(10,11,13,.82);
    backdrop-filter: blur(18px);
    border-bottom-color: var(--line);
}
.nav-shell { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1; }
.brand-name { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: .18em; }
.brand-role { margin-top: 6px; color: var(--gold); font-size: 8px; font-weight: 600; letter-spacing: .36em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 38px; }
.nav-link { color: #c5c2bb; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; transition: color .25s ease; position: relative; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 0; height: 1px; background: var(--gold); transition: width .3s ease; }
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }
.menu-toggle { display: none; background: none; border: 0; padding: 12px 0 12px 12px; }
.menu-toggle span { display: block; width: 27px; height: 1px; background: var(--text); margin: 6px 0; transition: transform .3s ease; }

.hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(8,9,10,.98) 0%, rgba(8,9,10,.88) 42%, rgba(8,9,10,.55) 72%, rgba(8,9,10,.86) 100%),
        radial-gradient(circle at 72% 42%, rgba(197,166,106,.08), transparent 24%),
        linear-gradient(125deg, #111419 0%, #090a0c 45%, #16181c 100%);
}
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -7vw;
    top: 9%;
    width: min(54vw, 760px);
    aspect-ratio: 1;
    border: 1px solid rgba(197,166,106,.08);
    border-radius: 50%;
    box-shadow: 0 0 0 84px rgba(197,166,106,.025), 0 0 0 168px rgba(197,166,106,.015);
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(255,255,255,.018) 12.5%);
    mask-image: linear-gradient(to bottom, transparent 10%, #000 35%, #000 75%, transparent 100%);
}
.hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.62) 100%); pointer-events: none; }
.hero-inner { padding-top: 84px; }
.hero-title {
    max-width: 970px;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(62px, 8vw, 126px);
    font-weight: 500;
    line-height: .84;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.hero-title em { color: var(--gold-light); font-weight: 500; }
.hero-copy { width: min(560px, 100%); margin: 42px 0 0; color: #b3b0aa; font-size: 15px; font-weight: 300; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 34px; margin-top: 42px; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 25px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button-gold { background: var(--gold); color: #0b0c0e; border-color: var(--gold); }
.button-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }
.button-outline { border-color: var(--line-strong); background: transparent; color: var(--text); }
.button-outline:hover { border-color: var(--gold); color: var(--gold-light); }
.text-link { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); padding-bottom: 7px; transition: border-color .25s, color .25s; }
.text-link span { color: var(--gold); margin-left: 8px; }
.text-link:hover { color: var(--gold-light); border-color: var(--gold); }
.hero-index { position: absolute; right: 4vw; bottom: 7vh; color: rgba(236,233,226,.08); font: 600 clamp(120px, 16vw, 260px)/.75 var(--serif); letter-spacing: -.06em; }
.scroll-cue { position: absolute; left: 4vw; bottom: 5vh; display: flex; align-items: center; gap: 13px; color: #777874; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-cue span { width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); }
.reveal { animation: heroReveal .9s both cubic-bezier(.2,.7,.2,1); }
.reveal:nth-child(2) { animation-delay: .08s; }
.reveal:nth-child(3) { animation-delay: .17s; }
.reveal:nth-child(4) { animation-delay: .26s; }
@keyframes heroReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.works-section { background: var(--bg-soft); border-top: 1px solid rgba(255,255,255,.03); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 64px; }
.section-heading h2, .about-copy h2, .contact-copy h2 {
    margin: 0;
    font: 500 clamp(44px, 5vw, 72px)/.96 var(--serif);
    letter-spacing: -.03em;
}
.section-heading h2 { font-size: clamp(48px, 5vw, 70px); }
.section-intro { width: min(390px, 100%); margin: 0 0 7px; color: var(--muted); font-size: 13px; font-weight: 300; }
.works-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 72px 28px; }
.work-card { grid-column: span 6; outline: 0; cursor: pointer; }
.work-card:nth-child(4n+2), .work-card:nth-child(4n+3) { margin-top: 90px; }
.work-poster-wrap { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #090a0c; border: 1px solid rgba(255,255,255,.05); }
.work-poster { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: saturate(.72) contrast(1.03) brightness(.82); transition: transform .8s cubic-bezier(.17,.67,.25,1), filter .6s ease; }
.poster-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,6,7,.58), transparent 58%); }
.work-card:hover .work-poster, .work-card:focus .work-poster { transform: scale(1.035); filter: saturate(.88) contrast(1.04) brightness(.94); }
.work-index { position: absolute; top: 20px; left: 22px; color: rgba(255,255,255,.66); font: 500 11px var(--sans); letter-spacing: .18em; }
.discover-mark { position: absolute; right: 24px; bottom: 22px; transform: translateY(8px); opacity: 0; font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; transition: .35s ease; }
.discover-mark b { color: var(--gold); margin-left: 7px; }
.work-card:hover .discover-mark, .work-card:focus .discover-mark { opacity: 1; transform: none; }
.work-card-copy { padding: 24px 4px 0; }
.work-meta-line { display: flex; align-items: center; gap: 10px; color: var(--gold); font-size: 9px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.dot { width: 2px; height: 2px; border-radius: 50%; background: currentColor; }
.work-card h3 { margin: 10px 0 5px; font: 500 38px/1 var(--serif); letter-spacing: -.02em; }
.work-card-copy > p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.empty-state { border-top: 1px solid var(--line); padding: 70px 0; display: grid; grid-template-columns: 100px 1fr 2fr; gap: 30px; align-items: start; }
.empty-number { color: var(--gold); font-family: var(--serif); font-size: 34px; }
.empty-state h3 { margin: 0; font: 500 30px var(--serif); }
.empty-state p { margin: 3px 0 0; color: var(--muted); }

.about-section { background: #0d0f11; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 2.4fr 9.6fr; gap: 30px; }
.about-kicker { position: relative; }
.section-number { display: block; margin-bottom: 70px; color: rgba(236,233,226,.12); font: 500 74px/.8 var(--serif); }
.about-copy h2 { max-width: 900px; }
.about-copy h2 em, .contact-copy h2 em { color: var(--gold-light); font-weight: 500; }
.about-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; max-width: 800px; margin: 56px 0 0 auto; }
.about-columns p { margin: 0; color: #a9a7a1; font-size: 14px; font-weight: 300; line-height: 1.9; }

.contact-section { background: #0a0b0d; }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(60px, 9vw, 140px); align-items: start; }
.contact-copy { position: sticky; top: 140px; }
.contact-copy > p:not(.eyebrow):not(.contact-small) { max-width: 500px; margin-top: 35px; color: var(--muted); font-size: 14px; }
.contact-rule { width: 100%; height: 1px; margin: 52px 0 25px; background: var(--line); }
.contact-small { color: #6f716e; font-size: 11px; line-height: 1.7; }
.premium-form { border-top: 1px solid var(--line-strong); padding-top: 7px; }
.form-row.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.field { display: block; padding: 27px 0 13px; border-bottom: 1px solid var(--line); transition: border-color .25s; }
.field:focus-within { border-color: var(--gold); }
.field > span { display: block; margin-bottom: 8px; color: var(--gold); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; padding: 0; border: 0; outline: none; resize: vertical; color: var(--text); background: transparent; font-size: 14px; font-weight: 300; line-height: 1.7; }
.field input::placeholder, .field textarea::placeholder { color: #555854; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 34px; }
.form-footer > p { max-width: 320px; margin: 0; color: #676966; font-size: 9px; line-height: 1.6; }
.form-status { min-height: 24px; margin-top: 18px; color: var(--muted); font-size: 12px; }
.form-status.success { color: var(--success); }
.form-status.error { color: var(--danger); }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.project-view { min-height: 100vh; padding: calc(var(--header) + 48px) 0 120px; background: radial-gradient(circle at 18% 19%, rgba(197,166,106,.06), transparent 22%), var(--bg); }
.back-link { margin-bottom: 38px; border: 0; padding: 0; background: none; color: #8d8e89; font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; cursor: pointer; transition: color .2s; }
.back-link span { color: var(--gold); margin-right: 8px; }
.back-link:hover { color: var(--text); }
.project-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: clamp(52px, 8vw, 120px); align-items: start; }
.project-aside { position: sticky; top: 120px; }
.detail-poster { position: relative; aspect-ratio: 2 / 3; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.06); }
.detail-poster img { width: 100%; height: 100%; object-fit: cover; }
.poster-sheen { position: absolute; inset: 0; box-shadow: inset 0 0 90px rgba(0,0,0,.22); pointer-events: none; }
.rating-panel { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rating-score { display: flex; align-items: baseline; gap: 7px; }
.rating-score strong { font: 500 31px var(--serif); }
.rating-score span { color: #747671; font-size: 11px; }
.stars { color: var(--gold); letter-spacing: .13em; font-size: 14px; white-space: nowrap; }
.stars .off { color: #393b3a; }
.tech-list { margin: 0; padding: 20px 0; list-style: none; border-bottom: 1px solid var(--line); }
.tech-list li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 7px 0; font-size: 11px; }
.tech-list span:first-child { color: #676965; text-transform: uppercase; letter-spacing: .1em; font-size: 8px; padding-top: 3px; }
.tech-list span:last-child { color: #bdbab3; }
.buy-button { width: 100%; margin-top: 22px; }
.project-main { padding-top: 20px; min-width: 0; }
.project-overline { display: flex; align-items: center; gap: 15px; color: var(--gold); font-size: 9px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }
.project-overline::after { content: ""; width: 70px; height: 1px; background: rgba(197,166,106,.42); }
.project-title { margin: 12px 0 0; font: 500 clamp(58px, 7vw, 104px)/.82 var(--serif); letter-spacing: -.055em; overflow-wrap: anywhere; }
.project-hook { max-width: 760px; margin: 30px 0 52px; color: #aaa8a2; font: 400 clamp(20px, 2.3vw, 29px)/1.4 var(--serif); font-style: italic; }
.tabs { display: flex; gap: 34px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-button { position: relative; flex: 0 0 auto; border: 0; padding: 17px 0 16px; background: none; color: #737570; cursor: pointer; font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.tab-button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .25s; transform-origin: left; }
.tab-button.active { color: var(--text); }
.tab-button.active::after { transform: scaleX(1); }
.tab-pane { display: none; padding: 44px 0 0; animation: pane .35s ease both; }
.tab-pane.active { display: block; }
@keyframes pane { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.synopsis-copy { max-width: 800px; color: #b8b5af; font-size: 15px; font-weight: 300; line-height: 1.95; }
.synopsis-copy p:first-child { margin-top: 0; }
.synopsis-copy h2, .synopsis-copy h3 { color: var(--text); font-family: var(--serif); font-weight: 500; }
.synopsis-copy a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 4px; }
.reviews-summary { display: flex; align-items: center; gap: 20px; margin-bottom: 34px; }
.reviews-summary strong { font: 500 46px var(--serif); }
.review-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.review-item { padding: 24px 26px; background: #0e1012; }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.review-author { color: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.review-date { color: #626460; font-size: 9px; }
.review-item p { margin: 13px 0 0; color: #aaa8a2; font-size: 13px; }
.review-form-wrap { margin-top: 42px; padding-top: 36px; border-top: 1px solid var(--line); }
.review-form-wrap h3 { margin: 0 0 4px; font: 500 30px var(--serif); }
.review-form-wrap > p { margin: 0 0 20px; color: #70726d; font-size: 11px; }
.review-form .field { padding-top: 18px; }
.review-stars { display: flex; gap: 8px; padding: 14px 0 3px; }
.star-input { border: 0; padding: 2px; background: none; color: #494b48; font-size: 22px; cursor: pointer; transition: color .15s, transform .15s; }
.star-input.active, .star-input:hover { color: var(--gold); transform: translateY(-1px); }
.review-submit-row { display: flex; justify-content: flex-end; margin-top: 24px; }
.pro-panel { max-width: 680px; padding: 35px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(197,166,106,.055), rgba(255,255,255,.01)); }
.pro-panel h3 { margin: 0; font: 500 34px var(--serif); }
.pro-panel p { color: var(--muted); font-size: 13px; }

.site-footer { border-top: 1px solid var(--line); background: #070809; padding: 34px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-inner > div { display: flex; flex-direction: column; }
.footer-inner .brand-name { font-size: 15px; }
.footer-role { color: var(--gold); font-size: 7px; letter-spacing: .26em; text-transform: uppercase; }
.footer-inner p, .footer-inner > a { margin: 0; color: #5f615e; font-size: 9px; letter-spacing: .08em; }
.footer-inner > a:hover { color: var(--gold-light); }
.page-loader { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; pointer-events: none; background: rgba(8,9,10,.5); opacity: 0; visibility: hidden; backdrop-filter: blur(4px); transition: .2s; }
.page-loader.show { opacity: 1; visibility: visible; }
.page-loader span { width: 38px; height: 38px; border: 1px solid rgba(197,166,106,.22); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; right: 26px; bottom: 26px; z-index: 6000; max-width: 420px; padding: 15px 18px; border: 1px solid var(--line); background: rgba(17,19,22,.96); color: var(--text); font-size: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35); transform: translateY(20px); opacity: 0; pointer-events: none; transition: .3s; }
.toast.show { transform: none; opacity: 1; }
.toast.error { border-color: rgba(198,120,120,.35); }

@media (max-width: 980px) {
    :root { --header: 74px; }
    .container { width: min(calc(100% - 40px), var(--container)); }
    .menu-toggle { display: block; z-index: 3; }
    .main-nav { position: fixed; inset: 0; z-index: 2; flex-direction: column; justify-content: center; gap: 34px; background: rgba(8,9,10,.97); transform: translateY(-100%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
    .menu-open .main-nav { transform: none; }
    .menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
    .menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    .nav-link { font-family: var(--serif); font-size: 32px; letter-spacing: .02em; text-transform: none; }
    .hero-index { right: -3vw; bottom: 8vh; }
    .scroll-cue { display: none; }
    .works-grid { gap: 60px 22px; }
    .work-card { grid-column: span 6; }
    .work-card:nth-child(4n+2), .work-card:nth-child(4n+3) { margin-top: 50px; }
    .about-grid { grid-template-columns: 1fr; }
    .about-kicker { display: flex; justify-content: space-between; align-items: center; }
    .section-number { margin: 0; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-copy { position: static; }
    .project-layout { grid-template-columns: 270px 1fr; gap: 52px; }
}

@media (max-width: 720px) {
    .container { width: min(calc(100% - 32px), var(--container)); }
    .section { padding: 90px 0; }
    .hero-title { font-size: clamp(54px, 17vw, 84px); line-height: .9; }
    .hero-copy { font-size: 13px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
    .hero-index { font-size: 140px; opacity: .7; }
    .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 44px; }
    .works-grid { display: block; }
    .work-card, .work-card:nth-child(4n+2), .work-card:nth-child(4n+3) { margin: 0 0 58px; }
    .work-poster-wrap { aspect-ratio: 4 / 3; }
    .work-card h3 { font-size: 34px; }
    .about-copy h2, .contact-copy h2 { font-size: 44px; }
    .about-columns { grid-template-columns: 1fr; gap: 25px; margin-top: 38px; }
    .section-number { font-size: 48px; }
    .contact-grid { gap: 48px; }
    .form-row.two-cols { grid-template-columns: 1fr; gap: 0; }
    .form-footer { flex-direction: column; align-items: stretch; }
    .project-view { padding-top: calc(var(--header) + 30px); }
    .project-layout { grid-template-columns: 1fr; gap: 45px; }
    .project-aside { position: static; display: grid; grid-template-columns: minmax(150px, 42vw) 1fr; gap: 22px; }
    .detail-poster { grid-row: span 3; }
    .rating-panel, .tech-list { align-self: start; }
    .buy-button { grid-column: 1 / -1; margin-top: 0; }
    .project-title { font-size: clamp(54px, 16vw, 82px); }
    .project-hook { margin-bottom: 35px; }
    .tab-pane { padding-top: 32px; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .brand-name { font-size: 18px; }
    .hero-inner { padding-top: 45px; }
    .hero-title { font-size: 53px; }
    .hero-index { display: none; }
    .project-aside { display: block; }
    .detail-poster { width: min(78vw, 320px); margin: 0 auto 18px; }
    .tech-list li { grid-template-columns: 80px 1fr; }
    .tabs { gap: 25px; }
    .pro-panel { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .film-grain { animation: none; }
}

/* Sélecteur de langue FR / EN */
.language-switch{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(198,167,107,.28);background:rgba(198,167,107,.035);color:var(--text);cursor:pointer;font:600 9px var(--sans);letter-spacing:.16em;transition:border-color .2s ease,background .2s ease,color .2s ease}
.language-switch:hover{border-color:rgba(198,167,107,.7);background:rgba(198,167,107,.08);color:var(--gold)}
.lang-current{color:var(--gold)}.lang-separator{color:#555851}.lang-target{color:#777a75}
.scroll-cue b{font:inherit;font-weight:400}
.back-link b{font:inherit;font-weight:400}
@media(max-width:980px){.main-nav .language-switch{margin-top:10px;padding:10px 14px;font-size:11px}.language-switch{z-index:3}}

/* ==========================================================================
   THÈME CLAIR CINÉMATOGRAPHIQUE — Alain Paltou
   Palette : ivoire, blanc, anthracite, champagne / bronze
   ========================================================================== */
:root {
    --bg: #f5f3ee;
    --bg-soft: #ece9e2;
    --surface: #ffffff;
    --surface-2: #f8f6f1;
    --line: rgba(30, 37, 43, .10);
    --line-strong: rgba(30, 37, 43, .20);
    --text: #20272d;
    --muted: #6e7478;
    --gold: #9b7437;
    --gold-light: #b99558;
    --danger: #a44f4f;
    --success: #52745f;
    --radius: 3px;
}

body {
    background: var(--bg);
    color: var(--text);
}

::selection {
    color: #ffffff;
    background: #9b7437;
}

/* Grain beaucoup plus fin sur fond clair */
.film-grain {
    opacity: .024;
    mix-blend-mode: multiply;
}

.cursor-glow {
    background: radial-gradient(circle, rgba(155,116,55,.09), transparent 68%);
}

/* Header */
.site-header {
    background: linear-gradient(to bottom, rgba(250,249,246,.98), rgba(250,249,246,.90), rgba(250,249,246,.15));
}
.site-header.scrolled {
    background: rgba(250,249,246,.92);
    border-bottom-color: rgba(30,37,43,.09);
    box-shadow: 0 10px 35px rgba(30,37,43,.045);
}
.brand-name { color: #1d242a; }
.brand-role { color: var(--gold); }
.nav-link { color: #60676c; }
.nav-link:hover { color: #171d22; }
.menu-toggle span { background: #252c31; }

/* Hero */
.hero {
    background:
        linear-gradient(90deg, rgba(248,247,243,.98) 0%, rgba(248,247,243,.92) 43%, rgba(248,247,243,.72) 72%, rgba(248,247,243,.93) 100%),
        radial-gradient(circle at 72% 42%, rgba(155,116,55,.14), transparent 25%),
        linear-gradient(125deg, #ffffff 0%, #eeeae1 48%, #faf9f6 100%);
}
.hero::before {
    border-color: rgba(155,116,55,.14);
    box-shadow: 0 0 0 84px rgba(155,116,55,.045), 0 0 0 168px rgba(155,116,55,.025);
}
.hero::after {
    background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(30,37,43,.025) 12.5%);
}
.hero-vignette {
    background: radial-gradient(ellipse at center, transparent 38%, rgba(98,88,73,.055) 100%);
}
.hero-title { color: #1b2228; }
.hero-title em { color: #9b7437; }
.hero-copy { color: #62696d; }
.hero-index { color: rgba(30,37,43,.055); }
.scroll-cue { color: #858b8e; }

.button-gold {
    background: #8f6a32;
    border-color: #8f6a32;
    color: #fff;
    box-shadow: 0 8px 25px rgba(119,85,34,.12);
}
.button-gold:hover {
    background: #775629;
    border-color: #775629;
}
.button-outline {
    background: rgba(255,255,255,.36);
    border-color: rgba(30,37,43,.18);
    color: #283036;
}
.button-outline:hover {
    background: #fff;
    border-color: #9b7437;
    color: #7d5b29;
}
.text-link { border-bottom-color: rgba(30,37,43,.20); }
.text-link:hover { color: #7d5b29; }

/* Sections & œuvres */
.works-section {
    background: #eeebe4;
    border-top-color: rgba(30,37,43,.07);
}
.section-intro,
.work-card-copy > p,
.empty-state p { color: #6b7276; }
.work-poster-wrap {
    background: #dedbd4;
    border-color: rgba(30,37,43,.08);
    box-shadow: 0 18px 48px rgba(39,42,44,.08);
}
.work-poster {
    filter: saturate(.88) contrast(1.01) brightness(.98);
}
.poster-shade {
    background: linear-gradient(to top, rgba(20,24,27,.38), transparent 60%);
}
.work-card:hover .work-poster,
.work-card:focus .work-poster {
    filter: saturate(.98) contrast(1.015) brightness(1.02);
}
.work-index { color: rgba(255,255,255,.88); text-shadow: 0 1px 8px rgba(0,0,0,.22); }
.discover-mark { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.22); }
.work-card h3 { color: #20272d; }
.empty-state { border-top-color: rgba(30,37,43,.12); }

/* À propos */
.about-section {
    background: #ffffff;
    border-top-color: rgba(30,37,43,.09);
    border-bottom-color: rgba(30,37,43,.09);
}
.section-number { color: rgba(30,37,43,.075); }
.about-copy h2,
.contact-copy h2 { color: #20272d; }
.about-copy h2 em,
.contact-copy h2 em { color: #9b7437; }
.about-columns p { color: #656c70; }

/* Contact */
.contact-section { background: #f6f4ef; }
.contact-copy > p:not(.eyebrow):not(.contact-small) { color: #6b7175; }
.contact-small { color: #8a8f92; }
.contact-rule { background: rgba(30,37,43,.10); }
.premium-form { border-top-color: rgba(30,37,43,.20); }
.field { border-bottom-color: rgba(30,37,43,.13); }
.field:focus-within { border-color: #9b7437; }
.field > span { color: #8f6a32; }
.field input,
.field textarea { color: #20272d; }
.field input::placeholder,
.field textarea::placeholder { color: #a0a4a5; }
.form-footer > p { color: #8b9092; }

/* Fiche œuvre */
.project-view {
    background:
        radial-gradient(circle at 15% 14%, rgba(155,116,55,.10), transparent 23%),
        linear-gradient(135deg, #f7f5f0 0%, #f2efe8 58%, #faf9f6 100%);
}
.back-link { color: #757b7f; }
.back-link:hover { color: #20272d; }
.detail-poster {
    border-color: rgba(30,37,43,.10);
    box-shadow: 0 28px 72px rgba(38,42,45,.18);
    background: #e7e3da;
}
.poster-sheen { box-shadow: inset 0 0 80px rgba(30,35,38,.08); }
.rating-panel,
.tech-list { border-bottom-color: rgba(30,37,43,.11); }
.rating-score span { color: #8a8f92; }
.stars .off { color: #d2d0ca; }
.tech-list span:first-child { color: #898e91; }
.tech-list span:last-child { color: #4f575c; }
.project-title { color: #1b2228; }
.project-hook { color: #6b7175; }
.project-overline::after { background: rgba(155,116,55,.38); }
.tabs { border-bottom-color: rgba(30,37,43,.12); }
.tab-button { color: #8b9093; }
.tab-button.active { color: #20272d; }
.synopsis-copy { color: #596166; }
.synopsis-copy h2,
.synopsis-copy h3 { color: #20272d; }
.synopsis-copy a { color: #825f2d; }
.review-list {
    background: rgba(30,37,43,.08);
    border-color: rgba(30,37,43,.08);
    box-shadow: 0 16px 45px rgba(30,37,43,.035);
}
.review-item { background: #ffffff; }
.review-author { color: #20272d; }
.review-date { color: #979b9d; }
.review-item p { color: #62696d; }
.review-form-wrap { border-top-color: rgba(30,37,43,.11); }
.review-form-wrap > p { color: #858a8d; }
.star-input { color: #d1cec7; }
.pro-panel {
    border-color: rgba(155,116,55,.18);
    background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(239,234,224,.70));
    box-shadow: 0 18px 55px rgba(36,39,41,.055);
}
.pro-panel p { color: #697075; }

/* Footer sombre, volontairement sobre pour fermer la page */
.site-footer {
    background: #242a2f;
    border-top-color: rgba(255,255,255,.08);
}
.site-footer .brand-name { color: #f7f4ed; }
.footer-inner p,
.footer-inner > a { color: #a9adb0; }
.footer-inner > a:hover { color: #d6b877; }

/* Feedback */
.page-loader { background: rgba(245,243,238,.62); }
.page-loader span { border-color: rgba(155,116,55,.22); border-top-color: #9b7437; }
.toast {
    background: rgba(255,255,255,.97);
    color: #20272d;
    border-color: rgba(30,37,43,.12);
    box-shadow: 0 22px 55px rgba(35,39,42,.14);
}

/* Langues */
.language-switch {
    border-color: rgba(155,116,55,.24);
    background: rgba(255,255,255,.48);
    color: #384046;
}
.language-switch:hover {
    border-color: rgba(155,116,55,.62);
    background: #fff;
    color: #79582a;
}
.lang-current { color: #8b652e; }
.lang-separator { color: #b3b5b3; }
.lang-target { color: #777d81; }

/* Menu mobile clair */
@media (max-width: 980px) {
    .main-nav {
        background: rgba(248,247,243,.985);
        box-shadow: inset 0 0 0 1px rgba(30,37,43,.045);
    }
    .nav-link { color: #273036; }
    .nav-link:hover { color: #8b652e; }
}

/* Un peu plus d'air sur mobile avec le thème clair */
@media (max-width: 720px) {
    .work-poster-wrap { box-shadow: 0 14px 36px rgba(39,42,44,.075); }
    .project-view { background: #f7f5f0; }
}

/* ========================================================================== 
   AUDIENCE LIVE + CONFIDENTIALITÉ
   ========================================================================== */
.audience-counter{display:inline-flex;align-items:center;gap:15px;margin-top:32px;padding:11px 14px;border:1px solid rgba(30,37,43,.10);background:rgba(255,255,255,.50);backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(35,39,42,.04)}
.audience-label{display:inline-flex;align-items:center;gap:8px;padding-right:4px}.audience-label i{width:7px;height:7px;border-radius:50%;background:#4f8060;box-shadow:0 0 0 4px rgba(79,128,96,.10);animation:audiencePulse 2s ease-in-out infinite}.audience-label b{color:#777d80;font-size:8px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}.audience-metric{display:flex;align-items:baseline;gap:6px}.audience-metric strong{font:600 21px/1 var(--serif);color:#252c31}.audience-metric small{color:#888d90;font-size:8px;letter-spacing:.08em;text-transform:uppercase}.audience-metric.online strong{color:#4f8060}.audience-separator{width:1px;height:21px;background:rgba(30,37,43,.11)}
@keyframes audiencePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
.footer-links{display:flex!important;align-items:center!important;gap:18px!important;flex-direction:row!important}.footer-links a{color:#a9adb0;font-size:9px;letter-spacing:.08em}.footer-links a:hover{color:#d6b877}
.privacy-body{min-height:100vh;background:radial-gradient(circle at 70% 20%,rgba(155,116,55,.10),transparent 28rem),#f4f1eb;color:#20272d}.privacy-page{min-height:100vh;padding:55px 0 80px}.privacy-shell{max-width:900px}.privacy-brand{display:inline-flex;margin-bottom:70px}.privacy-card{padding:clamp(28px,5vw,58px);background:#fff;border:1px solid rgba(30,37,43,.10);box-shadow:0 28px 80px rgba(35,39,42,.08)}.privacy-card h1{margin:5px 0 22px;font:600 clamp(42px,7vw,72px)/.95 var(--serif);color:#20272d}.privacy-card>p:not(.eyebrow){max-width:720px;color:#62696d;font-size:14px;line-height:1.85}.privacy-details{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:32px 0;background:#e5ded2;border:1px solid #e5ded2}.privacy-details>div{padding:20px;background:#faf8f4}.privacy-details strong{display:block;font:600 32px var(--serif);color:#8f6a32}.privacy-details span{display:block;margin-top:3px;color:#817a70;font-size:9px;line-height:1.45}.privacy-status{margin:0 0 20px;padding:12px 14px;background:#f2f7f3;border:1px solid rgba(79,128,96,.22);color:#477055;font-size:10px}.privacy-back{display:inline-block;margin-top:22px;color:#777d80;font-size:10px}.privacy-back:hover{color:#8f6a32}
@media(max-width:720px){.audience-counter{align-items:flex-start;flex-wrap:wrap;gap:11px 14px}.audience-label{width:100%}.audience-separator{height:18px}.footer-links{align-items:flex-start!important;flex-direction:column!important;gap:8px!important}.privacy-details{grid-template-columns:1fr}.privacy-brand{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){.audience-label i{animation:none}}