:root { --ink:#19221f; --paper:#f3f0ea; --orange:#ed5f25; --line:#d7d3cb; --muted:#67706c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
.topbar { height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,82px); border-bottom:1px solid #dedbd4; position:absolute; inset:0 0 auto; z-index:3; color:#fff; }
.brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; letter-spacing:.04em; font-size:18px; font-weight:800; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; background:var(--orange); color:#fff; font-size:18px; line-height:1; }.accent { color:var(--orange); }
.nav { display:flex; gap:29px; align-items:center; font-size:13px; font-weight:700; }.nav a { color:inherit; text-decoration:none; }.nav-phone { padding:11px 17px; border:1px solid rgba(255,255,255,.38); }
.menu-toggle { display:none; }
.hero { min-height:680px; padding:176px clamp(24px,11vw,178px) 58px; color:#fff; background:#1a2521; position:relative; overflow:hidden; }.hero-grid,.contact-grid { position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.38) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.38) 1px,transparent 1px); background-size:76px 76px; mask-image:linear-gradient(90deg,#000 10%,transparent 92%); }.hero-copy { position:relative; z-index:1; max-width:650px; }.eyebrow { margin:0 0 20px; color:var(--orange); font-family:"DM Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.11em; }.eyebrow span { display:inline-block; width:30px; height:1px; vertical-align:middle; margin-right:10px; background:currentColor; }.hero h1,.section h2,.contact h2 { letter-spacing:-.06em; font-size:clamp(49px,6vw,87px); line-height:.98; margin:0; font-weight:800; }.hero h1 em,.section h2 em,.contact h2 em { font-family:Georgia,serif; font-weight:400; }.hero-text { max-width:440px; color:#b8c0bc; line-height:1.75; font-size:15px; margin:27px 0 31px; }.hero-actions { display:flex; gap:28px; align-items:center; }.button { text-decoration:none; font-size:13px; font-weight:800; }.button-primary { background:var(--orange); color:#fff; padding:17px 21px; }.button-primary span { padding-left:22px; font-size:18px; }.text-link { color:#fff; text-decoration:none; font-size:13px; font-weight:800; }.text-link span { padding-left:8px; color:var(--orange); font-size:17px; }.hero-visual { position:absolute; right:6vw; bottom:0; height:89%; width:min(39vw,540px); }.concrete-shape { position:absolute; background:#909995; }.shape-one { height:77%; width:44%; right:26%; bottom:-12%; transform:skewY(-30deg); box-shadow:inset 27px 0 0 rgba(0,0,0,.09); }.shape-two { height:61%; width:28%; right:4%; bottom:6%; transform:skewY(31deg); background:#c1c5be; }.orange-block { width:69px; height:69px; background:var(--orange); position:absolute; bottom:24%; left:8%; }.visual-tag { position:absolute; top:11%; left:0; color:#b8c0bc; border-left:1px solid var(--orange); padding:9px 0 9px 12px; font:10px/1.55 "DM Mono",monospace; letter-spacing:.1em; }.visual-number { position:absolute; font:150px/1 Georgia,serif; color:rgba(255,255,255,.06); bottom:4%; left:8%; }.hero-footer { position:absolute; z-index:1; bottom:28px; left:clamp(24px,11vw,178px); right:clamp(24px,5vw,82px); display:flex; justify-content:space-between; color:#a5aea9; font:10px "DM Mono",monospace; letter-spacing:.08em; }.scroll-note b { padding-left:10px; color:var(--orange); }
.section { padding:120px clamp(24px,11vw,178px); }.services { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(400px,1.3fr); gap:8vw; }.section-heading h2 { font-size:clamp(42px,4.9vw,69px); }.section-heading > p:last-child { max-width:340px; color:var(--muted); font-size:15px; line-height:1.7; margin-top:24px; }.service-list { border-top:1px solid var(--line); }.service-card { min-height:133px; position:relative; border-bottom:1px solid var(--line); padding:25px 47px 21px 50px; transition:.25s ease; }.service-card:hover,.service-card.featured { background:var(--ink); color:#fff; padding-left:64px; }.service-index { position:absolute; top:29px; left:0; color:var(--orange); font:11px "DM Mono",monospace; }.service-card h3 { margin:0 0 10px; font-size:18px; letter-spacing:-.03em; }.service-card p { margin:0; max-width:460px; color:var(--muted); font-size:13px; line-height:1.55; }.service-card:hover p,.featured p { color:#bbc3be; }.service-arrow { position:absolute; right:0; top:29px; color:var(--orange); font-size:21px; }.about { padding-top:22px; padding-bottom:120px; display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; }.about-visual { background:#d4d4cd; min-height:500px; position:relative; overflow:hidden; }.about-slab { position:absolute; width:55%; height:120%; background:#76817a; left:34%; top:-10%; transform:rotate(24deg); box-shadow:inset 35px 0 rgba(0,0,0,.09); }.about-line { position:absolute; height:2px; background:rgba(25,34,31,.32); transform:rotate(-36deg); width:80%; }.line-a{top:22%;left:-14%}.line-b{top:42%;left:6%}.line-c{top:62%;left:26%}.about-visual p { position:absolute; bottom:22px; left:27px; z-index:1; font:69px/.78 Georgia,serif; margin:0; color:#f4f0eb; letter-spacing:-.1em; }.about-copy h2 { font-size:clamp(42px,4.9vw,69px); }.about-copy > p:not(.eyebrow) { line-height:1.75; color:var(--muted); max-width:490px; font-size:15px; }.dark-link { color:var(--ink); display:inline-block; margin-top:13px; }
.contact { background:var(--ink); color:#fff; padding:108px clamp(24px,11vw,178px) 66px; position:relative; overflow:hidden; }.contact-inner { position:relative; max-width:850px; }.eyebrow.light { color:#ff8050; }.contact h2 { font-size:clamp(48px,5.8vw,79px); }.contact-intro { color:#b8c0bc; max-width:470px; line-height:1.75; margin:25px 0 34px; font-size:15px; }.contact-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:760px; }.contact-card { text-decoration:none; color:#fff; padding:21px; min-height:93px; border:1px solid rgba(255,255,255,.22); position:relative; transition:.2s ease; }.contact-card:hover { background:var(--orange); border-color:var(--orange); }.contact-card small { display:block; color:#aab3ad; font:10px "DM Mono",monospace; letter-spacing:.11em; margin-bottom:8px; }.contact-card strong { font-size:15px; letter-spacing:-.02em; }.contact-card span { position:absolute; top:22px; right:20px; color:var(--orange); font-size:20px; }.contact-card:hover small,.contact-card:hover span { color:#fff; }.contact address { margin-top:43px; color:#aeb8b1; font-style:normal; font-size:13px; line-height:1.65; }
footer { min-height:96px; padding:0 clamp(24px,5vw,82px); display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; }.footer-brand { color:var(--ink); font-size:16px; }.footer-brand .brand-mark { width:26px; height:26px; font-size:15px; }
.hero-visual { overflow:hidden; }.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.1) brightness(.65); }.hero-visual .concrete-shape { opacity:.78; }.hero-visual .visual-tag { color:#fff; }.hero-visual .visual-number { color:rgba(255,255,255,.16); }.about-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.72) contrast(1.08); }.photo-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(17,28,24,.74),rgba(17,28,24,.04) 65%); }.about-visual small { position:absolute; z-index:1; top:18px; right:18px; color:#fff; font:9px "DM Mono",monospace; letter-spacing:.09em; writing-mode:vertical-rl; }
.references { background:#e7e4dd; }.references-heading { display:grid; grid-template-columns:1fr 1fr; gap:35px; margin-bottom:50px; align-items:end; }.references-heading h2 { font-size:clamp(42px,4.9vw,69px); grid-column:1; }.references-heading > p:last-child { margin:0 0 4px; max-width:330px; color:var(--muted); font-size:14px; line-height:1.7; }.references-heading .eyebrow { grid-column:1 / -1; margin-bottom:-5px; }.reference-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.reference-card { min-height:300px; margin:0; position:relative; overflow:hidden; background:#1a2521; }.reference-card img { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .45s ease; }.reference-card:hover img { transform:scale(1.045); }.reference-tall { aspect-ratio:4 / 5; }.reference-wide { aspect-ratio:16 / 10; }.reference-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(16,27,23,.82),transparent 54%); }.reference-card figcaption { position:absolute; z-index:1; left:23px; bottom:19px; right:23px; color:#fff; display:flex; align-items:end; gap:15px; }.reference-card figcaption span { color:#ff8050; font:10px "DM Mono",monospace; }.reference-card figcaption strong { font-size:14px; letter-spacing:-.02em; }
@media (max-width:760px) { .topbar { height:66px; padding:0 22px; }.nav { position:absolute; display:none; flex-direction:column; align-items:flex-start; gap:22px; top:66px; left:0; right:0; padding:25px 22px; background:#1a2521; }.nav.open { display:flex; }.menu-toggle { display:block; background:none; border:0; width:30px; padding:5px 0; }.menu-toggle span { display:block; height:2px; background:#fff; margin:6px 0; }.hero { min-height:690px; padding:141px 24px 80px; }.hero-visual { opacity:.57; right:-38px; width:76vw; height:59%; }.hero h1 { font-size:52px; }.hero-footer { left:24px; right:24px; }.hero-footer > span:first-child { max-width:175px; line-height:1.7; }.services,.about { grid-template-columns:1fr; gap:49px; }.section { padding:80px 24px; }.service-card { padding-right:28px; }.about { padding-top:0; }.about-visual { min-height:340px; }.references-heading { display:block; margin-bottom:31px; }.references-heading .eyebrow { margin-bottom:20px; }.references-heading > p:last-child { margin-top:23px; }.reference-grid { gap:10px; }.reference-card { min-height:205px; }.reference-card figcaption { left:15px; right:15px; bottom:13px; }.contact { padding:80px 24px 53px; }.contact-cards { grid-template-columns:1fr; }.contact-card strong { font-size:14px; } footer { padding:22px 24px; min-height:130px; gap:14px; flex-wrap:wrap; }.footer-brand { width:100%; }.scroll-note { white-space:nowrap; } }