/* =====================================================================
   LouwMedia — shared cinematic styles for the standalone pages
   (werk / over / contact). Matches the immersive experience aesthetic.
   ===================================================================== */
:root{
  --ink:#060606; --ink2:#0c0b0a; --bone:#efe9df; --dim:#8a857c; --amber:#e8a24c; --line:rgba(239,233,223,.14);
  --mono:"Space Mono",ui-monospace,monospace; --display:"Bodoni Moda",Georgia,serif;
  --pad:clamp(1.2rem,4vw,4rem); --maxw:1500px;
}
*{ margin:0; padding:0; box-sizing:border-box }
body{ background:var(--ink); color:var(--bone); font-family:var(--mono); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5 }
::selection{ background:var(--amber); color:#000 }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0 }
img{ display:block; max-width:100% }

/* Lenis reset */
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }
.lenis.lenis-stopped{ overflow:hidden }

/* overlays */
.grain{ position:fixed; inset:-50%; width:200%; height:200%; z-index:900; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:gr 6s steps(6) infinite }
@keyframes gr{0%{transform:translate(0,0)}50%{transform:translate(-3%,2%)}100%{transform:translate(2%,-3%)}}
.vig{ position:fixed; inset:0; z-index:800; pointer-events:none; background:radial-gradient(130% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.6) 100%) }

/* nav */
.nav{ position:fixed; top:0; left:0; width:100%; z-index:700; display:flex; align-items:center; justify-content:space-between; padding:1.4rem var(--pad); mix-blend-mode:difference }
.nav__logo img{ height:18px; width:auto }
.nav__links{ display:flex; gap:1.8rem; align-items:center }
.nav__links a{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase }
.nav__links a:hover, .nav__links a.on{ color:var(--amber) }

/* typography */
.eyebrow{ font-family:var(--mono); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:.8rem; margin-bottom:1.4rem }
.eyebrow i{ width:30px; height:1px; background:var(--amber); opacity:.7 }
.eyebrow--c{ justify-content:center }
.display{ font-family:var(--display); font-weight:500; line-height:.95; letter-spacing:-.01em }
.display em{ font-style:italic; color:var(--amber) }

/* buttons */
.btn{ display:inline-flex; font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; padding:1rem 2.1rem; border-radius:100px; border:1px solid var(--line); transition:.3s; cursor:pointer }
.btn--p{ background:var(--amber); color:#000; border-color:var(--amber) }
.btn--p:hover{ background:var(--bone); border-color:var(--bone) }
.btn--g:hover{ border-color:var(--bone) }

/* hero */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden }
.hero__bg{ position:absolute; inset:0; z-index:0 }
.hero__bg img,.hero__bg video{ width:100%; height:100%; object-fit:cover; opacity:.5 }
.hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--ink) 4%, rgba(6,6,6,.3) 50%, rgba(6,6,6,.6) 100%) }
.hero__in{ position:relative; z-index:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(3rem,9vh,7rem) }
.hero__meta{ font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin-bottom:1.4rem }
.hero__title{ font-size:clamp(2.8rem,8vw,8rem) }
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.04em }
.hero__title .ln>span{ display:block; transform:translateY(110%) }
.hero__lead{ font-family:var(--mono); font-size:.92rem; color:var(--bone); line-height:1.6; max-width:48ch; margin:1.6rem 0 2rem }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap }

/* sections */
.sec{ max-width:var(--maxw); margin:0 auto; padding:clamp(4.5rem,11vh,9rem) var(--pad); position:relative }
.sec__head{ position:relative }
.sec__head .display{ font-size:clamp(2rem,4.6vw,4rem); margin-top:.5rem }
.sec__all{ position:absolute; right:0; bottom:.4rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim) }
.sec__all:hover{ color:var(--bone) }
.reveal{ opacity:0; transform:translateY(34px) }

/* statement / closing */
.statement{ max-width:1100px; margin:0 auto; padding:clamp(6rem,15vh,11rem) var(--pad); text-align:center }
.statement .display{ font-size:clamp(1.9rem,4.4vw,3.6rem); max-width:21ch; margin:1.3rem auto 1.6rem; line-height:1.06 }
.statement__sub{ color:var(--dim); max-width:60ch; margin:0 auto; line-height:1.66; font-size:.92rem }

/* quad (vier richtingen/rollen) */
.quad{ display:grid; grid-template-columns:1fr 1fr; margin-top:2.5rem }
.quad__i{ padding:clamp(1.6rem,2.6vw,2.4rem) 0; border-top:1px solid var(--line) }
.quad__i:nth-child(even){ border-left:1px solid var(--line); padding-left:clamp(1.4rem,3vw,3rem) }
.quad__i:nth-child(odd){ padding-right:clamp(1.4rem,3vw,3rem) }
.quad__no{ font-family:var(--display); color:var(--dim); font-size:.95rem }
.quad__i h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2.3vw,2rem); margin:.4rem 0 .6rem }
.quad__i p{ color:var(--dim); font-size:.82rem; line-height:1.55; max-width:38ch }

