:root { --orange:#ff4d00; --ink:#151515; --muted:#606060; --line:#dedede; --soft:#f6f6f4; --white:#fff; --max:1440px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font-family:"DM Sans",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.site-header { height:92px; padding:0 clamp(24px,6vw,88px); display:flex; align-items:center; justify-content:space-between; gap:32px; border-bottom:1px solid #eee; position:relative; z-index:20; background:#fff; }
.brand { display:inline-flex; flex-direction:column; text-transform:uppercase; line-height:.9; font-weight:700; letter-spacing:-.02em; }
.brand span { font-size:20px; }
.brand small { color:var(--orange); font-size:10px; letter-spacing:.16em; margin-top:8px; }
.desktop-nav { display:flex; gap:42px; margin-left:auto; margin-right:auto; font-size:14px; font-weight:500; }
.desktop-nav a { transition:color .2s; }.desktop-nav a:hover { color:var(--orange); }
.button { min-height:52px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:22px; font-size:14px; font-weight:600; border:1px solid transparent; transition:transform .2s,background .2s,color .2s; }
.button:hover { transform:translateY(-2px); }.button-primary { background:var(--orange); color:#fff; }.button-primary:hover { background:#dd4200; }.button-secondary { border-color:#999; background:#fff; }.button-secondary:hover { border-color:var(--ink); }
.menu-button,.mobile-nav { display:none; }
.hero { min-height:680px; display:grid; grid-template-columns:44% 56%; max-width:var(--max); margin:auto; }
.hero-copy { padding:clamp(72px,8vw,128px) clamp(32px,6vw,96px); align-self:center; }
.hero h1 { font-size:clamp(45px,5vw,76px); line-height:1.03; letter-spacing:-.055em; margin:0; max-width:720px; }
.hero p { color:var(--muted); font-size:17px; line-height:1.65; max-width:560px; margin:32px 0; }.actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-media { min-height:680px; clip-path:polygon(18% 0,100% 0,100% 100%,0 100%); overflow:hidden; }.hero-media img { height:100%; object-fit:cover; }
.section { max-width:var(--max); margin:auto; padding:96px clamp(28px,6vw,88px); }.section-heading h2,.featured-work h2,.contact-band h2 { font-size:clamp(38px,4vw,60px); letter-spacing:-.05em; line-height:1.05; margin:0; }
.outcomes { background:var(--soft); max-width:none; }.outcomes > * { max-width:1264px; margin-left:auto; margin-right:auto; }.outcome-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:60px; }.outcome { padding:0 56px; border-left:1px solid #efb59c; }.outcome:first-child { padding-left:0; border-left:0; }.line-icon { display:block; color:var(--orange); font-size:48px; height:64px; }.outcome h3,.capability h3,.process-step h3 { font-size:20px; margin:18px 0 12px; }.outcome p,.capability p,.process-step p { color:var(--muted); font-size:15px; line-height:1.65; margin:0; }
.capability-list { display:grid; grid-template-columns:repeat(5,1fr); margin-top:64px; }.capability { padding:0 28px; border-left:1px solid var(--line); }.capability:first-child { padding-left:0; border:0; }.capability > span { color:var(--orange); font-size:13px; font-weight:700; }.capability h3 { min-height:52px; }
.featured-work { max-width:var(--max); margin:auto; display:grid; grid-template-columns:55% 45%; background:var(--soft); }.work-image { min-height:560px; }.work-image img { height:100%; object-fit:cover; }.work-copy { padding:clamp(48px,7vw,100px); align-self:center; }.label { color:var(--orange)!important; font-size:12px!important; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.work-copy > p { color:var(--muted); line-height:1.7; font-size:16px; }.text-link { display:inline-flex; gap:26px; border-bottom:1px solid var(--ink); padding:8px 0; margin-top:18px; font-weight:600; }
.centered { text-align:center; }.process-list { display:grid; grid-template-columns:repeat(3,1fr); gap:56px; margin-top:70px; }.process-step { display:grid; grid-template-columns:74px 1fr; gap:16px; }.process-step > span { color:var(--orange); font-family:Georgia,serif; font-size:44px; }.process-step h3 { margin-top:8px; }
.contact-band { max-width:var(--max); margin:auto; padding:64px clamp(28px,6vw,88px); color:#fff; background:#171717; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }.contact-copy { max-width:520px; }.contact-copy p { color:#d0d0d0; line-height:1.6; margin:0 0 24px; }
.site-footer { max-width:var(--max); margin:auto; padding:54px clamp(28px,6vw,88px); display:grid; grid-template-columns:1.4fr 1.2fr .8fr 1fr; gap:40px; font-size:13px; line-height:1.8; }.site-footer p { margin:0; }.site-footer > div:not(.brand) { display:flex; flex-direction:column; }
.reveal { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button{transition:none} }
@media (max-width:960px) { .desktop-nav,.header-cta{display:none}.menu-button{display:flex;border:0;background:none;width:42px;height:42px;flex-direction:column;gap:7px;justify-content:center;align-items:center}.menu-button span{width:24px;height:2px;background:#111}.mobile-nav{position:absolute;top:92px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:28px;flex-direction:column;gap:22px}.mobile-nav.open{display:flex}.hero{grid-template-columns:1fr}.hero-copy{padding:72px 28px}.hero-media{min-height:500px;clip-path:none}.outcome-grid{grid-template-columns:1fr;gap:42px}.outcome{border-left:0;border-top:1px solid #efb59c;padding:34px 0 0}.outcome:first-child{border-top:0}.capability-list{grid-template-columns:repeat(2,1fr);gap:38px}.capability,.capability:first-child{border-left:0;padding:0}.featured-work{grid-template-columns:1fr}.work-image{min-height:440px}.process-list{grid-template-columns:1fr}.contact-band{grid-template-columns:1fr;gap:34px}.site-footer{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px) { .site-header{height:76px}.mobile-nav{top:76px}.brand span{font-size:17px}.hero h1{font-size:45px}.hero-media{min-height:360px}.section{padding-top:72px;padding-bottom:72px}.capability-list{grid-template-columns:1fr}.capability h3{min-height:0}.work-image{min-height:320px}.process-step{grid-template-columns:58px 1fr}.contact-band{padding-top:52px;padding-bottom:52px}.site-footer{grid-template-columns:1fr}.actions .button{width:100%} }