/* Layout: left-anchored 12-column grid, full-bleed imagery, hairline rules, uppercase micro-labels; the renders carry the color, the page stays stone. */
:root{
  --bg:#ECEAE4; --bg2:#E2DFD7; --fg:#171614; --mute:#6E6A62; --line:rgba(23,22,20,.16); --accent:#7A6A4F; --onimg:#F4F2EC; color-scheme:light;
  --f-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --w-label:118; --w-display:96;
  --gutter:clamp(16px,4vw,56px);
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:7rem;
  --t-xs:.6875rem; --t-sm:.8125rem; --t-base:1rem; --t-md:1.25rem; --t-lg:clamp(1.5rem,2.4vw,2.125rem); --t-xl:clamp(2rem,4.6vw,4.25rem);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-sans);font-size:var(--t-base);line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:300}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:4px}

.label{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-variation-settings:"wdth" var(--w-label);font-weight:500;color:var(--mute)}
.wrap{padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px)}
.rule{border-top:1px solid var(--line)}
.sec{padding-block:var(--s6)}
@media (max-width:720px){.sec{padding-block:var(--s5)}}

/* nav */
.nav{position:fixed;inset-inline:0;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--s3) + env(safe-area-inset-top,0px)) var(--gutter) var(--s3);mix-blend-mode:difference;color:#fff;pointer-events:none}
.nav>*{pointer-events:auto}
.nav .logo img{height:28px;width:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,2.4vw,36px)}
.nav li a{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-variation-settings:"wdth" var(--w-label);font-weight:500;color:#fff;position:relative;padding-block:4px}
.nav li a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:#fff;transition:right .35s cubic-bezier(.2,.7,.2,1)}
.nav li a:hover::after,.nav li a[aria-current]::after{right:0}
@media (max-width:640px){.nav ul{gap:14px}.nav li:nth-child(3){display:none}}


/* hero */
.hero{position:relative;min-height:min(82svh,900px);display:grid;align-items:end;overflow:hidden;color:var(--onimg)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;transform:scale(1.04);animation:settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes settle{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.55) 0%,rgba(10,9,8,.08) 45%,rgba(10,9,8,.18) 100%)}
.hero .inner{position:relative;z-index:1;padding:0 var(--gutter) var(--s4);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:var(--s3);align-items:end;width:100%}
.hero h1{grid-column:1/span 9;font-size:var(--t-xl);line-height:1.02;letter-spacing:-.015em;font-weight:200;font-variation-settings:"wdth" var(--w-display)}
.hero .cap{grid-column:10/span 3;justify-self:end;text-align:right;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;line-height:1.7;color:var(--onimg);opacity:.85;font-variation-settings:"wdth" var(--w-label)}
@media (max-width:860px){.hero h1{grid-column:1/-1}.hero .cap{grid-column:1/-1;justify-self:start;text-align:left}}
@media (prefers-reduced-motion:reduce){.hero img{animation:none;transform:none}*{transition:none!important}}

/* statement */
.statement .lede{grid-column:1/span 8;font-size:var(--t-lg);line-height:1.3;font-weight:300;letter-spacing:-.005em;max-width:30ch}
.statement .side{grid-column:10/span 3;display:flex;flex-direction:column;gap:var(--s2);align-self:end}
.statement .side a{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-block:var(--s2);font-size:var(--t-sm);transition:border-color .3s}
.statement .side a:hover{border-color:var(--fg)}
.statement .side a span{color:var(--mute);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
@media (max-width:860px){.statement .lede,.statement .side{grid-column:1/-1}.statement .side{margin-top:var(--s4)}}

/* section head */
.head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:var(--s3);margin-bottom:var(--s4);border-bottom:1px solid var(--line);gap:var(--s2);flex-wrap:wrap}
.head h2{font-size:var(--t-md);font-weight:400;letter-spacing:-.005em}
.head a,.more{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--fg);padding-bottom:3px;transition:opacity .3s}
.head a:hover,.more:hover{opacity:.55}

