/* ===== Tokens ===== */
:root{
  --bg: #14161A;
  --surface: #1D2024;
  --surface-2: #24272C;
  --ink: #EDEAE3;
  --ink-dim: #9C9C97;
  --amber: #E8A33D;
  --teal: #4C7C74;
  --line: #34373C;

  --display: "Fraunces", serif;
  --body: "Manrope", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --record-red: #D71428;
  --play-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='10.5' fill='%23D71428'/%3E%3Ccircle cx='24' cy='24' r='18.5' stroke='%23D71428' stroke-width='2.25' fill='none'/%3E%3C/svg%3E") 24 24, pointer;

  --container: min(1200px, 92vw);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:0.9rem;
}

.section-head{
  max-width:var(--container);
  margin:0 auto;
  padding:0 0 2.2rem;
}
.section-head h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.8rem, 4vw, 2.8rem);
}

/* ===== Decorative viewfinder frame ===== */
.frame-corners{position:fixed; inset:0; pointer-events:none; z-index:40;}
.fc{position:absolute; width:22px; height:22px; border-color:rgba(237,234,227,0.45); border-style:solid; border-width:0;}
.fc-tl{top:18px; left:18px; border-top-width:1px; border-left-width:1px;}
.fc-tr{top:18px; right:18px; border-top-width:1px; border-right-width:1px;}
.fc-bl{bottom:18px; left:18px; border-bottom-width:1px; border-left-width:1px;}
.fc-br{bottom:18px; right:18px; border-bottom-width:1px; border-right-width:1px;}
@media (max-width:640px){ .fc{display:none;} }

.timecode{
  position:fixed; bottom:18px; right:52px; z-index:40;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em;
  color:var(--record-red);
  pointer-events:none;
}
@media (max-width:640px){ .timecode{display:none;} }

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem clamp(1.2rem, 4vw, 3rem);
  mix-blend-mode:normal;
  background:linear-gradient(180deg, rgba(20,22,26,0.82) 0%, rgba(20,22,26,0.6) 70%, rgba(20,22,26,0) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(237,234,227,0.08);
}
.nav__mark{
  font-family:var(--display); font-size:1rem; letter-spacing:0.04em;
}
.nav__mark span{color:var(--amber); font-family:var(--mono); font-size:0.7rem; margin-left:0.4em;}
.nav__links{display:flex; gap:2.2rem; font-size:0.85rem;}
.nav__links a{opacity:0.85; transition:opacity .2s;}
.nav__links a:hover{opacity:1;}
.nav__toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; z-index:51;}
.nav__toggle span{width:22px; height:1px; background:var(--ink);}

@media (max-width: 860px){
  .nav__links{display:none;}
  .nav__toggle{display:flex;}
}

.nav-mobile{
  position:fixed; inset:0; background:var(--bg); z-index:45;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  font-family:var(--display); font-size:1.8rem;
  transform:translateY(-100%); transition:transform .4s ease;
}
.nav-mobile.open{transform:translateY(0);}

