@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --graphite-1:#1d2024;
  --graphite-2:#24282d;
  --graphite-3:#2d3238;
  --graphite-4:#3b4249;
  --silver:#b7c0c8;
  --mist:#e6e8e7;
  --white:#f5f4f0;
  --brass:#b89b70;
  --line:rgba(219,224,225,.16);
}

body { background:var(--graphite-1); color:var(--white); font-family:'IBM Plex Sans',Arial,sans-serif; }
header { height:13vh; min-height:0; display:flex; align-items:center; gap:3vw; padding:0 5vw; background:var(--graphite-2); border-bottom:1px solid var(--line); }
.brand { display:grid; grid-template-columns:auto auto; grid-template-rows:1fr 1fr; column-gap:.75vw; align-items:center; white-space:nowrap; }
.brand-mark { grid-row:1/3; width:clamp(18px,2.8vw,44px); height:clamp(18px,2.8vw,44px); border:1px solid var(--brass); display:grid; place-items:center; font:italic clamp(12px,1.65vw,25px) 'Cormorant Garamond',serif; color:var(--brass); }
.brand b { align-self:end; font:600 clamp(7px,1vw,15px) 'IBM Plex Sans'; letter-spacing:.17em; }
.brand small { align-self:start; font-size:clamp(3.5px,.42vw,7px); letter-spacing:.2em; color:#9ca6ad; }
.demo-nav { margin-left:auto; display:flex; gap:clamp(7px,2.1vw,34px); font-size:clamp(5px,.7vw,11px); color:#c9ced1; }
.demo-nav a { position:relative; }
.demo-nav a:nth-child(4) { color:var(--brass); }
.demo-nav a:nth-child(4)::after { content:''; position:absolute; left:0; right:0; bottom:-.7vh; height:1px; background:var(--brass); }
.header-cta { padding:clamp(6px,1vw,14px) clamp(8px,1.4vw,22px); border:1px solid #d4d8d9; color:var(--white); font-size:clamp(5px,.7vw,11px); white-space:nowrap; }
.header-cta span { margin-left:1vw; color:var(--brass); }

main { height:87vh; display:grid; grid-template-columns:57% 43%; }
.copy { min-width:0; position:relative; padding:clamp(14px,5.4vh,54px) 5vw 0; display:flex; flex-direction:column; background:var(--graphite-1); }
.copy::before { content:'LEX / 2026'; position:absolute; right:3vw; top:4vh; color:#5b636a; font-size:clamp(3px,.42vw,7px); letter-spacing:.18em; }
.eyebrow { display:flex; align-items:center; gap:1vw; color:#9ea8ae; font-size:clamp(4px,.54vw,9px); letter-spacing:.19em; }
.eyebrow span { width:2.5vw; height:1px; background:var(--brass); }
h1 { margin:clamp(8px,2.5vh,24px) 0 clamp(7px,1.8vh,18px); font:600 clamp(28px,5vw,76px)/.9 'Cormorant Garamond',serif; letter-spacing:-.045em; }
h1 em { font-weight:500; color:#c8cdd0; }
.copy>p { width:76%; margin:0; color:#aeb6bb; font-size:clamp(6px,.86vw,13px); line-height:1.65; }
.actions { display:flex; align-items:center; gap:2.2vw; margin-top:clamp(10px,2.8vh,27px); }
.demo-button { padding:clamp(7px,1.2vw,16px) clamp(9px,1.7vw,25px); font-size:clamp(5px,.7vw,11px); }
.primary { background:var(--mist); color:var(--graphite-1); font-weight:600; }
.primary span { margin-left:1.5vw; color:#755f40; }
.text-link { color:#d2d6d7; font-size:clamp(5px,.7vw,11px); border-bottom:1px solid #727a7f; padding-bottom:.35vw; }
.credentials { display:flex; align-items:center; gap:1.1vw; margin-top:2.4vh; padding-top:1.5vh; border-top:1px solid var(--line); }
.credentials span { padding-right:1vw; border-right:1px solid var(--line); color:var(--brass); font:600 clamp(3px,.47vw,8px) 'IBM Plex Sans'; letter-spacing:.13em; }
.credentials small { margin-left:auto; max-width:25%; color:#788289; font-size:clamp(3px,.41vw,7px); line-height:1.4; }
.facts { margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); height:18vh; min-height:0; }
.facts>div { display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line); padding-right:1vw; }
.facts>div:nth-child(2),.facts>div:last-child { padding-left:1.6vw; }
.facts>div:last-child { border:0; }
.facts b { font:500 clamp(15px,2.6vw,39px) 'Cormorant Garamond',serif; color:#edf0ef; letter-spacing:-.025em; }
.facts span { color:#808a90; font-size:clamp(4px,.58vw,9px); }

.visual { position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(24,29,33,.36),rgba(15,18,21,.9)),url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=85') center/cover; color:#fff; }
.visual::before,.visual::after { content:''; position:absolute; width:45vw; height:45vw; border:1px solid rgba(210,217,220,.12); top:-34%; left:-30%; transform:rotate(22deg); }
.visual::after { width:25vw; height:25vw; top:38%; left:42%; }
.visual-index { position:absolute; top:4vh; right:3vw; color:#d6dadd; font-size:clamp(4px,.55vw,9px); letter-spacing:.14em; }
.award { position:absolute; z-index:3; left:2vw; top:3vh; display:flex; align-items:center; gap:.7vw; padding:clamp(5px,.9vw,13px); border:1px solid rgba(223,226,226,.38); color:#fff; background:rgba(29,32,36,.68); backdrop-filter:blur(6px); }
.award b { font:italic 500 clamp(9px,1.45vw,22px) 'Cormorant Garamond'; color:#d0b58c; }
.award span { padding-left:.7vw; border-left:1px solid rgba(255,255,255,.25); font-size:clamp(3px,.44vw,7px); line-height:1.35; text-transform:uppercase; letter-spacing:.1em; }
.practice-card { position:absolute; left:0; bottom:9vh; width:76%; padding:clamp(12px,3vw,40px); background:#e7e9e8; color:#24282d; border-top:3px solid var(--brass); }
.practice-card small { font-size:clamp(4px,.52vw,8px); letter-spacing:.18em; color:#76613f; }
.practice-card b { display:block; margin:1vh 0 1.5vh; font:600 clamp(13px,2.15vw,32px)/1.03 'Cormorant Garamond',serif; letter-spacing:-.025em; }
.practice-tags { display:flex; gap:.55vw; margin:-.25vh 0 1.2vh; }
.practice-tags span { padding:.45vh .7vw; border:1px solid rgba(36,40,45,.2); color:#5d656a; font-size:clamp(3px,.44vw,7px); }
.practice-card a { font-size:clamp(5px,.65vw,10px); border-bottom:1px solid; padding-bottom:.3vw; }
.practice-card a span { margin-left:1vw; }
.location { position:absolute; right:2.5vw; bottom:2.5vh; text-align:right; color:#aeb7bc; font-size:clamp(4px,.52vw,8px); line-height:1.6; letter-spacing:.15em; }

@media (max-aspect-ratio:4/5) {
  html,body { height:auto; min-height:100%; overflow:auto; }
  header { height:68px; padding:0 22px; }
  .demo-nav,.brand small { display:none; }
  .header-cta { margin-left:auto; }
  main { height:auto; display:block; }
  .copy { min-height:calc(100svh - 68px); padding:48px 24px 0; }
  .copy::before { right:24px; top:28px; }
  h1 { font-size:clamp(48px,14vw,72px); }
  .copy>p { width:100%; font-size:14px; }
  .credentials { margin-top:32px; }
  .facts { min-height:130px; }
  .visual { min-height:72svh; }
  .practice-card { bottom:8svh; }
}