/* work grid */
.work{row-gap:var(--s5)}
.card{grid-column:span 6;min-width:0}
.card.w4{grid-column:span 4}.card.w5{grid-column:span 5}.card.w7{grid-column:span 7}.card.w8{grid-column:span 8}.card.w12{grid-column:span 12}
.card.w5.o3{grid-column:3/span 5}.card.w5.o8{grid-column:8/span 5}.card.w4.o8{grid-column:8/span 4}.card.w6.o7{grid-column:7/span 6}
.card .ph{position:relative;overflow:hidden;background:var(--bg2);aspect-ratio:var(--ar,4/3);max-width:100%}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1),opacity .6s}
.card:hover .ph img{transform:scale(1.03)}
.card .meta{display:flex;justify-content:space-between;gap:var(--s2);padding-top:var(--s2);font-size:var(--t-sm);line-height:1.4}
.card .meta b{font-weight:500}
.card .meta small{display:block;color:var(--mute);font-size:var(--t-sm)}
.card .meta .type{color:var(--mute);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding-top:.2em}
@media (max-width:860px){.card,.card.w4,.card.w5,.card.w7,.card.w8{grid-column:1/-1!important}}

/* services */
.services{row-gap:var(--s4)}
.svc{grid-column:span 4;min-width:0;display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.svc h3{font-size:var(--t-md);font-weight:400}
.svc p{color:var(--mute);font-size:var(--t-sm);max-width:36ch}
.svc ul{margin:0;padding:0;list-style:none;font-size:var(--t-sm);display:flex;flex-direction:column;gap:.35rem;margin-top:var(--s1)}
.svc li::before{content:"—";color:var(--mute);margin-right:.6em}
@media (max-width:860px){.svc{grid-column:1/-1}}

/* process */
.proc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,28px);counter-reset:step}
.proc div{border-top:1px solid var(--line);padding-top:var(--s2);min-width:0}
.proc div::before{counter-increment:step;content:"0" counter(step);display:block;font-size:var(--t-xs);letter-spacing:.14em;color:var(--mute);margin-bottom:var(--s2);font-variant-numeric:tabular-nums}
.proc b{display:block;font-weight:500;font-size:var(--t-sm);margin-bottom:.3rem}
.proc p{font-size:var(--t-sm);color:var(--mute)}
@media (max-width:860px){.proc{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.proc{grid-template-columns:1fr}}

/* film band */
.film{position:relative;overflow:hidden;color:var(--onimg);min-height:min(72svh,760px);display:grid;align-items:end}
.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.6),rgba(10,9,8,.05) 55%)}
.film .inner{position:relative;z-index:1;padding:var(--s4) var(--gutter);display:flex;justify-content:space-between;align-items:end;gap:var(--s3);flex-wrap:wrap}
.film h2{font-size:var(--t-lg);font-weight:200;line-height:1.1;max-width:22ch}
.film .play{display:inline-flex;align-items:center;gap:.8em;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--onimg)}
.film .play i{width:44px;height:44px;border:1px solid rgba(244,242,236,.6);border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s}
.film .play:hover i{background:var(--onimg);color:#171614}
.film .play svg{width:12px;height:12px;margin-left:2px}

/* trust */
.trust .col{grid-column:span 6;min-width:0}
.trust .list{columns:2;column-gap:clamp(12px,2vw,28px);font-size:var(--t-sm);line-height:1.9;margin:0;padding:0;list-style:none}
.trust h2{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--mute);margin-bottom:var(--s3)}
@media (max-width:860px){.trust .col{grid-column:1/-1}.trust .col+.col{margin-top:var(--s4)}}

/* quote */
.quote blockquote{margin:0;grid-column:2/span 9;font-size:var(--t-lg);font-weight:300;line-height:1.3;letter-spacing:-.005em}
.quote cite{display:block;font-style:normal;margin-top:var(--s3);font-size:var(--t-sm);color:var(--mute)}
@media (max-width:860px){.quote blockquote{grid-column:1/-1}}

