:root { --ink:#151515; --paper:#f4f3ef; --line:#c9c8c1; --accent:#24463d; --warm:#dfcdb4; --serif:Georgia, 'Times New Roman', serif; --sans:Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; } a { color:inherit; text-decoration:none; } .site-header, footer { display:flex; align-items:center; justify-content:space-between; padding:22px 3.3vw; border-bottom:1px solid var(--line); } .wordmark { font-size:19px; font-weight:700; letter-spacing:-1.4px; } .wordmark span { font-size:7px; vertical-align:top; margin-left:2px; } .main-nav { display:flex; gap:27px; font-size:13px; } .main-nav a:hover, footer a:hover, .text-link:hover { opacity:.55; } .menu-button { display:none; border:0; padding:0; background:transparent; font:inherit; font-size:13px; }
.section { padding:clamp(80px, 11vw, 172px) 3.3vw; } .eyebrow, .section-heading, .project-meta p, .project-meta span, .services span, footer, .button { font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .hero { min-height:calc(100svh - 64px); display:flex; flex-direction:column; justify-content:space-between; padding-top:28px; } .hero h1 { max-width:1100px; margin:clamp(90px, 15vw, 190px) 0 80px; font-size:clamp(46px, 7.1vw, 111px); font-weight:400; line-height:.94; letter-spacing:-.072em; } .hero-bottom { display:grid; grid-template-columns:1fr auto; align-items:end; gap:30px; } .hero-bottom p { max-width:420px; margin:0; font-size:18px; line-height:1.35; letter-spacing:-.03em; } .button { background:var(--ink); color:white; padding:16px 19px; transition:background .2s; } .button:hover { background:var(--accent); }
.motion-strip{display:flex;gap:24px;align-items:center;overflow:hidden;padding:18px 3.3vw;background:var(--accent);color:#f5f1e9;white-space:nowrap;font:11px var(--sans);letter-spacing:.12em;text-transform:uppercase}.motion-strip i{font-style:normal;color:#d9b17b;font-size:15px}.studio-notes{background:#ded8ce}.notes-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:8vw;margin-top:48px}.big-note{max-width:600px;margin:0;font:400 clamp(40px,5vw,72px)/.93 var(--serif);letter-spacing:-.07em}.note-list{border-top:1px solid #8f8c85}.note-list p{display:flex;gap:28px;margin:0;padding:16px 0;border-bottom:1px solid #8f8c85;line-height:1.35}.note-list span{font-size:11px;letter-spacing:.08em}
.section-heading { display:flex; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid var(--line); } .project { padding:46px 0 19px; border-bottom:1px solid var(--line); } .project-art { height:min(48vw, 620px); position:relative; overflow:hidden; } .project-meta { display:grid; grid-template-columns:1fr 1fr auto; align-items:baseline; gap:20px; margin-top:16px; } .project-meta h2 { margin:0; font-size:clamp(21px, 2.25vw, 33px); font-weight:400; letter-spacing:-.055em; } .project-meta em { color:#777; font-family:var(--serif); font-size:.7em; font-weight:400; } .project-meta p { margin:0; color:#676763; } .project-meta span { color:#676763; }
.project-lara .project-art { background:#d2c8b7; } .project-sign { position:absolute; top:14%; left:11%; z-index:1; color:#f7f1e5; font-family:var(--serif); font-size:clamp(48px,8vw,116px); line-height:.75; letter-spacing:-.09em; } .sun { position:absolute; right:16%; top:16%; width:21%; aspect-ratio:1; border-radius:50%; background:#d47f56; } .table { width:73%; height:34%; position:absolute; bottom:-14%; right:-4%; border-radius:50%; background:#344b42; transform:rotate(-14deg); } .project-northline .project-art { background:#b8c2ad; } .northline-mark { position:absolute; left:8%; top:9%; font-size:clamp(120px,28vw,410px); line-height:.7; font-weight:700; letter-spacing:-.15em; color:#19443c; } .line-copy { position:absolute; right:9%; top:16%; color:#f3f1e9; font-size:clamp(19px,3.3vw,47px); line-height:.88; letter-spacing:-.08em; font-weight:700; text-align:right; } .topography { position:absolute; width:150%; height:80%; bottom:-50%; left:-15%; border:1px solid #7c917c; border-radius:50%; box-shadow:0 -35px 0 -1px transparent, 0 -36px 0 -1px #7c917c, 0 -73px 0 -2px transparent, 0 -74px 0 -2px #7c917c; transform:rotate(-7deg); } .project-atelier .project-art { background:#e8e1d5; } .atelier-copy { position:absolute; z-index:1; top:10%; left:10%; font-family:var(--serif); font-size:clamp(64px,10vw,150px); letter-spacing:-.1em; line-height:.7; } .atelier-copy i { color:#9c402b; } .shape { position:absolute; border-radius:50%; } .shape-one { width:46%; aspect-ratio:1; background:#b85b42; right:9%; bottom:-17%; } .shape-two { width:17%; aspect-ratio:1; background:#152e2a; right:30%; top:20%; }
.services { background:var(--ink); color:var(--paper); } .services .section-heading { border-color:#545451; } .service-grid { display:grid; grid-template-columns:repeat(3,1fr); } .service-grid article { min-height:340px; padding:27px 27px 0 0; display:flex; flex-direction:column; border-right:1px solid #545451; } .service-grid article+article { padding-left:27px; } .service-grid article:last-child { border:0; } .service-grid h2 { margin:auto 0 13px; font-size:clamp(26px,3vw,44px); font-weight:400; letter-spacing:-.06em; } .service-grid p { max-width:275px; margin:0; color:#c8c8c2; line-height:1.4; letter-spacing:-.02em; }
.about { display:grid; grid-template-columns:1fr 2fr; gap:30px; } .about-copy h2, .contact h2 { max-width:800px; margin:0; font-size:clamp(40px,5.5vw,80px); font-weight:400; line-height:.96; letter-spacing:-.075em; } .about-copy p { max-width:460px; margin:53px 0 26px; font-size:18px; line-height:1.4; letter-spacing:-.025em; } .text-link { border-bottom:1px solid var(--ink); padding-bottom:5px; font-size:13px; }
.about-page-intro { min-height:72vh; display:flex; flex-direction:column; justify-content:center; } .about-page-intro h1 { max-width:900px; margin:34px 0 24px; font-size:clamp(62px,10vw,150px); font-weight:400; line-height:.85; letter-spacing:-.09em; } .intro-lede { max-width:540px; margin:0; font-size:clamp(20px,2.1vw,30px); line-height:1.18; letter-spacing:-.05em; } .story-grid { display:grid; grid-template-columns:1fr 1fr; gap:7vw; padding-top:46px; } .portrait-placeholder { display:flex; min-height:430px; align-items:center; justify-content:center; background:var(--warm); color:var(--accent); font-family:var(--serif); font-size:clamp(170px,25vw,350px); font-style:italic; overflow:hidden; } .story-copy { align-self:end; } .story-copy p { max-width:510px; margin:0 0 28px; font-size:clamp(18px,2vw,27px); line-height:1.25; letter-spacing:-.04em; } .values { background:var(--ink); color:var(--paper); } .values .section-heading { border-color:#545451; }
.services-hero{min-height:74vh;display:flex;flex-direction:column;justify-content:center;background:var(--warm)}.services-hero h1{max-width:1050px;margin:30px 0;font-size:clamp(54px,8.5vw,128px);font-weight:400;line-height:.88;letter-spacing:-.085em}.services-lede{max-width:520px;margin:0;font-size:clamp(18px,2vw,26px);line-height:1.3;letter-spacing:-.04em}.offer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:13px;margin-top:40px}.offer-card{min-height:570px;padding:27px;background:#deded8;display:flex;flex-direction:column}.offer-card.featured{background:var(--accent);color:#f5f2ea}.offer-card h2{margin:94px 0 14px;font-size:clamp(32px,3.4vw,52px);font-weight:400;letter-spacing:-.07em}.offer-card>p:not(.eyebrow):not(.price){max-width:310px;line-height:1.4}.offer-card ul{margin:28px 0;padding:0;list-style:none;line-height:1.7}.offer-card li{border-bottom:1px solid rgba(20,20,20,.22);padding:5px 0}.featured li{border-color:rgba(255,255,255,.25)}.price{margin-top:auto;font-size:13px;font-weight:bold;letter-spacing:.04em}.how-it-works{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:var(--ink);color:var(--paper)}.how-it-works h2{font-size:clamp(36px,4.4vw,66px);font-weight:400;line-height:.94;letter-spacing:-.075em}.how-it-works ol{padding:0;margin:0;list-style:none}.how-it-works li{display:grid;grid-template-columns:70px 1fr;gap:15px;border-top:1px solid #51514d;padding:18px 0}.how-it-works li span{font-size:11px;letter-spacing:.08em}.how-it-works p{margin:0;line-height:1.45}.services-contact{background:#d9b17b}.services-contact h2{max-width:800px;margin:25px 0 45px;font-size:clamp(48px,7vw,100px);font-weight:400;line-height:.86;letter-spacing:-.085em}
.process { padding-top:40px; } .process ol { margin:0; padding:0; list-style:none; } .process li { display:grid; grid-template-columns:1fr 2fr; gap:30px; padding:27px 0 47px; border-bottom:1px solid var(--line); } .process li span { font-size:11px; letter-spacing:.08em; } .process h2 { margin:0 0 12px; font-size:clamp(26px,3vw,43px); font-weight:400; letter-spacing:-.06em; } .process p { max-width:390px; margin:0; line-height:1.4; } .contact { min-height:72vh; display:flex; flex-direction:column; justify-content:center; background:var(--accent); color:#f4f1e8; } .contact h2 { margin:30px 0 47px; } .contact-email { align-self:flex-start; border-bottom:1px solid #f4f1e8; padding-bottom:7px; font-size:clamp(17px,2vw,25px); letter-spacing:-.04em; } footer { border:0; font-size:10px; } footer p { margin:0; }
@media (max-width:700px) { .site-header { padding:20px 20px; } .menu-button { display:block; } .main-nav { display:none; position:absolute; z-index:3; top:63px; left:0; right:0; padding:22px 20px; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); } .main-nav.open { display:flex; } .section { padding-left:20px; padding-right:20px; } .hero { min-height:680px; } .hero h1 { margin-top:80px; } .hero-bottom { grid-template-columns:1fr; align-items:start; } .button { justify-self:start; } .motion-strip{padding-left:20px;padding-right:20px}.notes-grid,.offer-grid,.how-it-works{grid-template-columns:1fr;gap:40px}.offer-card{min-height:450px}.project-art { height:64vw; min-height:280px; } .project-meta { grid-template-columns:1fr auto; } .project-meta p { grid-row:2; } .project-meta span { grid-column:2; grid-row:1; } .service-grid { grid-template-columns:1fr; } .service-grid article, .service-grid article+article { min-height:230px; padding:27px 0; border-right:0; border-bottom:1px solid #545451; } .about { grid-template-columns:1fr; gap:48px; } .story-grid { grid-template-columns:1fr; gap:35px; } .portrait-placeholder { min-height:300px; } .process li { grid-template-columns:70px 1fr; } footer { padding:20px; } footer p { display:none; } }