@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');

:root{
  --black:#050505;--white:#fff;--line:#d9d9d9;--muted:#6d6d6d;
  --sans:'Inter',Arial,Helvetica,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#fff}
body{margin:0;font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.045em;background:#fff;color:#000}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;text-transform:uppercase;letter-spacing:inherit;cursor:pointer}

/* HEADER — black or white only */
.site-header{position:fixed;z-index:1000;top:0;left:0;width:100%;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(18px + env(safe-area-inset-top)) 30px 16px;font-size:12px;line-height:1;color:#000;background:transparent;mix-blend-mode:normal}
.header-white{color:#fff}.header-black{color:#000}.about-page .site-header{color:#fff}
.brand{font-size:15px;letter-spacing:.20em;text-align:center;white-space:nowrap;font-weight:300}
.nav-toggle{text-align:left;justify-self:start}
.top-contact{display:flex;justify-content:flex-end;gap:23px;white-space:nowrap}.top-contact a{display:inline-block}

/* DROPDOWN MENU */
.menu-panel{position:fixed;z-index:2000;inset:0;background:#fff;color:#000;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.menu-panel.open{opacity:1;pointer-events:auto}
.menu-panel nav{display:flex;flex-direction:column;gap:14px;text-align:center;font-size:clamp(24px,4vw,56px);line-height:.88;letter-spacing:.025em;font-weight:200}
.menu-panel nav a{transition:opacity .18s var(--ease),transform .18s var(--ease)}
.menu-panel nav:hover a{opacity:.28}.menu-panel nav a:hover{opacity:1;transform:translateY(-1px)}
.menu-close{position:absolute;top:calc(24px + env(safe-area-inset-top));right:30px;font-size:12px;color:#000}
.menu-contact{position:absolute;bottom:28px;left:30px;font-size:11px;line-height:1.45;color:#000;text-align:left}

/* HOMEPAGE — YSL-inspired campaign panels */
.home{--hp-title-bottom:58px;background:#050505;color:#fff}.home main{background:#050505}.panel{height:100svh;min-height:620px;position:sticky;top:0;overflow:hidden;background:#050505;display:flex;align-items:center;justify-content:center;padding:0}
.panel-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#050505;display:block;transition:transform 1.4s var(--ease)}
.panel:hover .panel-media{transform:scale(1.02)}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.15) 36%,rgba(0,0,0,0) 60%,rgba(0,0,0,.18));pointer-events:none}
.panel-copy{position:absolute;z-index:2;left:0;right:0;bottom:calc(var(--hp-title-bottom) + env(safe-area-inset-bottom));margin:0 auto;text-align:center;width:min(760px,86vw);color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.7)}
.panel-index{display:block;font-weight:300;font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.45);margin:0 0 12px;transition:opacity .4s var(--ease)}
.panel-copy h1{font-weight:200;font-size:clamp(14px,1.25vw,20px);line-height:1.05;margin:0;letter-spacing:.09em;transition:letter-spacing .5s var(--ease)}
.panel-copy:hover h1{letter-spacing:.16em}
.panel-copy p{font-weight:300;font-size:10px;line-height:1.1;margin:7px 0 0;color:rgba(255,255,255,.62);letter-spacing:.1em}

/* fixed editorial index counter (homepage only) */
.hp-index{position:fixed;z-index:900;right:26px;bottom:calc(28px + env(safe-area-inset-bottom));display:flex;align-items:baseline;gap:5px;font-size:10px;font-weight:300;letter-spacing:.14em;color:#fff;mix-blend-mode:difference;pointer-events:none}
.hp-index-sep,.hp-index-total{color:rgba(255,255,255,.55)}

/* scroll cue on first panel */


/* CAHU + 3615CAHU home panel */
.split-panel{background:#fff;color:#000;display:grid;grid-template-columns:1fr 1fr;gap:42px;padding:calc(112px + env(safe-area-inset-top)) 16vw 11vh;align-items:start;position:relative}
.split-panel::after{display:none}.split-panel .panel-copy{display:none}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;padding:0;background:transparent;border:0}
.tile-media{position:relative;width:100%;aspect-ratio:4/5;min-height:54svh;overflow:hidden;background:#fff}
.tile-media img,.tile-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff;transition:transform .8s var(--ease)}
.tile:hover .tile-media img,.tile:hover .tile-media video{transform:scale(.985)}
.tile-title{display:block;margin-top:16px;color:#000;font-weight:200;font-size:clamp(13px,1.1vw,18px);line-height:1;text-align:center;letter-spacing:.075em;transition:letter-spacing .5s var(--ease)}
.tile:hover .tile-title{letter-spacing:.13em}

/* PROJECT PAGES */
.project-page{background:#fff;color:#000}.project-page main{background:#fff}.project-hero{min-height:100svh;background:#fff;color:#000;display:grid;grid-template-columns:1fr;align-items:end;padding:calc(102px + env(safe-area-inset-top)) 7vw 52px}
.project-hero-media{width:100%;height:70svh;max-height:760px;object-fit:contain;object-position:center;background:#fff;display:block;margin:0 auto}
.project-title{text-align:center;margin-top:20px}.project-title h1{font-weight:300;font-size:clamp(18px,1.5vw,26px);line-height:1;margin:0;letter-spacing:.07em}.project-title p{font-weight:300;font-size:10px;margin:6px 0 0;color:#666;letter-spacing:.09em}
.project-intro{display:grid;grid-template-columns:.65fr 1.35fr;gap:9vw;border-top:1px solid #000;margin:0 7vw;padding:24px 0 62px}.kicker,.section-title,.jump-title{font-size:11px;color:#777;letter-spacing:.1em}.project-intro p{font-family:var(--sans);font-weight:300;text-transform:none;letter-spacing:.005em;font-size:clamp(19px,2vw,32px);line-height:1.22;margin:0;color:#000}
.meta-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin:0 7vw 58px}.meta{border-bottom:1px solid var(--line);padding:18px 20px 18px 0;font-size:11px;line-height:1.35}.meta b{display:block;color:#777;font-weight:400;margin-bottom:8px}
.jump-nav{margin:0 7vw 52px;padding:15px 0;border-top:1px solid #000;border-bottom:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center}.jump-nav a{font-size:11px;border:1px solid #ddd;padding:8px 10px;background:#fff}.jump-nav a:hover{background:#000;color:#fff;border-color:#000}
.media-section{padding:0 7vw 78px}.section-title{border-top:1px solid #000;padding-top:14px;margin:0 0 22px;color:#000;font-weight:300}.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}.media-card{margin:0;background:#fff;display:flex;align-items:center;justify-content:center;min-height:54vh;border:0;padding:0}.media-card img,.media-card video{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;background:#fff}.media-card video{width:100%;height:auto}.media-card:nth-child(3n+1){grid-column:1/-1;min-height:70vh}.media-card:nth-child(3n+1) img,.media-card:nth-child(3n+1) video{max-height:84vh}.full-row{grid-column:1/-1;min-height:72vh}
.video-feature{padding:0 7vw 78px}.video-feature video{width:100%;height:auto;max-height:82svh;object-fit:contain;background:#000}.link-block{margin:0 7vw 80px;border-top:1px solid #000;padding-top:16px;font-size:11px}.media-placeholder{height:60svh;display:grid;place-items:center;border:1px solid #000;color:#000;background:#fff;font-size:12px;text-align:center;padding:20px}

/* ABOUT — mise en page v4, typo linéale light */
.about-page{background:#050505;color:#fff}
.about-wrap{padding:calc(140px + env(safe-area-inset-top)) 30px 90px;min-height:100svh;background:#050505}
.about-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:12vw}
.about-grid h1{font-weight:200;font-size:clamp(52px,9vw,142px);line-height:.84;letter-spacing:.01em;margin:0;text-align:left}
.about-copy{font-family:var(--sans);font-weight:300;text-transform:none;letter-spacing:.005em;font-size:clamp(19px,2vw,32px);line-height:1.22;color:rgba(255,255,255,.9)}
.timeline{margin-top:80px;border-top:1px solid #fff}
.row{display:grid;grid-template-columns:160px 1fr;border-bottom:1px solid rgba(255,255,255,.28);padding:18px 0;font-size:12px}
.row p{margin:0;font-weight:300}
.row span{font-weight:300}
.contact-block{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;font-size:12px;font-weight:300;border-top:1px solid #fff;padding-top:18px}
.contact-block p{margin:0}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}.reveal.visible{opacity:1;transform:none}

@media(max-width:760px){.home{--hp-title-bottom:78px}.site-header{height:70px;padding-left:16px;padding-right:16px;font-size:10px}.brand{font-size:12px;letter-spacing:.17em}.top-contact{gap:12px}.top-contact a:first-child{display:inline-block}.panel{min-height:560px}.panel-copy{width:88vw}.panel-copy h1{font-size:13px}.panel-copy p{font-size:9px}.split-panel{display:block;position:static;height:auto;min-height:0;overflow:visible;padding:0}.tile{width:100%;height:100svh;min-height:560px;position:sticky;top:0;overflow:hidden;justify-content:center}.tile-media{flex:1 1 auto;aspect-ratio:auto;min-height:0;max-height:calc(100% - 40px)}.tile-title{margin-top:12px;font-size:13px}.project-hero{padding:calc(92px + env(safe-area-inset-top)) 16px 44px}.project-hero-media{height:auto;max-height:62svh}.project-title h1{font-size:17px}.project-intro{grid-template-columns:1fr;margin:0 16px;gap:20px;padding-bottom:46px}.meta-grid{grid-template-columns:1fr;margin:0 16px 46px}.jump-nav{margin:0 16px 40px}.media-section,.video-feature{padding:0 16px 56px}.gallery-grid{grid-template-columns:1fr;gap:28px}.media-card,.media-card:nth-child(3n+1){min-height:0;grid-column:auto}.media-card img,.media-card video,.media-card:nth-child(3n+1) img,.media-card:nth-child(3n+1) video{width:100%;max-height:none;height:auto}.full-row{min-height:0}.about-wrap{padding:calc(112px + env(safe-area-inset-top)) 16px 70px}.about-grid{grid-template-columns:1fr;gap:28px}.row{grid-template-columns:86px 1fr}.contact-block{grid-template-columns:1fr}.menu-panel nav{font-size:31px;gap:14px}.menu-contact{left:16px;bottom:16px}}


/* temporary fallbacks for videos that will be added later */
.video-fallback{display:none;object-fit:cover;object-position:center}
.project-hero .video-fallback{object-fit:contain;background:#fff}
.video-placeholder{display:none;align-items:center;justify-content:center;text-align:center;background:#050505;color:#fff;font-weight:200;letter-spacing:.08em;line-height:1.05;font-size:clamp(22px,4vw,64px)}
.project-video-placeholder{background:#fff;color:#000;border:1px solid #eee;font-size:clamp(20px,3vw,48px)}