:root{--paper:#fffefa;--ink:#11110f;--orange:#f15a24;--blue:#255fd5;--line:rgba(17,17,15,.16);--shell:min(1240px,calc(100% - 48px))}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--paper);background-image:radial-gradient(rgba(17,17,15,.035) .6px,transparent .6px);background-size:6px 6px;color:var(--ink);font-family:"DM Sans",sans-serif;font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}
.shell{width:var(--shell);margin-inline:auto}
.nav{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font:700 14px/1.05 Manrope,sans-serif;text-transform:uppercase;letter-spacing:-.03em}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--orange);font-size:17px}
.nav nav{display:flex;gap:34px;font-size:14px}
.nav nav a,.footer a{transition:opacity .2s}
.nav nav a:hover,.footer a:hover{opacity:.5}
.nav-cta{font-size:14px;font-weight:600;border-bottom:1px solid;padding-bottom:4px}
.nav-cta span,.button span,.text-link span{color:var(--orange)}
.hero{padding:72px 0 0;position:relative}
.eyebrow,.section-index{font:600 12px/1.2 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.eyebrow span{color:var(--orange);margin-right:8px}
.hero h1{font:800 clamp(4.4rem,10.2vw,9.3rem)/.96 Manrope,sans-serif;letter-spacing:-.075em;margin:48px 0 54px;max-width:1050px}
.hero h1 em,.contact h2 em{color:var(--orange);font-style:normal}
.hero-bottom{display:grid;grid-template-columns:1fr 1fr;align-items:end;margin-left:34%;gap:48px}
.hero-bottom p{max-width:520px;font-size:21px;line-height:1.45;margin:0}
.button{display:inline-flex;justify-content:space-between;align-items:center;background:var(--orange);padding:19px 22px;min-width:245px;font-weight:600;justify-self:end}
.button span{color:var(--ink);font-size:20px}
.hero-art{height:520px;margin-top:72px;background:#dedbd4 url('./hero-studio.png') center 52%/cover no-repeat;position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.art-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;opacity:.7}
.art-label{position:absolute;left:24px;top:24px;font:600 11px Manrope;letter-spacing:.16em;background:var(--paper);padding:10px 12px;border:1px solid var(--ink)}
.art-note{position:absolute;width:190px;height:190px;padding:24px;font:500 23px/1.08 Manrope;box-shadow:0 18px 40px #0001;transform:rotate(-4deg)}
.art-note strong{font-size:32px}
.note-a{background:var(--orange);left:20%;top:85px}
.note-b{background:var(--blue);color:white;right:18%;top:54px;transform:rotate(3deg)}
.art-path{position:absolute;left:44%;top:170px;width:18%;display:flex;align-items:center;justify-content:space-between}
.art-path:before{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink)}
.art-path span{width:13px;height:13px;border:2px solid var(--ink);background:var(--paper);border-radius:50%;z-index:1}
.art-arrow{position:absolute;right:24px;bottom:-34px;font:400 150px/1 Manrope}
.statement{padding:150px 0;display:grid;grid-template-columns:1fr 3fr;gap:40px}
.statement-copy{font:500 clamp(2.1rem,4.2vw,4rem)/1.12 Manrope;margin:0;letter-spacing:-.05em}
.statement-copy strong{color:var(--orange)}
.services{padding:40px 0 140px}
.section-head{display:grid;grid-template-columns:1fr 3fr;gap:40px;margin-bottom:70px}
.section-head h2{font:700 clamp(2.5rem,5vw,5rem)/1 Manrope;margin:0;letter-spacing:-.055em;max-width:900px}
.human-note{display:inline-block;margin-top:18px;color:var(--orange);font:600 28px/1 Caveat,cursive;transform:rotate(-2deg)}
.service-list{border-top:1px solid var(--line)}
.service-card{display:grid;grid-template-columns:54px 72px 1fr 60px;gap:26px;align-items:center;padding:38px 0;border-bottom:1px solid var(--line);transition:padding .25s,background .25s}
.service-card:hover{padding-left:18px;padding-right:18px;background:#fff6}
.service-number{font:600 12px Manrope;color:var(--orange)}
.service-icon{width:64px;height:64px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-1deg)}
.service-icon .accent{stroke:var(--orange);stroke-width:2.3}
.service-card h3{font:700 clamp(1.7rem,3vw,3rem)/1 Manrope;margin:0 0 14px;letter-spacing:-.045em}
.service-card p{max-width:600px;margin:0;color:#4d4a47;font-size:17px}
.service-arrow{font-size:28px;text-align:right}
.process{background:#151513;color:#fffefa;padding:130px 0}
.process-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:100px}
.section-head.light{display:block;margin:0}
.section-head.light h2{margin:40px 0 28px}
.section-head.light p{font-size:18px;color:#bdb9b2;max-width:430px}
.light-note{color:#ff7a45;margin-top:34px;transform:rotate(2deg)}
.process-steps{list-style:none;padding:0;margin:0;border-top:1px solid #ffffff35}
.process-steps li{display:grid;grid-template-columns:42px 48px .8fr 1.4fr;gap:20px;padding:27px 0;border-bottom:1px solid #ffffff35;align-items:center}
.process-steps li span{font:600 12px Manrope;color:var(--orange)}
.process-icon{width:40px;height:40px;fill:none;stroke:#fffefa;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-2deg)}
.process-steps strong{font:600 20px Manrope}
.process-steps p{margin:0;color:#aaa69f}
.about{padding:150px 0;display:grid;grid-template-columns:.8fr 1.2fr;gap:10%;align-items:center}
.portrait-placeholder{aspect-ratio:4/5;background:var(--orange);position:relative;padding:28px;overflow:hidden}
.portrait-placeholder:after{content:"";position:absolute;width:70%;aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;right:-20%;top:12%}
.portrait-placeholder span{font:800 clamp(5rem,12vw,10rem)/1 Manrope;letter-spacing:-.1em;position:absolute;left:-10px;bottom:18%}
.portrait-placeholder small{position:absolute;bottom:28px;right:28px;text-align:right;font:600 10px/1.5 Manrope;letter-spacing:.12em}
.about-copy h2{font:700 clamp(2.5rem,4.6vw,4.7rem)/1.02 Manrope;letter-spacing:-.055em;margin:36px 0 38px}
.about-copy p{font-size:18px;color:#4d4a47;max-width:670px}
.text-link{display:inline-block;margin-top:24px;font-weight:600;border-bottom:1px solid;padding-bottom:5px}
.fit{padding:40px 0 150px}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;margin-top:55px}
.fit h2{font:700 clamp(2.5rem,4.8vw,4.8rem)/1.02 Manrope;letter-spacing:-.055em;margin:0}
.fit ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.fit li{font:500 20px Manrope;padding:22px 0 22px 34px;border-bottom:1px solid var(--line);position:relative}
.fit li:before{content:"↗";position:absolute;left:0;color:var(--orange)}
.contact{background:var(--orange);padding:110px 0}
.contact h2{font:800 clamp(3.6rem,8vw,8.2rem)/.9 Manrope;letter-spacing:-.07em;margin:50px 0 70px}
.contact h2 em{color:var(--ink);text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:10px}
.contact-bottom{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:60px;margin-left:34%}
.contact-bottom p{font-size:19px;max-width:520px}
.button.dark{background:var(--ink);color:#fffefa}
.button.dark span{color:var(--orange)}
.footer{display:grid;grid-template-columns:1fr 1fr auto;gap:50px;padding:54px 0;align-items:end}
.footer>div:nth-child(2){display:flex;gap:26px;font-size:14px}
.footer p{font-size:12px;text-align:right;margin:0;color:#666}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:800px){:root{--shell:calc(100% - 32px)}
.nav{height:80px}
.nav nav{display:none}
.nav-cta{font-size:0}
.nav-cta span{font-size:22px}
.hero{padding-top:52px}
.hero h1{line-height:1;margin:38px 0}
.hero-bottom,.contact-bottom{grid-template-columns:1fr;margin-left:0}
.button{justify-self:stretch}
.hero-art{height:360px}
.art-note{width:145px;height:145px;font-size:18px;padding:18px}
.art-note strong{font-size:24px}
.note-a{left:5%;top:95px}
.note-b{right:6%;top:45px}
.art-path{display:none}
.statement,.section-head,.process-inner,.about,.fit-grid{grid-template-columns:1fr}
.statement{padding:100px 0;gap:35px}
.services{padding-bottom:100px}
.section-head{gap:35px}
.service-card{grid-template-columns:30px 48px 1fr 24px;gap:14px;align-items:start}
.service-icon{width:44px;height:44px}
.service-card p{font-size:15px}
.process{padding:90px 0}
.process-inner{gap:65px}
.process-steps li{grid-template-columns:30px 40px 1fr}
.process-steps p{grid-column:3}
.process-icon{width:34px;height:34px}
.about{padding:100px 0;gap:70px}
.portrait-block{width:85%}
.fit{padding-bottom:100px}
.fit-grid{gap:50px}
.contact{padding:90px 0}
.contact-bottom{gap:35px}
.footer{grid-template-columns:1fr auto}
.footer>div:nth-child(2){grid-column:1/-1;grid-row:1}
.footer-brand{grid-row:2}
.footer p{grid-row:2}
.hero-bottom p{font-size:18px}
}