:root {
  --cream: #F4F1E8;
  --cream-2: #E8E2D6;
  --ink: #121212;
  --black: #050505;
  --white: #F8F8F5;
  --gray: #A7A39B;
  --line-light: rgba(18,18,18,.18);
  --line-dark: rgba(248,248,245,.20);
  --max: 1240px;
  --side: clamp(1.25rem, 5vw, 5rem);
  --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; color: var(--white); background: var(--black); font-family: var(--body); font-size: clamp(1rem,1.2vw,1.125rem); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
.skip { position: fixed; z-index: 1000; left: 1rem; top: 1rem; padding: .7rem 1rem; background: var(--cream); color: var(--ink); transform: translateY(-200%); }
.skip:focus { transform: none; }

.topbar { position: fixed; z-index: 100; inset: 0 0 auto; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .85rem var(--side); background: rgba(5,5,5,.84); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); transition: background .2s ease; }
.topbar.scrolled { background: rgba(5,5,5,.96); }
.brand { display: block; width: clamp(165px, 18vw, 245px); overflow: hidden; }
.brand img { width: 100%; aspect-ratio: 3.33 / 1; object-fit: cover; }
.nav { display: flex; align-items: center; gap: clamp(1rem,2.5vw,2.6rem); }
.nav a { text-decoration: none; text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .18em; color: rgba(248,248,245,.78); }
.nav a:hover, .nav a:focus-visible { color: var(--white); }
.menu-button { display: none; border: 1px solid var(--line-dark); background: transparent; color: var(--white); padding: .55rem .75rem; text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; }

.hero { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; padding: 8rem var(--side) 5rem; background: #000; }
.hero-noise, .hero::before { content:""; position:absolute; inset:0; pointer-events:none; }
.hero::before { background: radial-gradient(circle at 50% 43%, rgba(255,255,255,.055), transparent 31%), linear-gradient(180deg, transparent 65%, rgba(0,0,0,.72)); z-index:1; }
.hero-noise { opacity:.12; z-index:2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.hero-logo-wrap { position:absolute; inset: 4.5rem 0 auto; z-index:0; display:flex; justify-content:center; opacity:.95; }
.hero-logo { width:min(1536px,100vw); min-height: 56vh; object-fit: cover; object-position: center 45%; }
.hero-copy { position: relative; z-index: 3; align-self:end; justify-self:start; width:min(760px,100%); margin-top:42vh; }
.kicker, .section-label, .project-number { text-transform: uppercase; letter-spacing:.23em; font-size:.72rem; font-weight:700; }
.kicker { color:rgba(248,248,245,.62); }
h1,h2,h3,p { margin-top:0; }
.hero h1 { max-width: 12ch; margin:.8rem 0 1rem; font-family:var(--display); font-size:clamp(3.4rem,9vw,8.8rem); line-height:.84; letter-spacing:-.045em; text-transform:uppercase; }
.hero-deck { max-width: 690px; font-size:clamp(1.15rem,2vw,1.55rem); color:rgba(248,248,245,.82); }
.hero-deck a { font-weight:700; text-decoration-thickness:1px; text-underline-offset:4px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.2rem 1.8rem; margin-top:2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:.9rem 1.2rem; text-decoration:none; text-transform:uppercase; letter-spacing:.14em; font-size:.73rem; font-weight:800; border:1px solid currentColor; }
.button-light { background:var(--cream); color:var(--ink); border-color:var(--cream); }
.button-light:hover { background:transparent; color:var(--white); }
.button-dark { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.button-dark:hover { background:transparent; color:var(--ink); }
.text-link { text-transform:uppercase; letter-spacing:.13em; font-size:.73rem; font-weight:700; text-underline-offset:5px; }
.scroll-cue { position:absolute; z-index:3; right:var(--side); bottom:2rem; text-decoration:none; font-size:1.6rem; color:rgba(248,248,245,.55); }

.section { padding: clamp(5rem,10vw,9rem) var(--side); }
.section > * { max-width:var(--max); margin-left:auto; margin-right:auto; }
.section-cream { background:var(--cream); color:var(--ink); }
.split { display:grid; grid-template-columns:minmax(140px,.55fr) minmax(0,1.45fr); gap:clamp(2rem,8vw,9rem); }
.split > * { width:100%; }
.section-label { color:currentColor; opacity:.52; }
.section h2 { font-family:var(--display); font-size:clamp(2.4rem,6vw,6rem); line-height:.91; letter-spacing:-.04em; text-transform:uppercase; max-width:13ch; margin-bottom:2rem; }
.section p { max-width:68ch; }
.large { font-size:clamp(1.25rem,2.2vw,1.75rem); line-height:1.35; }

.project-section { background:var(--cream-2); color:var(--ink); border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); }
.project-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:clamp(3rem,8vw,9rem); align-items:end; }
.project-title h2 { max-width:none; font-size:clamp(4.5rem,13vw,12rem); line-height:.72; margin:1.2rem 0 1.5rem; }
.project-meta { text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700; }
.project-logline { font-size:clamp(1.35rem,2.5vw,2rem); line-height:1.22; font-weight:600; }
.project-pitch .button { margin-top:1.3rem; }
.time-field { margin-top:clamp(4rem,9vw,8rem); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:1.2rem 0 1.5rem; }
.time-line { display:flex; justify-content:space-between; align-items:center; min-height:30px; font-size:.65rem; letter-spacing:.18em; font-weight:700; }
.time-gap { position:relative; display:grid; grid-template-columns:repeat(6,1fr); min-height:190px; border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); }
.tick { border-left:1px solid var(--line-light); padding:.4rem; font-size:.62rem; }
.tick:last-child { border-right:1px solid var(--line-light); }
.gap-word { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); font-family:var(--display); font-size:clamp(2.5rem,8vw,7rem); line-height:1; font-weight:800; letter-spacing:-.03em; white-space:nowrap; }

