@font-face{font-family:'Neue Montreal';font-weight:500;src:local('Neue Montreal Medium'),local('NeueMontreal-Medium'),url(NeueMontreal-Medium.woff2) format('woff2'),url(NeueMontreal-Medium.woff) format('woff')}
@font-face{font-family:'Neue Montreal';font-weight:700;src:local('Neue Montreal Bold'),local('NeueMontreal-Bold'),url(NeueMontreal-Bold.woff2) format('woff2'),url(NeueMontreal-Bold.woff) format('woff')}
:root{--mut:#d4d4d4;--line:#2e2e2e;--panel:#111}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:#fff;font-family:'Neue Montreal','Inter Tight','Helvetica Neue',Arial,sans-serif;font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,b{font-weight:700;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;transition:background .3s}
header.solid,body:not(.home) header{background:rgba(0,0,0,.88);backdrop-filter:blur(8px)}
.logo img{height:44px;width:auto}
nav{display:flex;align-items:center;gap:6px}
nav a{text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:10px 12px;opacity:.85}
nav a:hover,nav a.on{opacity:1}
nav a.on{border-bottom:2px solid #fff}
nav .cta{border:1px solid #fff;border-radius:3px;margin-left:8px;opacity:1}
nav .cta:hover{background:#fff;color:#000}
#mb{display:none}
.btn{display:inline-block;background:#fff;color:#000;text-decoration:none;border:1px solid #fff;border-radius:3px;padding:13px 26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .2s}
.btn:hover{opacity:.85}
.btn.ghost{background:none;color:#fff}.btn.ghost:hover{background:#fff;color:#000;opacity:1}
.lnk{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--mut);text-decoration:none;border-bottom:1px solid #666}
.lnk:hover{color:#fff;border-color:#fff}
.row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--mut)}
/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.05) 40%,rgba(0,0,0,.25))}
.hc{position:relative;padding-bottom:9vh;width:100%}
.hc h1{font-size:clamp(46px,9vw,120px);line-height:.95;letter-spacing:-.04em;margin:14px 0 18px}
.hc p{max-width:560px;font-size:clamp(16px,1.6vw,20px);color:#eee;margin:0}
/* sections */
.sec{padding:clamp(64px,10vw,130px) 0}
.sec.alt{background:var(--panel)}
.intro{max-width:820px;margin-bottom:56px}
.intro h2,.band h2,.shead h2{font-size:clamp(30px,4.6vw,56px);letter-spacing:-.03em;line-height:1.05}
.intro p{font-size:clamp(16px,1.5vw,19px);color:var(--mut);margin:20px 0 0}
.tri,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.steps{grid-template-columns:repeat(4,1fr)}
.tri>div,.steps>div{border-top:1px solid #444;padding-top:18px}
.tri b,.steps b{font-size:13px;letter-spacing:.16em;color:var(--mut)}
.tri h3,.steps h3{font-size:22px;margin:10px 0 6px}
.tri p,.steps p{margin:0;color:var(--mut)}
.shead{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:32px}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pc{position:relative;display:block;overflow:hidden;border-radius:4px;aspect-ratio:4/3;text-decoration:none;background:#111}
.pc img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.pc:hover img{transform:scale(1.04)}
.pc span{position:absolute;left:0;right:0;bottom:0;padding:60px 22px 20px;background:linear-gradient(transparent,rgba(0,0,0,.82));display:block}
.pc b{display:block;font-size:22px;margin-top:2px}
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:4px;padding:24px;transition:background .2s,border-color .2s}
.svc a:hover{background:#111;border-color:#666}
.svc b{display:block;font-size:20px;margin-bottom:8px}.svc span{color:var(--mut)}
.band{padding:clamp(70px,10vw,120px) 0;text-align:center;border-top:1px solid var(--line)}
.band p{color:var(--mut);margin:16px auto 28px;max-width:520px}
/* inner pages */
.ph{padding:clamp(130px,16vw,200px) 0 clamp(40px,6vw,70px)}
.ph h1{font-size:clamp(44px,8vw,96px);letter-spacing:-.04em;line-height:1;margin:12px 0 16px}
.ph p{max-width:620px;color:var(--mut);font-size:clamp(16px,1.5vw,19px);margin:0}
.ph .btn{margin-top:24px}
.scgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sc{border:1px solid var(--line);border-radius:4px;padding:26px}
.sc b{display:block;font-size:21px;margin-bottom:10px}.sc p{margin:0;color:var(--mut)}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,80px);align-items:start}
.two figure{margin:0}.two img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:4px}
.two figcaption{margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mut)}
.big{font-size:clamp(17px,1.7vw,21px);line-height:1.65;margin:0 0 20px}
.lic{color:var(--mut);margin:0 0 24px}
.note{color:var(--mut);margin-top:28px}
/* contact */
.two.c{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
form{display:grid;gap:16px}
form label{display:grid;gap:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mut)}
input,select,textarea{font:inherit;font-size:16px;letter-spacing:0;text-transform:none;font-weight:500;color:#fff;background:#111;border:1px solid #444;border-radius:3px;padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus,a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hp{position:absolute;left:-9999px}
.ci h3{font-size:22px;margin-bottom:12px}.ci p{margin:0 0 16px;color:var(--mut)}
.ci a{color:#fff}
/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 24px;background:#000}
.fg{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.flogo{height:auto;width:200px;max-width:100%;margin-bottom:14px}
footer h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
footer p{margin:0;color:var(--mut);line-height:1.9}footer a{text-decoration:none}footer a:hover{color:#fff;text-decoration:underline}
.fb{margin-top:36px;border-top:1px solid var(--line);padding-top:18px}.fb small{letter-spacing:.08em;text-transform:none;font-weight:500}
/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.pc img{transition:none}html{scroll-behavior:auto}}
@media (max-width:900px){
 .svc{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.scgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
 header{padding:12px 16px}
 #mb{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;background:rgba(0,0,0,.6);border:1px solid #555;border-radius:6px;cursor:pointer}
 #mb span{display:block;height:2px;background:#fff;transition:transform .25s,opacity .2s}
 header.open #mb span:nth-child(1){transform:translateY(7px) rotate(45deg)}header.open #mb span:nth-child(2){opacity:0}header.open #mb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 nav{position:fixed;inset:0;top:70px;background:#000;flex-direction:column;align-items:stretch;gap:0;padding:20px 16px;transform:translateY(-120%);transition:transform .3s;visibility:hidden}
 header.open nav{transform:none;visibility:visible}
 nav a{font-size:15px;padding:18px 8px;border-bottom:1px solid var(--line)}nav a.on{border-bottom:1px solid var(--line);text-decoration:underline}
 nav .cta{margin:18px 0 0;text-align:center;border-bottom:1px solid #fff}
 .wrap{padding:0 18px}
 .tri,.pgrid,.two,.two.c,.fg,.scgrid,.svc,.steps{grid-template-columns:1fr}
 .two img{aspect-ratio:1/1;max-height:420px}
 .shead{flex-wrap:wrap}
}
/* intro: g. fades into the video, then Enter */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lout{to{opacity:0;transform:scale(.96)}}
@keyframes bgout{from{opacity:1}to{opacity:0}}
body.locked{overflow:hidden}
header,.hc{transition:opacity 1.4s ease .2s}
body.locked header,body.locked .hc{opacity:0;pointer-events:none}
#intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:11vh;transition:opacity .9s ease}
#intro::before{content:'';position:absolute;inset:0;background:#000;opacity:1;animation:bgout 3s ease 2.6s forwards}
#intro>img{position:absolute;top:50%;left:50%;width:min(210px,50vw);height:auto;margin:calc(min(210px,50vw)*-.48) 0 0 calc(min(210px,50vw)/-2);opacity:0;animation:rise 2.6s ease .4s forwards,lout 1.6s ease 3.6s forwards}
#intro .btn{position:relative;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);color:#fff;letter-spacing:.3em;padding:13px 38px;opacity:0;animation:rise 2s ease 4.2s forwards}
#intro .btn:hover{background:#fff;color:#000}
#intro.go{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){#intro::before,#intro img,#intro .btn{animation-duration:.01s;animation-delay:0s}#intro>img{animation:none;opacity:1}}
.hc{transition:opacity 1.4s ease .2s}.hero .hc,.hero .shade{transition:opacity .8s ease}.hero.endcard .hc{opacity:0!important;pointer-events:none}.hero.endcard .shade{opacity:.35}
/* gallery + lightbox */
.gal{columns:3;column-gap:16px}
.gal a{display:block;margin:0 0 16px;break-inside:avoid;border-radius:4px;overflow:hidden;background:#111}
.gal img{width:100%;height:auto;transition:transform .8s ease,opacity .3s}.gal a:hover img{transform:scale(1.03)}
#lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:24px}
#lb.on{display:flex}#lb img{max-width:100%;max-height:92vh;object-fit:contain}
#lb button{position:absolute;background:none;border:1px solid #666;border-radius:4px;color:#fff;width:46px;height:46px;font-size:22px;cursor:pointer}
#lb .x{top:16px;right:16px}#lb .p{left:16px;top:50%}#lb .n{right:16px;top:50%}
@media (max-width:900px){.gal{columns:2}}@media (max-width:560px){.gal{columns:1}#lb .p{left:8px}#lb .n{right:8px}}
.soonh{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em;margin:64px 0 24px}
.pc.soon{display:flex;align-items:flex-end;border:1px solid #333;background:repeating-linear-gradient(135deg,#0c0c0c 0 14px,#111 14px 28px);cursor:default}
.pc.soon span{position:static;background:none;padding:22px}
.pc.soon{aspect-ratio:16/7}@media (max-width:760px){.pc.soon{aspect-ratio:16/8}}
.gal.one{columns:1;max-width:1100px}
/* instagram strip */
.ig{padding:clamp(56px,8vw,100px) 0;border-top:1px solid var(--line)}
.igg{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.igg a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:3px;background:#111}
.igg img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,opacity .3s}
.igg a:hover img{transform:scale(1.06);opacity:.8}
@media (max-width:760px){.igg{grid-template-columns:repeat(3,1fr)}}
/* social icons */
.soc{display:flex;gap:10px;margin-top:16px}
.soc a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #555;border-radius:50%;color:#fff;transition:background .2s,color .2s,border-color .2s}
.soc a:hover{background:#fff;color:#000;border-color:#fff;text-decoration:none}
footer .soc a{text-decoration:none}
.ci .soc{margin:4px 0 28px}
/* ===== LIGHT THEME: white background, black text ===== */
:root{--mut:#555;--line:#dcdcdc;--panel:#f4f4f4}
body{background:#fff;color:#000}
a{color:inherit}
small{color:#555}
header.solid,body:not(.home) header,header{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
body.home header{background:rgba(255,255,255,.94)}
nav a{color:#000;opacity:.8}nav a:hover,nav a.on{opacity:1}nav a.on{border-bottom-color:#000}
nav .cta{border-color:#000;color:#000}nav .cta:hover{background:#000;color:#fff}
.btn{background:#000;color:#fff;border-color:#000}
.btn.ghost{background:none;color:#000;border-color:#000}.btn.ghost:hover{background:#000;color:#fff}
.lnk{color:#000;border-bottom-color:#999}.lnk:hover{color:#000;border-color:#000}
.intro p,.ph p,.tri p,.steps p,.svc span,.sc p,.band p,.note,.lic,.ci p,footer p{color:#444}
.tri>div,.steps>div{border-top-color:#cfcfcf}
.tri b,.steps b{color:#555}
.sec.alt{background:var(--panel)}
.svc a{border-color:var(--line)}.svc a:hover{background:#f4f4f4;border-color:#999}
.sc{border-color:var(--line)}
.band{border-top-color:var(--line)}
.pc{background:#eee}
.pc.soon{border-color:var(--line);background:repeating-linear-gradient(135deg,#f6f6f6 0 14px,#efefef 14px 28px)}
.pc.soon span{color:#000}.pc.soon small{color:#555}.pc.soon b{color:#000}
.gal a{background:#eee}
form label{color:#444}
input,select,textarea{background:#fff;color:#000;border-color:#bbb}
input:focus,select:focus,textarea:focus,a:focus-visible,button:focus-visible{outline-color:#000}
.ci a{color:#000}
footer{background:#fff;border-top-color:var(--line)}
footer h4{color:#555}footer a:hover{color:#000}
.fb{border-top-color:var(--line)}
.ig{border-top-color:var(--line)}.igg a{background:#eee}
.soc a{border-color:#999;color:#000}.soc a:hover{background:#000;color:#fff;border-color:#000}
#mb{background:#fff;border-color:#999}#mb span{background:#000}
@media (max-width:760px){nav{background:#fff}nav a{border-bottom-color:var(--line)}nav a.on{border-bottom-color:var(--line)}nav .cta{border-bottom-color:#000}}
/* hero sits on video: keep light text and buttons there */
.hero,.hero .hc,.hero .hc small,.hero .hc p{color:#fff}
.hero .hc small{color:#e8e8e8}
.hero .btn{background:#fff;color:#000;border-color:#fff}
.hero .btn.ghost{background:none;color:#fff;border-color:#fff}.hero .btn.ghost:hover{background:#fff;color:#000}
/* intro: white, black g, then fades into the video */
#intro::before{background:#fff}
#intro .btn{background:rgba(0,0,0,.35);color:#fff;border-color:#fff}#intro .btn:hover{background:#fff;color:#000}
/* photo captions on dark gradients stay white */
.pc span,.pc b,.pc small{color:#fff}
.pc.soon span,.pc.soon b{color:#000}.pc.soon small{color:#555}
/* lightbox stays dark */
#lb button{color:#fff}

/* intro v2: g. on white, quick run of job photos, then the video starts */
#intro::before{animation:none;opacity:1;transition:opacity .9s ease}
#intro.reveal::before{opacity:0}
#intro>img{animation:rise 1.1s ease .2s forwards,lout .5s ease 1.7s forwards}
#intro .flash{position:absolute;inset:0;transition:opacity .9s ease}
#intro .flash img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .14s linear}
#intro .flash img.on{opacity:1}
#intro.reveal .flash{opacity:0}
#intro .btn{position:relative;z-index:2;animation:none;opacity:0;transition:opacity .9s ease,background .2s,color .2s}
#intro.ready .btn{opacity:1}
@media (prefers-reduced-motion:reduce){#intro>img{animation:none;opacity:1}}
/* Instagram embeds */
.igg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.ige{min-width:0}
.ige .instagram-media{margin:0!important;min-width:0!important;max-width:100%!important;width:100%!important;border-radius:3px!important}
.ige iframe{max-width:100%!important;min-width:0!important;width:100%!important}
.ige>blockquote>a{display:block;padding:40px 16px;text-align:center;border:1px solid var(--line);border-radius:3px}
@media (max-width:900px){.igg{grid-template-columns:1fr;max-width:540px;margin:0 auto}}
/* journal */
.soonh{font-size:clamp(30px,4.6vw,56px);letter-spacing:-.03em;line-height:1.05;margin:72px 0 32px}
.jl{display:grid;gap:56px}
.jc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;text-decoration:none;color:inherit}
.jc img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;display:block}
.jc h2{font-size:clamp(24px,3vw,38px);letter-spacing:-.03em;line-height:1.1;margin:0 0 14px}
.jc p{color:var(--mut);margin:0 0 18px;max-width:520px}
.jc:hover h2{text-decoration:underline;text-underline-offset:6px}
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.jgrid .jc{grid-template-columns:1fr;gap:16px;align-items:start}
.jgrid .jc h2{font-size:21px;margin-bottom:10px}
.jgrid .jc p{font-size:14px}
.ph.art h1{font-size:clamp(30px,4.6vw,60px);max-width:920px;line-height:1.05}
.aimg{width:100%;max-height:560px;object-fit:cover;border-radius:4px;display:block;margin-bottom:clamp(32px,5vw,56px)}
.abody{max-width:720px}
.abody p{font-size:17px;line-height:1.65;color:#222;margin:0 0 18px}
.abody h3{font-size:21px;letter-spacing:-.02em;margin:34px 0 10px}
@media (max-width:900px){.jc{grid-template-columns:1fr}.jgrid{grid-template-columns:1fr}}
/* mobile fixes */
.igg>a{aspect-ratio:auto}
.ige a{aspect-ratio:auto!important;background:none!important}
@media (max-width:760px){nav{overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:60}}
@media (max-width:760px){header,header.solid,body.home header,body:not(.home) header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
nav{top:69px;bottom:0;height:auto;background:#fff}}

/* ===== Design + Construct page ===== */
.ph.dch{padding-bottom:clamp(24px,3vw,40px)}
.dc-hero{background:#fff;color:#000;padding:clamp(104px,13vh,132px) 0 clamp(20px,4vw,40px)}
.dc-hero small{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.dc-hero h1{font-size:clamp(34px,5vw,64px);letter-spacing:-.04em;line-height:1;margin:0 0 clamp(18px,3vw,30px)}
.dc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.dc-caps{position:relative;flex:1;min-height:150px;max-width:620px}
.dc-cap{position:absolute;left:0;top:0;right:0;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.dc-cap.on{opacity:1;transform:none}
.dc-n{display:block;font-size:clamp(44px,5vw,72px);font-weight:800;letter-spacing:-.05em;line-height:.9;margin-bottom:10px}
.dc-cap h2{font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;line-height:1.1;margin:0 0 8px;color:#000}
.dc-cap p{margin:0;color:var(--mut);max-width:520px;font-size:15px}
.dc-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dc-dots button{background:none;border:1px solid #cfcfcf;border-radius:3px;color:#8a8a8a;font:700 11px Inter,'Inter Tight',sans-serif;letter-spacing:.14em;padding:8px 9px;cursor:pointer;transition:all .25s}
.dc-dots button:hover{border-color:#000;color:#000}
.dc-dots button.done{color:#000;border-color:#777}
.dc-dots button.on{background:#000;color:#fff;border-color:#000}
.dc-art{position:relative;margin-top:clamp(6px,2vw,24px)}
#dccv{display:block;width:100%;height:auto}
.dcl{margin-top:40px}
.dcs{display:grid;grid-template-columns:minmax(90px,200px) 1fr;gap:clamp(16px,4vw,56px);padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--line)}
.dcn{font-size:clamp(56px,8vw,120px);font-weight:800;letter-spacing:-.05em;line-height:.9}
.dcs h2{font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em;line-height:1.05;margin:0 0 14px}
.dcs .lead{font-size:clamp(18px,1.8vw,22px);color:#000;margin:0 0 12px;max-width:640px}
.dcs p{max-width:640px;color:var(--mut);margin:0 0 16px}
.dcs ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;max-width:640px}
.dcs li{padding-left:22px;position:relative}
.dcs li:before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:#000}
@media (max-width:900px){
 #dccv{position:relative;inset:auto;width:100%;height:auto;flex:none;margin-top:10px}
 .dc-top{flex-direction:column-reverse;gap:10px}.dc-dots{justify-content:space-between;width:100%}.dc-caps{min-height:150px;width:100%;flex:none;max-width:none}
 .dc-dots button{flex:1;padding:9px 0;text-align:center}
 .dcs{grid-template-columns:1fr;gap:6px}
 .dcn{font-size:56px}
}
/* tablet: switch to the menu button before the longer nav runs out of room */
@media (max-width:1060px){
 header{padding:12px 20px}
 #mb{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;background:#fff;border:1px solid #999;border-radius:6px;cursor:pointer}
 #mb span{display:block;height:2px;background:#000;transition:transform .25s,opacity .2s}
 header.open #mb span:nth-child(1){transform:translateY(7px) rotate(45deg)}header.open #mb span:nth-child(2){opacity:0}header.open #mb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 nav{position:fixed;inset:0;top:69px;bottom:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:20px 20px;transform:translateY(-120%);transition:transform .3s;visibility:hidden;overflow-y:auto;z-index:60}
 header.open nav{transform:none;visibility:visible}
 nav a{font-size:15px;padding:18px 8px;border-bottom:1px solid var(--line);opacity:1}
 nav a.on{border-bottom:1px solid var(--line);text-decoration:underline}
 nav .cta{margin:18px 0 0;text-align:center;border:1px solid #000}
 header,header.solid,body.home header,body:not(.home) header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
}
.clogo{display:block;width:220px;max-width:100%;height:auto;margin:0 0 22px}
.two .clogo,.ci .clogo{width:220px;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;margin:0 0 22px;display:block}

.dc-end{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;opacity:0;pointer-events:none;transition:opacity .7s ease}
.dc-end.on{opacity:1;pointer-events:auto}
.dc-end p{margin:0;font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:-.03em;color:#000}
.dc-endb{display:flex;gap:10px;flex-wrap:wrap}

/* project cards: name on the photo, each in a wordmark-style font chosen for the build */
.pc span{inset:0;bottom:0;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(0,0,0,.34);transition:background .4s ease}
.pc:hover span{background:rgba(0,0,0,.2)}
.pc b{margin:0;font-weight:400;text-transform:uppercase;font-size:clamp(28px,3.8vw,54px);line-height:1.05;letter-spacing:.16em;padding-left:.16em;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.pc small{position:absolute;left:20px;right:20px;bottom:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.92;text-align:left}
.pc.f-rossford b{font-family:'Cinzel',Georgia,serif;font-weight:500;letter-spacing:.14em}
.pc.f-rossford-2 b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:.22em;font-size:clamp(32px,4.4vw,62px)}
.pc.f-studio b{font-family:'Syncopate',sans-serif;font-weight:400;letter-spacing:.24em;font-size:clamp(22px,2.9vw,40px)}
.pc.f-hardie b{font-family:'Tenor Sans',sans-serif;letter-spacing:.32em}
.pc.f-bella-casa b{font-family:'Bodoni Moda',Georgia,serif;font-weight:500;letter-spacing:.08em}
.pc.f-president b{font-family:'Marcellus',Georgia,serif;letter-spacing:.2em}
.pc.f-wattle b{font-family:'Forum',Georgia,serif;letter-spacing:.24em}
.pc.f-warwick b{font-family:'Italiana',Georgia,serif;letter-spacing:.26em;font-size:clamp(32px,4.4vw,62px)}
.pc.soon{display:flex}

/* project quick view */
.pcx{position:absolute;right:14px;bottom:12px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;opacity:.85;transition:transform .3s ease,opacity .3s ease,background .3s ease;z-index:2}
.pc:hover .pcx,.pc:focus-visible .pcx{opacity:1;transform:scale(1.12);background:#000}
.pc small{right:64px}
.pmo{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pmo.on{opacity:1;visibility:visible}
.pmb{position:relative;background:#fff;color:#000;width:min(820px,100%);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;border-radius:22px;outline:0;transform:translateY(14px) scale(.98);transition:transform .35s ease}
.pmo.on .pmb{transform:none}
.pmx{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.pmx:hover{background:#000}
.pmh{position:relative;aspect-ratio:12/5;background:#111;overflow:hidden}
.pmh img{width:100%;height:100%;object-fit:cover;display:block}
.pmh:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34)}
.pmt{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;text-transform:uppercase;font-size:clamp(28px,5vw,60px);letter-spacing:.16em;padding-left:.16em}
.pmt.f-rossford{font-family:'Cinzel',Georgia,serif;font-weight:500;letter-spacing:.14em}
.pmt.f-rossford-2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:.22em}
.pmt.f-studio{font-family:'Syncopate',sans-serif;letter-spacing:.24em;font-size:clamp(22px,3.6vw,44px)}
.pmt.f-hardie{font-family:'Tenor Sans',sans-serif;letter-spacing:.32em}
.pmt.f-bella-casa{font-family:'Bodoni Moda',Georgia,serif;font-weight:500;letter-spacing:.08em}
.pmt.f-president{font-family:'Marcellus',Georgia,serif;letter-spacing:.2em}
.pmt.f-wattle{font-family:'Forum',Georgia,serif;letter-spacing:.24em}
.pmt.f-warwick{font-family:'Italiana',Georgia,serif;letter-spacing:.26em}
.pmc{padding:clamp(22px,4vw,40px)}
.pmc h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;line-height:1.1;margin:0 0 12px}
.pms{margin:0 0 22px;color:#333;font-size:17px;line-height:1.5;max-width:640px}
.pmc dl{margin:0 0 26px}
.pmc dl>div{display:flex;justify-content:space-between;gap:24px;padding:13px 0;border-top:1px solid var(--line)}
.pmc dl>div:last-child{border-bottom:1px solid var(--line)}
.pmc dt{color:#777;font-weight:600}
.pmc dd{margin:0;text-align:right;max-width:62%}
.pma{display:flex;gap:10px;flex-wrap:wrap}
html.pm-lock,html.pm-lock body{overflow:hidden}
@media (max-width:560px){.pmh{aspect-ratio:4/3}.pmc dl>div{flex-direction:column;gap:2px}.pmc dd{text-align:left;max-width:none}.pmo{padding:12px}}
@media (prefers-reduced-motion:reduce){.pmo,.pmb{transition:none}}

/* animation controls */
.dc-ctl{display:flex;align-items:center;gap:14px;margin-top:6px}
.dc-pp{display:none;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid #000;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,color .2s}
.dc-pp:hover{background:#000;color:#fff}
.dc-pp .i-play{display:none}.dc-pp.paused .i-play{display:block}.dc-pp.paused .i-pause{display:none}
.dc-sb{-webkit-appearance:none;appearance:none;flex:1;height:28px;background:transparent;cursor:pointer;margin:0;--v:0%}
.dc-sb::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#000 var(--v),#d6d6d6 var(--v))}
.dc-sb::-moz-range-track{height:3px;border-radius:2px;background:#d6d6d6}
.dc-sb::-moz-range-progress{height:3px;background:#000;border-radius:2px}
.dc-sb::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#000;border:2px solid #fff;box-shadow:0 0 0 1px #000;margin-top:-6.5px}
.dc-sb::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#000;border:2px solid #fff;box-shadow:0 0 0 1px #000}
.dc-sb:focus-visible{outline:2px solid #000;outline-offset:4px}

.pcw{position:relative}
.pcw>.pc{width:100%}
.pci{position:absolute;right:58px;bottom:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font:italic 700 19px Georgia,'Times New Roman',serif;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;padding:0 0 1px;opacity:.9;transition:transform .3s ease,background .3s ease,opacity .3s ease}
.pci:hover,.pci:focus-visible{background:#fff;color:#000;transform:scale(1.12);opacity:1;outline:0}
.pci:focus-visible{box-shadow:0 0 0 2px #000}
.pcw:hover .pcx{opacity:1}
.pc small{right:110px}

.pcp{position:absolute;right:12px;bottom:58px;width:min(280px,calc(100% - 24px));background:#fff;color:#000;border-radius:14px;padding:14px 16px 12px;box-shadow:0 12px 40px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:6;pointer-events:none;text-align:left}
.pcp strong{display:block;font-size:15px;letter-spacing:-.01em;margin-bottom:8px}
.pcp span{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.pcp span i{font-style:normal;color:#777;font-weight:600}
.pcp span b{font-weight:500;text-align:right}
.pcp em{display:block;margin-top:8px;font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#777;font-weight:600}
.pci:hover+.pcp,.pci:focus-visible+.pcp{opacity:1;visibility:visible;transform:none}
@media (hover:none){.pci:focus+.pcp{opacity:1;visibility:visible;transform:none}}
.pci:focus+.pcp{opacity:1;visibility:visible;transform:none}
.pmq{margin-top:4px;padding-top:22px}
.pmq p{margin:0 0 14px;font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
html{scrollbar-gutter:stable}
html.js-hover .pcp{display:none}

.dc-pv{position:absolute;left:0;top:0;right:0;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.dc-pv.on{opacity:1;transform:none}
.dc-pv .dc-n{font-size:clamp(14px,1.4vw,18px);letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:14px;line-height:1.2}
.dc-pv h2{font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;line-height:1.1;margin:0 0 8px;color:#000}
.dc-pv p{margin:0;color:var(--mut);max-width:520px;font-size:15px}

.scue{position:absolute;left:50%;bottom:28px;width:22px;height:36px;margin-left:-11px;border:1.5px solid #fff;border-radius:12px;opacity:.85}
.scue span{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;background:#fff;border-radius:2px;animation:scu 1.8s infinite}
@keyframes scu{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.hcopy{background:#fff;color:#000;padding:clamp(56px,9vw,120px) 0}
.hcopy h1{font-size:clamp(40px,7vw,96px);line-height:1;letter-spacing:-.04em;margin:0 0 22px;padding-bottom:.08em}
.hcopy p{max-width:600px;font-size:clamp(16px,1.6vw,20px);color:#333;margin:0 0 28px}
.hcopy .row{display:flex;gap:12px;flex-wrap:wrap}
.hcopy .btn{background:#000;color:#fff;border-color:#000}
.hcopy .btn.ghost{background:none;color:#000;border-color:#000}.hcopy .btn.ghost:hover{background:#000;color:#fff}

/* hero video: never show a native play button; mobile scroll cue lands below the fixed header */
.hero video::-webkit-media-controls,.hero video::-webkit-media-controls-start-playback-button,.hero video::-webkit-media-controls-overlay-play-button,.hero video::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none;opacity:0!important}
.hero video{pointer-events:none}
@media(max-width:760px){#welcome{scroll-margin-top:68px}}