/* Shared design system — Shrum & Finesse Interio */
:root{
  --ink:#141414; --ink-2:#2b2b2b; --muted:#6f6b64; --bg:#f6f4f0; --stone:#ebe7e0;
  --line:#dcd7cf; --white:#fff; --accent:#8b7355; --dark:#141414;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Inter Tight",sans-serif;font-weight:300;letter-spacing:-.025em;line-height:1.1}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}
@media(max-width:600px){.wrap{padding:0 18px}}
.label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.link{display:inline-flex;align-items:center;gap:12px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding-bottom:6px;border-bottom:1px solid currentColor;transition:gap .25s}
.link:hover{gap:20px}
.btn{display:inline-block;padding:16px 34px;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:.25s;border:none;cursor:pointer;font-family:inherit}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--accent)}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:var(--stone)}
.lead{font-size:1.12rem;color:var(--ink-2);font-weight:300;max-width:620px}
.muted{color:var(--muted)}
section{padding:130px 0}
@media(max-width:900px){section{padding:80px 0}}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:50px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(2rem,3.6vw,3.2rem);margin-top:12px}

/* Images */
.img{position:relative;overflow:hidden;background:#cfc8bc}
.img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
a:hover .img img,.img:hover img{transform:scale(1.03)}
.img .tag{position:absolute;left:12px;bottom:12px;background:rgba(20,20,20,.55);color:#fff;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px}
.r45{aspect-ratio:4/5}.r34{aspect-ratio:3/4}.r169{aspect-ratio:16/9}.r1610{aspect-ratio:16/10}.r11{aspect-ratio:1/1}.r32{aspect-ratio:3/2}

/* Nav */
nav.top{position:absolute;top:0;left:0;right:0;z-index:30;color:#fff}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:92px;gap:20px}
.logo{display:inline-flex;align-items:flex-start;gap:3px}
.logo img{height:44px;width:auto}
.tm{font-size:.62rem;line-height:1;opacity:.85}
.menu{display:flex;gap:34px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.menu a{opacity:.8;padding:6px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a.on{opacity:1;border-bottom-color:currentColor}
.nav-r{display:flex;align-items:center;gap:26px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.burger{display:none;background:none;border:none;color:#fff;cursor:pointer;width:40px;height:40px;position:relative}
.burger span,.burger:before,.burger:after{content:"";position:absolute;left:8px;right:8px;height:1.5px;background:currentColor;transition:.25s}
.burger:before{top:13px}.burger span{top:19px}.burger:after{top:25px}
.mnav{display:none}
@media(max-width:1020px){
  .menu,.nav-r .grp,.nav-r .link{display:none}.burger{display:block}
  .logo img{height:36px}
  .mnav{display:block;position:fixed;inset:0;background:var(--dark);color:#fff;z-index:40;padding:110px 24px 40px;transform:translateY(-100%);transition:transform .35s ease;overflow:auto}
  .mnav.open{transform:none}
  .mnav a{display:block;font-family:"Inter Tight";font-weight:300;font-size:2rem;padding:12px 0;border-bottom:1px solid #2e2e2e}
  .mnav .small{font-family:Inter;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#aaa;border:none;margin-top:24px}
  body.lock{overflow:hidden}
  body.lock nav.top{position:fixed;z-index:50}
  body.lock .burger span{opacity:0}
  body.lock .burger:before{top:19px;transform:rotate(45deg)}
  body.lock .burger:after{top:19px;transform:rotate(-45deg)}
}

/* Hero (home) */
.hero{position:relative;height:100vh;min-height:640px;color:#fff;display:flex;align-items:flex-end;background:#1c1a18}
.hero>.img{position:absolute;inset:0}
.hero>.img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.12) 35%,rgba(0,0,0,.62) 100%)}
.hero .wrap{position:relative;width:100%;padding-bottom:80px;display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:40px}
.hero h1{font-size:clamp(2.6rem,6.2vw,5.6rem)}
.hero p{font-size:1.02rem;color:rgba(255,255,255,.85);max-width:420px;margin-bottom:28px;font-weight:300}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;padding-bottom:50px}}

/* Page hero (inner pages) */
.phero{position:relative;height:62vh;min-height:440px;color:#fff;display:flex;align-items:flex-end;background:#1c1a18}
.phero>.img{position:absolute;inset:0}
.phero>.img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 40%,rgba(0,0,0,.6))}
.phero .wrap{position:relative;width:100%;padding-bottom:64px}
.phero .label{color:rgba(255,255,255,.75)}
.phero h1{font-size:clamp(2.4rem,5.4vw,4.6rem);margin-top:14px;max-width:900px}

/* Intro + facts */
.intro .wrap.g{display:grid;grid-template-columns:1fr 2fr;gap:60px}
.intro h2{font-size:clamp(1.9rem,3.4vw,3rem)}
.intro h2 em{font-style:normal;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:80px}
.fact{padding:34px 20px 0 0;border-right:1px solid var(--line)}
.fact:last-child{border-right:none}
.fact:not(:first-child){padding-left:28px}
.fact b{display:block;font-family:"Inter Tight";font-weight:300;font-size:clamp(2.4rem,4vw,3.6rem);letter-spacing:-.03em}
.fact span{font-size:.82rem;color:var(--muted)}
@media(max-width:900px){.intro .wrap.g{grid-template-columns:1fr;gap:20px}.facts{grid-template-columns:1fr 1fr;margin-top:50px}.fact{padding:24px 14px 24px 0!important;border-right:none;border-bottom:1px solid var(--line)}}

/* Cards */
.coll-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}
.coll-grid .stack{display:grid;gap:24px}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0 0}
.card h3{font-size:1.6rem}
.card p{color:var(--muted);font-size:.9rem;margin-top:4px;max-width:440px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid3 h3,.grid2 h3{font-size:1.3rem;margin-top:18px}
.grid3 p,.grid2 p{font-size:.88rem;color:var(--muted);margin-top:4px}
@media(max-width:900px){.coll-grid,.grid3,.grid2{grid-template-columns:1fr}}

/* Split feature (text + image) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.feature.rev>.img{order:2}
.feature h2{font-size:clamp(2rem,3.6vw,3.2rem);margin:14px 0 22px}
.feature p{color:var(--ink-2);font-weight:300;margin-bottom:16px}
.list{list-style:none;margin:26px 0 34px}
.list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:.94rem;display:flex;gap:14px}
.list li:before{content:"—";color:var(--accent)}
@media(max-width:900px){.feature{grid-template-columns:1fr;gap:40px}.feature.rev>.img{order:0}}

/* Audience / panels */
.white{background:var(--white)}
.stoneb{background:var(--stone)}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.panel{background:#fff;padding:56px}
.panel h3{font-size:2rem;margin:14px 0 18px}
.panel .list{margin-top:10px}
@media(max-width:900px){.panels{grid-template-columns:1fr}.panel{padding:32px 22px}}

/* Dark section */
.dark{background:var(--dark);color:#fff}
.dark .label{color:#9c968c}
.dark p{color:#b8b3aa;font-weight:300}
.dark h2{font-size:clamp(2.2rem,4vw,3.6rem)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #333;margin-top:60px}
.st{padding:28px 18px 0 0}
.st span{font-size:.72rem;color:var(--accent);letter-spacing:.2em}
.st h4{font-weight:400;font-size:1.08rem;margin-top:10px;color:#fff}
.st p{font-size:.85rem;margin-top:8px}
.light .steps{border-top-color:var(--line)}.light .st h4{color:var(--ink)}.light .st p{color:var(--muted)}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:60px}
.box{border:1px solid #333;padding:32px}
.box h4{font-weight:400;font-size:1.3rem;margin:10px 0 6px}
.box p{font-size:.9rem}
.photos2{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:60px}
@media(max-width:900px){.two,.boxes,.photos2{grid-template-columns:1fr;gap:20px}.steps{grid-template-columns:1fr 1fr}}

/* Clients */
.clients{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.clients .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cl-row{display:flex;gap:52px;flex-wrap:wrap;font-family:"Inter Tight";font-size:1.15rem;color:#8d887f}

/* Timeline */
.tl{list-style:none}
.tl li{display:grid;grid-template-columns:120px 1fr;padding:18px 0;border-top:1px solid var(--line);font-size:.94rem}
.tl li b{font-weight:500;color:var(--accent)}

/* People */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.person{background:#fff;padding:40px}
.person h3{font-size:1.5rem;margin-top:10px}
.person p{color:var(--muted);font-size:.9rem;margin-top:6px}
@media(max-width:900px){.people{grid-template-columns:1fr}}

/* CTA band */
.cta{background:var(--stone);padding:110px 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap}
.cta h2{font-size:clamp(2rem,4vw,3.4rem);max-width:700px;margin-top:12px}
.cta .acts{display:flex;gap:14px;flex-wrap:wrap}
.btn-line{border:1px solid var(--ink);color:var(--ink);background:transparent}.btn-line:hover{background:var(--ink);color:#fff}

/* Contact */
.contact-g{display:grid;grid-template-columns:1fr 1.2fr;gap:80px}
.cinfo{margin-top:30px;font-size:.94rem}
.cinfo div{padding:16px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:10px}
.cinfo span{color:var(--muted);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
form.enq{display:grid;grid-template-columns:1fr 1fr;gap:30px 26px}
form.enq .full{grid-column:1/-1}
form.enq label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
form.enq input,form.enq select,form.enq textarea{width:100%;border:none;border-bottom:1px solid #b9b2a7;background:transparent;padding:10px 0;font:inherit;font-size:1rem;color:var(--ink);outline:none;border-radius:0}
form.enq input:focus,form.enq select:focus,form.enq textarea:focus{border-bottom-color:var(--ink)}
form.enq textarea{min-height:100px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.map{width:100%;aspect-ratio:16/7;border:0;filter:grayscale(1) contrast(.95);margin-top:80px;display:block}
@media(max-width:900px){.contact-g{grid-template-columns:1fr;gap:50px}form.enq{grid-template-columns:1fr}.map{aspect-ratio:4/3}}

/* Footer */
footer{background:var(--dark);color:#a29d94;padding:100px 0 34px;font-size:.88rem}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px}
footer .logo img{height:40px}
footer h5{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:500;margin-bottom:18px}
footer li{list-style:none;margin-bottom:10px}
footer a:hover{color:#fff}
.group{border:1px solid #3a3a3a;padding:26px;display:block;transition:.25s}
.group:hover{border-color:var(--accent)}
.group img{height:30px;width:auto;margin:12px 0}
.f-bot{border-top:1px solid #2c2c2c;margin-top:80px;padding-top:26px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.76rem}
@media(max-width:900px){.f-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-top{grid-template-columns:1fr}}

.wa{position:fixed;right:24px;bottom:24px;width:54px;height:54px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;z-index:35;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:.25s}
.wa:hover{background:#25d366}
.wa svg{width:24px;height:24px;fill:#fff}

/* Thank you */
.ty{min-height:100vh;display:flex;align-items:center;background:var(--dark);color:#fff}
.ty h1{font-size:clamp(2.4rem,5vw,4.4rem);margin:16px 0 20px}
.ty p{color:#b8b3aa;max-width:520px;margin-bottom:34px}

/* Collections jump bar */
.jump{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.jump .wrap{display:flex;gap:30px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.jump .wrap::-webkit-scrollbar{display:none}
.jump a{padding:20px 0;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent}
.jump a:hover{color:var(--ink);border-bottom-color:var(--ink)}
section[id]{scroll-margin-top:60px}

/* Finishes */
.fins{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.fin{background:var(--bg);padding:34px 22px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.fin h4{font-size:1.15rem;font-weight:400}
@media(max-width:1000px){.fins{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.fins{grid-template-columns:repeat(2,1fr)}}
.photos2>.img+.img{aspect-ratio:auto;min-height:220px}

/* Consulting */
.chero{background:var(--dark);color:#fff;padding:150px 0 100px}
.chero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.chero .label{color:#9c968c}
.chero h1{font-size:clamp(2.3rem,4.6vw,4.2rem);margin:18px 0 22px}
.chero p{color:#b8b3aa;max-width:520px;font-weight:300;margin-bottom:34px}
.chero .acts{display:flex;gap:14px;flex-wrap:wrap}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff;background:transparent}.btn-ghost:hover{background:#fff;color:var(--ink)}
.portrait img{object-position:center 30%}
.cred{margin-top:34px}
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{background:#fff;padding:40px 34px}
.svc h3{font-size:1.4rem}
.svc p{color:var(--muted);font-size:.92rem;margin-top:10px}
.steps.s4{grid-template-columns:repeat(4,1fr)}
.panels.p3{grid-template-columns:repeat(3,1fr)}
.panel p.muted{font-size:.94rem}
@media(max-width:900px){.chero{padding:120px 0 70px}.chero .wrap{grid-template-columns:1fr;gap:40px}.svcs,.panels.p3{grid-template-columns:1fr}.steps.s4{grid-template-columns:1fr 1fr}}