
:root{--bg:#08070A;--panel:#0E0D10;--ink:#EFE9DD;--mut:#8E8676;--gold:#C9A86A;--line:#242028;
--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:300 17px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
/* ambient dot field — sits behind everything, lifts around the pointer */
#dotbg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none}
@media print{#dotbg{display:none}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;margin:0}
.eyebrow{font:400 10px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
.mut{color:var(--mut)}
.wrap{width:min(1240px,92vw);margin-inline:auto}
/* everything with a photo sits inside the content column, never edge to edge */
.hero,.shero,.band{width:min(1240px,92vw);margin-inline:auto}
@media(max-width:959px){.hero,.shero,.band{width:100%}}
.narrow{width:min(760px,92vw);margin-inline:auto}
/* header */
header{position:sticky;top:0;z-index:60;background:rgba(8,7,10,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:19px 0}
.brand{font:300 20px/1 var(--serif);letter-spacing:.46em;text-transform:uppercase;white-space:nowrap}
.brand small{display:block;font:300 9px/1 var(--sans);letter-spacing:.52em;margin-top:7px;color:var(--mut)}
nav{display:flex;gap:26px}
nav a{font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent}
nav a:hover,nav a:focus-visible,nav a[aria-current]{color:var(--gold);border-color:var(--gold)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);padding:10px 12px;font:400 10px/1 var(--sans);letter-spacing:.24em}
.cta{font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;border:1px solid var(--ink);padding:15px 26px;display:inline-block}
.cta:hover{background:var(--ink);color:var(--bg)}
.cta.gold{border-color:var(--gold);color:var(--gold)}
.cta.gold:hover{background:var(--gold);color:var(--bg)}
/* hero */
.hero{position:relative;isolation:isolate;height:min(72vh,620px);min-height:0;display:flex;align-items:flex-end;padding:0 clamp(30px,3.6vw,60px) clamp(34px,4.4vw,58px)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--hp,26%);z-index:-2}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(180deg,rgba(8,7,10,.72) 0%,rgba(8,7,10,.28) 38%,rgba(8,7,10,.94) 100%)}
.hero h1{font-size:clamp(40px,7vw,96px);line-height:1.02;text-transform:uppercase;letter-spacing:.06em;margin:18px 0 22px}
.hero p.lede{max-width:44ch;color:#CFC7B7;margin-bottom:30px}
/* generic blocks */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,34px);padding:clamp(56px,8vw,110px) 0}
.three figure{margin:0}
.three img{width:100%;aspect-ratio:4/5;object-fit:cover}
.three h3{font-size:clamp(20px,2vw,26px);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.12em}
.three p{color:var(--mut);font-size:15px;margin:0 0 12px}
.three a{font:400 10px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
h2{font-size:clamp(30px,4vw,58px);line-height:1.05;margin-bottom:20px}
.lede{max-width:46ch;color:#C6BEAF}
/* story cards */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);padding-bottom:clamp(50px,7vw,90px);align-items:start}
.card{display:block;position:relative;overflow:hidden;transition:transform .45s ease}
.card:hover{transform:translateY(-3px)}
.card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:filter .5s ease}
.card:hover img{filter:brightness(1.06)}
.card .cap{position:absolute;inset:auto 0 0;padding:20px;background:linear-gradient(0deg,rgba(8,7,10,.86),rgba(8,7,10,0));}
.card .cap b{display:block;font:400 20px/1.2 var(--serif);letter-spacing:.06em}
.card .cap span{font:400 9px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.feature-card{grid-column:span 2;grid-row:span 2}
.feature-card{align-self:start}
.feature-card img{aspect-ratio:4/5}
.feature-card .cap b{font-size:clamp(24px,2.6vw,34px)}
/* film */
.film{padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.filmhead{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.player{position:relative;aspect-ratio:3840/1632;background:#000;cursor:pointer;overflow:hidden}
.player img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:.62}
.player:after{content:"▶  PLAY FILM";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:400 11px/1 var(--sans);letter-spacing:.42em}
.player.playing:after{display:none}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:28px}
.strip div{padding:18px 0;border-right:1px solid var(--line)}
.strip div:last-child{border-right:0}
.strip b{display:block;font:400 15px/1.4 var(--serif);letter-spacing:.06em}
.strip span{font:400 9px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
/* feature split */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center;padding:clamp(56px,8vw,110px) 0}
.feature img{width:100%;aspect-ratio:3/4;object-fit:cover}
/* band */
.band{position:relative;isolation:isolate;text-align:center;padding:clamp(80px,13vw,170px) 0}
/* two bands back to back need breathing room, not a seam */
.band + .band,.band + .film,.film + .band{margin-top:clamp(52px,7.5vw,112px)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2}
.band:after{content:"";position:absolute;inset:0;background:rgba(8,7,10,.68);z-index:-1}
.band h2{font-size:clamp(32px,5.4vw,70px);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.band p{color:#CFC7B7;max-width:50ch;margin:0 auto 28px}
/* story page */
.shero{position:relative;isolation:isolate;height:min(78vh,700px);min-height:0;display:flex;align-items:flex-end;padding-bottom:clamp(32px,5vw,60px)}
.shero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--shp,18%);z-index:-2}
.shero:after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(180deg,rgba(8,7,10,.55),rgba(8,7,10,.15) 40%,rgba(8,7,10,.92))}
.shero h1{font-size:clamp(34px,5.4vw,74px);line-height:1.03;text-transform:uppercase;letter-spacing:.06em;margin:14px 0 10px}
.shero .meta{font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#BDB4A4}
/* wide screens: photo gets its own column at ~1:1 pixel size (sharp, and almost the whole frame survives) */
@media(min-width:960px){
.shero img{left:auto;right:0;width:48%;height:100%;object-position:50% var(--shp,12%)}
.shero:after{background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 43%,rgba(8,7,10,.55) 58%,rgba(8,7,10,.10) 100%),linear-gradient(180deg,rgba(8,7,10,.30),rgba(8,7,10,0) 35%,rgba(8,7,10,.88))}
.shero .wrap{width:auto;margin:0;max-width:52%;padding-left:clamp(30px,3.6vw,60px);padding-right:clamp(20px,2.6vw,36px)}
}
.intro{padding:clamp(44px,6vw,80px) 0 clamp(20px,3vw,36px)}
.intro p{font-size:19px;line-height:1.85;color:#CFC7B7}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,16px);padding-bottom:clamp(40px,6vw,80px)}
.gallery figure{margin:0;cursor:zoom-in;overflow:hidden;background:#0d0c0f}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;transition:transform .6s ease,opacity .3s}
.gallery figure:hover img{transform:scale(1.02);opacity:.94}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}
.gallery .wide img{height:auto;object-fit:contain}
.next{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid var(--line);padding:34px 0;flex-wrap:wrap}
.next a{font:400 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);padding:clamp(30px,4vw,50px) 0 clamp(50px,7vw,90px)}
.plan{border:1px solid var(--line);padding:30px 26px;background:var(--panel)}
.plan h3{font-size:24px;letter-spacing:.06em;margin-bottom:6px}
.plan .price{font:400 30px/1.2 var(--serif);color:var(--gold);margin:10px 0 18px}
.plan ul{margin:0;padding-left:16px;color:#C6BEAF;font-size:15px;line-height:1.9}
.plan li{margin:2px 0}
/* faq */
.faq{border-top:1px solid var(--line);padding-bottom:clamp(50px,7vw,90px)}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font:400 21px/1.4 var(--serif);letter-spacing:.03em;list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";float:right;color:var(--gold);font-size:22px;line-height:1}
details[open] summary:after{content:"–"}
details p{color:#B9B1A2;margin:14px 0 0;max-width:70ch}
/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);padding:clamp(40px,6vw,90px) 0}
.field{display:block;margin-bottom:18px}
.field span{display:block;font:400 9px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.field input,.field select,.field textarea{color-scheme:dark;width:100%;background:#0f0d12;border:1px solid var(--line);color:var(--ink);
 font:300 16px/1.5 var(--sans);padding:13px 14px;border-radius:0}
.field input:focus,.field textarea:focus,.field select:focus{outline:1px solid var(--gold);border-color:var(--gold)}
textarea{min-height:130px;resize:vertical}
/* the open dropdown list inherits the page, not the OS default */
.field select option{background:#141116;color:#EDE6D8}
.field select optgroup{background:#141116;color:#EDE6D8}
.field select{appearance:none;-webkit-appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,#B08D57 50%),linear-gradient(135deg,#B08D57 50%,transparent 50%);
 background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
 background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
/* footer */
footer{background:#050406;padding:clamp(48px,7vw,84px) 0 30px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:44px}
footer h4{font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mut);margin:0 0 14px}
footer ul{margin:0;padding:0}
footer li{list-style:none;margin:9px 0;color:#A79E8E}
footer li a{overflow-wrap:anywhere}
footer a:hover{color:var(--gold)}
.fbot{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
 font-size:11px;color:#6E675C;letter-spacing:.1em}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(4,3,5,.96);display:none;align-items:center;justify-content:center;padding:3vh 3vw}
.lb[hidden]{display:none}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:94vh;object-fit:contain}
.lb button{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer;line-height:1}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:34px;color:#fff;background:none;border:0;cursor:pointer;padding:0 18px}
.lb .prev{left:0}.lb .next{right:0}

/* album-style stories (source files are album spreads, not single frames) */
.album-hero{padding:clamp(70px,10vw,120px) 0 clamp(40px,6vw,70px);text-align:center;border-bottom:1px solid var(--line)}
.album-hero h1{font-size:clamp(34px,5.4vw,74px);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 10px}
.album-hero .meta{font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#BDB4A4}
.cover{margin:clamp(28px,4vw,50px) auto 0;max-width:780px;border:1px solid #2a2630;box-shadow:0 30px 80px rgba(0,0,0,.65)}
.cover img{width:100%}
.cover-note{font:400 9px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mut);margin-top:20px}
.spreads{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.6vw,22px);padding-bottom:clamp(40px,6vw,80px)}
.spreads figure{margin:0;background:#0d0c0f}
.spreads img{width:100%;display:block}
.card.album img{aspect-ratio:4/5}
/* text tiles that hold an empty gallery slot without inventing a wedding */
.card.note{aspect-ratio:4/5;background:linear-gradient(158deg,#171219 0%,#0b0910 100%);
 border:1px solid var(--line);display:flex;align-items:flex-end}
.card.note .notebody{padding:clamp(20px,2.2vw,30px)}
.card.note .eyebrow{margin:0 0 12px}
.card.note h3{font:400 clamp(22px,2.1vw,30px)/1.15 var(--serif);letter-spacing:.02em;margin:0 0 18px}
.card.note a{font:400 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
 border-bottom:1px solid rgba(176,141,87,.45);padding-bottom:6px;transition:.3s}
.card.note a:hover{color:#E8D9BC;border-color:#E8D9BC}
.card.album .cap{padding:16px}


.filmcard{margin-bottom:clamp(22px,3vw,36px)}
.filmgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,34px)}
.filmgrid .filmcard.wide{grid-column:1/-1}
.filmmeta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:12px;flex-wrap:wrap}
.filmmeta b{font:400 18px/1.3 var(--serif);letter-spacing:.04em;font-weight:400}
.filmmeta span{font:400 9px/1 var(--sans);letter-spacing:.26em;color:var(--mut)}
.filmstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,20px);margin-top:26px}
.filmstrip a{display:block}
.filmstrip a{display:block;min-width:0}
.filmstrip .thumb{display:block;overflow:hidden;position:relative}
.filmstrip .thumb.ar169{aspect-ratio:16/9}
.filmstrip .thumb.arcin{aspect-ratio:3840/1632}
.filmstrip img{display:block;width:100%;height:100%;object-fit:cover;opacity:.75;transition:.3s}
.filmstrip a:hover img{opacity:1}
.filmstrip span{display:block;margin-top:8px;font:400 12px/1.4 var(--sans);letter-spacing:.06em;color:#BDB4A4}
.player.small{aspect-ratio:3840/1632}


.tc-wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
 padding:clamp(16px,2.6vw,30px);text-align:left}
.tc-play{font:400 9px/1 var(--sans);letter-spacing:.34em;color:var(--gold)}
.tc-title{display:block;font:300 clamp(18px,2.2vw,30px)/1.2 var(--serif);letter-spacing:.05em;color:#F2EBDD}
.tc-sub{display:block;font:400 9px/1 var(--sans);letter-spacing:.3em;color:var(--mut);margin-top:8px}
.player.small .tc-wrap{padding:14px 16px}
.player.small .tc-title{font-size:16px}
.player.small .tc-sub{font-size:8px;margin-top:5px}


.pricetables{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
 border-top:1px solid var(--line);padding-top:clamp(34px,5vw,58px)}
.pricerows{list-style:none;margin:0;padding:0}
.pricerows li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
 padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.pricerows .pl{color:#E4DCCC;font-size:15px}
.pricerows .pl em{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;
 color:var(--mut);margin-top:4px}
.pricerows .pv{font:400 16px/1 var(--serif);letter-spacing:.05em;color:var(--gold);white-space:nowrap}

/* responsive */
@media(max-width:1000px){
  .three,.stories,.plans,.gallery,.spreads,.filmgrid,.pricetables{grid-template-columns:1fr 1fr}
  .feature{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .feature-card{grid-column:span 2;grid-row:auto}
}
@media(max-width:820px){
  nav{position:fixed;inset:0 0 auto;top:77px;background:var(--bg);display:none;flex-direction:column;padding:20px;border-bottom:1px solid var(--line)}
  header[data-open="true"] nav{display:flex}
  header[data-open="true"] nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:block;order:2}.bar>.cta{display:none}
  .hero{min-height:0}
  .strip{grid-template-columns:1fr 1fr}
  .player{aspect-ratio:3840/1632}
  .fgrid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .three,.stories,.plans,.gallery,.spreads,.filmgrid,.filmstrip,.pricetables{grid-template-columns:1fr}
  .feature-card{grid-column:span 1}
  .strip div{border-right:0;border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* --- scroll reveal (fade-up, matches the live site) --- */
.js .fade-up{opacity:0;transform:translateY(26px);
  transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1)}
.js .fade-up.visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.js .fade-up{opacity:1!important;transform:none!important;transition:none!important}}
@media print{.js .fade-up{opacity:1!important;transform:none!important}}

