:root { --ink:#173242; --ink-soft:#36505c; --paper:#f4f0e8; --gold:#765329; --gold-light:#cfb27d; --line:rgba(23,50,66,.18); --sans:"Manrope",Arial,sans-serif; --serif:"Cormorant Garamond",Georgia,serif; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.7 var(--sans); } a { color:inherit; text-underline-offset:.22rem; } .skip-link { position:absolute; left:-9999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; padding:.7rem 1rem; background:var(--paper); } .site-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:94px; padding:1.2rem clamp(1.5rem,5vw,5rem); border-bottom:1px solid var(--line); } .brand img { display:block; width:clamp(135px,16vw,172px); height:auto; } .header-nav { display:flex; align-items:center; gap:1.3rem; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .header-nav a { text-decoration:none; } .header-nav .nav-cta { padding:.65rem .9rem; border:1px solid var(--ink); } .hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:clamp(2.5rem,8vw,8rem); align-items:end; max-width:1280px; margin:0 auto; padding:clamp(4rem,10vw,9rem) clamp(1.5rem,5vw,5rem) clamp(3.5rem,8vw,6.5rem); } .eyebrow { margin:0 0 1.2rem; color:var(--gold); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { max-width:760px; margin-bottom:1.7rem; font:400 clamp(3.3rem,7.5vw,7.2rem)/.9 var(--serif); letter-spacing:-.045em; } h1 em,h2 em { color:var(--gold); font-weight:400; } .hero-copy > p:last-child { max-width:600px; margin-bottom:0; color:var(--ink-soft); font-size:1.03rem; } .hero-mark { display:flex; min-height:235px; align-items:flex-end; justify-content:flex-end; padding:2rem; background:var(--ink); } .hero-mark img { width:min(54%,190px); height:auto; opacity:.88; } .page-main { border-top:1px solid var(--line); } .section { max-width:1280px; margin:0 auto; padding:clamp(3.8rem,8vw,7rem) clamp(1.5rem,5vw,5rem); } .section-label { margin-bottom:2rem; color:var(--gold); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; } .section-label span { display:inline-block; width:2.5rem; color:var(--ink); } .section-intro { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,8vw,7rem); border-bottom:1px solid var(--line); padding-bottom:clamp(3rem,7vw,5.5rem); } h2 { margin-bottom:1.2rem; font:400 clamp(2.35rem,4.3vw,4.3rem)/.98 var(--serif); letter-spacing:-.035em; } .section-intro p { max-width:540px; margin:0; color:var(--ink-soft); } .detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; } .detail { min-height:260px; padding:2.4rem clamp(1.3rem,3vw,2.7rem) 1.5rem 0; border-right:1px solid var(--line); } .detail + .detail { padding-left:clamp(1.3rem,3vw,2.7rem); } .detail:last-child { border-right:0; padding-right:0; } .detail h3 { margin-bottom:1rem; color:var(--gold); font:500 1.65rem/1.1 var(--serif); } .detail p { margin:0; color:var(--ink-soft); font-size:.92rem; } .situations { background:var(--ink); color:var(--paper); } .situations-wrap { max-width:1280px; margin:0 auto; padding:clamp(3.8rem,8vw,7rem) clamp(1.5rem,5vw,5rem); } .situations .section-label { color:var(--gold-light); } .situations .section-label span { color:var(--paper); } .situations h2 { max-width:620px; color:var(--paper); } .situations h2 em { color:var(--gold-light); } .situation-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin:3rem 0 0; padding:0; list-style:none; } .situation-list li { min-height:130px; padding:1.4rem 1.4rem 1.2rem; border:1px solid rgba(244,240,232,.27); color:#e7e1d8; font-size:.9rem; } .situation-list span { display:block; margin-bottom:1.2rem; color:var(--gold-light); font:400 1.45rem var(--serif); } .cta { display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; } .cta p { max-width:620px; margin:0; color:var(--ink-soft); } .button { display:inline-flex; align-items:center; gap:.9rem; justify-content:center; padding:1rem 1.25rem; background:var(--gold); color:var(--paper); font-size:.73rem; font-weight:600; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; } .button span { font-size:1.2rem; line-height:0; } .disclaimer { max-width:1280px; margin:0 auto; padding:0 clamp(1.5rem,5vw,5rem) 4rem; color:var(--ink-soft); font-size:.76rem; } .site-footer { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2.2rem clamp(1.5rem,5vw,5rem); border-top:1px solid var(--line); font-size:.76rem; } .footer-links { display:flex; flex-wrap:wrap; gap:1rem; } @media (max-width:760px) { .site-header { min-height:80px; padding:.9rem 1.5rem; } .header-nav { gap:.9rem; font-size:.61rem; } .header-nav a:not(.nav-cta) { display:none; } .hero { grid-template-columns:1fr; padding-top:4.5rem; } h1 { font-size:clamp(3.1rem,15vw,4.6rem); } .hero-mark { min-height:155px; } .hero-mark img { width:112px; } .section-intro,.detail-grid,.cta { grid-template-columns:1fr; gap:2rem; } .detail,.detail + .detail { min-height:0; padding:1.65rem 0; border-right:0; border-bottom:1px solid var(--line); } .detail:last-child { border-bottom:0; } .situation-list { grid-template-columns:1fr; margin-top:2rem; } .situation-list li { min-height:0; } .site-footer { align-items:flex-start; flex-direction:column; gap:1.2rem; } }