:root { --ink:#101211; --steel:#28302f; --paper:#ebe9df; --warm:#d8d4c8; --signal:#e75e2b; --line:rgba(16,18,17,.21); --mono:'DM Mono',monospace; --display:'Barlow Condensed',Arial Narrow,sans-serif; --body:Manrope,Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); } a { color:inherit; text-decoration:none; } .draft-banner { background:var(--signal); color:#1c1714; font:500 .68rem/1.25 var(--mono); letter-spacing:.06em; text-align:center; padding:.65rem 1rem; text-transform:uppercase; }
.site-header { min-height:95px; align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:0 clamp(1.2rem,5vw,5.5rem); } .brand { display:flex; align-items:center; gap:.8rem; font-family:var(--display); letter-spacing:.035em; line-height:.82; font-size:1.6rem; } .brand b { display:block; font-size:2rem; } .brand em { display:block; font-size:.72rem; font-style:normal; letter-spacing:.13em; } .brand-mark { width:2.35rem; height:2.35rem; display:grid; gap:3px; grid-template-columns:repeat(3,1fr); transform:skewY(-20deg); } .brand-mark i { display:block; background:var(--signal); } nav { align-items:center; display:flex; gap:clamp(1rem,2.7vw,2.5rem); font:500 .75rem var(--mono); text-transform:uppercase; letter-spacing:.05em; } nav a:not(.nav-call) { border-bottom:1px solid transparent; padding:.4rem 0; } nav a:not(.nav-call):hover { border-color:var(--ink); } .nav-call { background:var(--ink); color:var(--paper); padding:.85rem 1rem; }
.hero { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); min-height:620px; border-bottom:1px solid var(--line); } .hero-copy { padding:clamp(4rem,10vw,9rem) clamp(1.2rem,5vw,5.5rem); align-self:center; } .eyebrow { color:#424b48; font:500 .71rem/1.4 var(--mono); letter-spacing:.1em; margin:0 0 1.15rem; text-transform:uppercase; } .eyebrow span { color:var(--signal); padding:0 .4em; } h1,h2,h3 { font-weight:600; margin:0; } h1,h2 { font-family:var(--display); letter-spacing:-.025em; line-height:.82; } h1 { font-size:clamp(4.2rem,8.3vw,8.8rem); max-width:760px; } h1 span,h2 span { color:var(--signal); display:block; } .lede { font-size:1rem; line-height:1.7; max-width:480px; margin:2rem 0; }.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; }.button { display:inline-flex; align-items:center; gap:1.3rem; padding:1rem 1.25rem; font:500 .72rem var(--mono); letter-spacing:.05em; text-transform:uppercase; }.button-primary { background:var(--signal); }.button-quiet { border:1px solid var(--ink); }.button:hover { transform:translateY(-2px); }
.hero-graphic { background:var(--steel); min-height:350px; overflow:hidden; position:relative; } .grid-field { position:absolute; inset:0; background-image:linear-gradient(rgba(235,233,223,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(235,233,223,.15) 1px,transparent 1px); background-size:30px 30px; mask-image:linear-gradient(90deg,transparent,black 20%,black 80%,transparent); }.plate { border:1px solid rgba(235,233,223,.55); position:absolute; transform:rotate(-25deg) skewX(-10deg); }.plate-a { width:82%; height:35%; left:12%; top:31%; background:repeating-linear-gradient(120deg,rgba(235,233,223,.13) 0 2px,transparent 2px 12px); }.plate-b { width:56%; height:21%; left:39%; top:47%; background:rgba(16,18,17,.18); }.ring { position:absolute; width:180px; height:180px; border:24px solid var(--signal); border-radius:50%; top:8%; right:-55px; }.hero-graphic p { bottom:1.5rem; color:var(--paper); font:.68rem var(--mono); left:1.5rem; letter-spacing:.1em; margin:0; position:absolute; }
.signal-strip { background:var(--ink); color:var(--paper); display:grid; grid-template-columns:repeat(3,1fr); }.signal-strip div { border-right:1px solid rgba(235,233,223,.25); padding:2rem clamp(1.2rem,5vw,5.5rem); }.signal-strip div:last-child { border:0; }.signal-strip span { color:var(--signal); display:block; font:.7rem var(--mono); margin-bottom:1rem; }.signal-strip strong { display:block; font:600 1.1rem var(--display); letter-spacing:.04em; text-transform:uppercase; }.signal-strip small { color:#bdbeb7; display:block; font:.7rem var(--mono); margin-top:.5rem; }
.services { padding:clamp(4.5rem,9vw,8rem) clamp(1.2rem,5vw,5.5rem); }.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:2rem; }.section-heading h2,.work-copy h2,.contact h2 { font-size:clamp(3.5rem,6.6vw,7rem); }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); margin-top:4rem; }.service-grid article { min-height:260px; border-right:1px solid var(--line); padding:1.5rem 2rem 1.5rem 0; }.service-grid article+article { padding-left:2rem; }.service-grid article:last-child { border:0; }.service-number { color:var(--signal); font:.7rem var(--mono); }.service-grid h3 { font:600 clamp(1.8rem,3vw,3rem)/.91 var(--display); letter-spacing:.015em; margin:3.3rem 0 1rem; text-transform:uppercase; }.service-grid p,.work-copy p { color:#4a504e; font-size:.88rem; line-height:1.7; max-width:300px; }
.work-panel { background:var(--warm); display:grid; grid-template-columns:1fr 1fr; }.work-art { background:var(--steel); min-height:520px; overflow:hidden; padding:5rem 10%; position:relative; }.louvre { position:absolute; background:linear-gradient(180deg,#d7d5ca,#757d7b 53%,#1d2423 56%,#a0a6a1); border:1px solid #e3dfd1; height:45px; left:-8%; right:-8%; transform:skewY(-17deg); }.l1{top:12%}.l2{top:27%}.l3{top:42%}.l4{top:57%}.l5{top:72%}.work-art span { bottom:2rem;color:var(--paper);font:.68rem var(--mono);letter-spacing:.1em;position:absolute;}.work-copy { align-self:center; padding:clamp(3rem,8vw,7rem); }.work-copy .fine-print { color:#6c6d64; font:.7rem/1.6 var(--mono); margin-top:2rem; }
.contact { background:var(--signal); display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; padding:clamp(4rem,8vw,7rem) clamp(1.2rem,5vw,5.5rem); }.contact h2 { max-width:650px; }.contact h2 span { color:var(--ink); }.contact-details { align-self:end; border-top:1px solid var(--ink); padding-top:1.5rem; }.phone { display:block; font:600 clamp(2.5rem,4vw,4.3rem)/1 var(--display); letter-spacing:.02em; }.phone span { font-family:var(--body); font-size:.55em; } address,.contact-details p { font-style:normal; font:.75rem/1.65 var(--mono); margin:1.5rem 0 0; }
footer { align-items:flex-start; background:var(--ink); color:var(--paper); display:grid; gap:2rem; grid-template-columns:1fr 1.5fr auto; padding:2.3rem clamp(1.2rem,5vw,5.5rem); }footer>div { align-items:center; display:flex; font:600 .9rem var(--display); letter-spacing:.08em; }.mini { height:1.3rem; margin-right:.5rem; width:1.3rem; } footer p,footer a { color:#bcbdb6; font:.67rem/1.6 var(--mono); margin:0; } footer a { white-space:nowrap; }
@media (max-width:760px) { .site-header { min-height:80px; }.brand { font-size:1.2rem; }.brand b{font-size:1.55rem}.brand-mark{width:1.9rem;height:1.9rem}nav a:not(.nav-call){display:none}.hero,.work-panel,.contact { grid-template-columns:1fr; }.hero-copy { padding-top:4.8rem; }.hero-graphic { min-height:300px; }.signal-strip,.service-grid,footer { grid-template-columns:1fr; }.signal-strip div,.service-grid article { border-bottom:1px solid rgba(235,233,223,.25); border-right:0; }.signal-strip div { padding:1.2rem; }.service-grid { margin-top:2.5rem; }.service-grid article,.service-grid article+article { min-height:0; padding:1.5rem 0; }.service-grid h3 { margin:1.5rem 0 .7rem; }.work-art { min-height:370px; }.contact { gap:3.5rem; } footer { gap:1.2rem; } }