:root { --ink:#1f211c; --paper:#f4f0e7; --clay:#d96847; --yellow:#efbb41; --green:#6e8159; --line:rgba(31,33,28,.24); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans", sans-serif; } .grain { pointer-events:none; position:fixed; inset:0; opacity:.25; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); } .site-header { position:absolute; top:0; width:100%; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:28px 5.5vw; } .brand { display:grid; place-items:center; width:43px; height:43px; color:var(--paper); background:var(--ink); border-radius:50%; font-family:"Playfair Display"; font-size:24px; text-decoration:none; } nav { display:flex; align-items:center; gap:28px; font-size:14px; } nav a, footer a { color:inherit; text-decoration:none; } nav a:last-child { border-bottom:1px solid var(--ink); padding-bottom:3px; } nav span,.contact-email span { color:var(--clay); font-size:18px; } .hero { min-height:720px; padding:155px 9vw 42px; position:relative; overflow:hidden; background:var(--yellow); display:flex; flex-direction:column; justify-content:space-between; } .eyebrow,.section-number { margin:0; letter-spacing:.11em; font-family:"DM Mono"; font-size:11px; text-transform:uppercase; } .pulse { display:inline-block; width:8px;height:8px;background:var(--clay); border-radius:50%; margin-right:8px; } .hero-copy { position:relative; z-index:1; margin:58px 0; } h1,h2 { margin:0; font-weight:500; letter-spacing:-.055em; line-height:.93; } h1 { font-size:clamp(60px,9.8vw,150px); max-width:980px; } em { font-family:"Playfair Display"; font-weight:500; letter-spacing:-.07em; } .intro { max-width:340px; margin:34px 0 0; line-height:1.45; font-size:16px; } .hero-footer { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; font-family:"DM Mono"; font-size:11px; text-transform:uppercase; letter-spacing:.08em; } .hero-footer p { margin:0; } .location { text-align:right; } .circle-link { width:50px;height:50px;border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; color:var(--ink); text-decoration:none; font-size:21px; } .sun { position:absolute; width:550px;height:550px;right:-70px;top:110px;border-radius:50%; background:var(--clay); mix-blend-mode:multiply; opacity:.9; } .statement { min-height:650px; padding:125px 9vw; position:relative; display:grid; grid-template-columns:28% 1fr; } .statement-copy { max-width:650px; } h2 { font-size:clamp(42px,5.5vw,82px); } .statement-copy > p,.process-copy > p { max-width:450px; margin:32px 0; font-size:18px; line-height:1.52; } .text-link { display:inline-block; padding-bottom:7px; border-bottom:1px solid var(--ink); color:inherit; font-size:15px; text-decoration:none; } .text-link span { color:var(--clay); margin-left:9px; } .scribble { position:absolute; right:15%; bottom:92px; color:var(--clay); font-family:"Playfair Display"; font-size:30px; line-height:.78; font-style:italic; transform:rotate(-10deg); } .services { padding:108px 9vw 120px; background:var(--green); color:var(--paper); } .services-heading { display:grid; grid-template-columns:28% 1fr; margin-bottom:88px; } .service-list { border-top:1px solid rgba(244,240,231,.48); } .service-list article { min-height:150px; display:grid; grid-template-columns:28% 38% 1fr; align-items:center; border-bottom:1px solid rgba(244,240,231,.48); } .service-list span { font-family:"DM Mono"; font-size:11px; } h3 { margin:0; font-size:30px; font-weight:500; letter-spacing:-.04em; } .service-list p { max-width:265px; line-height:1.45; font-size:14px; } .process { display:grid; grid-template-columns:1fr 1fr; min-height:650px; } .process-visual { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--clay); color:var(--paper); } .process-visual::before { content:""; position:absolute; width:560px;height:560px; border:1px solid rgba(244,240,231,.48); border-radius:50%; } .process-visual::after { content:""; position:absolute; width:375px;height:375px; border:1px solid rgba(244,240,231,.48); border-radius:50%; } .process-visual span { position:relative; z-index:1; font-family:"Playfair Display"; font-style:italic; font-size:48px; line-height:.87; text-align:center; } .process-copy { padding:120px 12%; align-self:center; } .steps { display:flex; flex-wrap:wrap; gap:9px; margin-top:42px; } .steps span { border:1px solid var(--ink); border-radius:30px; padding:9px 15px; font-family:"DM Mono"; text-transform:uppercase; font-size:10px; letter-spacing:.05em; } .contact { min-height:630px; padding:116px 9vw 28px; display:flex; flex-direction:column; background:var(--ink); color:var(--paper); } .contact h2 { font-size:clamp(70px,10vw,155px); margin-top:45px; } .contact-email { align-self:flex-start; margin-top:42px; color:var(--paper); font-size:clamp(18px,2vw,27px); text-decoration:none; border-bottom:1px solid var(--paper); padding-bottom:9px; } footer { margin-top:auto; padding-top:70px; display:flex; justify-content:space-between; font-family:"DM Mono"; text-transform:uppercase; font-size:10px; letter-spacing:.06em; } footer p { margin:0; } footer div { display:flex; gap:20px; }
@media (max-width:700px) { .site-header { padding:20px 7vw; } nav { gap:15px; font-size:12px; } nav a:not(:last-child) { display:none; } .hero { min-height:690px; padding:130px 7vw 30px; } .sun { width:320px;height:320px;right:-100px;top:175px; } .hero-footer { grid-template-columns:1fr auto; } .location { display:none; } .statement,.services { padding-left:7vw;padding-right:7vw; } .statement { display:block; min-height:580px; padding-top:76px;padding-bottom:80px; } .statement-copy { margin-top:65px; } .scribble { right:10%;bottom:42px; } .services { padding-top:80px;padding-bottom:80px; } .services-heading { display:block; margin-bottom:55px; } .services-heading h2 { margin-top:55px; } .service-list article { grid-template-columns:42px 1fr; padding:24px 0; } .service-list p { grid-column:2; margin:10px 0 0; } h3 { font-size:25px; } .process { grid-template-columns:1fr; } .process-visual { min-height:360px; } .process-copy { padding:75px 7vw; } .contact { min-height:570px;padding:80px 7vw 25px; } footer { padding-top:60px; font-size:9px; } footer > a { display:none; } }

.contact-page { background:var(--yellow); } .contact-main { min-height:100vh; padding:175px 9vw 90px; } .contact-main h1 { margin-top:48px; } .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:11vw; max-width:1050px; margin-top:85px; } .contact-grid section > p { max-width:330px; font-size:19px; line-height:1.45; margin:0 0 35px; } .contact-page .contact-email { color:var(--ink); border-color:var(--ink); margin:0; } form { display:flex; flex-direction:column; gap:26px; } label { display:flex; flex-direction:column; gap:9px; font-family:"DM Mono"; font-size:11px; letter-spacing:.08em; text-transform:uppercase; } input,textarea { width:100%; border:0; border-bottom:1px solid var(--ink); border-radius:0; outline:0; padding:10px 0; color:var(--ink); background:transparent; font:16px "DM Sans",sans-serif; resize:vertical; } input:focus,textarea:focus { border-color:var(--clay); } button { align-self:flex-start; margin-top:7px; padding:13px 20px; border:1px solid var(--ink); border-radius:30px; color:var(--paper); background:var(--ink); cursor:pointer; font:12px "DM Mono",monospace; letter-spacing:.05em; text-transform:uppercase; } button span { color:var(--yellow); margin-left:8px; font-size:16px; } @media (max-width:700px) { .contact-main { padding:130px 7vw 70px; } .contact-grid { grid-template-columns:1fr; gap:60px; margin-top:60px; } }