:root{
  --navy:#0A1F3D; --green:#1B4332; --sage:#A8B5A0; --cream:#F2EFE9; --white:#FFFFFF;
  --bg:var(--cream); --text:var(--green); --muted:#4d6b5c; --line:rgba(27,67,50,.2);
  --font:"Special Elite","Courier New",Courier,monospace;
  --wrap:1180px; --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px}
a:hover{color:var(--navy)}
h1,h2,h3{font-weight:400;line-height:1.25;letter-spacing:.01em;margin:0 0 .6em}
h1{font-size:clamp(2rem,4.5vw,3.4rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:780px}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:var(--white);padding:.5em 1em;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px dashed var(--navy);outline-offset:3px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:18px var(--gutter);background:var(--green);color:var(--cream)}
.site-header.overlay{position:fixed;left:0;right:0;background:transparent;transition:background .3s}
.site-header.overlay.scrolled{background:var(--green)}
.brand{font-size:1.25rem;text-decoration:none;letter-spacing:.06em;text-transform:uppercase}
.site-header nav ul{display:flex;gap:clamp(14px,2.5vw,32px);list-style:none;margin:0;padding:0}
.site-header nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:.9rem;opacity:.85}
.site-header nav a:hover,.site-header nav a[aria-current]{opacity:1;color:var(--sage)}
.menu-btn{display:none;background:none;border:0;width:36px;height:30px;padding:6px;cursor:pointer}
.menu-btn span{display:block;height:2px;background:var(--cream);margin:6px 0;transition:transform .25s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:720px){
  .menu-btn{display:block}
  .site-header nav{position:absolute;top:100%;left:0;right:0;background:var(--green);max-height:0;overflow:hidden;transition:max-height .3s}
  .site-header nav.open{max-height:80vh;box-shadow:0 12px 24px rgba(0,0,0,.2)}
  .site-header nav ul{flex-direction:column;padding:4px var(--gutter) 20px;gap:0}
  .site-header nav a{display:block;padding:12px 0;font-size:1rem;border-bottom:1px solid rgba(242,239,233,.12)}
  .site-header.overlay.menu-open{background:var(--green)}
}
/* Hero */
.hero{position:relative;height:100vh;height:100svh;min-height:480px;background:var(--navy);overflow:hidden;color:var(--white)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,61,.45) 0%,rgba(10,31,61,.1) 40%,rgba(27,67,50,.65) 100%)}
.hero-text{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(60px,12vh,120px);max-width:900px}
.hero-text h1{margin:0;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-toggle{position:absolute;right:var(--gutter);bottom:24px;background:rgba(0,0,0,.35);color:var(--white);border:1px solid rgba(255,255,255,.5);font-family:var(--font);padding:.3em .9em;cursor:pointer}
.scroll-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);text-decoration:none;font-size:1.6rem;animation:bob 2s infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none}html{scroll-behavior:auto}}

/* Sections */
.intro{padding:clamp(64px,10vw,120px) var(--gutter) 40px;max-width:860px}
.intro p{font-size:1.15rem}
.block{padding:48px var(--gutter);border-top:1px solid var(--line)}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:24px}
.block-head h2{margin:0}
.more{text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;text-decoration:none;border-bottom:1px solid currentColor}
.grid{display:grid;gap:clamp(14px,2vw,28px)}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card p{margin-top:14px}
.placeholder-note{color:var(--muted)}
.page{padding:clamp(40px,7vw,80px) 0 40px}
.page-title{margin-bottom:.8em}
.lead{font-size:1.3rem}

