/* Spatial Construx — Brand Guidelines (web version) Accent colours here are real stops on the logo's own gradient ramp: #60C9DD → #5EC2D9 → #59B0D0 → #5292C1 → #4869AD → #3F439A → #85439A Cyan is used on dark surfaces (10.6:1); Indigo #3F439A on light (8.5:1). */ html{scroll-behavior:smooth;scroll-padding-top:130px;overflow-x:clip} /* The document used to sit in one wrapper
that carried these three declarations. It is now 11 separate builder blocks, so they live here. */ body.sc-brand{margin:0;background:#04040b;color:#f4f5fb; font-family:'Poppins','Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip} body.sc-brand a{color:#60c9dd;text-decoration:none} body.sc-brand a:hover{color:#85439a} body.sc-brand img{max-width:100%} /* WPBakery wraps the content in .vc_row / .vc_column, whose -15px gutters push the document wider than the viewport and cause sideways scroll. Neutralise them. */ body.sc-brand .vc_row{margin-left:0 !important;margin-right:0 !important} body.sc-brand .vc_column_container, body.sc-brand .vc_column-inner{padding-left:0 !important;padding-right:0 !important} body.sc-brand .wpb_content_element, body.sc-brand .wpb_raw_code{margin-bottom:0 !important} /* ---------- header nav / buttons ---------- */ body.sc-brand header nav a{transition:background .18s ease,color .18s ease} body.sc-brand .sch1:hover{color:#fff !important;background:rgba(255,255,255,.08) !important} body.sc-brand .sch2:hover{color:#fff !important;background:rgba(255,255,255,.08) !important} body.sc-brand .sch3:hover{color:#fff !important;background:rgba(255,255,255,.08) !important} body.sc-brand .sch4:hover{color:#fff !important;background:rgba(255,255,255,.08) !important} body.sc-brand .sch5:hover{color:#fff !important;background:rgba(255,255,255,.08) !important} body.sc-brand .sch6:hover{color:#fff !important;background:rgba(255,255,255,.08) !important} body.sc-brand .sch24:hover{color:#fff !important;background:rgba(255,255,255,.08) !important} body.sc-brand .sch7:hover{background:#fff !important;color:#0b0b12 !important;box-shadow:0 16px 34px -14px rgba(255,255,255,.5) !important} body.sc-brand .sch8:hover{background:#fff !important;color:#0b0b12 !important;box-shadow:0 16px 34px -14px rgba(255,255,255,.5) !important} body.sc-brand .sch9:hover{background:rgba(255,255,255,.16) !important;color:#fff !important} body.sc-brand .sch10:hover{color:#fff !important;border-color:rgba(255,255,255,.4) !important} body.sc-brand .sch11:hover{color:#fff !important;border-color:rgba(255,255,255,.4) !important} body.sc-brand .sch12:hover{color:#fff !important;border-color:rgba(255,255,255,.4) !important} body.sc-brand .sch13:hover{color:#fff !important;border-color:rgba(255,255,255,.4) !important} body.sc-brand .sch14:hover{color:#fff !important} body.sc-brand .sch15:hover{color:#fff !important} body.sc-brand .sch16:hover{color:#fff !important} body.sc-brand .sch17:hover{color:#fff !important} body.sc-brand .sch18:hover{color:#fff !important} body.sc-brand .sch19:hover{color:#fff !important} body.sc-brand .sch20:hover{color:#fff !important} body.sc-brand .sch21:hover{color:#fff !important} body.sc-brand .sch22:hover{color:#fff !important} body.sc-brand .sch23:hover{color:#fff !important} body.sc-brand .sch25:hover{color:#fff !important} /* ---------- download buttons (Downloads section) ---------- */ body.sc-brand .sc-dl{display:inline-flex;align-items:center;gap:7px;border-radius:999px; padding:10px 16px;font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:600; line-height:1;color:#f4f5fb;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);white-space:nowrap; transition:background .18s ease,border-color .18s ease,color .18s ease} body.sc-brand .sc-dl:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42);color:#fff} body.sc-brand .sc-dl-zip{display:inline-flex;align-items:center;gap:9px;border-radius:999px; padding:15px 28px;font-family:'Poppins',sans-serif;font-size:14.5px;font-weight:600; line-height:1;background:#fff;color:#0b0b12;border:1px solid transparent; white-space:nowrap;align-self:flex-start;transition:box-shadow .2s ease} body.sc-brand .sc-dl-zip:hover{box-shadow:0 16px 34px -14px rgba(255,255,255,.5);color:#0b0b12} /* ---------- the "more" menu toggle ---------- Desktop shows the 7 links inline, so the checkbox and button stay hidden, and the panel-only Print link is hidden too (the header already has that button). */ body.sc-brand .sc-nav-cb{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none} body.sc-brand .sc-nav-btn{display:none} body.sc-brand .sc-nav-print{display:none} /* ---------- mobile / tablet ---------- The header could not fit a phone as one row of logo + 7 links + button (the Print button landed ~80px off-screen). Below 1000px the links collapse into a dropdown behind a three-bar button, leaving a single clean header row. The toggle is a checkbox, so the menu works even if JavaScript never runs. */ @media (max-width:1000px){ html{scroll-padding-top:100px} body.sc-brand header{top:14px !important;width:calc(100% - 20px) !important;border-radius:24px !important} /* logo left, then Print + the button pushed right as a pair */ body.sc-brand header > div{justify-content:flex-start !important;padding:10px 10px 10px 16px !important;gap:10px !important} body.sc-brand header > div > a:first-child{margin-right:auto;flex:0 0 auto} body.sc-brand header img{height:26px !important} body.sc-brand .sch7{padding:9px 15px !important;font-size:12.5px !important} body.sc-brand .sc-nav-btn{display:grid;grid-auto-flow:row;gap:4px;place-content:center;justify-items:center; width:42px;height:42px;border-radius:999px;flex-shrink:0;order:3;cursor:pointer; border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07); transition:background .18s ease,border-color .18s ease} body.sc-brand .sc-nav-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)} body.sc-brand .sc-nav-btn span{display:block;width:17px;height:1.6px;border-radius:2px;background:#f4f5fb; transition:transform .22s ease,opacity .16s ease} /* the three bars fold into an X while open */ body.sc-brand .sc-nav-cb:checked + .sc-nav-btn span:nth-child(1){transform:translateY(5.6px) rotate(45deg)} body.sc-brand .sc-nav-cb:checked + .sc-nav-btn span:nth-child(2){opacity:0} body.sc-brand .sc-nav-cb:checked + .sc-nav-btn span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)} body.sc-brand .sc-nav-cb:focus-visible + .sc-nav-btn{outline:2px solid #60c9dd;outline-offset:3px} /* the links, as a panel hanging under the header */ body.sc-brand header nav{display:none !important;position:absolute;top:calc(100% + 10px);left:0;right:0; flex-direction:column !important;align-items:stretch !important;flex-wrap:nowrap !important; gap:2px !important;padding:10px !important;border-radius:22px; /* Solid, not glass: the header sits over the hero headline, and a translucent panel let that text read straight through the menu items. */ background:#0a0a11;border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 60px -20px rgba(0,0,0,.85); max-height:calc(100vh - 130px);overflow-y:auto} body.sc-brand .sc-nav-cb:checked ~ nav{display:flex !important} body.sc-brand header nav a{width:100%;font-size:15px !important;padding:13px 16px !important;border-radius:14px} body.sc-brand .sc-nav-print{display:block;margin-top:6px;padding-top:15px !important; border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 14px 14px;font-weight:600 !important} } /* Only the smallest phones need to drop the header Print button; at 375px the one-row header still has ~40px of slack. It stays reachable in the menu. */ @media (max-width:359px){ body.sc-brand header .sch7{display:none !important} } @media (max-width:640px){ body.sc-brand #top{padding-top:140px !important} /* wide spec rows read better smaller than squeezed */ body.sc-brand pre{font-size:10px !important} }