/* contact */
.cta{background:var(--bg2)}
.cta .big{grid-column:1/span 7;font-size:var(--t-xl);font-weight:200;line-height:1.02;letter-spacing:-.015em}
.cta .det{grid-column:9/span 4;display:flex;flex-direction:column;gap:var(--s3);font-size:var(--t-sm);align-self:end}
.cta .det .label{margin-bottom:.3rem}
.cta .det a:hover,.foot a:hover{opacity:.55}
.copy{display:inline-flex;align-items:center;gap:.6em}
.copy button{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);line-height:1.4}
.copy button:hover{color:var(--fg);border-color:var(--fg)}
@media (max-width:860px){.cta .big,.cta .det{grid-column:1/-1}.cta .det{margin-top:var(--s4)}}

/* footer */
.foot{padding-block:var(--s4);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;align-items:center;font-size:var(--t-xs);color:var(--mute);letter-spacing:.06em}
.foot img{height:20px;width:auto;opacity:.9}
.foot ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s3);flex-wrap:wrap;text-transform:uppercase;letter-spacing:.14em}
.foot .lg-w{display:none}

/* inner pages */
.pagehead{padding-top:calc(var(--s6) + 40px);padding-bottom:var(--s4)}
.pagehead h1{font-size:var(--t-xl);font-weight:200;line-height:1.02;letter-spacing:-.015em;max-width:16ch}
.pagehead p{margin-top:var(--s3);max-width:52ch;color:var(--mute)}
.filters{display:flex;gap:var(--s3);flex-wrap:wrap;padding-block:var(--s3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.filters button{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--mute);padding-bottom:3px;border-bottom:1px solid transparent}
.filters button[aria-pressed="true"]{color:var(--fg);border-color:var(--fg)}
.filters button:hover{color:var(--fg)}
.studio .bio{grid-column:1/span 7;display:flex;flex-direction:column;gap:var(--s3);max-width:62ch}
.studio .bio p{font-size:var(--t-base)}
.studio .aside{grid-column:9/span 4;display:flex;flex-direction:column;gap:var(--s4)}
.studio .aside .ph{aspect-ratio:3/2;background:var(--bg2);overflow:hidden}
.studio .aside .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.studio dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem var(--s3);font-size:var(--t-sm)}
.studio dt{color:var(--mute)}.studio dd{margin:0}
@media (max-width:860px){.studio .bio,.studio .aside{grid-column:1/-1}}
.form{grid-column:1/span 7;display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) clamp(12px,2vw,28px)}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.field label{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}
.field input,.field select,.field textarea{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--line);padding:.6rem 0;border-radius:0;min-width:0;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--fg)}
.field textarea{min-height:120px;resize:vertical}
.submit{justify-self:start;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;border:1px solid var(--fg);padding:.9rem 1.6rem;transition:background .3s,color .3s}
.submit:hover{background:var(--fg);color:var(--bg)}
.sent{font-size:var(--t-md);font-weight:300}
.contact .det{grid-column:9/span 4;display:flex;flex-direction:column;gap:var(--s3);font-size:var(--t-sm)}
@media (max-width:860px){.form,.contact .det{grid-column:1/-1}.contact .det{margin-top:var(--s5)}.form{grid-template-columns:1fr}}

/* project detail */
.proj .lead{aspect-ratio:16/9;background:var(--bg2);overflow:hidden;margin-top:var(--s4)}
.proj .lead img{width:100%;height:100%;object-fit:cover}
.proj .facts{grid-column:1/span 4;display:grid;grid-template-columns:auto 1fr;gap:.5rem var(--s3);font-size:var(--t-sm);align-content:start}
.proj .facts dt{color:var(--mute)}.proj .facts dd{margin:0}
.proj .txt{grid-column:6/span 6;font-size:var(--t-md);font-weight:300;line-height:1.4;max-width:40ch}
.proj .set{row-gap:var(--s4)}
.proj .set .card{grid-column:span 6}
.proj .set .card.tall{grid-column:span 5}
.proj .set .card.tall+.card{grid-column:span 7}
.back{display:inline-block;margin-top:var(--s5)}
@media (max-width:860px){.proj .facts,.proj .txt{grid-column:1/-1}.proj .txt{margin-top:var(--s4)}}

