/* ============ 21 CENTURIES · DESIGN TOKENS ============ */ :root{ --ink:#0E2A40; --marine:#1B4A68; --steel:#517F9E; --mist:#A9C3D2; --paper:#FAF8F4; --paper-2:#F2EEE6; --dawn:#C99C5F; --dawn-deep:#A87C42;--dawn-ink:#8E6631; --text:#22384A; --muted:#52677A; --steel-deep:#3F6E8C; --line:#DCD5C9; --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --max:1200px; --pad:clamp(20px,5vw,64px); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--sans); font-size:17px;line-height:1.65; color:var(--text); background:var(--paper); -webkit-font-smoothing:antialiased; } img{max-width:100%} a{color:inherit} h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.08} ::selection{background:var(--mist);color:var(--ink)} :focus-visible{outline:2px solid var(--dawn);outline-offset:3px;border-radius:2px} .skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip-path:none; background:var(--paper);color:var(--ink);padding:14px 22px;z-index:99;font-weight:600;border-radius:2px} /* ============ SHARED ============ */ .wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .eyebrow{ font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--steel-deep);display:block;margin-bottom:22px; } .eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--dawn);vertical-align:middle;margin-right:12px} section{padding:clamp(72px,10vw,140px) 0} /* reveals only ever hide content when JS is confirmed running (.js on ) */ .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease} .js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} *,*::before,*::after{animation:none!important;transition:none!important} } /* text link */ .tlink{ position:relative; font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;text-decoration:none;color:var(--marine); padding-bottom:4px;border-bottom:1px solid var(--dawn); transition:color .25s,border-color .25s; } .tlink::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;transform:translateY(-50%);height:44px} .tlink:hover{color:var(--dawn-deep)} .btn{ display:inline-block;font-family:var(--sans);font-size:14px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;text-decoration:none; padding:16px 34px;border:1px solid transparent;border-radius:2px; transition:background .25s,color .25s,border-color .25s; cursor:pointer; } .btn-solid{background:var(--dawn);color:var(--ink);font-weight:600} .btn-solid:hover{background:#E0B87E} .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent} .btn-ghost:hover{background:rgba(255,255,255,.12)} .btn-ink{border-color:var(--ink);color:var(--ink);background:transparent} .btn-ink:hover{background:var(--ink);color:var(--paper)} /* cinematic placeholder frame */ .frame{ position:relative;overflow:hidden;border-radius:2px; background:var(--marine); } .frame::after{ /* film grain */ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .frame .cap{ position:absolute;left:18px;bottom:14px;z-index:2; font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.65),0 0 3px rgba(0,0,0,.5); } .frame .cap::before{content:"◦ ";color:var(--dawn)} .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* ============ HEADER ============ */ header{ position:absolute;top:0;left:0;right:0;z-index:20; } .nav{ max-width:var(--max);margin:0 auto;padding:26px var(--pad); display:flex;align-items:center;justify-content:space-between;gap:24px; } .logo{display:flex;flex-direction:column;text-decoration:none;color:#fff;line-height:1.15} .logo img{height:48px;width:auto;display:block} nav ul{display:flex;gap:24px;list-style:none;align-items:center} nav ul li a{white-space:nowrap} @media (min-width:881px) and (max-width:1150px){nav ul{gap:16px}nav a{font-size:11.5px;letter-spacing:.06em}nav a.nav-cta{padding:10px 13px}} nav a{font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);text-decoration:none;transition:color .25s} nav a:hover{color:#fff} .nav-sub,.nav-foot{display:none} nav a.nav-cta{border:1px solid rgba(255,255,255,.5);padding:10px 18px;border-radius:2px;white-space:nowrap} nav a.nav-cta:hover{background:#fff;color:var(--ink)} /* larger pointer target, zero layout impact (WCAG 2.5.8) */ nav ul li a:not(.nav-cta){position:relative} nav ul li a:not(.nav-cta)::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;transform:translateY(-50%);height:38px} /* --- mobile menu button (hidden on desktop) --- */ .navbtn{ display:none;align-items:center;justify-content:center;gap:5px;flex-direction:column; width:46px;height:46px;background:transparent;border:1px solid rgba(255,255,255,.45); border-radius:2px;cursor:pointer;flex:none; } .navbtn i{display:block;width:20px;height:1.5px;background:#fff;transition:transform .3s ease,opacity .25s ease} .navbtn[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .navbtn[aria-expanded="true"] i:nth-child(2){opacity:0} .navbtn[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} @media (max-width:880px){ /* the button belongs hard against the right edge; the empty