:root { --navy:#102b4b; --paper:#fafafa; --mist:#eef1f4; --ink:#132235; --muted:#596879; --line:#d9e0e7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",Arial,sans-serif; font-size:16px; line-height:1.6; }
.site-header { height:96px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5.8vw,92px); border-bottom:1px solid var(--line); background:rgba(250,250,250,.94); }
.brand { display:flex; align-items:center; width:235px; }.brand img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
nav { display:flex; align-items:center; gap:38px; } nav a, footer>a { color:var(--navy); text-decoration:none; font-size:13px; font-weight:500; } nav a:hover, footer>a:hover { text-decoration:underline; text-underline-offset:5px; }
.menu-button { display:none; background:none; border:0; color:var(--navy); font:inherit; }
.hero { min-height:calc(100vh - 96px); display:grid; grid-template-columns:1.16fr .84fr; }.hero-content { display:flex; flex-direction:column; justify-content:center; padding:clamp(90px,13vw,170px) clamp(24px,9vw,145px); }.eyebrow,.section-label { margin:0; color:var(--navy); font-size:11px; font-weight:600; letter-spacing:.15em; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Playfair Display",Georgia,serif; font-weight:500; line-height:1.1; letter-spacing:-.035em; } h1 { max-width:750px; margin:17px 0 30px; font-size:clamp(51px,6vw,84px); color:var(--navy); } h1 i,h2 i { font-style:italic; font-weight:500; }
.intro { max-width:495px; color:var(--muted); font-size:17px; }.button { width:max-content; display:inline-flex; align-items:center; gap:31px; margin-top:16px; padding:15px 20px; border:1px solid var(--navy); color:var(--navy); text-decoration:none; font-size:13px; font-weight:500; transition:.2s ease; }.button:hover { background:var(--navy); color:#fff; }.button span { font-size:20px; line-height:0; }
.hero-art { position:relative; min-height:470px; overflow:hidden; background:var(--navy); }.hero-art .line { position:absolute; width:150%; height:1px; background:rgba(255,255,255,.19); transform:rotate(-39deg); transform-origin:left center; }.line-one { top:22%; left:-25%; }.line-two { top:52%; left:-25%; }.line-three { top:82%; left:-25%; }.hero-art span { position:absolute; bottom:42px; left:clamp(28px,5vw,75px); color:#fff; font-family:"Playfair Display",Georgia,serif; font-size:clamp(32px,4.2vw,66px); line-height:.95; letter-spacing:-.05em; }
.introduction { display:grid; grid-template-columns:1fr 2fr; gap:70px; padding:clamp(85px,10vw,140px) clamp(24px,12vw,190px); background:var(--mist); }.introduction>div { max-width:760px; }.introduction h2,.practice h2,.contact h2 { margin:0 0 32px; color:var(--navy); font-size:clamp(39px,4.3vw,61px); }.introduction>div>p { max-width:690px; margin:0; color:var(--muted); font-size:17px; }.highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:48px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.highlights div { min-height:125px; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:20px; background:var(--mist); }.highlights strong { color:var(--navy); font-family:"Playfair Display",Georgia,serif; font-size:25px; font-weight:500; }.highlights span { color:var(--muted); font-size:11px; line-height:1.4; }
.practice { padding:clamp(85px,10vw,140px) clamp(24px,5.8vw,92px); background:var(--paper); }.practice-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:72px; }.practice-heading h2 { margin:0; }.practice-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--navy); }.practice article { min-height:285px; padding:27px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.practice article:nth-child(3n) { border-right:0; }.practice article span { font-size:12px; color:var(--muted); }.practice h3 { max-width:310px; margin:42px 0 15px; font-size:27px; color:var(--navy); }.practice article p { max-width:310px; margin:0; color:var(--muted); font-size:14px; }.practice-note { margin:34px 0 0; color:var(--muted); font-size:12px; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:70px; padding:clamp(85px,10vw,140px) clamp(24px,12vw,190px); background:var(--navy); }.contact .section-label { color:#e0e7ee; }.contact h2 { margin:20px 0 0; color:#fff; }.contact h2 i { color:#c9d7e5; }.contact-card { align-self:end; border-top:1px solid rgba(255,255,255,.45); padding-top:25px; color:#e0e7ee; }.contact-card>p:first-child { max-width:370px; }.contact-card a { display:flex; justify-content:space-between; align-items:center; margin-top:33px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.55); color:#fff; text-decoration:none; font-family:"Playfair Display",Georgia,serif; font-size:clamp(20px,2vw,28px); }.contact-note { margin:15px 0 0; font-size:12px; color:#c1cbd5; }
footer { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:28px clamp(24px,5.8vw,92px); background:#fff; } footer img { display:block; width:180px; height:auto; mix-blend-mode:multiply; } footer p { margin:0; color:var(--muted); font-size:12px; }
@media (max-width:720px) { .site-header { height:76px; }.brand { width:185px; }.menu-button { display:block; } nav { position:absolute; top:76px; left:0; right:0; z-index:4; display:none; flex-direction:column; align-items:flex-start; gap:20px; padding:24px; background:var(--paper); border-bottom:1px solid var(--line); } nav.open { display:flex; }.hero { grid-template-columns:1fr; }.hero-content { min-height:520px; padding:82px 24px; }.hero-art { min-height:360px; }.introduction,.contact { grid-template-columns:1fr; gap:35px; padding-left:24px; padding-right:24px; }.highlights { grid-template-columns:1fr; }.highlights div { min-height:95px; }.practice-heading { display:block; }.practice-heading h2 { margin-top:27px; }.practice-list { grid-template-columns:1fr; }.practice article,.practice article:nth-child(3n) { min-height:0; margin:0; padding:26px 0; border-right:0; border-bottom:1px solid var(--line); }.practice h3 { margin:23px 0 10px; } footer { flex-wrap:wrap; } footer img { width:165px; } }