/* static-site additions */
.proj .txt{display:flex;flex-direction:column;gap:var(--s3)}
.proj .txt p{font-size:inherit}
.next{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;align-items:baseline;margin-top:var(--s5)}
.next .back{margin-top:0}
.svc h3 a{border-bottom:1px solid transparent;transition:border-color .3s}
.svc h3 a:hover{border-color:var(--fg)}
.svc .more{align-self:flex-start;margin-top:var(--s2)}
.svcpage .body{grid-column:1/span 6;display:flex;flex-direction:column;gap:var(--s3)}
.svcpage .body p{font-size:var(--t-md);font-weight:300;line-height:1.4;max-width:40ch}
.svcpage .list{grid-column:8/span 5;margin:0;padding:0;list-style:none;font-size:var(--t-sm);display:flex;flex-direction:column;gap:.5rem;align-self:start}
.svcpage .list li{border-top:1px solid var(--line);padding-top:.5rem}
@media (max-width:860px){.svcpage .body,.svcpage .list{grid-column:1/-1}.svcpage .list{margin-top:var(--s4)}}
.form .err{color:var(--accent);font-size:var(--t-sm)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notfound{min-height:60svh}
.hero::after{background:linear-gradient(to top,rgba(10,9,8,.62) 0%,rgba(10,9,8,.06) 40%,rgba(10,9,8,.08) 72%,rgba(10,9,8,.72) 100%)}
.hero img{object-position:center 70%}
.submit{border-radius:999px;padding:.9rem 2rem}
/* cursor, copied from the Squarespace design's custom CSS: a ring with a small centre dot, a larger filled ring over
   anything clickable, and light versions over the photo sections and the header */
@media (hover:hover) and (pointer:fine){
html,body,main,section,footer{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><circle cx='48' cy='48' r='33' fill='none' stroke='%23171614' stroke-width='1.5'/><circle cx='48' cy='48' r='2.5' fill='%23171614'/></svg>") 48 48,auto}
.hero,.hero *,.film,.film *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><circle cx='48' cy='48' r='33' fill='none' stroke='%23F4F2EC' stroke-width='1.5'/><circle cx='48' cy='48' r='2.5' fill='%23F4F2EC'/></svg>") 48 48,auto}
a,button,label,select,summary,[role=button],input[type=checkbox],input[type=radio],input[type=submit]{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><circle cx='60' cy='60' r='52' fill='%23171614' fill-opacity='.18' stroke='%23171614' stroke-width='1.5'/></svg>") 60 60,pointer!important}
.hero a,.film a,.nav a,.nav button{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><circle cx='60' cy='60' r='52' fill='%23F4F2EC' fill-opacity='.18' stroke='%23F4F2EC' stroke-width='1.5'/></svg>") 60 60,pointer!important}
input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea{cursor:text!important}
}
/* home gallery, laid out like the Squarespace design */
.gal{row-gap:var(--s5);align-items:start}
.gal figure{margin:0;min-width:0}
.gal .ph{aspect-ratio:var(--ar);overflow:hidden;background:var(--bg2)}
.gal .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.gal a:hover .ph img{transform:scale(1.03)}
.gal figcaption{padding-top:16px;font-size:clamp(.95rem,.9vw,1.135rem);line-height:1.7}
.gal .g1{grid-column:1/span 7}.gal .g2{grid-column:8/span 5;margin-top:2.25vw}
.gal .g3{grid-column:3/span 5}.gal .g4{grid-column:8/span 5}
.gal .g5{grid-column:1/span 8}.gal .g6{grid-column:9/span 4;margin-top:8vw}
.gal .g7{grid-column:1/span 6}.gal .g8{grid-column:7/span 6}
@media (max-width:860px){.gal figure{grid-column:1/-1!important;margin-top:0!important}}
.statement.solo .lede{grid-column:1/span 8;max-width:none}
.quote.after{padding-top:0}
/* contact form extras */
.field.full fieldset,.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend{padding:0}
.opts{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:.6rem;font-size:var(--t-sm)}
.opts label{display:flex;align-items:center;gap:.5rem;text-transform:none;letter-spacing:0;font-size:var(--t-sm);color:var(--fg)}
.opts input{accent-color:var(--fg);width:auto;margin:0}
.form legend{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}