:root{--ink:#101415;--ink2:#161c1d;--gold:#dcb677;--cream:#fdf6ec;--gold-d:#8f6d38;--paper:#faf7f1;--line:#e6dfd2;--txt:#222;--mut:#5d5a53}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 "Hanken Grotesk",system-ui,sans-serif;color:var(--txt);background:var(--paper)}
h1,h2,h3{font-family:"Newsreader",Georgia,serif;line-height:1.15;font-weight:500;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5vw,3.8rem)}h2{font-size:clamp(1.7rem,3vw,2.4rem)}h3{font-size:1.35rem}
a{color:var(--gold-d)}img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left)) 0 max(20px,env(safe-area-inset-right))}.sec{padding:72px 0}
.btn{display:inline-block;background:var(--gold);color:var(--ink);padding:13px 26px;border:0;border-radius:3px;font:600 1rem inherit;font-family:inherit;text-decoration:none;cursor:pointer;transition:background .2s}
.btn:hover{background:#dbb87d}.btn.alt{background:none;border:1px solid var(--gold);color:var(--gold-d)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.hero{background:var(--ink);color:#f3efe6;padding:64px 0}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero p{color:#cfc8b8;max-width:46ch}.hero img{border-radius:3px;max-height:560px;width:100%;object-fit:cover;object-position:top}
.cap{font-size:.82rem;color:var(--mut);margin-top:6px}.hero .cap{color:#9d9686}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.card img{aspect-ratio:4/3;object-fit:cover;object-position:top;width:100%}
.card div{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}.card p{margin:0;color:var(--mut)}
.card .btn{margin-top:auto;align-self:flex-start}.loc{color:var(--gold-d);font-weight:600;font-size:.95rem}
.band{background:var(--ink2);color:#eee}.band h2{color:var(--gold)}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.three>div{border-top:2px solid var(--gold);padding-top:14px}.band .three p{color:#cfc8b8}
.row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:36px 0;border-top:1px solid var(--line)}
.row img{border-radius:3px;width:100%;max-height:520px;object-fit:cover;object-position:top}
.tag{display:inline-block;background:var(--ink);color:var(--gold);padding:3px 12px;border-radius:2px;font-size:.9rem;font-weight:600}
.cmp{position:relative;max-width:560px;margin:24px auto 0;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:#000}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.cmp .top{clip-path:inset(0 50% 0 0)}
ul.tick{padding-left:0;list-style:none}ul.tick li{padding:8px 0 8px 28px;position:relative;border-bottom:1px solid var(--line)}
ul.tick li:before{content:"";position:absolute;left:4px;top:17px;width:9px;height:9px;background:var(--gold)}
.notes{background:#fff;border:1px solid var(--line);padding:32px;border-radius:3px}
form{display:grid;gap:14px;max-width:560px}label{font-weight:600;font-size:.95rem}
input,textarea{width:100%;padding:12px;border:1px solid #cfc7b6;border-radius:3px;font:inherit;background:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
footer{background:var(--ink);color:#bdb6a6;padding:40px 0;font-size:.95rem}footer .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer img{height:72px}footer a{color:var(--gold)}
@media(max-width:800px){.hero .wrap,.row,.two{grid-template-columns:1fr;gap:28px}.sec{padding:52px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.about{font-size:1.2rem;line-height:1.85}.about p{max-width:65ch;color:#1a1a1a}.about h1{margin-bottom:.8em}
.about h2{font-size:1.9rem;margin-top:1.6em;padding-top:.6em;border-top:2px solid var(--gold)}
.glance{background:#fff;border:2px solid var(--ink);padding:24px 28px;border-radius:3px;margin:28px 0}.glance h2{margin:0 0 8px;padding:0;border:0;font-size:1.6rem}
.callbox{background:var(--ink);color:#f3efe6;padding:32px;border-radius:3px;margin-top:48px;text-align:center}
.callbox h2{color:var(--gold);margin:0 0 8px;padding:0;border:0}.callbox p{margin:0 auto 16px;color:#e6e0d2}
.callbox .tel{display:block;font:500 clamp(2rem,6vw,3rem) "Newsreader",Georgia,serif;color:var(--gold);text-decoration:none;margin-bottom:18px}
.callbox .btn{font-size:1.15rem;padding:16px 30px;margin:6px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.gal figure{margin:0}.gal img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:3px}
.cmp{touch-action:pan-y;cursor:ew-resize;user-select:none}.hint{font-size:1.2rem;max-width:60ch}
.knob{position:absolute;top:0;bottom:0;left:50%;width:4px;background:var(--gold);transform:translateX(-50%);pointer-events:none}
.knob span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--gold);color:var(--ink);font-weight:700;border-radius:999px;padding:14px 16px;font-size:1.1rem;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.lb{position:absolute;top:12px;z-index:2;background:var(--ink);color:var(--gold);padding:8px 16px;font-weight:700;font-size:1.1rem;border-radius:3px}.lb.l{left:12px}.lb.r{right:12px}
.rng{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:560px;margin:20px auto 0;height:44px;background:transparent}
.rng::-webkit-slider-runnable-track{height:12px;background:var(--ink);border-radius:6px}.rng::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;margin-top:-16px;border-radius:50%;background:var(--gold);border:3px solid var(--ink)}
.rng::-moz-range-track{height:12px;background:var(--ink);border-radius:6px}.rng::-moz-range-thumb{width:38px;height:38px;border-radius:50%;background:var(--gold);border:3px solid var(--ink)}
.cbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}.cbtns .btn{font-size:1.1rem;padding:14px 22px}
.hero h1{color:var(--cream);font-size:clamp(2.4rem,5.5vw,4rem)}.hero h1 b{color:var(--gold);font-weight:500}.hero h1 .ln{display:block}.hero h1 .sub{margin-top:.25em;font-size:.52em;color:var(--gold);letter-spacing:.01em}
.hero .lead{font-size:1.3rem;color:var(--cream);max-width:34ch}.hero .svc{font-size:1.15rem;color:var(--gold);margin:0 0 6px}.hero .ask{color:#e6e0d2;margin:0 0 26px}
.hero .btn.alt{color:var(--gold);margin-left:10px}
.dark{background:var(--ink);color:var(--cream);border-top:1px solid #2a3232}.dark h2{color:var(--cream)}
.dark .card{background:var(--ink2);border-color:#2f3838}.dark .card h3{color:var(--cream)}.dark .card p{color:#cfc8b8}.dark .loc{color:var(--gold)}
.dark .three>div{border-color:var(--gold)}.dark .three h3{color:var(--gold)}.dark .three p{color:#e6e0d2}
.cmp{max-width:600px;aspect-ratio:3/4;box-shadow:0 6px 24px rgba(0,0,0,.25)}.cmp img{-webkit-user-drag:none;pointer-events:none}.cmp .top{will-change:clip-path}
.knob span{width:68px;height:68px;padding:0;display:flex;align-items:center;justify-content:center;font-size:1.05rem;border:3px solid var(--ink)}
.tip{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:var(--gold);padding:10px 18px;border-radius:999px;font-weight:700;font-size:1.05rem;white-space:nowrap;z-index:2;pointer-events:none;transition:opacity .3s}.cmp.used .tip{opacity:0}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,182,119,.8)}50%{box-shadow:0 0 0 16px rgba(220,182,119,0)}}.cmp:not(.used) .knob span{animation:pulse 1.6s infinite}
.rng{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.cmp:has(+ .rng:focus-visible){outline:3px solid var(--gold);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.knob span{animation:none!important}}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:24px 0 8px}.ba figure{margin:0}.ba img{aspect-ratio:3/4;object-fit:cover;object-position:top;width:100%;border-radius:3px}.ba figcaption{color:var(--gold);font-weight:700;font-size:1.15rem;margin-top:8px}.dark .cap{color:#bdb6a6}.dark .btn{margin-top:14px}
.hero img{max-height:680px}

/* header: logo left, colour change on scroll */
header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;background:transparent;padding:12px 0;transition:background .45s ease,box-shadow .45s ease,padding .45s ease}
header.sc{background:var(--cream);box-shadow:0 2px 16px rgba(0,0,0,.22);padding:6px 0}
header .wrap.hd{display:flex;align-items:center;justify-content:space-between}
.brand{display:block;line-height:0}.brand img{height:64px;width:64px}
header nav a{color:var(--cream);text-decoration:none;margin:0 0 0 26px;padding:6px 0;border-bottom:2px solid transparent;font-weight:600;transition:color .4s,border-color .4s}
header nav a:hover,header nav a.on{color:var(--gold);border-color:var(--gold)}
header.sc nav a{color:var(--ink)}header.sc nav a:hover,header.sc nav a.on{color:var(--gold-d);border-color:var(--gold-d)}
.menu{display:none;background:none;border:1px solid var(--gold);color:var(--gold);padding:9px 16px;border-radius:3px;font:600 1rem inherit;font-family:inherit}header.sc .menu{color:var(--gold-d);border-color:var(--gold-d)}.mob{display:none}
body:not(.home) main{padding-top:80px}body.home .hero{padding-top:130px}
/* loading screen: logo in the middle */
#splash{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .8s ease,visibility .8s}#splash.out{opacity:0;visibility:hidden}
#splash img{width:min(260px,60vw);height:auto;animation:splashLogo 1.2s cubic-bezier(.2,.7,.2,1) both}
#splash i{display:block;height:2px;width:0;background:var(--gold);animation:splashBar 1.6s .6s ease forwards}
@keyframes splashLogo{from{opacity:0;transform:scale(.82);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes splashBar{to{width:min(220px,50vw)}}
@media(max-width:800px){.dn{display:none}.menu{display:block}
.mob{position:absolute;top:100%;left:0;right:0;background:var(--cream);padding:6px 20px 16px;box-shadow:0 10px 18px rgba(0,0,0,.2)}header.open .mob{display:block}header.open{background:var(--cream)}
header .mob a{display:block;color:var(--ink);margin:0;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.15rem}body.home .hero{padding-top:120px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* responsive: small phones to large desktops */
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}body{overflow-wrap:break-word}footer{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
@media(min-width:1600px){body{font-size:19px}.wrap{max-width:1320px}}
@media(max-width:600px){.sec{padding:44px 0}.hero .btn,.hero .btn.alt,.notes .btn,.callbox .btn{display:block;text-align:center;margin:0 0 12px}.callbox{padding:24px 16px}.notes{padding:22px 18px}.two,.row{gap:28px}footer .wrap{flex-direction:column;text-align:center}footer img{height:64px}}
@media(max-width:380px){body{font-size:16px}.wrap{padding-left:16px;padding-right:16px}.brand img{height:56px;width:56px}}
@media(max-height:500px) and (orientation:landscape){body.home .hero{padding-top:100px}}
.card .tag{align-self:flex-start}
.hero .tag{background:var(--gold);color:var(--ink);margin-bottom:10px}

/* bigger logo, completed projects on Home */
.brand img{height:88px;width:88px}header.sc .brand img{height:72px;width:72px}header .brand img{transition:height .45s ease,width .45s ease}
body.home .hero{padding-top:150px}body:not(.home) main{padding-top:92px}
.done+.done{border-top:1px solid #2f3838;margin-top:48px;padding-top:40px}.done{margin-top:28px}
@media(max-width:800px){.brand img{height:76px;width:76px}header.sc .brand img{height:64px;width:64px}body.home .hero{padding-top:130px}}
@media(max-width:380px){.brand img{height:68px;width:68px}}