/* ===== Hero ===== */
.hero{
  position:relative; height:100svh; display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:0; overflow:hidden;
  transform:scale(calc(1 + var(--hero-progress, 0) * 0.08));
  transform-origin:center center;
  transition:transform .12s linear;
}
.hero__video-wrap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
.hero__video{
  border:0;
  background:linear-gradient(160deg, #1c1f24, #0f1113);
}
.hero__consent-placeholder{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
.hero__consent-placeholder button{pointer-events:auto;}
.hero.has-media-consent .hero__consent-placeholder{
  opacity:0;
  visibility:hidden;
}
.hero__hotspot{
  position:absolute; inset:0; z-index:1;
  cursor:var(--play-cursor);
}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,22,26,0.1) 0%, rgba(20,22,26,0.48) 62%, rgba(20,22,26,0.95) 100%);
  transition:opacity .12s linear;
}
.hero__wipe{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:56svh;
  z-index:1;
  background:linear-gradient(180deg, rgba(20,22,26,0) 0%, rgba(20,22,26,0.5) 35%, var(--bg) 100%);
  transform:scaleY(var(--hero-progress, 0));
  transform-origin:bottom center;
  opacity:calc(var(--hero-progress, 0) * 0.98);
  pointer-events:none;
}
.hero__content{
  position:relative; z-index:2; padding:0 clamp(1.2rem, 4vw, 3rem) 5rem;
  max-width:clamp(380px, 40vw, 680px);
}
.hero__title{
  font-family:var(--body); font-weight:700; font-style:normal;
  text-transform:uppercase; letter-spacing:0.08em;
  font-size:clamp(3.1rem, 10vw, 7.6rem);
  line-height:0.82;
  text-wrap:balance;
}
.hero__title span{display:block;}
.hero__title span:last-child{margin-left:0.05em;}
.hero__sub{
  margin-top:1rem; max-width:32ch; color:var(--ink-dim); font-size:1.05rem;
}
.hero__bridge{
  position:absolute; left:clamp(1.2rem, 4vw, 3rem); bottom:2.35rem; z-index:2;
  display:flex; align-items:center; gap:0.8rem;
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(237,234,227,0.62);
  pointer-events:none;
}
.hero__bridge i{
  width:72px; height:1px; display:block;
  background:linear-gradient(90deg, rgba(232,163,61,0.95), rgba(232,163,61,0));
}

