/* ============================================================
   PacPref Capital — styles.css
   Brand: navy #0A2240 · cyan #009ADE · blush #E5D4D3 (per brand guidelines)
   ============================================================ */

:root{
  --navy:#0A2240;
  --navy-700:#0e2c54;
  --navy-600:#13366a;
  --cyan:#009ADE;
  --blush:#E5D4D3;
  --paper:#FBF8F7;
  --paper-cool:#F3F6F9;
  --ink:#0A2240;
  --ink-soft:#475467;
  --line:rgba(10,34,64,.12);
  --line-on-navy:rgba(229,212,211,.18);
  --maxw:1180px;
  --pad:clamp(1.25rem,5vw,3rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Geist",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(4.5rem,9vw,8rem)}

.eyebrow{
  font-family:"Geist Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cyan);font-weight:500;margin:0 0 1.1rem;
}
.eyebrow.muted{color:var(--ink-soft)}

h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0}
.h-display{font-size:clamp(2.5rem,6vw,4.9rem);font-weight:800;letter-spacing:-.035em}
.h-section{font-size:clamp(1.8rem,3.4vw,2.7rem)}
p{margin:0 0 1.15rem}
.lede{font-size:clamp(1.08rem,1.6vw,1.32rem);color:var(--ink-soft);max-width:54ch}

/* ---------- Logo ---------- */
.brand{display:inline-block;line-height:0}
.brand img{display:block;height:30px;width:auto}
.foot-top .brand img{height:44px}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,247,.82);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{
  font-size:.9rem;font-weight:500;color:var(--ink-soft);
  position:relative;padding-block:.4rem;transition:color .2s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--cyan);transition:width .25s ease;
}
.nav-links a:hover{color:var(--navy)}
.nav-links a:hover::after{width:100%}
.nav-cta{
  border:1px solid var(--navy);border-radius:999px;padding:.5rem 1.15rem;
  color:var(--navy);font-weight:600;font-size:.86rem;transition:.2s;
}
.nav-cta:hover{background:var(--navy);color:#fff}
.nav-cta::after{display:none}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:.5rem;color:var(--navy)}
.menu-btn svg{width:26px;height:26px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:2;
  padding-top:clamp(4.5rem,11vw,8.5rem);padding-bottom:clamp(8rem,16vw,13rem)}
.hero .eyebrow{color:var(--blush)}
.hero h1{color:#fff;max-width:17ch}
.hero .accent{color:var(--cyan)}
.hero .lede{color:#cdd8e6;margin-top:1.6rem}
.hero-chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.4rem}
.chip{
  font-family:"Geist Mono",monospace;font-size:.78rem;letter-spacing:.02em;
  border:1px solid var(--line-on-navy);border-radius:999px;
  padding:.5rem .95rem;color:var(--blush);
}
.chip b{color:#fff;font-weight:500}

/* ---------- Ambient ocean (layered SVG backgrounds, see /assets) ---------- */
.ocean{position:absolute;left:0;right:0;bottom:-2px;z-index:1;width:100%;
  height:42%;min-height:200px;pointer-events:none;overflow:hidden}
.ocean span{position:absolute;inset:0;
  background-repeat:repeat-x;background-position:left bottom;background-size:1440px 100%}
.ocean .w1{background-image:url(../assets/ocean-back.svg);opacity:.9;animation:drift 26s linear infinite}
.ocean .w2{background-image:url(../assets/ocean-mid.svg);opacity:.55;animation:drift 20s linear infinite reverse}
.ocean .w3{background-image:url(../assets/ocean-front.svg);opacity:.18;animation:drift 34s linear infinite}
.ocean--footer{height:140px;min-height:140px;opacity:.5}
@keyframes drift{from{background-position:0 bottom}to{background-position:-1440px bottom}}

/* ---------- Stat band ---------- */
.stats{background:var(--paper-cool);border-block:1px solid var(--line)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem);
  padding-block:clamp(3rem,5vw,4.2rem)}
.stat .num{font-weight:800;font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.03em;color:var(--navy)}
.stat .num span{color:var(--cyan)}
.stat .lbl{font-size:.86rem;color:var(--ink-soft);margin-top:.4rem;line-height:1.45}

/* ---------- Firm ---------- */
.firm-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.firm-body p{font-size:1.075rem}
.firm-body p:last-child{margin-bottom:0}

/* ---------- Footprint / markets ---------- */
.footprint{background:var(--paper)}
.fp-head{max-width:60ch}
.fp-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,4rem);margin-top:2.6rem}
.fp-cols h3{font-size:1.02rem;color:var(--navy);margin-bottom:1rem;
  display:flex;align-items:center;gap:.6rem}
.fp-cols h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.tags{display:flex;flex-wrap:wrap;gap:.55rem}
.tag{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:.45rem .9rem;font-size:.86rem;color:var(--navy);font-weight:500}
.tag.asia{border-color:rgba(0,154,222,.4)}

/* ---------- Contact / footer ---------- */
footer.site{background:var(--navy);color:#fff;position:relative;overflow:hidden}
footer.site .wrap{position:relative;z-index:2}
.foot-top{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:end;
  padding-block:clamp(4rem,8vw,7rem)}
.foot-top .eyebrow{color:var(--blush)}
.foot-top h2{color:#fff;max-width:18ch}
.mail{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;
  font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600;color:var(--cyan)}
.mail:hover{text-decoration:underline}
.foot-bottom{border-top:1px solid var(--line-on-navy);
  padding-block:2.2rem;display:flex;flex-wrap:wrap;gap:1.2rem;
  justify-content:space-between;align-items:center}
.foot-bottom .tagline{font-family:"Geist Mono",monospace;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--blush)}
.disclaimer{font-size:.78rem;color:#8fa1ba;max-width:62ch;line-height:1.6;padding-bottom:2.4rem}
.copyright{font-size:.8rem;color:#8fa1ba}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .firm-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .menu-btn{display:block}
  .nav-links{
    position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav-links.open{max-height:380px}
  .nav-links a{width:100%;padding:1rem var(--pad);border-bottom:1px solid var(--line)}
  .nav-links .nav-cta{margin:1rem var(--pad);width:calc(100% - 2*var(--pad));text-align:center}
  .foot-top{grid-template-columns:1fr}
  .fp-cols{grid-template-columns:1fr}
}
@media(max-width:480px){
  .brand img{height:26px}
}
[id]{scroll-margin-top:90px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ocean .w1,.ocean .w2,.ocean .w3{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}