/* archive / work grids */
.arch{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.7rem,1.2vw,1.3rem); margin-top:2.5rem }
.arch figure{ overflow:hidden; border-radius:2px }
.arch img{ width:100%; height:100%; object-fit:cover; transition:transform 1s ease }
.arch figure:hover img{ transform:scale(1.04) }
.arch figure:nth-child(1){ grid-column:span 5; aspect-ratio:3/4 }
.arch figure:nth-child(2){ grid-column:span 7; aspect-ratio:16/10 }
.arch figure:nth-child(3){ grid-column:span 4; aspect-ratio:1/1 }
.arch figure:nth-child(4){ grid-column:span 4; aspect-ratio:1/1 }
.arch figure:nth-child(5){ grid-column:span 4; aspect-ratio:1/1 }

.wgrid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.7rem,1.2vw,1.3rem); margin-top:2.5rem }
.wgrid figure{ overflow:hidden; border-radius:2px }
.wgrid img{ width:100%; height:100%; object-fit:cover; transition:transform 1s ease }
.wgrid figure:hover img{ transform:scale(1.03) }
.wgrid figure:nth-child(1){ grid-column:span 7; aspect-ratio:16/10 }
.wgrid figure:nth-child(2){ grid-column:span 5; aspect-ratio:4/5 }
.wgrid figure:nth-child(3){ grid-column:span 4; aspect-ratio:4/5 }
.wgrid figure:nth-child(4){ grid-column:span 8; aspect-ratio:16/9 }
.wgrid figure:nth-child(5){ grid-column:span 6; aspect-ratio:3/2 }
.wgrid figure:nth-child(6){ grid-column:span 6; aspect-ratio:3/2 }
.wgrid figure:nth-child(7){ grid-column:span 5; aspect-ratio:4/5 }
.wgrid figure:nth-child(8){ grid-column:span 7; aspect-ratio:16/10 }

/* featured project */
.featured{ max-width:var(--maxw); margin:0 auto; padding:clamp(2rem,5vh,4rem) var(--pad); display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,5vw,4.5rem); align-items:center }
.featured__media{ aspect-ratio:16/10; overflow:hidden; border-radius:2px }
.featured__media img{ width:100%; height:100%; object-fit:cover }
.featured__cat{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber) }
.featured__title{ font-family:var(--display); font-weight:500; font-size:clamp(1.8rem,3.4vw,3rem); margin:.7rem 0 1rem; line-height:1.02 }
.featured__title em{ font-style:italic; color:var(--amber) }
.featured__body{ color:var(--dim); line-height:1.62; margin-bottom:1.4rem; font-size:.88rem; max-width:44ch }

/* discipline pills */
.wtabs{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(4rem,10vh,7rem); display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.wtabs span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-right:.6rem }
.wtabs a{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line); border-radius:100px; padding:.6rem 1.2rem; color:var(--dim); transition:.3s }
.wtabs a:hover, .wtabs a.on{ background:var(--bone); color:#000; border-color:var(--bone) }

/* steps / notelist */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); margin-top:2.5rem }
.step{ border-top:1px solid var(--line); padding-top:1.5rem }
.step__no{ font-family:var(--display); font-size:clamp(2.2rem,3vw,2.8rem); color:var(--bone); display:block; margin-bottom:.6rem }
.step h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,1.9vw,1.7rem); margin-bottom:.8rem }
.step p{ color:var(--dim); font-size:.84rem; line-height:1.55 }
.notelist{ margin-top:2rem }
.notelist__i{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,5vw,5rem); padding:1.6rem 0; border-top:1px solid var(--line); align-items:start }
.notelist__no{ font-family:var(--display); color:var(--dim); font-size:.95rem; padding-top:.2rem }
.notelist__i p{ color:var(--bone); font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.5; max-width:60ch }

/* about (over) split */
.about{ max-width:var(--maxw); margin:0 auto; padding:clamp(4.5rem,11vh,9rem) var(--pad); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,6rem); align-items:center }
.about__media{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px }
.about__media img{ width:100%; height:100%; object-fit:cover }
.about__head{ font-size:clamp(2rem,5vw,4rem); margin-bottom:1.6rem }
.about__lead{ color:var(--dim); line-height:1.66; font-size:.92rem; max-width:48ch }
.about__sign{ font-family:var(--display); font-style:italic; font-size:1.1rem; color:var(--bone); margin-top:1.5rem }

