/* Fidelity Strategies — shared base styles.
   Every page links this, then adds its own page-specific <style> block below it.
   Keep this file to rules that are identical (or meant to be identical) across
   every page: tokens, reset, type base, kicker glyph, skip link, nav, footer,
   and the nav-collapse breakpoint. Page-specific components (hero treatments,
   carousels, forms, diagrams) stay local to each page. */

:root{
  --bg:#0D1419;--bg-lift:#111A20;--text:#E9ECE8;--muted:#96A19C;
  --hairline:rgba(233,236,232,0.12);--hairline-soft:rgba(233,236,232,0.06);
  --green:#3FAE63;--green-dk:#2E8B57;--green-lt:#5FCB82;--gold:#C9A961;--error:#E0836B;--focus:#E9ECE8;--col-pad:36px;--max:1220px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

/* Required-field validation. Every form on the site (contact, newsletter
   signup) marks required fields and flags blanks the same way, so this
   lives here instead of being copy-pasted into each page's local <style>. */
.field.required>label::after{content:" *";color:var(--error);}
.field-invalid input,.field-invalid textarea,
input.field-invalid,textarea.field-invalid{
  border-color:var(--error)!important;
  box-shadow:0 0 0 1px var(--error);
}
.form-note{margin-top:14px;font-size:13px;color:var(--muted);}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--green);color:#0D1419;}
h1,h2,h3{font-family:'Source Serif 4',serif;font-weight:500;color:#fff;line-height:1.12;letter-spacing:-0.015em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,textarea,select{border-radius:0;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--col-pad);}

.kicker{font-size:11.5px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:14px;}
  .kicker .glyph{display:inline-flex;align-items:flex-end;gap:3px;height:11px;}
.kicker .glyph i{position:relative;width:3px;}
.kicker .glyph i::before{content:"";position:absolute;left:50%;top:-5.5px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;}
.kicker .glyph i:nth-child(1){height:4px;background:var(--green-dk);}
.kicker .glyph i:nth-child(1)::before{background:var(--green-dk);}
.kicker .glyph i:nth-child(2){height:7px;background:var(--green);}
.kicker .glyph i:nth-child(2)::before{background:var(--green);}
.kicker .glyph i:nth-child(3){height:11px;background:var(--green-lt);}
.kicker .glyph i:nth-child(3)::before{background:var(--green-lt);}

.skip-link{position:absolute;left:-999px;background:var(--green);color:#0D1419;padding:14px 22px;z-index:100;font-weight:600;font-size:14px;}
.skip-link:focus{left:0;top:0;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:4px;}

/* sticky header: the default for interior pages. landing-dark.html and
   our-team.html override this locally to a transparent, absolutely
   positioned header, since both open on a full bleed photo hero. */
header{position:sticky;top:0;z-index:50;background:rgba(13,20,25,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline);}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;height:84px;max-width:var(--max);margin:0 auto;padding:0 var(--col-pad);}
.logo img{height:67px;filter:brightness(0) invert(1);}
.navlinks{display:flex;align-items:center;gap:40px;}
.navlinks a:not(.cta){font-size:14px;font-weight:500;position:relative;padding:6px 0;color:#fff;}
.navlinks a:not(.cta)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--green);transition:width .3s cubic-bezier(.4,0,.2,1);}
.navlinks a:not(.cta):hover::after,.navlinks a:not(.cta):focus-visible::after,.navlinks a.current::after{width:100%;}
.navlinks .cta{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:#0D1419;background:var(--green);padding:12px 22px;transition:background .2s ease;}
.navlinks .cta:hover{background:#54C077;}

/* mobile menu toggle: hidden above 900px, where the full nav shows inline */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;background:none;border:none;padding:0;cursor:pointer;flex:none;}
.nav-toggle span{display:block;width:100%;height:2px;background:#fff;transition:transform .25s ease,opacity .25s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.btn-primary{
  display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#0D1419;
  padding:16px 30px;font-weight:600;font-size:14.5px;letter-spacing:.02em;border:none;cursor:pointer;
  transition:background .2s ease;font-family:inherit;
}
.btn-primary:hover{background:#54C077;}
.btn-primary:disabled{opacity:.6;cursor:default;}

footer{border-top:1px solid var(--hairline);padding:64px 0 36px;color:var(--muted);}
.footer-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);column-gap:96px;row-gap:40px;padding-bottom:48px;border-bottom:1px solid var(--hairline-soft);}
.footer-grid .brand img{height:30px;filter:brightness(0) invert(1);}
.footer-grid .brand p{max-width:34ch;font-size:14px;margin-top:16px;line-height:1.65;}
.footer-col h4{font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;}
.footer-col p,.footer-col a{display:block;font-size:14.5px;color:var(--text);margin-bottom:10px;}
.footer-col a:hover{color:var(--green);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-size:13px;flex-wrap:wrap;gap:14px;}
.footer-bottom span{color:var(--muted);}

@media (max-width:900px){
  .nav-toggle{display:flex;}
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--hairline);
    padding:8px var(--col-pad) 20px;
  }
  .navlinks.open{display:flex;}
  .navlinks a:not(.cta){padding:16px 0;border-top:1px solid var(--hairline-soft);}
  .navlinks a:not(.cta):first-child{border-top:none;}
  .navlinks a:not(.cta)::after{display:none;}
  .navlinks .cta{margin-top:16px;justify-content:center;}
}