:root { --ink:#172019; --moss:#283d31; --paper:#f3f0e9; --coral:#cc654c; --sand:#d9cfbd; --line:rgba(23,32,25,.18); } .contact-phone,.contact-email { display:block; width:max-content; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.65); font:11px "DM Mono"; letter-spacing:.08em; } .contact-phone { margin-top:24px; } .contact-email { margin-top:13px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; } a { color:inherit; text-decoration:none; } .site-header { height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 5.7vw; position:absolute; z-index:3; width:100%; color:var(--paper); } .logo { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .logo span { font-family:"DM Mono"; padding:7px 6px; border:1px solid currentColor; font-size:11px; letter-spacing:-.08em; } .nav { display:flex; align-items:center; gap:32px; font-size:12px; font-weight:700; } .nav-cta { border-bottom:1px solid currentColor; padding-bottom:5px; }.nav-cta span,.button span { margin-left:10px; font-size:18px; line-height:0; }.menu-toggle { display:none; background:none; border:0; color:inherit; }
.hero { min-height:760px; background:var(--moss); color:var(--paper); display:grid; grid-template-columns:1.05fr .95fr; padding:175px 5.7vw 57px; position:relative; overflow:hidden; } .hero-copy { position:relative; z-index:1; } .eyebrow { margin:0; font:500 10px/1.4 "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; } h1,h2 { font-family:"Playfair Display",serif; letter-spacing:-.055em; font-weight:600; margin:0; line-height:.95; } h1 { font-size:clamp(60px,7.5vw,112px); margin:27px 0 30px; } h1 em,h2 em { color:#d8c7a8; font-weight:600; } .hero-intro { max-width:390px; font-size:15px; line-height:1.75; opacity:.88; margin-bottom:34px; }.button { display:inline-flex; align-items:center; padding:16px 21px; font-size:12px; font-weight:800; }.button-dark { background:var(--coral); color:#fff; }.hero-art { position:relative; min-height:440px; margin-left:4vw; overflow:hidden; background:#baa78a; transform:rotate(2deg); box-shadow:20px 28px 0 rgba(0,0,0,.11); }.fabric { position:absolute; transform:rotate(-18deg); }.fabric-red { width:118%; height:40%; background:var(--coral); top:-9%; left:-19%; border-radius:40% 5% 32% 8%; }.fabric-cream { width:115%; height:46%; background:#e8e1d2; top:31%; left:-8%; border-radius:12% 42% 4% 50%; box-shadow:inset 0 18px 30px rgba(80,70,50,.08); }.fabric-ink { width:87%; height:45%; background:#18231d; bottom:-20%; right:-16%; border-radius:50% 0 30% 10%; }.art-label { position:absolute; z-index:1; bottom:26px; left:27px; color:white; font:10px/1.55 "DM Mono"; text-transform:uppercase; }.art-stamp { position:absolute; z-index:1; top:26px; right:27px; width:68px; height:68px; border:1px solid white; border-radius:50%; color:white; display:grid; align-content:center; text-align:center; font:8px/1.3 "DM Mono"; text-transform:uppercase; transform:rotate(-8deg); }.art-stamp b { font-size:13px; }.hero-footer { align-self:end; grid-column:1/-1; display:flex; justify-content:space-between; font:10px "DM Mono"; letter-spacing:.04em; text-transform:uppercase; opacity:.8; }.hero-footer a span { margin-left:10px; font-size:15px; }
.intro-section,.statement-section,.process-section { padding:132px 5.7vw; }.intro-grid { display:grid; grid-template-columns:1.4fr .6fr; gap:8vw; margin:28px 0 75px; align-items:end; }.intro-grid h2,.process-heading h2,.materials-copy h2,.contact-section h2 { font-size:clamp(45px,5.4vw,77px); }.intro-grid p,.materials-copy>p:not(.eyebrow) { font-size:15px; line-height:1.75; max-width:350px; margin:0; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.service-grid article { padding:26px 28px 16px 0; border-bottom:1px solid var(--line); min-height:220px; display:flex; flex-direction:column; }.service-grid article+article { padding-left:28px; border-left:1px solid var(--line); }.service-grid span,.process-list>article>span { font:11px "DM Mono"; color:var(--coral); }.service-grid h3 { font-size:18px; letter-spacing:-.04em; margin:34px 0 10px; }.service-grid p { font-size:12px; line-height:1.7; max-width:230px; margin:0; }.service-grid a { margin-top:auto; padding-top:18px; font:11px "DM Mono"; text-transform:uppercase; }.service-grid b { float:right; font-size:17px; }.statement-section { background:#d9cfbd; }.statement-layout { display:grid; grid-template-columns:1fr 1.25fr .6fr; align-items:center; gap:40px; }.number { font:80px/1 "Playfair Display"; letter-spacing:-.08em; }.number small { display:block; margin:5px 0 0 12px; font:10px "DM Mono"; letter-spacing:.08em; text-transform:uppercase; }.statement-layout>p { font:clamp(23px,2.6vw,38px)/1.25 "Playfair Display"; letter-spacing:-.04em; margin:0; }.statement-note { font:10px/1.6 "DM Mono"; text-transform:uppercase; }
.process-section { background:var(--ink); color:var(--paper); display:grid; grid-template-columns:.7fr 1.3fr; gap:9vw; }.process-heading h2 { margin-top:27px; }.process-list { border-top:1px solid rgba(255,255,255,.25); }.process-list article { display:grid; grid-template-columns:55px 1fr; gap:25px; padding:27px 0; border-bottom:1px solid rgba(255,255,255,.25); }.process-list h3 { font-size:19px; margin:0 0 9px; letter-spacing:-.04em; }.process-list p { margin:0; font-size:12px; line-height:1.65; max-width:360px; opacity:.75; }.materials-section { min-height:580px; display:grid; grid-template-columns:1fr 1fr; }.materials-art { position:relative; background:var(--coral); overflow:hidden; color:#fff; }.materials-art p { position:absolute; z-index:1; bottom:48px; left:9%; font:clamp(25px,3vw,42px)/1.08 "Playfair Display"; letter-spacing:-.05em; margin:0; }.thread { position:absolute; width:135%; height:45%; border:45px solid #f3d7ad; border-radius:50%; transform:rotate(-24deg); }.thread-one { top:-15%; left:-35%; }.thread-two { border-color:#f3f0e9; top:22%; left:7%; }.thread-three { border-color:#b9ceae; top:60%; left:-32%; }.materials-copy { padding:105px 11%; background:#eee8db; }.materials-copy h2 { margin:28px 0 30px; }.text-link { font:700 11px "DM Mono"; text-transform:uppercase; display:inline-block; border-bottom:1px solid var(--ink); padding-bottom:7px; margin-top:35px; }.text-link span { margin-left:10px; }.contact-section { background:var(--moss); color:var(--paper); padding:123px 5.7vw 130px; }.contact-section h2 { margin:29px 0 41px; }.button-light { background:#eee8db; color:var(--ink); } footer { padding:38px 5.7vw 23px; background:var(--ink); color:var(--paper); border-top:1px solid rgba(255,255,255,.23); }.footer-top { display:flex; justify-content:space-between; align-items:start; padding-bottom:65px; }.footer-top p { margin:0; font-size:12px; line-height:1.7; opacity:.75; }.footer-bottom { border-top:1px solid rgba(255,255,255,.23); padding-top:18px; display:flex; justify-content:space-between; font:9px "DM Mono"; text-transform:uppercase; opacity:.72; }
@media (max-width:700px) { .site-header { height:68px; padding:0 6vw; }.nav { display:none; position:absolute; top:68px; left:0; width:100%; padding:20px 6vw; background:var(--moss); flex-direction:column; align-items:flex-start; gap:18px; }.nav.open { display:flex; }.menu-toggle { display:block; font:700 11px Manrope; text-transform:uppercase; }.hero { min-height:760px; display:block; padding:128px 6vw 35px; }.hero-art { margin:45px 5vw 45px 0; min-height:280px; }.hero-footer { display:flex; position:static; font-size:8px; gap:15px; }.intro-section,.statement-section,.process-section { padding:82px 6vw; }.intro-grid,.statement-layout,.process-section { display:block; }.intro-grid h2 { margin-bottom:30px; }.service-grid { display:block; }.service-grid article,.service-grid article+article { min-height:160px; padding:23px 0; border-left:0; }.service-grid h3 { margin-top:22px; }.statement-layout>p { margin:30px 0; }.process-heading { margin-bottom:45px; }.materials-section { display:block; }.materials-art { min-height:380px; }.materials-copy { padding:78px 6vw; }.contact-section { padding:84px 6vw; }.footer-top,.footer-bottom { display:block; }.footer-top p { margin-top:30px; }.footer-bottom span,.footer-bottom a { display:block; margin-top:13px; } }