:root{
  --navy:#001F3E; --navy-2:#00172F; --ink:#0B1220; --bone:#F3EEE6; --bone-2:#EAE2D5; --paper:#FAF7F2;
  --gold:#CD9253; --gold-2:#E2B47E; --muted:#5A6170; --muted-d:#9AA6B8;
  --line:rgba(11,18,32,.14); --line-d:rgba(255,255,255,.14);
  /* type floor: 18px @1920 for everything (Tan's rule) */
  --fs-mono:clamp(14px,.94vw,18px);
  --fs-body:clamp(16px,1.05vw,20px);
  --fs-lead:clamp(18px,1.4vw,27px);
  --fs-h3:clamp(22px,1.9vw,38px);
  --fs-h2:clamp(44px,6.2vw,124px);
  --fs-hero:clamp(54px,7.4vw,156px);
  --gut:clamp(16px,3.2vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Outfit,system-ui,sans-serif;font-size:var(--fs-body);line-height:1.5;color:var(--ink);background:var(--bone);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:var(--fs-mono);letter-spacing:.02em;text-transform:uppercase}
.gold{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;padding:.95em 1.5em;border-radius:999px;font-weight:500;font-size:var(--fs-body);line-height:1;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.btn .arr{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(4px) rotate(-45deg)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-2)}
.btn-ghost{border:1px solid currentColor}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:var(--navy)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:2rem;padding:18px var(--gut);color:#fff;transition:background .4s,backdrop-filter .4s,padding .4s}
.nav.scrolled{background:rgba(0,23,47,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:12px}
.nav .logo img{height:clamp(22px,1.6vw,30px);width:auto}
.nav ul{display:flex;gap:clamp(16px,2vw,40px);list-style:none;margin-left:auto}
.nav ul a{opacity:.8;transition:opacity .25s}
.nav ul a:hover{opacity:1}
.nav .tel{opacity:.8}
@media (max-width:980px){.nav ul,.nav .tel{display:none}.nav .btn{margin-left:auto}}

