@font-face{font-family:"Stack Sans Headline";src:url(f_head_bold.woff2?v=2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Stack Sans Headline";src:url(f_head_semi.woff2?v=2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Stack Sans Text";src:url(f_text_reg.woff2?v=2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Stack Sans Text";src:url(f_text_med.woff2?v=2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Stack Sans Text";src:url(f_text_semi.woff2?v=2) format("woff2");font-weight:600;font-display:swap}

:root{
  --blue:#005B97; --deep:#04426e; --deeper:#032f4f; --orange:#F68A3E;
  --ink:#16283a; --ink-soft:#41566a; --paper:#FCFBF9; --panel:#fff; --line:#E7E2D9;
  --head:"Stack Sans Headline",system-ui,"Segoe UI",sans-serif;
  --text:"Stack Sans Text",system-ui,"Segoe UI",sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{font-family:var(--text);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.1;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 16px}body{font-size:16px}}

/* horizontal lockup built from the mark, since the supplied lockup is stacked */
.brand{display:flex;align-items:center;gap:16px;text-decoration:none}
.brand img{width:56px;height:56px}
.brand span{font-family:var(--head);font-weight:600;letter-spacing:.22em;font-size:18px;color:var(--blue)}
@media (max-width:640px){.brand{gap:12px}.brand img{width:48px;height:48px}.brand span{font-size:15px}}
.brand span,nav.main a.cta{white-space:nowrap}
@media (max-width:380px){.brand{gap:10px}.brand img{width:42px;height:42px}.brand span{font-size:13px;letter-spacing:.16em}nav.main a.cta{padding:8px 12px;font-size:14px}}
@media (max-width:340px){.brand span{display:none}}
.brand.on-dark span{color:#fff}

/* page */
  /* the diagonal cut from the brand cover */
  .hero{color:#fff;position:relative;overflow:hidden;background:linear-gradient(to bottom left,var(--orange) 0 27%,#fff 27% 27.9%,var(--deep) 27.9%)}
  header.top{display:flex;align-items:center;justify-content:space-between;height:84px;position:relative;z-index:2}
  /* homepage header stays put while scrolling; solid once the page has moved */
  .site-top{position:fixed;top:0;left:0;right:0;z-index:50;transition:background-color .2s ease,box-shadow .2s ease}
  .site-top.scrolled{background:var(--deep);box-shadow:0 6px 20px rgba(3,47,79,.25)}
  .site-top ~ .hero{padding-top:84px}
  nav.main{display:flex;align-items:center;gap:26px;font-size:15px}
  nav.main a{text-decoration:none;color:#fff}
  nav.main a.cta{background:#fff;color:var(--deep);padding:9px 16px;border-radius:2px;font-weight:600}
  @media (max-width:760px){nav.main a:not(.cta){display:none}}

  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:56px 0 96px}
  .hero .eyebrow{font:600 13px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:20px}
  .hero h1{font-size:clamp(38px,5.2vw,66px);max-width:13ch}
  .hero p.lede{font-size:19px;color:#cfe0ee;margin-top:24px;max-width:30em}
  .hero .actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
  .btn{display:inline-block;text-decoration:none;font:600 16px var(--head);padding:15px 22px;border-radius:2px}
  .btn.o{background:var(--orange);color:var(--ink)}
  .btn.g{border:1px solid rgba(255,255,255,.45);color:#fff}

  .map{background:rgba(3,47,79,.94);border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:22px 22px 14px}
  .map .cap{font:600 12px var(--head);letter-spacing:.14em;text-transform:uppercase;color:#9fc0da;display:flex;justify-content:space-between;margin-bottom:10px}
  .map .cap i{font-style:normal;color:var(--orange)}
  .map .cap i::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:7px;vertical-align:1px;animation:blink 1.6s ease-in-out infinite}
  .map svg{width:100%;height:auto;display:block}
  .map text{font-family:var(--text);fill:#fff}
  .map .node rect{fill:#0b4f80;stroke:rgba(255,255,255,.35)}
  .map .node.k rect{fill:#fff}
  .map .node.k text{fill:var(--deep);font-weight:600}
  .map .flow{stroke:rgba(246,138,62,.45);stroke-width:2;fill:none;stroke-dasharray:6 6}
  .map .pkts circle{fill:var(--orange)}
  .map .lbl{fill:#9fc0da;font-size:11px}
  @keyframes blink{50%{opacity:.25}}
  @media (prefers-reduced-motion:reduce){.map .cap i::before{animation:none}.map .pkts{display:none}}
  @media (max-width:900px){.hero-grid{grid-template-columns:1fr;padding:32px 0 64px}.hero{background:linear-gradient(to bottom left,var(--orange) 0 12%,#fff 12% 12.5%,var(--deep) 12.5%)}}

  .strip{background:var(--ink);color:#cfe0ee;font-size:14px}
  .strip .wrap{display:flex;gap:10px 36px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
  .strip b{color:#fff;font-family:var(--head);font-weight:600}

  section.block{padding:96px 0}
  .kicker{font:600 13px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
  h2.big{font-size:clamp(30px,4vw,48px);max-width:18ch}
  .intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:52px}
  .intro p{color:var(--ink-soft);font-size:18px}
  @media (max-width:820px){section.block{padding:64px 0}.intro{grid-template-columns:1fr;gap:16px;margin-bottom:32px}}

  .svc{border-top:2px solid var(--ink)}
  .svc .row{display:grid;grid-template-columns:84px 1.1fr 1.5fr 1fr;gap:28px;padding:30px 24px;margin:0 -24px;background:linear-gradient(var(--line),var(--line)) no-repeat 24px 100%/calc(100% - 48px) 1px;align-items:start;transition:background-color .15s ease,box-shadow .15s ease}
  .svc .n{font:600 44px/1 var(--head);letter-spacing:-.02em;color:var(--orange);font-variant-numeric:tabular-nums}
  .svc h3{font-size:23px;padding-top:6px}
  .svc p{color:var(--ink-soft);padding-top:4px}
  .svc .tools{font:600 13px/1.5 var(--head);letter-spacing:.03em;color:var(--blue);padding-top:7px}
  @media (hover:hover){.svc .row:hover{background-color:#fff;box-shadow:inset 4px 0 0 var(--orange)}}
  @media (max-width:900px){.svc .row{grid-template-columns:56px 1fr;gap:8px 14px;margin:0 -16px;padding:26px 16px 28px;background-position:16px 100%;background-size:calc(100% - 32px) 1px}
    .svc .n{grid-row:1 / span 3;font-size:32px}.svc h3{padding-top:2px}.svc .row>p,.svc .row>.tools{grid-column:2;padding-top:0}}

  .how{background:#F3F0EA}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s;border-top:2px solid var(--ink)}
  .steps li{list-style:none;padding-top:22px;counter-increment:s;position:relative}
  .steps li::after{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;background:var(--orange)}
  .steps li::before{content:"0" counter(s);font:700 15px var(--head);color:var(--orange);display:block;margin-bottom:10px}
  .steps h3{font-size:20px;margin-bottom:6px}
  .steps p{color:var(--ink-soft);font-size:15px}
  @media (max-width:900px){.steps{grid-template-columns:1fr;gap:0;border-top:0;border-left:2px solid var(--ink);margin-left:6px}
    .steps li{padding:0 0 28px 26px}.steps li:last-child{padding-bottom:0}
    .steps li::after{left:-7px;top:3px}}

  .promise{display:grid;grid-template-columns:1fr 1fr;gap:64px}
  .promise ul{list-style:none;border-top:1px solid var(--line)}
  .promise li{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:28px 1fr;gap:12px}
  .promise li::before{content:"";width:10px;height:10px;background:var(--orange);margin-top:9px}
  .promise li b{font-family:var(--head);display:block;font-size:18px}
  .promise li span{color:var(--ink-soft)}
  .quote{font:700 clamp(30px,3.6vw,46px)/1.12 var(--head);color:var(--deep)}
  .quote span{color:var(--orange)}
  .quote + p{margin-top:20px;color:var(--ink-soft);font-size:18px;max-width:28em}
  @media (max-width:820px){.promise{grid-template-columns:1fr;gap:32px}}

  .contact{background:var(--deep);color:#fff}
  .contact .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
  .contact h2{font-size:clamp(30px,4vw,48px)}
  .contact p{color:#cfe0ee;margin-top:12px;max-width:36em}
  @media (max-width:820px){.contact .wrap{grid-template-columns:1fr}}

  footer{background:var(--deeper);color:#9fc0da;font-size:14px;padding:40px 0}
  footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px 48px}
  footer a{color:#fff;text-decoration:none}
  footer a:hover{text-decoration:underline}
  footer .foot-brand img{width:36px;height:36px}
  footer .foot-brand span{font-size:13px}
  footer .foot-brand + p{margin-top:12px}
  footer nav{display:flex;gap:10px 28px;flex-wrap:wrap}
  footer .foot-contact{display:grid;gap:6px;text-align:right}
  @media (max-width:760px){footer .foot-contact{text-align:left}}

/* contact form */
.contact .wrap{grid-template-columns:1fr 1fr;align-items:start;gap:64px}
.contact form{display:grid;gap:14px}
.contact label{font:600 13px var(--head);letter-spacing:.03em;display:grid;gap:6px;color:#cfe0ee}
.contact input,.contact textarea{font:16px var(--text);padding:12px 14px;border:1px solid rgba(255,255,255,.3);border-radius:2px;background:rgba(3,47,79,.6);color:#fff;width:100%}
.contact input:focus,.contact textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.contact textarea{min-height:130px;resize:vertical}
.contact button{border:0;cursor:pointer;justify-self:start}
.contact button[disabled]{opacity:.6;cursor:default}
.contact .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:15px;min-height:1.5em}
.form-status.ok{color:#bfe6d2}
.form-status.err{color:#ffc9a3}
.contact .direct{margin-top:24px;font-size:15px;color:#cfe0ee}
.contact .direct a{color:#fff}
@media (max-width:820px){.contact .wrap{grid-template-columns:1fr;gap:32px}}

/* plain pages */
.plain-top{background:var(--deep);color:#fff}
.plain{padding:64px 0 96px;max-width:760px}
.plain h1{font-size:clamp(32px,4vw,46px);margin-bottom:24px}
.plain h2{font-size:22px;margin:32px 0 10px}
.plain p,.plain li{color:var(--ink-soft);margin-bottom:12px}
.plain ul{padding-left:20px}
.plain a{color:var(--blue)}
.nowrap{white-space:nowrap}

/* reveal on first scroll into view; added by site.js, skipped for reduced motion */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.reveal.in{opacity:1;transform:none}
