:root { --ink:#17202a; --paper:#fffdf7; --sun:#ffd43b; --blue:#b8c6ff; --green:#98d76a; --coral:#ff967b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.site-header { align-items:center; display:flex; justify-content:space-between; padding:24px 4vw; position:relative; z-index:2; }
.wordmark { font-size:22px; font-weight:700; letter-spacing:-1.5px; }.wordmark span { font-family:'DM Serif Display',serif; font-style:italic; font-weight:400; }
.site-nav { align-items:center; display:flex; gap:28px; font-size:14px; font-weight:600; }.site-nav a:not(.nav-cta):hover, .text-link:hover { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }.nav-cta { background:var(--ink); border-radius:100px; color:var(--paper); padding:10px 15px; }.nav-cta .inline-arrow { color:var(--sun); }
.menu-toggle { background:none; border:0; color:var(--ink); display:none; font:600 14px Manrope,sans-serif; }
.hero { display:grid; grid-template-columns:1.22fr .78fr; min-height:620px; padding:68px 4vw 72px; }.hero-copy { align-self:center; max-width:780px; }.eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; margin:0 0 22px; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:'DM Serif Display',serif; font-weight:400; letter-spacing:-.055em; line-height:.96; } h1 { font-size:clamp(65px,9.4vw,148px); margin-bottom:34px; } h1 em,h2 em { color:var(--coral); font-weight:400; } .lede { font-size:19px; max-width:520px; }.text-link { border-bottom:2px solid var(--sun); display:inline-block; font-size:14px; font-weight:700; margin-top:14px; padding-bottom:4px; }.inline-arrow { display:inline-block; fill:none; height:.9em; margin-left:.42em; stroke:currentColor; stroke-linecap:square; stroke-linejoin:miter; stroke-width:1.8; vertical-align:-.06em; width:.9em; }.inline-arrow--right { height:.82em; width:1em; }
.hero-art { background:var(--blue); margin:20px 0 0 32px; min-height:440px; overflow:hidden; padding:36px; position:relative; }.hero-art .sun { background:var(--sun); border-radius:50%; height:220px; position:absolute; right:-30px; top:72px; width:220px; }.hero-art p { font-family:'DM Serif Display',serif; font-size:clamp(32px,4vw,58px); line-height:.94; position:relative; z-index:1; }.hero-arrow { bottom:12px; fill:none; height:250px; left:20px; position:absolute; stroke:var(--ink); stroke-linecap:square; stroke-linejoin:miter; stroke-width:11; width:190px; }
.statement,.services,.about-block,.contact { padding:118px 8vw; }.section-rule { border-top:1px solid var(--ink); margin:0 4vw; padding-left:4vw; padding-right:4vw; }.two-column { display:grid; gap:8vw; grid-template-columns:1.15fr .85fr; }.two-column h2,.services h2,.about-block h2,.contact h2 { font-size:clamp(50px,6.3vw,93px); margin:0; }.two-column p { font-size:20px; max-width:440px; padding-top:10px; }
.services { background:var(--sun); display:grid; gap:8vw; grid-template-columns:.9fr 1.1fr; }.service-list article { border-top:1px solid var(--ink); display:grid; grid-template-columns:56px 1fr 1.25fr; padding:20px 0 25px; }.service-list span { font-size:12px; font-weight:700; }.service-list h3 { font-size:18px; margin:0; }.service-list p { font-size:14px; margin:0; max-width:270px; }
.clients { display:grid; gap:8vw; grid-template-columns:.8fr 1.2fr; padding:88px 8vw; }.clients h2 { font-size:clamp(46px,5.7vw,82px); margin:0; }.client-list { border-top:1px solid var(--ink); columns:2; gap:45px; list-style:none; margin:0; padding:0; }.client-list li { break-inside:avoid; border-bottom:1px solid var(--ink); font-size:14px; padding:13px 0; }
.about-block { display:grid; grid-template-columns:.8fr 1.2fr; }.about-block h2 { grid-column:1/2; }.about-copy { grid-column:2; max-width:490px; }.about-copy p { font-size:19px; }.about-note { background:var(--green); font-family:'DM Serif Display',serif; font-size:25px; grid-column:2; justify-self:end; line-height:1.02; margin-top:30px; padding:28px; transform:rotate(-3deg); }
.celia-profile { align-items:center; background:var(--blue); display:grid; gap:8vw; grid-template-columns:.8fr 1.2fr; padding:118px 8vw; }.headshot { aspect-ratio:1/1.12; margin:0; overflow:hidden; }.headshot img { display:block; height:100%; object-fit:cover; object-position:54% 42%; width:100%; }.celia-copy { max-width:550px; }.celia-copy h2 { font-size:clamp(46px,5.7vw,82px); margin:0 0 30px; }.celia-copy > p:not(.eyebrow) { font-size:18px; max-width:510px; }.profile-details { border-top:1px solid var(--ink); margin:30px 0 0; max-width:510px; padding-top:15px; }.profile-details summary { cursor:pointer; font-size:13px; font-weight:700; list-style:none; }.profile-details summary::-webkit-details-marker { display:none; }.profile-details summary span { display:inline-block; font-size:19px; line-height:1; margin-left:8px; transition:transform .2s ease; }.profile-details[open] summary span { transform:rotate(45deg); }.profile-details-copy { padding-top:24px; }.profile-details-copy p { font-size:16px!important; }
.contact { background:var(--ink); color:var(--paper); display:grid; gap:10vw; grid-template-columns:.42fr 1fr; }.contact .eyebrow { color:var(--sun); }.contact h2 { color:var(--paper); }.contact-intro { font-size:19px; max-width:540px; margin:30px 0; }.contact-art { align-items:center; background:var(--coral); display:flex; justify-content:center; min-height:260px; overflow:hidden; transform:rotate(3deg); }.contact-orbit { align-items:center; display:flex; height:230px; justify-content:center; width:230px; }.contact-orbit i { background:var(--ink); border-radius:50%; display:block; height:150px; width:150px; }.email-link { border-bottom:2px solid var(--sun); font-size:clamp(21px,3vw,38px); font-weight:600; }.email-link .inline-arrow { color:var(--sun); }.fine-print { color:#b9c0c9; font-size:11px; margin-top:13px; }
footer { align-items:center; display:flex; font-size:12px; justify-content:space-between; padding:28px 4vw; } footer p { margin:0; }
@media (max-width:720px) { .site-header { padding:18px 6vw; }.menu-toggle { display:block; }.site-nav { background:var(--sun); display:none; flex-direction:column; gap:25px; left:0; padding:40px 6vw; position:absolute; right:0; top:66px; align-items:flex-start; }.site-nav.open { display:flex; }.site-nav a { font-size:24px; }.nav-cta { font-size:18px!important; }.hero,.two-column,.services,.clients,.about-block,.celia-profile,.contact { display:block; }.hero { min-height:0; padding:76px 6vw 0; }.hero-art { margin:55px 0 0; min-height:310px; }.hero-arrow { bottom:4px; height:190px; left:12px; stroke-width:12; width:145px; }.statement,.services,.clients,.about-block,.celia-profile,.contact { padding:78px 6vw; }.section-rule { margin:0 6vw; padding-left:0; padding-right:0; }.two-column p { margin-top:30px; }.services h2,.clients h2 { margin-bottom:56px; }.service-list article { grid-template-columns:36px 1fr; }.service-list p { grid-column:2; margin-top:12px; }.client-list { columns:1; }.about-block h2 { margin-bottom:32px; }.about-note { font-size:20px; margin-top:42px; }.headshot { margin-bottom:46px; max-width:430px; }.contact-art { margin-bottom:52px; min-height:180px; }.contact-orbit { height:150px; width:150px; }.contact-orbit i { height:95px; width:95px; } footer { align-items:flex-start; flex-direction:column; gap:12px; padding:26px 6vw; } }