.promise { border-bottom:1px solid var(--line-light); }
.promise-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:3rem; background:var(--line-light); border:1px solid var(--line-light); }
.promise-card { background:var(--cream); padding:clamp(1.5rem,3vw,3rem); min-height:320px; }
.promise-card > span { font-size:.7rem; letter-spacing:.2em; opacity:.5; }
.promise-card h3, .power-card h3 { margin:4.6rem 0 1rem; font-family:var(--display); text-transform:uppercase; font-size:clamp(1.5rem,3vw,2.5rem); line-height:.95; }

.build-section { background:var(--black); }
.status-list { margin-top:2.5rem; border-top:1px solid var(--line-dark); }
.status-list div { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line-dark); }
.status-list span { color:rgba(248,248,245,.66); }
.section-cream .status-list { border-color:var(--line-light); }
.section-cream .status-list div { border-color:var(--line-light); }
.section-cream .status-list span { color:rgba(18,18,18,.62); }
.status-list strong { text-transform:uppercase; font-size:.72rem; letter-spacing:.14em; text-align:right; }

.collaborate-section { background:#0B0B0B; border-top:1px solid var(--line-dark); }
.collab-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,8vw,8rem); margin-top:2rem; }
.role-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--line-dark); }
.role-list li { display:grid; grid-template-columns:minmax(180px,.7fr) 1fr; gap:1.5rem; padding:1.25rem 0; border-bottom:1px solid var(--line-dark); }
.role-list strong { text-transform:uppercase; font-size:.78rem; letter-spacing:.12em; }
.role-list span { color:rgba(248,248,245,.67); }
.honesty { margin-top:4rem; max-width:760px!important; color:rgba(248,248,245,.58); font-size:.9rem; }

.contact-section { min-height:78vh; display:grid; align-content:center; background:var(--cream); color:var(--ink); }
.contact-copy { width:100%; }
.contact-section h2 { max-width:10ch; }
.contact-email { display:inline-block; margin:1.5rem 0 2rem; font-family:var(--display); font-size:clamp(1.5rem,4vw,3.6rem); line-height:1; font-weight:800; text-transform:uppercase; text-underline-offset:8px; }
.socials { display:flex; flex-wrap:wrap; gap:1.5rem; }
.socials a { text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:700; }
.signature { width:100%; margin-top:clamp(5rem,12vw,10rem); font-family:monospace; letter-spacing:.1em; opacity:.56; }
.footer { display:flex; justify-content:space-between; gap:1.5rem; padding:2rem var(--side); background:var(--black); color:rgba(248,248,245,.56); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }
.footer a { text-underline-offset:4px; }

