@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#0a0a0b; --black:#000; --gold:#f2b62b; --gold-light:#ffc73d; --blue:#a56c00; --grey:#89898d; --paper:#f1f1f2; --muted:#69696d; --line:#cacacd; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.55; }
.site-header { min-height:132px; padding:10px clamp(24px,5vw,80px); display:flex; justify-content:space-between; align-items:center; background:var(--black); border-bottom:1px solid #282829; }
.brand { display:block; height:112px; }.brand img { display:block; width:220px; height:112px; object-fit:contain; }
nav { display:flex; gap:clamp(18px,3vw,40px); } nav a { color:#c2c2c4; text-decoration:none; font-size:.86rem; font-weight:700; } nav a:hover { color:var(--gold); }
.hero { min-height:610px; padding:clamp(64px,10vw,150px) clamp(24px,8vw,128px) 72px; display:grid; grid-template-columns:1fr; align-items:center; background:var(--black); color:#f5f5f6; position:relative; overflow:hidden; }
.hero-copy { position:relative; z-index:1; max-width:980px; }.eyebrow { margin:0 0 16px; color:var(--blue); font:500 .72rem/1.3 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.hero .eyebrow { color:var(--gold); }.hero h1 { max-width:760px; margin:0; font-size:clamp(3.25rem,7vw,6.8rem); letter-spacing:-.075em; line-height:.94; }.intro { max-width:650px; margin:30px 0 34px; color:#c2c2c5; font-size:clamp(1.05rem,1.5vw,1.25rem); }
.button { display:inline-flex; align-items:center; gap:22px; padding:15px 19px; color:var(--black); background:var(--gold); text-decoration:none; font-size:.87rem; font-weight:800; }.button span { font-size:1.35rem; line-height:.8; }.button:hover { background:var(--gold-light); }
.section { padding:clamp(70px,9vw,130px) clamp(24px,8vw,128px); }.section-head { max-width:700px; }.section h2,.experience h2,.contact h2 { margin:0; font-size:clamp(2rem,4vw,3.8rem); letter-spacing:-.06em; line-height:1.05; }.service-grid { margin-top:62px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); }.service-grid article { min-height:255px; padding:24px 26px 20px 0; border-right:1px solid var(--line); margin-right:24px; }.service-grid article:last-child { border:none; }.service-grid span { color:#bf8611; font:500 .72rem 'DM Mono',monospace; }.service-grid h3 { margin:52px 0 12px; font-size:1.13rem; letter-spacing:-.035em; line-height:1.25; }.service-grid p { margin:0; color:var(--muted); font-size:.92rem; }
.sector-grid { margin-top:62px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }.sector-grid article { min-height:205px; padding:24px 30px 20px 0; border-right:1px solid var(--line); margin-right:30px; }.sector-grid article:last-child { border:0; margin-right:0; }.sector-grid span { color:#bf8611; font:500 .72rem 'DM Mono',monospace; }.sector-grid h3 { margin:42px 0 12px; font-size:1.13rem; letter-spacing:-.035em; line-height:1.25; }.sector-grid p { margin:0; color:var(--muted); font-size:.92rem; }
.projects { background:#e7e7e8; }.projects-intro { max-width:590px; margin:22px 0 0; color:var(--muted); font-size:1.02rem; }.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:48px; }.project-card { background:#f8f8f8; border:1px solid #d3d3d4; }.project-art { height:205px; position:relative; overflow:hidden; display:flex; align-items:center; background:#101011; }.project-art svg { width:100%; height:100%; }.project-art .art-rail,.project-art .art-frame,.project-art .art-line,.project-art .art-node,.project-art .art-teeth { fill:none; stroke:rgba(242,182,43,.62); stroke-width:2; vector-effect:non-scaling-stroke; }.project-art .art-frame { stroke:rgba(235,235,235,.72); stroke-width:3; }.project-art .art-line { stroke:#f2b62b; stroke-width:4; }.project-art .art-node { stroke:#f2b62b; stroke-width:3; }.project-art .art-bottle path,.project-art .art-product rect { fill:rgba(242,182,43,.22); stroke:#f2b62b; stroke-width:2; }.project-art .art-wheel { fill:#101011; stroke:rgba(235,235,235,.8); stroke-width:3; }.project-art--bakery { background:#191918; }.project-art--recycling { background:#171918; }.art-label { position:absolute; left:18px; bottom:15px; padding:5px 8px; color:#f2b62b; background:rgba(0,0,0,.76); font:500 .62rem 'DM Mono',monospace; letter-spacing:.12em; }.project-copy { padding:22px 22px 25px; }.project-type { margin:0 0 9px; color:#9a6b0b; font:500 .67rem 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }.project-copy h3 { margin:0 0 12px; font-size:1.14rem; letter-spacing:-.03em; line-height:1.25; }.project-copy > p:last-child { margin:0; color:var(--muted); font-size:.9rem; }.projects-note { margin:22px 0 0; color:#69696d; font-size:.75rem; }
.approach { padding:clamp(70px,9vw,130px) clamp(24px,8vw,128px); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(48px,10vw,140px); align-items:start; background:var(--black); color:#f5f5f6; }.approach-intro .eyebrow { color:var(--gold); }.approach-intro h2 { max-width:560px; margin:0; font-size:clamp(2rem,4vw,3.8rem); letter-spacing:-.06em; line-height:1.05; }.approach-intro > p:last-child { max-width:470px; margin:24px 0 0; color:#b9b9bc; }.approach-steps { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; }.approach-steps li { min-height:154px; padding:20px 0; display:flex; gap:18px; border-top:1px solid #454548; }.approach-steps li > span { flex:0 0 auto; color:var(--gold); font:500 .72rem 'DM Mono',monospace; }.approach-steps h3 { margin:0 0 9px; font-size:1.02rem; }.approach-steps p { margin:0; color:#b9b9bc; font-size:.88rem; }
.experience { padding:clamp(70px,9vw,130px) clamp(24px,8vw,128px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,12vw,160px); background:#d8d8da; }.experience-copy { max-width:520px; font-size:1.08rem; }.experience-copy p:first-child { margin-top:0; }.experience-copy p:last-child { color:var(--muted); }
.contact { padding:clamp(74px,10vw,140px) clamp(24px,8vw,128px); background:var(--gold); color:var(--black); }.contact .eyebrow { color:#5a3c00; }.contact h2 { max-width:900px; }.contact p:not(.eyebrow) { max-width:620px; color:#282828; margin:24px 0 32px; font-size:1.05rem; }.contact .contact-email { margin:16px 0 0; font-size:.88rem; }.contact .contact-phone { margin:5px 0 0; font-size:.88rem; }.contact-email a,.contact-phone a { color:var(--black); font-weight:700; }.button-light { color:#f5f5f5; background:var(--black); }.button-light:hover { background:#363638; }
footer { padding:24px clamp(24px,5vw,80px); display:flex; justify-content:space-between; gap:20px; background:var(--black); color:#9b9b9e; font:500 .69rem/1.4 'DM Mono',monospace; letter-spacing:.05em; }
@media (max-width:900px) { .project-grid { grid-template-columns:1fr 1fr; }.project-card:last-child { grid-column:1 / -1; }.project-card:last-child .project-art { height:240px; } }
@media (max-width:760px) { .site-header { min-height:98px; }.brand { height:82px; }.brand img { width:156px; height:82px; }.site-header nav { gap:12px; flex-wrap:wrap; justify-content:flex-end; max-width:340px; } nav a { font-size:.75rem; }.hero { min-height:0; }.service-grid { grid-template-columns:1fr 1fr; }.service-grid article:nth-child(2) { border-right:none; }.service-grid article { min-height:220px; }.sector-grid { grid-template-columns:1fr 1fr; }.sector-grid article:nth-child(2) { border-right:none; }.sector-grid article:last-child { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:24px; }.approach { grid-template-columns:1fr; gap:38px; }.experience { grid-template-columns:1fr; gap:34px; } footer { flex-direction:column; } }
@media (max-width:430px) { .site-header { gap:8px; }.brand { height:70px; }.brand img { width:128px; height:70px; }.site-header nav { max-width:190px; gap:7px 11px; }.site-header nav a { font-size:.7rem; }.service-grid,.sector-grid,.project-grid { grid-template-columns:1fr; }.service-grid article,.sector-grid article { min-height:auto; margin-right:0; padding:22px 0; border-right:0; border-bottom:1px solid var(--line); }.service-grid h3 { margin:24px 0 9px; }.sector-grid h3 { margin:24px 0 9px; }.sector-grid article:nth-child(2),.sector-grid article:last-child { border-right:0; border-bottom:1px solid var(--line); border-top:0; grid-column:auto; padding:22px 0; }.sector-grid article:last-child { border-bottom:0; }.project-card:last-child { grid-column:auto; }.project-card:last-child .project-art,.project-art { height:190px; }.project-copy { padding:20px; }.approach-steps { grid-template-columns:1fr; }.approach-steps li { min-height:auto; } }