/* ===================================================================
   LICHTWERK — Concept. Creation. Film.
   Design system
   -------------------------------------------------------------------
   Type
     · Grotesque  : Helvetica Neue / Arial  — wordmark, nav, headings, body
     · Serif      : Cormorant Garamond       — taglines, roles, accents
   Color (cinematic, cool)
     · bg     #04060a   near-black, blue undertone
     · ink    #f3f6f9   near-white
     · muted  #9bacb9   steel grey-blue
     · glow   #6f9fbf   light-leak blue (accent)
   Texture: grain + soft diagonal blue light-leaks (baked PNG bgs)
   =================================================================== */

/* ---------- Brand fonts ---------- */
/* Univers — grotesque (wordmark, nav, headings, body) */
@font-face{ font-family:'Univers'; src:url('assets/fonts/Univers-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Univers'; src:url('assets/fonts/Univers-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Univers'; src:url('assets/fonts/Univers-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Univers'; src:url('assets/fonts/Univers-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Univers Condensed'; src:url('assets/fonts/Univers-CondensedRegular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Univers Condensed'; src:url('assets/fonts/Univers-CondensedBold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* Baskerville — extracted from supplied .ttc (tagline) */
@font-face{ font-family:'Baskerville Custom'; src:url('assets/fonts/Baskerville-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Baskerville Custom'; src:url('assets/fonts/Baskerville-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Baskerville Custom'; src:url('assets/fonts/Baskerville-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* Scandium — serif (taglines, roles, accents) */
@font-face{ font-family:'Scandium'; src:url('assets/fonts/Scandium-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Scandium'; src:url('assets/fonts/Scandium-LightItalic.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:'Scandium'; src:url('assets/fonts/Scandium-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Scandium'; src:url('assets/fonts/Scandium-RegularItalic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Scandium'; src:url('assets/fonts/Scandium-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Scandium'; src:url('assets/fonts/Scandium-BoldItalic.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; }

:root{
  --font-grotesque: 'Univers', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Scandium', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-tagline: 'Baskerville Custom', Baskerville, 'Libre Caslon Display', Georgia, serif;

  --bg: #04060a;
  --bg-soft: #070b11;
  --ink: #f3f6f9;
  --muted: #9bacb9;
  --muted-dim: #6f7e8b;
  --line: rgba(233,242,250,0.13);
  --glow: #6f9fbf;

  --serif-weight: 400;
  --maxw: 1280px;
  --gutter: clamp(22px, 5vw, 88px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body{
  margin:0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-grotesque);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
::selection{ background: rgba(111,159,191,0.35); color:#fff; }

.serif{ font-family: var(--font-serif); font-weight: var(--serif-weight); font-style: normal; }

/* ---------- continuous cinematic light-flow backdrop (whole page) ---------- */
.bgflow{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,6,10,.30) 0%, rgba(4,6,10,.12) 40%, rgba(4,6,10,.34) 100%),
    url("assets/bg-hero-photo.jpg") center/cover no-repeat fixed;
}

/* ---------- film grain overlay (whole page) ---------- */
.grain{
  position: fixed; inset:0; z-index: 60; pointer-events:none;
  opacity: var(--grain-opacity, .06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ===================== NAV ===================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--gutter);
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  background: rgba(4,6,10,0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
  padding-top: 16px; padding-bottom: 16px;
}
.nav__brand{
  display:flex; align-items:center; gap:14px;
  font-family: var(--font-serif);
  font-weight:700; letter-spacing:.34em; font-size:15px; text-transform:uppercase;
  opacity:0; transform: translateY(-6px); transition: opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
.nav.scrolled .nav__brand{ opacity:1; transform:none; pointer-events:auto; }
.nav__brand img{ width:24px; height:24px; }
.nav__links{ display:flex; gap: clamp(20px, 3vw, 42px); align-items:center; }
.nav__links a{
  font-size:15px; font-weight:500; letter-spacing:.04em; color: var(--ink);
  position:relative; padding: 6px 2px; opacity:.9;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--ink); transition: right .35s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ right:0; }

/* ===================== HERO ===================== */
.hero{
  position: relative; min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 120px var(--gutter) 80px;
  background: var(--bg);
  overflow:hidden;
}
.hero::before{ /* zoomed photo layer */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: url("assets/bg-hero-photo.jpg") center/cover no-repeat;
  transform: scale(var(--hero-zoom, 1.38));
  transform-origin: center;
}
.hero::after{ /* legibility vignette */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(4,6,10,0) 38%, rgba(4,6,10,.55) 100%),
    linear-gradient(180deg, rgba(4,6,10,.30) 0%, rgba(4,6,10,0) 26%, rgba(4,6,10,0) 72%, rgba(4,6,10,.45) 100%);
}
.hero > *{ position: relative; z-index:1; }
.hero__wordmark{
  font-family: var(--font-serif);
  font-weight:700; text-transform:uppercase;
  letter-spacing: .42em;
  font-size: clamp(1.35rem, 3.05vw, 2.3rem);
  margin: 0 0 clamp(26px, 4vh, 46px);
  text-indent: .42em;
  color:#fff;
  animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.hero__mark{
  display:inline-block;
  animation: markfade 1.6s ease .24s both;
}
.hero__mark img{
  width: clamp(150px, 18vw, 230px); height:auto;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,.5));
}
@keyframes markfade{
  from{ opacity:0; }
  to{   opacity:1; }
}
.hero__tagline{
  font-family: var(--font-tagline);
  margin: clamp(14px, 2.4vh, 26px) 0 0;
  font-size: clamp(1.55rem, 3.6vw, 2.65rem);
  letter-spacing: normal;
  color:#fff;
  animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .42s both;
}
.hero__scroll{
  margin-top: clamp(36px, 7vh, 84px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase; color: var(--muted);
  animation: rise 1.1s ease .6s both;
}
.hero__scroll span:first-child{ text-indent:.32em; }
.hero__scroll .line{ width:1px; height:46px; background:linear-gradient(var(--muted), transparent); animation: scrollline 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes scrollline{ 0%,100%{ transform: scaleY(.4); opacity:.4 } 50%{ transform: scaleY(1); opacity:1 } }
@keyframes rise{ from{ opacity:0; transform: translateY(26px) } to{ opacity:1; transform:none } }

/* ===================== SECTION SHELL ===================== */
.section{ position:relative; padding: clamp(90px, 14vh, 180px) 0; }
.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 var(--gutter); }
.eyebrow{
  display:flex; align-items:center; gap:16px;
  font-size:12px; letter-spacing:.34em; text-transform:uppercase; color: var(--muted);
  margin-bottom: clamp(34px, 5vh, 60px);
}
.eyebrow::before{ content:""; width:42px; height:1px; background: var(--muted-dim); }

/* ===================== PROJECTS ===================== */
.projects{ background: #000; }
.projects .wrap{ max-width: none; padding: 0; }
.projects .eyebrow{ padding: 0 var(--gutter); margin-bottom: clamp(20px, 4vh, 44px); }
.projects__list{ display:flex; flex-direction:column; gap: 0; }
.film{
  position:relative; display:block; width:100%;
  aspect-ratio: 16/9; overflow:hidden;
  background:#000; cursor:pointer;
  transform: translateY(36px); opacity:0;
  transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.film.in{ transform:none; opacity:1; }
.film img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s ease;
  filter: brightness(.92) saturate(1.02);
}
.film::after{ /* hover veil + ring */
  content:""; position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0); transition: box-shadow .5s ease;
  pointer-events:none;
}
.film:hover img{ transform: scale(1.035); filter: brightness(1.02) saturate(1.06); }
.film:hover::after{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.film__play{ display:none; }
.film__cta{ display:none; }

/* ===================== ABOUT ===================== */
.about{
  position: relative;
  background: transparent;
  overflow: hidden;
}
.about::before{ content: none; display: none; }
.about > *{ position: relative; z-index:1; }
.founders{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(12px, 1.5vw, 22px);
  max-width: 900px; margin: 0 auto clamp(80px, 12vh, 150px);
}
.founder{ position:relative; }
.founder__photo{
  position:relative; aspect-ratio: 41/58; border-radius: 16px; overflow:hidden;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.95);
}
.founder__photo img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.founder:hover .founder__photo img{ transform: scale(1.04); }
.founder__name{
  position:absolute; left:-2px; bottom:-18px; z-index:3;
  font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight:700; letter-spacing:-.02em; line-height:1;
  color:#fff; text-shadow: 0 6px 30px rgba(0,0,0,.7);
}
.founder__role{
  margin-top: 30px; font-size: clamp(1.15rem, 1.9vw, 1.55rem); color:#fff; line-height:1;
}
.about__body{ max-width: 720px; margin: 0 auto; text-align: left; }
.about__title{
  font-size: clamp(3rem, 8vw, 6rem); font-weight:700; letter-spacing:-.03em; line-height:.95; margin:0;
}
.about__sub{ font-size: clamp(1.5rem, 3vw, 2.3rem); color:#fff; margin: 10px 0 clamp(34px, 5vh, 56px); }
.about__body p{ color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height:1.75; margin: 0 0 1.35em; max-width: 60ch; text-align: justify; text-justify: inter-word; text-wrap: pretty; }
.about__body p strong{ color: var(--ink); font-weight:500; }

/* ===================== BTS STRIP ===================== */
.bts{ display:grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.bts figure{ margin:0; position:relative; overflow:hidden; aspect-ratio: 2/3; }
.bts img{ width:100%; height:100%; object-fit:cover; filter: brightness(.96); transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s ease; }
.bts figure:hover img{ transform: scale(1.05); filter: brightness(1.05); }

/* ===================== CONTACT ===================== */
.contact{
  position: relative;
  background: transparent;
  overflow: hidden;
}
.contact::before{ content: none; display: none; }
.contact > *{ position: relative; z-index:1; }
.contact__inner{ max-width: 580px; margin: 0 auto; }
.contact__title{ font-size: clamp(2.3rem, 4vw, 3.4rem); color:#fff; margin: 0 0 clamp(26px, 4vh, 40px); }
.form{ display:flex; flex-direction:column; gap: 18px; }
.field{
  position:relative;
  background: rgba(214,228,240,0.07);
  border: 1px solid rgba(233,242,250,0.16);
  border-radius: 16px;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 20px 60px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.field:focus-within{ border-color: rgba(111,159,191,.7); background: rgba(214,228,240,0.1); box-shadow: 0 20px 60px -36px rgba(0,0,0,.85), 0 0 0 3px rgba(111,159,191,.14); }
.field input, .field textarea{
  width:100%; background:transparent; border:0; outline:0; resize:none;
  color:#fff; font-family: var(--font-grotesque); font-size: 1rem;
  padding: 16px 18px;
}
.field textarea{ min-height: 160px; line-height:1.55; }
.field input::placeholder, .field textarea::placeholder{ color: rgba(241,246,250,.6); }
.field.error{ border-color: rgba(214,118,87,.8); }
.form__foot{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top: 6px; }
.form__msg{ font-size:13px; color: var(--muted); min-height: 18px; letter-spacing:.02em; }
.form__msg.ok{ color: var(--glow); }
.btn-send{
  display:inline-flex; align-items:center; gap:12px;
  background:transparent; border:1px solid var(--line); color:#fff;
  font-family: var(--font-grotesque); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  padding: 14px 26px; border-radius: 100px; cursor:pointer;
  transition: background .35s ease, border-color .35s ease, gap .35s ease, transform .2s ease;
}
.btn-send:hover{ background: #fff; color:#06090d; border-color:#fff; gap:18px; }
.btn-send:active{ transform: translateY(1px); }
.btn-send svg{ width:16px; height:16px; }

/* ===================== FOOTER ===================== */
.footer{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding: clamp(54px, 9vh, 96px) var(--gutter) clamp(40px, 6vh, 64px);
}
.footer__brand{ display:flex; align-items:center; gap: 22px; }
.footer__brand img{ width: 56px; height:56px; }
.footer__brand .wm{ font-family: var(--font-serif); font-weight:700; letter-spacing:.36em; font-size: clamp(20px, 3vw, 30px); text-transform:uppercase; }
.footer__tag{ font-family: var(--font-tagline); font-size: clamp(1.3rem, 2.4vw, 2rem); color:#fff; }

/* ===================== LIGHTBOX ===================== */
.lightbox{
  position: fixed; inset:0; z-index: 80; display:none;
  align-items:center; justify-content:center; padding: 2.2vw;
  background: rgba(2,3,6,0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity:0; transition: opacity .4s ease;
}
.lightbox.open{ display:flex; opacity:1; }
.lightbox__inner{ position:relative; width:min(96vw, calc((92vh - 60px) * 16 / 9)); transform: scale(.96); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.lightbox.open .lightbox__inner{ transform: scale(1); }
.lightbox__inner img{ width:100%; border-radius:10px; box-shadow: 0 50px 120px -40px rgba(0,0,0,.9); }
.lightbox__video{ position:relative; width:100%; padding-top:56.25%; border-radius:10px; overflow:hidden; box-shadow: 0 50px 120px -40px rgba(0,0,0,.9); }
.lightbox__video:empty{ display:none; padding-top:0; }
.lightbox__video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lightbox__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:18px; }
.lightbox__meta h3{ margin:0; font-size: 1.3rem; font-weight:700; letter-spacing:-.01em; }
.lightbox__meta .s{ font-size:1.2rem; color: var(--muted); }
.lightbox__meta .note{ font-size:12px; letter-spacing:.26em; text-transform:uppercase; color: var(--muted-dim); }
.lightbox__close{
  position:absolute; top:-46px; right:0; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background: rgba(255,255,255,.05); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: background .3s ease, transform .3s ease;
}
.lightbox__close:hover{ background: rgba(255,255,255,.14); transform: rotate(90deg); }

/* reveal helper */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 720px){
  .bgflow{
    background:
      linear-gradient(180deg, rgba(4,6,10,.30) 0%, rgba(4,6,10,.12) 40%, rgba(4,6,10,.34) 100%),
      url("assets/bg-hero-photo.jpg") center/cover no-repeat;
  }
  .hero::before{
    transform: scale(1);
    background-position: center;
  }
  .nav__links{ gap: 18px; }
  .nav__links a{ font-size:13px; }
  .hero__wordmark{ letter-spacing:.3em; text-indent:.3em; }
  .form{ gap: 14px; }
  .field input, .field textarea{ padding: 14px 16px; }
  .field textarea{ min-height: 140px; }
  .founders{ grid-template-columns: 1fr; max-width: 360px; gap: 56px; }
  .bts{ grid-template-columns: repeat(2,1fr); }
  .footer{ flex-direction:column; align-items:flex-start; gap: 30px; }
}