/* Film page */
.film-page { background:var(--black); }
.film-hero { min-height:100svh; padding:10rem var(--side) 5rem; max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(3rem,8vw,9rem); align-items:center; }
.film-hero h1 { font-family:var(--display); font-size:clamp(4rem,13vw,11rem); line-height:.72; letter-spacing:-.05em; margin:1.2rem 0 2rem; }
.film-tagline { font-size:clamp(1.35rem,2.5vw,2rem); line-height:1.2; max-width:630px; }
.film-meta-row { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.film-meta-row span { border:1px solid var(--line-dark); padding:.55rem .7rem; text-transform:uppercase; letter-spacing:.12em; font-size:.65rem; }
.second-visual { aspect-ratio:1/1; border:1px solid var(--line-dark); padding:clamp(1.2rem,3vw,2.5rem); display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto 1fr auto; align-items:start; }
.second-number { font-family:var(--display); font-size:clamp(8rem,24vw,19rem); line-height:.68; font-weight:800; grid-row:1/4; }
.second-word { writing-mode:vertical-rl; text-orientation:mixed; text-transform:uppercase; letter-spacing:.35em; font-size:.68rem; justify-self:end; }
.second-rule { align-self:center; border-top:1px solid var(--white); grid-column:1/3; position:relative; }
.second-rule i { position:absolute; width:10px; height:10px; background:var(--white); border-radius:50%; top:-5px; left:0; animation:second 7s ease-in-out infinite alternate; }
.second-note { grid-column:1/3; align-self:end; text-align:right; letter-spacing:.18em; font-size:.67rem; }
@keyframes second { to { left:calc(100% - 10px); } }
.power-section { background:var(--black); border-top:1px solid var(--line-dark); }
.power-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); margin-top:3rem; }
.power-card { background:var(--black); min-height:360px; padding:clamp(1.5rem,3vw,3rem); }
.power-card > span { text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:rgba(248,248,245,.52); }
.power-card p { color:rgba(248,248,245,.72); }
.power-limit { margin-top:2rem; font-size:clamp(1.15rem,2vw,1.5rem); }
.tone-grid { display:grid; grid-template-columns:.45fr 1fr .85fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.tone-quote { font-family:var(--display); text-transform:uppercase; font-weight:800; font-size:clamp(2.6rem,7vw,6.5rem); line-height:.88; letter-spacing:-.04em; }
.image-sequence { display:grid; grid-template-columns:repeat(5,1fr); padding-left:0; padding-right:0; background:var(--black); }
.image-sequence > * { max-width:none; }
.sequence-card { min-height:340px; padding:clamp(1.2rem,2.6vw,2.5rem); border-right:1px solid var(--line-dark); display:flex; flex-direction:column; }
.sequence-card span { opacity:.45; font-size:.68rem; letter-spacing:.18em; }
.sequence-card strong { margin-top:auto; font-family:var(--display); text-transform:uppercase; font-size:clamp(1.3rem,2.5vw,2.2rem); line-height:.95; }
.sequence-card p { margin:.8rem 0 0; color:rgba(248,248,245,.62); font-size:.9rem; }
.content-note { background:#0B0B0B; border-top:1px solid var(--line-dark); }
.film-end { min-height:70vh; padding:6rem var(--side); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.film-end p { font-family:var(--display); text-transform:uppercase; font-size:clamp(2.5rem,7vw,7rem); line-height:.9; font-weight:800; max-width:12ch; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .split, .project-grid, .collab-grid, .film-hero, .tone-grid { grid-template-columns:1fr; }
  .section-label { margin-bottom:1rem; }
  .promise-grid, .power-grid { grid-template-columns:1fr; }
  .promise-card, .power-card { min-height:240px; }
  .promise-card h3, .power-card h3 { margin-top:2.4rem; }
  .image-sequence { grid-template-columns:1fr 1fr; }
  .sequence-card { min-height:250px; }
  .second-visual { max-width:580px; width:100%; }
}

@media (max-width: 700px) {
  .topbar { min-height:64px; }
  .brand { width:165px; }
  .menu-button { display:block; }
  .nav { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:flex-start; gap:0; background:#050505; border-bottom:1px solid var(--line-dark); padding:0 var(--side) 1rem; }
  .nav.open { display:flex; }
  .nav a { width:100%; padding:1rem 0; border-top:1px solid rgba(255,255,255,.08); }
  .hero { padding-top:7rem; }
  .hero-logo-wrap { inset:5.2rem -22vw auto; }
  .hero-logo { width:144vw; max-width:none; min-height:48vh; object-position:center; }
  .hero-copy { margin-top:45vh; }
  .hero h1 { font-size:clamp(3.5rem,18vw,6rem); }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .section { padding-top:4.5rem; padding-bottom:4.5rem; }
  .project-title h2 { font-size:clamp(4rem,22vw,7rem); }
  .time-gap { min-height:140px; }
  .gap-word { font-size:clamp(2rem,14vw,4rem); }
  .status-list div { flex-direction:column; }
  .status-list strong { text-align:left; }
  .role-list li { grid-template-columns:1fr; gap:.45rem; }
  .contact-email { overflow-wrap:anywhere; }
  .footer { flex-direction:column; }
  .film-hero { padding-top:8rem; }
  .film-hero h1 { font-size:clamp(4.2rem,23vw,7rem); }
  .image-sequence { grid-template-columns:1fr; }
  .sequence-card { min-height:210px; border-right:0; border-bottom:1px solid var(--line-dark); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .second-rule i { animation:none; }
}