/* SDG Tech: base styles. Layout and component styles live inline in the HTML (exported from the design canvas). */
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:Inter;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:#0F1E2E;background:#FFFFFF;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
.page{font-family:Inter,system-ui,sans-serif;color:#0F1E2E;background:#FFFFFF}
a{color:#0A6F78}a:hover{color:#0F1E2E}
:focus-visible{outline:2px solid #0A6F78;outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:#0F1E2E;color:#fff;padding:12px 16px;min-height:44px;display:inline-flex;align-items:center;border-radius:4px;font-weight:600}
.skip-link:focus{left:16px;color:#fff}
.btn-p:hover{background:#085C64 !important;color:#FFFFFF !important}
.btn-s:hover{border-color:#0F1E2E !important}
.btn-d:hover{border-color:#F3F6F9 !important;color:#F3F6F9 !important}
.card{transition:box-shadow .2s ease,border-color .2s ease}
.card:hover{border-color:#C9D4DD !important;box-shadow:0 10px 28px rgba(15,30,46,.07)}
.lnk:hover{color:#0F1E2E !important}
input:focus,select:focus,textarea:focus{outline:2px solid #0A6F78;outline-offset:1px;border-color:#0A6F78 !important}
/* header */
.site-header{font-family:Inter,system-ui,sans-serif;color:#0F1E2E;background:#FFFFFF;border-bottom:1px solid #E2E7EC;position:sticky;top:0;z-index:10}
.hdr-inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px);height:72px;display:flex;align-items:center;gap:32px}
.hdr-logo{display:flex;align-items:center;flex-shrink:0}.hdr-logo img{height:40px;width:auto;display:block}
.hdr-links{display:flex;align-items:center;gap:28px;flex-grow:1;justify-content:flex-end}
.nav-link{font-size:14px;font-weight:500;color:#4A5A6A;text-decoration:none;padding:25px 0}
.nav-link:hover{color:#0F1E2E}
.nav-link.is-active{font-weight:600;color:#0F1E2E;padding:25px 0 23px;border-bottom:2px solid #0E8C97}
.hdr-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;background:#0A6F78;color:#FFFFFF;font-size:14px;font-weight:600;text-decoration:none;border-radius:4px;flex-shrink:0}
.hdr-menu{display:none;margin-left:auto;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #D3DBE2;border-radius:4px;background:#FFFFFF;cursor:pointer;padding:0}
.hdr-panel{display:flex;flex-direction:column;padding:8px clamp(16px,4vw,40px) 20px;border-top:1px solid #E2E7EC;background:#FFFFFF}
.hdr-panel[hidden]{display:none}
.mnav-link{display:flex;align-items:center;min-height:48px;font-size:16px;font-weight:500;color:#0F1E2E;text-decoration:none;border-bottom:1px solid #EEF1F4}
.mnav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:16px;background:#0A6F78;color:#FFFFFF;font-size:15px;font-weight:600;text-decoration:none;border-radius:4px}
.mnav-cta:hover{color:#FFFFFF;background:#085C64}
@media (max-width:1100px){.hdr-links{gap:20px}}
@media (max-width:960px){.hdr-links,.hdr-cta{display:none}.hdr-menu{display:inline-flex}}
@media (min-width:961px){.hdr-panel{display:none !important}}
/* legal pages */
.legal p{margin:0;font-size:16px;line-height:1.7;color:#33424F}
.legal-note{color:#8A4B0F !important;font-size:14px !important}
/* a11y: sr-only helper, visible focus on dark backgrounds, reduced motion */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{top:8px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #0A6F78;outline-offset:3px;border-radius:2px}
section[style*="#0D1B2A"] a:focus-visible,section[style*="#0D1B2A"] button:focus-visible,footer[style*="#0D1B2A"] a:focus-visible{outline-color:#5CC6CE}
.hdr-menu:focus-visible{outline-offset:2px}
.field-hint{font-size:12px;color:#4A5A6A}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:#B42318 !important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}
.hdr-logo{min-height:44px}
/* mobile spacing: shrink spacing, never fonts. Overrides the inline styles exported from the design tool. */
@media (max-width:640px){
  main > section[style*="padding"]{padding-top:32px !important}
  main > section[style*="padding"]:not([style*=") 0 0;"]){padding-bottom:32px !important}
  main > section[style*="padding"]:first-child{padding-top:32px !important}
  main > section[style*="clamp(80px"]{padding-top:56px !important;padding-bottom:56px !important}
  main [style*="gap: 56px"],main [style*="gap: 48px"],main [style*="gap: 44px"]{gap:28px !important}
  main [style*="gap: 40px"],main [style*="gap: 36px"],main [style*="clamp(40px, 6vw, 80px)"]{gap:28px !important}
  main [style*="gap: 32px"]{gap:24px !important}
  main [style*="padding: 32px 30px"]{padding:24px 20px !important}
  main [style*="padding: 30px"]{padding:22px 20px !important}
  main [style*="margin: 40px 0 0"]{margin-top:24px !important}
  footer > div[style]{padding-top:40px !important;gap:32px !important}
  footer > div[style] > div[style*="grid"]{gap:24px !important}
  footer nav[style],footer div[style*="gap: 12px"]{gap:0 !important}
  footer .lnk{display:flex;align-items:center;min-height:44px}
}
@media (max-width:960px){.hdr-panel{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto}}

/* Contact form: honeypot (hidden from people and screen readers) and status message */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; padding: 12px 14px; border-radius: 4px; font-size: 15px; line-height: 1.5; border: 1px solid; }
.form-status.is-ok { color: #0B5A3A; background: #ECF8F1; border-color: #9FD6B8; }
.form-status.is-error { color: #8A1F1F; background: #FDF0F0; border-color: #EDB4B4; }
.form-status a { color: inherit; font-weight: 600; }
#contact-form [aria-invalid="true"] { border-color: #B42318 !important; }
main:focus{outline:none}
.skip-link:focus-visible{outline:3px solid #0A6F78;outline-offset:2px}
.hdr-panel .mnav-link:focus-visible{outline-offset:-3px}
@media (max-width:960px),(pointer:coarse){
  footer .lnk{display:flex;align-items:center;min-height:44px}
  footer nav[style],footer div[style*="gap: 12px"]{gap:0 !important}
}
@media (max-width:960px){
  main a.lnk{display:inline-flex;align-items:center;min-height:44px}
  main a[href^="mailto:"]{display:inline-flex !important;align-items:center;min-height:44px}
}
/* contact form: bigger consent target */
#contact-form input[type=checkbox]{width:24px !important;height:24px !important;margin:0 !important}
#contact-form label[for=f-consent]{padding-top:2px}
#contact-form [aria-hidden=true].req{color:#B42318}
@media (max-width:960px){main div > a[href="/"]{display:inline-flex;align-items:center;min-height:44px;margin-block:-14px}}

/* Footer columns: tablet 4 in one row, phone logo/contact full width with Services|Company side by side */
@media (min-width:641px) and (max-width:1023px){
  footer > div[style] > div[style*="grid"]{grid-template-columns:1.3fr 1fr 1fr 1fr !important;gap:24px !important}
}
@media (max-width:640px){
  footer > div[style] > div[style*="grid"]{grid-template-columns:1fr 1fr !important}
}
@media (max-width:640px){
  footer > div[style] > div[style*="grid"] > :first-child,
  footer > div[style] > div[style*="grid"] > :last-child{grid-column:1 / -1 !important}
}

/* Phishing portal dashboard mock on phones: drop the side nav, KPI cards 2x2, table fits */
@media (max-width:640px){
  figure[aria-label^="Phishing portal"] nav[aria-label="Portal"]{display:none !important}
  figure[aria-label^="Phishing portal"] [style*="minmax(min(100%, 150px)"]{grid-template-columns:1fr 1fr !important}
  figure[aria-label^="Phishing portal"] [style*="flex: 999 1 560px"]{padding:16px !important}
  figure[aria-label^="Phishing portal"] table{min-width:0 !important}
}

/* Contact form: larger hit area for the consent label, per-field errors, no-JS result messages */
#contact-form label[for="f-consent"]{padding-block:10px;margin-block:-10px}
.form-status:not(.is-ok):not(.is-error){padding:0;border:0}
.form-status:focus{outline:2px solid #0A6F78;outline-offset:2px}
.field-error{margin:0;font-size:14px;line-height:1.4;color:#B42318}
.form-msg{display:none}
.form-msg:target{display:block}

/* Fade-in as progressive enhancement, pure CSS (no JS):
   - first section fades in once on load (staggered)
   - everything below fades up while it scrolls into view (scroll-driven animations; only in browsers
     that support animation-timeline, others show content normally)
   - nothing moves for prefers-reduced-motion, content is always in the HTML for crawlers/print */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sdg-fade-up { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

  main > section:first-child > div > * { animation: sdg-fade-up .6s cubic-bezier(.2,.7,.2,1) both; }
  main > section:first-child > div > :nth-child(2) { animation-delay: .12s; }
  main > section:first-child > div > :nth-child(3) { animation-delay: .24s; }
  main > section:first-child > div > :nth-child(n+4) { animation-delay: .36s; }

  @supports (animation-timeline: view()) {
    main > section:not(:first-child) > div > :not([style*="display: grid"]),
    main > section:not(:first-child) > div > [style*="display: grid"] > * {
      animation: sdg-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0px entry 96px;
    }
  }
}
@media print { main * { animation: none !important; } }