/* ===== Modals ===== */
.hero-modal,
.project-overlay{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center;
  padding:clamp(1rem, 3vw, 2rem);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.hero-modal.is-open,
.project-overlay.is-open{opacity:1; pointer-events:auto;}
.hero-modal__backdrop,
.project-overlay__backdrop{
  position:absolute; inset:0; border:0; background:rgba(10,11,13,0.78);
  backdrop-filter:blur(12px);
}
.hero-modal__panel,
.project-overlay__panel{
  position:relative; z-index:1;
  width:min(96vw, 1440px);
  max-height:92vh;
  overflow:auto;
  background:rgba(20,22,26,0.94);
  border:1px solid rgba(237,234,227,0.12);
  box-shadow:0 20px 80px rgba(0,0,0,0.45);
  border-radius:0;
  transform:translateY(24px) scale(0.985);
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
  opacity:0;
}
.hero-modal.is-open .hero-modal__panel,
.project-overlay.is-open .project-overlay__panel{transform:translateY(0) scale(1); opacity:1;}
.hero-modal__close,
.project-overlay__close{
  position:absolute; top:0.8rem; right:0.8rem; z-index:2;
  width:42px; height:42px; border-radius:0;
  border:1px solid rgba(237,234,227,0.18);
  background:rgba(20,22,26,0.72);
  color:var(--ink); font-size:1.6rem; line-height:1;
  cursor:pointer;
}
.hero-modal__frame,
.project-overlay__video-shell{
  width:100%;
  aspect-ratio:16/9;
  background:#0f1113;
}
.hero-modal__video,
.project-overlay__video-placeholder{
  width:100%; height:100%; border:0;
}
.project-overlay__video-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.35rem; text-align:center;
  color:rgba(237,234,227,0.72);
  background:linear-gradient(145deg, rgba(47,52,60,0.92), rgba(20,22,26,0.96));
}
.project-overlay__video-placeholder span{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
}
.project-overlay__video-placeholder small{font-size:0.82rem; color:rgba(237,234,227,0.54);}
.media-consent-placeholder,
.project-overlay__video-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:1.25rem;
  text-align:center;
  background:linear-gradient(145deg, rgba(47,52,60,.94), rgba(20,22,26,.98));
}
.media-consent-placeholder span,
.project-overlay__video-placeholder span{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.media-consent-placeholder button,
.project-overlay__video-placeholder button{
  margin-top:.3rem;
  padding:.65rem 1rem;
  border:1px solid var(--amber);
  border-radius:3px;
  background:var(--amber);
  color:#141516;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}

.project-overlay{
  padding:clamp(0.6rem, 2vw, 1.5rem);
}
.project-overlay.is-rendering{
  opacity:0;
  pointer-events:none;
}
.project-overlay.is-rendering .project-overlay__panel{
  opacity:1;
  transform:none;
}
.project-overlay__backdrop{
  background:rgba(10,11,13,0.82);
  backdrop-filter:blur(16px);
}
.project-overlay__panel{
  width:min(1180px, 96vw);
  max-height:calc(100svh - clamp(1.2rem, 4vw, 3rem));
  background:radial-gradient(circle at top, rgba(232,163,61,0.14), transparent 32%), rgba(20,22,26,0.98);
  border-color:rgba(237,234,227,0.12);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.project-overlay__shell{
  position:relative;
  padding:clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2.2rem) clamp(2.4rem, 5vw, 4.5rem);
}
.project-overlay__back{
  display:inline-flex;
  margin:0 0 1.75rem;
  border:0;
  background:none;
  color:var(--ink);
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.project-overlay__back:hover{color:var(--amber);}
.project-overlay__close{
  position:absolute;
  top:1rem;
  right:clamp(1rem, 3vw, 2.2rem);
}
.project-overlay__hero{
  display:block;
  padding:clamp(1.5rem, 4vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.project-overlay__hero-copy{
  max-width:900px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s ease .18s, transform .65s cubic-bezier(.2,.8,.2,1) .18s;
}
.project-overlay.is-open .project-overlay__hero-copy{
  opacity:1;
  transform:translateY(0);
}
.project-overlay__hero-copy h2{
  margin:0 0 1.1rem;
  font-family:var(--display);
  font-size:clamp(3rem, 8vw, 7rem);
  font-style:italic;
  font-weight:500;
  line-height:.9;
}
.project-overlay__lede,
.project-overlay__details p{
  margin:0;
  color:rgba(237,234,227,.72);
  font-size:clamp(1rem, 1.4vw, 1.14rem);
  line-height:1.7;
}
.project-overlay.is-transitioning .project-overlay__video-shell{
  visibility:hidden;
}
.project-overlay__video-block{width:100%;}
.project-overlay__video-shell{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid rgba(237,234,227,.12);
  background:#000;
}
.project-overlay__video-shell iframe{width:100%; height:100%; border:0; display:block;}
.project-overlay__details{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.25rem;
  margin-top:1.75rem;
  padding-top:1.75rem;
  border-top:1px solid rgba(237,234,227,.12);
}
.project-overlay__details .eyebrow{margin-bottom:.75rem;}
.project-overlay__stills{
  display:grid;
  grid-template-columns:repeat(var(--stills-per-row, 2), minmax(0, 1fr));
  gap:1.1rem;
  margin-top:1.75rem;
}
.project-overlay__stills[hidden]{display:none;}
.project-overlay__still{
  aspect-ratio:var(--project-aspect-ratio, 16 / 9);
  border:1px solid rgba(237,234,227,.12);
  background-image:linear-gradient(135deg, rgba(232,163,61,.55), rgba(77,124,116,.25)), radial-gradient(circle at 25% 20%, rgba(255,255,255,.35), transparent 28%);
  background-position:center;
  background-size:cover;
}
.project-overlay__still--two{
  background-image:linear-gradient(135deg, rgba(77,124,116,.5), rgba(237,234,227,.12)), radial-gradient(circle at 75% 25%, rgba(255,255,255,.25), transparent 30%);
}
.project-overlay__still--three{
  background-image:linear-gradient(135deg, rgba(237,234,227,.12), rgba(232,163,61,.44)), radial-gradient(circle at 35% 65%, rgba(255,255,255,.25), transparent 30%);
}
@media (max-width:900px){
  .project-overlay__details,
  .project-overlay__stills{grid-template-columns:1fr;}
}

/* ===== Work rows ===== */
.work{padding:7rem 0 3rem;}
.work .section-head{
  transform:translateY(calc((1 - var(--hero-progress, 0)) * 18px));
  opacity:calc(0.72 + var(--hero-progress, 0) * 0.28);
}
.row{margin-bottom:3.2rem;}
.row__head{
  max-width:var(--container); margin:0 auto; padding:0 0 1rem;
  display:flex; align-items:baseline; justify-content:space-between;
}
.row__head h3{font-family:var(--display); font-size:1.4rem; font-weight:500;}
.row__count{font-family:var(--mono); font-size:0.7rem; color:var(--ink-dim);}
.row__track{
  --row-side-padding: clamp(1.2rem, 4vw, calc((100vw - 1200px)/2 + 8px));
  display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x proximity;
  padding:0 var(--row-side-padding) 0.6rem;
  scrollbar-width:none;
}
.row__track::-webkit-scrollbar{display:none;}
.projects-anchor{position:relative; top:-92px; height:1px;}
.card{
  display:block;
  flex:0 0 clamp(220px, 26vw, 320px); scroll-snap-align:start;
  appearance:none; border:0; padding:0; background:none; color:inherit;
  font:inherit; text-align:left;
  cursor:var(--play-cursor);
}

@media (min-width: 1024px){
  .card{
    flex:0 0 var(--desktop-card-width, calc((100vw - (2 * var(--row-side-padding)) - (2 * 1.1rem)) / 3));
  }
  .row__track{
    cursor:grab;
    user-select:none;
    scroll-snap-type:x mandatory;
    touch-action:pan-y;
  }
  .row__track.is-dragging{cursor:grabbing;}
}
.card__thumb{
  aspect-ratio:var(--project-aspect-ratio, 16 / 9); border-radius:2px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background-position:center;
  background-size:cover;
  transition:transform .35s ease;
}
.card:hover .card__thumb{transform:scale(1.03);}
.card__thumb--1{background-image:linear-gradient(135deg,#2b2f22,#4c4b2a);}
.card__thumb--2{background-image:linear-gradient(135deg,#22292b,#2f4c4a);}
.card__thumb--3{background-image:linear-gradient(135deg,#2b2422,#4c3a2a);}
.card__thumb--4{background-image:linear-gradient(135deg,#242229,#3a2f4c);}
.card__meta{padding-top:0.7rem; display:flex; justify-content:space-between; gap:0.6rem;}
.card__title{font-family:var(--display); font-weight:500; font-size:0.98rem;}
.card__meta span{font-family:var(--mono); font-size:0.68rem; color:var(--ink-dim); white-space:nowrap;}

/* ===== About ===== */
.about{
  max-width:var(--container); margin:6rem auto; padding:0 clamp(1.2rem, 4vw, 0);
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(2rem, 6vw, 5rem); align-items:center;
}
.about__portrait{
  aspect-ratio:4/5; border-radius:2px;
  background:linear-gradient(150deg,#26292d,#1a1c20);
  border:1px solid var(--line);
}
.about__portrait{object-fit:cover; width:100%; height:auto;}
.about__text h2{font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:1.2rem;}
.about__text p{color:var(--ink-dim); margin-bottom:1rem; max-width:56ch;}
.about__facts{margin-top:1.6rem; display:flex; flex-direction:column; gap:0.6rem; border-top:1px solid var(--line); padding-top:1.2rem;}
.about__facts li{font-size:0.9rem; display:flex; gap:0.8rem;}
.about__facts span{font-family:var(--mono); font-size:0.68rem; color:var(--amber); text-transform:uppercase; width:90px; flex:none; padding-top:0.15rem;}

@media (max-width:760px){
  .about{grid-template-columns:1fr; text-align:left;}
  .about__portrait{max-width:220px;}
}

/* ===== Benefits ===== */
.benefits{padding:5rem 0 6rem;}
.benefits__grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;
}
.benefit-card{
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:2.4rem clamp(1.4rem,3vw,2.4rem);
}
.benefit-card__num{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--teal); display:inline-block; margin-bottom:1rem;
}
.benefit-card h3{font-family:var(--display); font-weight:500; font-size:1.5rem; margin-bottom:0.9rem;}
.benefit-card p{color:var(--ink-dim); margin-bottom:1.2rem;}
.benefit-card ul{display:flex; flex-direction:column; gap:0.5rem;}
.benefit-card li{font-size:0.88rem; padding-left:1.1rem; position:relative;}
.benefit-card li::before{content:"—"; position:absolute; left:0; color:var(--amber);}

@media (max-width:760px){
  .benefits__grid{grid-template-columns:1fr;}
}

/* ===== Footer ===== */
.site-footer{
  padding:6rem clamp(1.2rem,4vw,3rem) 2rem;
  border-top:1px solid var(--line);
}
.footer__main{
  max-width:var(--container); margin:0 auto 4rem;
  padding:2.2rem clamp(1.4rem, 3vw, 2.4rem);
  position:relative;
  border-radius:0;
  background:none;
}
.footer__main::before{
  content:"";
  position:absolute; inset:0;
  border:4px solid rgba(215,20,40,0.88);
  border-radius:0;
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.footer__main:hover::before{opacity:1;}
.footer__main h2{font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(2rem,6vw,3.6rem);}
.footer__headline{
  font-family:var(--body);
  font-style:normal;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  line-height:0.86;
}
.footer__headline span{display:block;}
.footer__mail{
  display:inline-block; margin-top:1.2rem; font-family:var(--mono); font-size:1rem;
  color:rgba(232,163,61,0.95); border-bottom:1px solid rgba(232,163,61,0.95); padding-bottom:0.15rem;
}
.footer__bottom{
  max-width:var(--container); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:0.78rem; color:var(--ink-dim);
}
.footer__legal{display:flex; gap:1.4rem;}
.linklike{background:none; border:0; color:var(--ink-dim); font-size:0.78rem; cursor:pointer; text-decoration:underline; font-family:var(--body);}

/* ===== Cookie banner ===== */
.cookie-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:60;
  max-width:560px; margin:0 auto;
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px;
  padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:1rem;
  transform:translateY(140%); visibility:hidden;
  transition:transform .5s ease, visibility 0s linear .5s;
  font-size:0.85rem;
}
.cookie-banner.visible{transform:translateY(0); visibility:visible; transition-delay:0s;}
.cookie-banner strong{display:block; margin-bottom:.35rem; font-family:var(--display); font-size:1.05rem;}
.cookie-banner p{color:var(--ink-dim);}
.cookie-banner a{text-decoration:underline;}
.cookie-banner__actions{display:flex; gap:0.7rem; flex-wrap:wrap;}
.btn{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
  padding:0.65rem 1.1rem; border-radius:3px; cursor:pointer; border:1px solid var(--line);
}
.btn--ghost{background:none; color:var(--ink);}
.btn--solid{background:var(--amber); color:#141516; border-color:var(--amber);}

/* ===== Simple page (imprint/privacy) ===== */
.legal-page{
  max-width:760px; margin:0 auto; padding:9rem clamp(1.2rem,4vw,0) 6rem;
}
.legal-page h1{font-family:var(--display); font-size:2.2rem; margin-bottom:1.6rem;}
.legal-page h2{font-family:var(--display); font-size:1.2rem; margin:2rem 0 0.6rem;}
.legal-page h3{font-family:var(--display); font-size:1.05rem; margin:1.5rem 0 0.5rem;}
.legal-page h4{font-size:0.92rem; margin:1.15rem 0 0.4rem;}
.legal-page p, .legal-page li{color:var(--ink-dim); font-size:0.92rem; margin-bottom:0.6rem;}
.legal-page a{color:var(--amber); text-decoration:underline;}
.legal-page ul{list-style:disc; margin:0.8rem 0 1rem; padding-left:1.25rem;}
.legal-page code{font-family:var(--mono); font-size:0.86em; color:var(--ink); overflow-wrap:anywhere;}
.legal-page__uppercase{text-transform:uppercase; font-size:0.82rem !important; line-height:1.65;}