/* Image slots */
.slot{position:relative;margin:0;background:var(--sage);overflow:hidden}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.slot-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1em;text-align:center;font-size:.8rem;color:var(--green);opacity:.8;word-break:break-all}
.slot:has(img) .slot-label{opacity:0}
.r16x9{aspect-ratio:16/9}.r4x5{aspect-ratio:4/5}.r3x2{aspect-ratio:3/2}
.video-slot{position:relative;background:var(--navy);color:var(--sage);margin:0 0 1.4em}
.video-slot .slot-label{color:var(--sage)}
.video-slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Film */
.film-tile{text-decoration:none}
.film-tile h3{margin-top:12px}
.film-tile .slot{transition:transform .3s}
.film-tile:hover .slot{transform:scale(1.015)}
.film-detail{padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.kicker{text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;color:var(--muted);margin-bottom:.4em}

/* Photography */
.toc{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:24px}
.toc a{font-size:.95rem}
.project{padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:70px}
.gallery .slot{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(10,31,61,.95);display:flex;align-items:center;justify-content:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:90vh;max-width:100%;object-fit:contain}
.lb-close{position:absolute;top:12px;right:18px;background:none;border:0;color:var(--white);font-size:2.4rem;cursor:pointer}

/* About */
.about{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:720px){.about{grid-template-columns:1fr}}

/* Forms & buttons */
.contact-form{display:grid;gap:18px;margin-top:28px}
fieldset{border:0;padding:0;margin:0}
legend{padding:0;margin-bottom:8px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
label{display:grid;gap:6px;font-size:.95rem}
.req{color:var(--muted);font-size:.8rem}
input[type=text],input[type=email],textarea{font:inherit;color:var(--text);background:var(--white);border:1px solid var(--sage);padding:.7em .8em;width:100%}
input:focus,textarea:focus{border-color:var(--green);outline:none}
.check{display:flex;gap:10px;align-items:center}
.hp{position:absolute;left:-9999px}
.small{font-size:.85rem;color:var(--muted)}
.btn{font-family:var(--font);font-size:1rem;background:var(--green);color:var(--cream);border:1px solid var(--green);padding:.7em 1.6em;cursor:pointer;justify-self:start;letter-spacing:.08em;text-transform:uppercase}
.btn:hover{background:var(--navy);border-color:var(--navy)}
.btn.ghost{background:transparent;color:var(--cream);border-color:var(--sage)}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Legal */
.legal article{padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.legal h3{margin-top:1.6em}
.legal ul{padding-left:1.2em}

/* Footer */
.site-footer{background:var(--green);color:var(--cream);padding:40px var(--gutter);display:grid;gap:14px;justify-items:center;text-align:center;font-size:.9rem;margin-top:40px}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.site-footer a{text-decoration:none}
.site-footer a:hover,.site-footer .link-btn:hover{color:var(--sage)}
.site-footer .link-btn{text-decoration:none}
.copy{margin:0;opacity:.75}

/* Cookie banner */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:720px;margin:0 auto;background:var(--navy);color:var(--cream);padding:20px 22px;box-shadow:0 10px 40px rgba(0,0,0,.3);font-size:.9rem}
.cookie-banner[hidden]{display:none}
.cookie-banner a{color:var(--sage)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.cookie-banner .btn{font-size:.85rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.film-detail h2 a{text-decoration:none;border-bottom:1px solid var(--sage)}
.film-detail h2 a:hover{border-color:var(--navy)}

/* ---------- Responsive refinements ---------- */
.menu-btn{min-width:44px;min-height:44px}
.site-header{padding-top:max(14px,env(safe-area-inset-top));padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.cookie-banner{bottom:max(16px,env(safe-area-inset-bottom))}
@media (max-width:1024px){
  .grid.three{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{font-size:16px;line-height:1.65}
  .brand{font-size:1.05rem;letter-spacing:.04em}
  .hero-text{bottom:84px}
  .hero-text h1{font-size:clamp(1.7rem,8vw,2.4rem)}
  .hero-toggle{bottom:16px;font-size:.8rem}
  .scroll-cue{bottom:12px}
  .intro{padding-top:56px}
  .intro p{font-size:1.05rem}
  .block{padding:36px var(--gutter)}
  .film-detail,.project{padding:40px 0}
  .site-footer{padding:32px var(--gutter);gap:18px}
  .site-footer nav{gap:12px 20px}
  .site-footer a,.site-footer .link-btn{padding:4px 0}
  .cookie-banner{left:10px;right:10px;padding:14px 16px;font-size:.78rem;line-height:1.5}
  .cookie-banner p{margin-bottom:10px}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cookie-banner .btn{font-size:.72rem;padding:.75em .5em;justify-self:stretch;letter-spacing:.04em}
  .btn{justify-self:stretch;text-align:center}
}
@media (max-width:480px){
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:repeat(2,1fr);gap:10px}
  .slot-label{font-size:.65rem}
  .toc{gap:8px 16px}
  .legal h3{font-size:1.05rem}
}
@media (max-width:340px){
  .grid.three{grid-template-columns:1fr}
}
@media (max-height:500px) and (orientation:landscape){
  .hero{min-height:100vh;min-height:100svh}
  .hero-text{bottom:56px}
  .hero-text h1{font-size:1.6rem}
}
@media (min-width:1600px){
  :root{--wrap:1320px}
  body{font-size:18px}
}
@media (max-width:720px){
  .cookie-banner{left:0;right:0;bottom:0;max-width:none;padding:12px 16px max(12px,env(safe-area-inset-bottom))}
}