:root { --ink:#1c1c1a; --muted:#77726b; --paper:#f3eee8; --line:rgba(28,28,26,.15); --serif:"Playfair Display",Georgia,serif; --sans:"DM Sans",Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } img { display:block; width:100%; } a { color:inherit; text-decoration:none; }
.hero { min-height:720px; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:7vw; max-width:1280px; margin:auto; padding:72px 7vw 100px; }
.hero-copy { max-width:520px; } .eyebrow { margin:0 0 28px; color:var(--muted); font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; } .eyebrow span { display:inline-block; width:28px; height:1px; margin:0 12px 3px; background:var(--muted); } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.035em; } h1 { max-width:540px; margin-bottom:26px; font-size:clamp(3.4rem,5.7vw,5.9rem); line-height:.99; } h1 em,h2 em { color:#a8876d; font-style:italic; } .hero-description { max-width:380px; margin-bottom:35px; color:var(--muted); font-size:.98rem; line-height:1.7; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:42px; min-width:214px; padding:17px 20px; border:1px solid transparent; font-size:.76rem; font-weight:600; letter-spacing:.03em; transition:transform .25s ease,background .25s ease; } .button:hover { transform:translateY(-3px); } .button-dark { color:#fff; background:var(--ink); } .button-light { color:var(--ink); background:var(--paper); } .hero-note { display:flex; align-items:center; gap:9px; margin-top:74px; color:var(--muted); font-size:.69rem; letter-spacing:.06em; } .dot { width:7px; height:7px; border-radius:50%; background:#a8876d; }
.hero-visual { position:relative; max-width:560px; justify-self:end; } .portrait-frame { position:relative; width:min(100%,560px); padding:14px 14px 48px; background:#e6dbd0; } .portrait-frame img { height:min(61vw,590px); object-fit:cover; object-position:center top; filter:saturate(.82); } .portrait-caption { position:absolute; right:16px; bottom:17px; left:16px; display:flex; justify-content:space-between; color:var(--muted); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; } .seal { position:absolute; bottom:12%; left:-42px; display:grid; place-items:center; width:94px; height:94px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); transform:rotate(-12deg); } .seal span { margin-bottom:-14px; font-family:var(--serif); font-size:1.4rem; } .seal small { font-size:.46rem; letter-spacing:.16em; text-transform:uppercase; }
.results { padding:92px 7vw 120px; background:var(--paper); } .results-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; max-width:1280px; margin:auto auto 42px; } .results-heading .eyebrow { grid-column:1 / -1; margin-bottom:20px; } .results-heading h2 { max-width:510px; margin:0; font-size:clamp(2.7rem,4.5vw,4.7rem); line-height:1.05; } .results-heading > p:last-child { max-width:280px; margin:0 0 4px auto; color:var(--muted); font-size:.86rem; line-height:1.6; } .results-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:1280px; margin:auto; } .result-card { margin:0; padding:12px 12px 0; background:#e6dbd0; } .result-card img { aspect-ratio:1 / 1; object-fit:cover; } .result-card figcaption { display:flex; justify-content:space-between; padding:17px 4px 19px; color:var(--muted); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; } .results-note { max-width:1280px; margin:22px auto 0; color:var(--muted); font-size:.66rem; letter-spacing:.04em; }
.services { padding:120px 7vw 140px; background:#fffdfb; } .section-heading { display:flex; align-items:end; justify-content:space-between; max-width:1280px; margin:auto auto 62px; } .section-heading h2,.about h2,.cta h2 { max-width:540px; margin:0; font-size:clamp(2.7rem,4.5vw,4.7rem); line-height:1.05; } .service-grid { display:grid; grid-template-columns:repeat(3,1fr); max-width:1280px; margin:auto; border-top:1px solid var(--line); } .service-card { position:relative; min-height:225px; padding:30px 28px 26px 0; border-bottom:1px solid var(--line); } .service-card:nth-child(3n+2),.service-card:nth-child(3n+3) { padding-left:32px; border-left:1px solid var(--line); } .service-number { color:var(--muted); font-size:.64rem; letter-spacing:.12em; } .service-icon { display:block; margin:28px 0 17px; color:#a8876d; font-size:1.4rem; } .service-card h3 { margin-bottom:10px; font-family:var(--serif); font-size:1.48rem; font-weight:500; } .service-card p { max-width:250px; margin-bottom:0; color:var(--muted); font-size:.81rem; line-height:1.55; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,9vw,140px); align-items:center; max-width:1280px; margin:auto; padding:130px 7vw; } .about-image { max-width:525px; padding:12px; background:#e6dbd0; } .about-image img { aspect-ratio:1 / 1.08; object-fit:cover; filter:saturate(.75); } .about-copy { max-width:500px; } .about-intro { max-width:360px; margin:32px 0 40px; color:var(--muted); font-size:.98rem; line-height:1.65; } .about ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); } .about li { display:flex; gap:24px; padding:17px 0; border-bottom:1px solid var(--line); font-size:.83rem; line-height:1.45; } .about li span { color:var(--muted); font-size:.64rem; letter-spacing:.1em; }
.cta { display:grid; justify-items:center; padding:112px 24px 120px; color:#fff; text-align:center; background:var(--ink); } .cta .eyebrow { color:#aaa8a1; } .cta h2 { max-width:660px; margin-bottom:36px; } .cta h2 em { color:#d7b99f; } footer { display:flex; justify-content:space-between; max-width:1280px; margin:auto; padding:28px 7vw 32px; color:var(--muted); font-size:.67rem; letter-spacing:.06em; text-transform:uppercase; } .socials { display:flex; gap:26px; } .socials a:hover { color:var(--ink); } .reveal { opacity:0; transform:translateY(18px); animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards; } .reveal-delay { animation-delay:.16s; } @keyframes rise { to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) { .hero { display:flex; flex-direction:column; align-items:stretch; gap:55px; min-height:0; padding:48px 24px 76px; } h1 { font-size:clamp(3rem,14vw,4.8rem); } .hero-note { margin-top:42px; } .hero-visual { align-self:center; width:calc(100% - 18px); margin-right:18px; } .portrait-frame img { height:110vw; max-height:510px; } .seal { left:-24px; width:76px; height:76px; } .results { padding:74px 12px 86px; } .results-heading { display:block; margin:0 12px 34px; } .results-heading .eyebrow { margin-bottom:20px; } .results-heading > p:last-child { margin:22px 0 0; } .results-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:10px; width:100%; } .result-card { position:relative; z-index:1; width:auto; padding:10px 10px 0; background:transparent; } .result-card::before { content:""; position:absolute; inset:0; z-index:-1; background:#e6dbd0; } .result-card + .result-card { margin-top:40px; margin-left:0; } .result-card + .result-card::before { inset:-12px -10px -12px -18px; } .result-card figcaption { padding:14px 3px 16px; font-size:.52rem; letter-spacing:.08em; } .services { padding:80px 24px 90px; } .section-heading { display:block; margin-bottom:42px; } .section-heading .eyebrow { margin-bottom:20px; } .service-grid { grid-template-columns:1fr 1fr; } .service-card { min-height:205px; padding:24px 12px 20px 0; } .service-card:nth-child(3n+2),.service-card:nth-child(3n+3) { padding-left:12px; border-left:1px solid var(--line); } .service-card:nth-child(2n+1) { border-left:0; } .service-card h3 { font-size:1.25rem; } .service-card p { font-size:.74rem; } .about { display:flex; flex-direction:column; align-items:stretch; gap:58px; padding:85px 24px 95px; } .about-image { align-self:center; width:calc(100% - 18px); margin-right:18px; } .cta { padding:86px 24px 92px; } footer { flex-direction:column; gap:18px; padding:25px 24px 28px; } }

.section-heading { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:end; gap:48px; }
.section-heading-copy { min-width:0; position:relative; z-index:2; padding-right:8px; }
.section-heading-media { position:relative; z-index:1; width:100%; padding:8px 8px 0; background:#e6dbd0; }
.section-heading-media img { aspect-ratio:2 / 3; object-fit:cover; object-position:center 35%; }
@media (min-width:761px) { .section-heading { grid-template-columns:minmax(0,1fr) 380px; } }
@media (max-width:760px) { .section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,52%); gap:6px; align-items:end; } .section-heading-media { min-width:0; padding:5px 5px 0; } .section-heading-media img { aspect-ratio:2 / 3; } }
.section-heading h2 { max-width:560px; font-size:clamp(2.35rem,4vw,4.1rem); line-height:1.02; }
@media (min-width:761px) { .section-heading { grid-template-columns:minmax(0,1fr) 430px; gap:32px; } }
@media (max-width:760px) { .section-heading { grid-template-columns:minmax(0,1fr) minmax(0,48%); gap:8px; } .section-heading h2 { font-size:clamp(2.05rem,8vw,3.2rem); line-height:1.02; } }
@media (min-width:761px) { .section-heading { grid-template-columns:minmax(0,1fr) 560px; gap:20px; } .section-heading h2 { max-width:390px; font-size:clamp(2rem,3.1vw,3.3rem); } }
@media (max-width:760px) { .section-heading { grid-template-columns:minmax(0,1fr) minmax(0,54%); gap:8px; } .section-heading h2 { max-width:170px; font-size:clamp(1.45rem,5.6vw,2.25rem); line-height:1.04; word-break:normal; overflow-wrap:normal; hyphens:none; } }