/* MERIDIAN - split dark-to-light, Libre Caslon+Karla, editorial, vermilion */
:root{--paper:#F5F1E9;--dark:#171310;--ink:#1B160F;--mut:#6E665A;--acc:#E14E2B;--line:#DDD5C6;--lined:rgba(245,241,233,.16);--ease:cubic-bezier(.19,1,.22,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 1.03rem/1.75 Karla,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1150px,92vw);margin:0 auto}
h1,h2,h3{font-family:"Libre Caslon Text",Georgia,serif;font-weight:400;line-height:1.12;letter-spacing:-.005em}
h1{font-size:clamp(2.6rem,5.8vw,4.9rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:1.2rem}
h3{font-size:1.3rem;margin-bottom:.35rem}
h1 em,h2 em{font-style:italic}
.acc{color:var(--acc)}
.lab{font:700 .7rem/1.4 Karla;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin-bottom:1.3rem}
.lead{font-size:1.15rem;max-width:34em}
.mut{color:var(--mut)}
.note{color:var(--mut);font-style:italic;margin-top:2rem}
.note a{color:var(--acc);text-decoration:underline}
.btn{display:inline-block;border:1px solid var(--ink);color:var(--ink);padding:1rem 2rem;font:700 .72rem/1 Karla;letter-spacing:.2em;text-transform:uppercase;transition:.3s;position:relative}
.btn:hover{background:var(--acc);border-color:var(--acc);color:#FFF}
.btn.solid{background:var(--acc);border-color:var(--acc);color:#FFF}
.btn.solid:hover{background:var(--ink);border-color:var(--ink)}
.btn.small{padding:.6rem 1.2rem}
.btn.line-light{border-color:rgba(245,241,233,.5);color:var(--paper)}
.row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
.dark-panel{background:var(--dark);color:var(--paper)}
.dark-panel .lab{color:var(--acc)}
.dark-panel .lead{color:rgba(245,241,233,.85)}
.dark-panel .btn{border-color:rgba(245,241,233,.5);color:var(--paper)}
.dark-panel .btn:hover{background:var(--acc);border-color:var(--acc);color:#FFF}
/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(23,19,16,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--lined)}
.nav,body .nav{color:var(--paper)}
.nv{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font-family:"Libre Caslon Text",serif;font-size:1.2rem}
.links{display:flex;gap:1.6rem}
.links a{font:500 .78rem/1 Karla;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,233,.6)}
.links a.on,.links a:hover{color:var(--acc)}
.burger{display:none;background:none;border:0;width:34px;height:24px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--paper);margin:6px 0}
.drawer{display:none}
/* hero */
.hero{position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;align-items:end;min-height:88svh;padding:7rem 0 0;position:relative}
.hero-txt{padding-bottom:5rem}
.hero-txt h1{margin-bottom:1.4rem}
.hero-fig{margin:0}
.hero-fig img{width:100%;height:60vh;object-fit:cover;border:1px solid var(--lined);transform:translateY(3rem)}
.band{position:relative;overflow:hidden}
.band .zoom{margin:0;position:absolute;inset:0}
.band img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(23,19,16,.25),rgba(23,19,16,.65))}
.band-txt{position:relative;z-index:2;text-align:center;font-family:"Libre Caslon Text",serif;font-size:clamp(1.7rem,3.4vw,2.8rem);font-style:italic;padding:16svh 6vw}
/* sections */
section{padding:6rem 0}
section.alt{background:#EDE7DA}
.stats{padding:0}
.stats-in{display:grid;grid-template-columns:repeat(3,1fr);padding:3.4rem 0}
.stat{padding:0 2.2rem;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.num{font-family:"Libre Caslon Text",serif;font-size:clamp(2.6rem,4.4vw,3.9rem);line-height:1}
.num.acc{color:var(--acc)}
.cap{color:var(--mut);margin-top:.6rem;max-width:15em}
.stats.alt .stats-in{padding:2.6rem 0}
/* editorial split */
.split{padding:0}
.split-in{display:grid;grid-template-columns:280px 1fr;gap:3rem;padding:6rem 0}
.split-lab{position:sticky;top:100px;align-self:start}
section .split-lab{padding-top:.4rem}
section > .wrap .erows,.wrap > h2{margin-top:0}
.wrap .lead{margin-top:1rem}
.dropcap::first-letter{font-family:"Libre Caslon Text",serif;font-size:3.4em;float:left;line-height:.82;padding-right:.12em;color:var(--acc)}
/* editorial rows */
.erows{display:grid;gap:0;margin-top:2rem}
.erow{display:grid;grid-template-columns:120px 1fr;gap:1.6rem;padding:1.5rem 0;border-top:1px solid var(--line);align-items:start}
.erow .k{font:700 .7rem/1.6 Karla;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.erow p{color:var(--mut);max-width:44em}
.dark-panel .erow{border-top-color:var(--lined)}
.dark-panel .erow p{color:rgba(245,241,233,.7)}
/* pages */
.phead{padding:8.5rem 0 5rem}
.phead h1{max-width:13em}
/* work */
.case-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;margin-top:1.6rem}
.case-figs{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.case-figs figure{margin:0;overflow:hidden;position:relative}
.case-figs img{aspect-ratio:4/3;object-fit:cover;width:100%;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.case-figs figure.in img{clip-path:inset(0)}
.case-grid .erows{margin-top:0}
/* faq */
.faq{border-top:1px solid var(--line);padding:1.4rem 0}
.faq summary{font-family:"Libre Caslon Text",serif;font-size:1.25rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";color:var(--acc)}
.faq[open] summary::after{content:"–"}
.faq p{color:var(--mut);margin-top:.8rem;max-width:46em}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem}
.kv{color:var(--mut);margin-bottom:.3rem}
.kv b{font-family:"Libre Caslon Text",serif;color:var(--ink);display:block;font-size:1.05rem}
.cform form{display:grid;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font:700 .68rem/1 Karla;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.field input,.field textarea,.field select{background:transparent;border:0;border-bottom:1px solid var(--ink);font:400 1rem Karla;color:var(--ink);padding:.55rem 0}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--acc);border-bottom-width:2px}
.fnote{color:var(--mut);font-size:.9rem}
#form-note.ok{color:var(--acc)}
/* footer */
footer{border-top:1px solid var(--line);padding:3.2rem 0 2.2rem}
.fcols{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:2rem}
.fbrand{font-family:"Libre Caslon Text",serif;font-size:1.35rem}
.fhead{font:700 .68rem/1 Karla;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);margin-bottom:.8rem}
.flinks a{display:block;color:var(--mut);margin-bottom:.35rem}
.flinks a:hover{color:var(--acc)}
.flegal{margin-top:2.4rem;color:var(--mut);font-size:.85rem}
/* motion: mask reveals + parallax */
.rise,.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.d2{transition-delay:.12s}.d3{transition-delay:.24s}.d4{transition-delay:.36s}
.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise,.reveal{transition:none;opacity:1;transform:none}.case-figs img{clip-path:inset(0)}}
/* responsive */
@media(max-width:900px){
 .hero-in{grid-template-columns:1fr;min-height:0;padding-top:2rem}
 .hero-fig img{height:44svh;transform:translateY(2.4rem)}
 .split-in{grid-template-columns:1fr;padding:3.6rem 0}
 .split-lab{position:static}
 .stats-in{grid-template-columns:1fr}
 .stat{border-left:0;border-top:1px solid var(--line);padding:1.1rem 0}
 .stat:first-child{border-top:0}
 .case-grid,.contact-grid{grid-template-columns:1fr}
 .links,.nav .btn{display:none}
 .burger{display:block}
 .drawer{display:none;position:absolute;top:62px;left:0;right:0;background:var(--dark);border-bottom:1px solid var(--lined);padding:1rem 5vw}
 .drawer.open{display:block}
 .drawer a{display:block;padding:.85rem 0;border-bottom:1px solid var(--lined);color:var(--paper)}
}
@media(max-width:680px){section{padding:4.2rem 0}.phead{padding:5.5rem 0 3.2rem}}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media(max-width:900px){.fcols{grid-template-columns:1fr}.flinks a,.flinks p{word-break:break-word}}
body{overflow-x:clip}
