/* =========================================================
   LPN Asset Management — landing page styles
   Brand: Navy #0B1B3D · Gold #C5A059
   Gold on white fails contrast, so text on white uses
   darker golds #8A6A2E (headlines) and #7A5E28 (eyebrows).
   Most layout styling is inline in index.html (exported from
   the design canvas); this file holds fonts, global rules,
   responsive breakpoints, hover states and animations.
   ========================================================= */

/* ---------- Self-hosted fonts (SIL OFL 1.1, see /assets/fonts) ---------- */
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/libre-baskerville-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/libre-baskerville-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/libre-baskerville-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/libre-baskerville-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/montserrat-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/montserrat-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/montserrat-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/montserrat-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/montserrat-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/montserrat-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Global ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%}
[hidden]{display:none !important}
a{color:#0B1B3D}a:hover{color:#3A4A6B}
a:focus-visible,button:focus-visible{outline:2px solid #C5A059;outline-offset:3px}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:#C5A059;color:#0B1B3D;padding:12px 18px;font:600 13px/1 'Montserrat',sans-serif;letter-spacing:.12em;text-decoration:none;transition:top .2s}
.skip-link:focus{top:16px;color:#0B1B3D}
section[id]{scroll-margin-top:0}

/* ---------- Header / navigation ---------- */
.nav a,.mob-nav a{color:#C5A059;text-decoration:none;transition:color .2s}
.nav a:hover,.mob-nav a:hover{color:#FFFFFF}
/* Gold underline slides in on hover / keyboard focus (desktop text links only, not the Contact button) */
.desk-nav a:not(:last-child){background-image:linear-gradient(#C5A059,#C5A059);background-repeat:no-repeat;background-position:left calc(100% - 6px);background-size:0 1px;transition:background-size .3s ease,color .2s}
.desk-nav a:not(:last-child):hover,.desk-nav a:not(:last-child):focus-visible{background-size:100% 1px}
.mob-nav a:not(:last-child):hover{text-decoration:underline;text-decoration-color:#C5A059;text-underline-offset:6px}
.menu-btn:focus-visible{outline:2px solid #C5A059;outline-offset:2px}

/* Breakpoint 1: <= 820px — hamburger menu replaces the text links, logo scales down */
@media (max-width: 820px){
  .desk-nav{display:none !important}
  .menu-btn{display:inline-flex !important}
  .crest{width:46px !important;height:49px !important}
  .wordmark{font-size:28px !important}
  .submark{font-size:9px !important;letter-spacing:.26em !important}
}
@media (min-width: 821px){.mob-nav{display:none !important}}

/* No-JS fallback: show plain text links on small screens, hide controls that need JS */
@media (max-width: 820px){
  .no-js .nav{flex-wrap:wrap !important}
  .no-js .desk-nav{display:flex !important;flex-wrap:wrap;gap:12px 24px !important;font-size:11px !important}
  .no-js .menu-btn{display:none !important}
}
.no-js .seg-group{display:none !important}

/* ---------- Scenario toggle (capital chart) ---------- */
.seg-btn{flex:1;min-height:44px;border:0;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;background:transparent;color:#C9CFDC;transition:background-color .25s,color .25s}
.seg-btn:hover{color:#FFFFFF}
.seg-btn[aria-pressed="true"]{background:#C5A059;color:#0B1B3D}

/* ---------- Animations ---------- */
@keyframes draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.draw{stroke-dasharray:1400}
.ping{transform-box:fill-box;transform-origin:center}
/* With JS: chart stays hidden until it scrolls into view, then animates (site.js adds .is-visible). */
.js .cap-panel:not(.is-visible) .draw{stroke-dashoffset:1400}
.js .cap-panel:not(.is-visible) .area,.js .cap-panel:not(.is-visible) .label{opacity:0}
.js .cap-panel.is-visible .draw{animation:draw 1.6s cubic-bezier(.6,0,.2,1) both}
.js .cap-panel.is-visible .area{animation:fadein 1s ease .9s both}
.js .cap-panel.is-visible .label{animation:fadein .6s ease 1.2s both}
.js .cap-panel.is-visible .ping{animation:ping 2.2s ease-out 1.6s infinite}
.js .cap-panel.is-visible .rise{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
/* Without JS everything simply shows, static. */

/* Breakpoint 3: <= 600px — the chart SVG scales down to ~45%, so enlarge its text (SVG units) */
@media (max-width: 600px){
  .cap-panel svg text{font-size:22px !important;letter-spacing:1px !important}
  .cap-panel svg .label-sub{display:none}
}

/* ---------- Underwriting cards ---------- */
.uw-card{transition:box-shadow .3s}
.uw-card:hover{box-shadow:inset 0 3px 0 #C5A059}
/* Breakpoint 2: <= 760px — underwriting 2x2 grid becomes one column */
@media (max-width: 760px){
  .uw-grid{grid-template-columns:minmax(0,1fr) !important}
  .uw-card{padding:32px 24px !important}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .draw,.area,.label,.rise,.ping{animation:none !important;opacity:1 !important}
  .js .cap-panel .draw{stroke-dashoffset:0 !important}
  .desk-nav a,.uw-card,.seg-btn{transition:none !important}
}