/* contact direct grid */
.lines{ display:grid; grid-template-columns:1fr 1fr; margin-top:2.5rem }
.lines__i{ padding:clamp(1.6rem,2.6vw,2.4rem) 0; border-top:1px solid var(--line) }
.lines__i:nth-child(even){ border-left:1px solid var(--line); padding-left:clamp(1.4rem,3vw,3rem) }
.lines__i:nth-child(odd){ padding-right:clamp(1.4rem,3vw,3rem) }
.lines__lbl{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim) }
.lines__i h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.2rem,2vw,1.6rem); margin:.4rem 0 .5rem }
.lines__i h3 a:hover{ color:var(--amber) }
.lines__i p{ color:var(--dim); font-size:.78rem; line-height:1.5; max-width:36ch }

/* form */
.cform{ max-width:900px; margin-top:2.5rem }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.2rem }
.cform__f{ display:flex; flex-direction:column; gap:.5rem }
.cform__f--full{ grid-column:1 / -1 }
.cform label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim) }
.cform input,.cform select,.cform textarea{ background:rgba(239,233,223,.03); border:1px solid var(--line); border-radius:2px; color:var(--bone); font-family:var(--mono); font-size:.92rem; padding:.9rem 1rem; width:100%; transition:.3s }
.cform input::placeholder,.cform textarea::placeholder{ color:var(--dim); opacity:.7 }
.cform input:focus,.cform select:focus,.cform textarea:focus{ outline:none; border-color:var(--bone); background:rgba(239,233,223,.055) }
.cform textarea{ min-height:150px; resize:vertical }
.cform select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a857c' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem }
.cform select option{ background:var(--ink2); color:var(--bone) }
.cform__submit{ margin-top:1.6rem; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap }
.cform__note{ color:var(--dim); font-size:.74rem; line-height:1.5; max-width:44ch }

/* quote / closing */
.quote{ max-width:1000px; margin:0 auto; padding:clamp(5rem,13vh,9rem) var(--pad); text-align:center }
.quote__q{ font-family:var(--display); font-weight:500; font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.15 }
.quote__q em{ font-style:italic; color:var(--amber) }
.quote__by{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); margin-top:1.6rem }
.closing{ max-width:var(--maxw); margin:0 auto; padding:clamp(6rem,15vh,11rem) var(--pad); text-align:center }
.closing .display{ font-size:clamp(2.4rem,6.5vw,6rem); margin:1rem 0 1.4rem }
.closing__sub{ color:var(--dim); max-width:50ch; margin:0 auto 1.8rem }

/* cta + footer */
.cta{ position:relative; min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden }
.cta__bg{ position:absolute; inset:0; z-index:0 }
.cta__bg video{ width:100%; height:100%; object-fit:cover; opacity:.4 }
.cta__bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(100% 100% at 50% 50%, rgba(6,6,6,.7), rgba(6,6,6,.95)) }
.cta__in{ position:relative; z-index:1; padding:0 var(--pad) }
.cta__in .display{ font-size:clamp(2.6rem,7vw,6.5rem); margin:1rem 0 1.5rem }
.cta__sub{ color:var(--dim); max-width:46ch; margin:0 auto 2rem }
.footer{ border-top:1px solid var(--line); max-width:var(--maxw); margin:0 auto; padding:2.4rem var(--pad); display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:center }
.footer__b{ font-family:var(--display); font-size:1.2rem } .footer__b em{ font-style:italic; color:var(--amber) }
.footer__nav{ display:flex; gap:1.4rem; flex-wrap:wrap }
.footer a{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim) }
.footer a:hover{ color:var(--bone) }
.footer__legal{ font-size:.7rem; color:var(--dim) }

@media (max-width:820px){
  .quad,.lines{ grid-template-columns:1fr }
  .quad__i:nth-child(even),.lines__i:nth-child(even){ border-left:0; padding-left:0 }
  .quad__i:nth-child(odd),.lines__i:nth-child(odd){ padding-right:0 }
  .steps{ grid-template-columns:1fr }
  .about{ grid-template-columns:1fr } .about__media{ order:-1 }
  .featured{ grid-template-columns:1fr }
  .cform__row{ grid-template-columns:1fr }
  .arch figure:nth-child(n),.wgrid figure:nth-child(n){ grid-column:span 6; aspect-ratio:3/4 }
  .arch figure:nth-child(2),.wgrid figure:nth-child(1),.wgrid figure:nth-child(4){ grid-column:span 12; aspect-ratio:16/9 }
}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none} .grain{display:none} .hero__title .ln>span{transform:none} }

/* form success state */
.cform__sent{ font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2.8vw,2.1rem); color:var(--bone); line-height:1.3; padding:1.4rem 0 }