/* The redesign's page CSS for the legal pages (header, footer, responsive layers). */ html{scroll-behavior:smooth} html,body{margin:0;padding:0;background:#FCFAF6;-webkit-font-smoothing:antialiased} section[id]{scroll-margin-top:108px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} *{box-sizing:border-box} a{color:#06638F;text-decoration:none} a:hover{color:#0B1922} a:focus-visible,button:focus-visible,[role="button"]:focus-visible{outline:2px solid #06638F;outline-offset:3px;border-radius:4px} input:focus-visible,textarea:focus-visible{outline:2px solid #06638F;outline-offset:2px} input,textarea,select,button{font-family:inherit} @media (max-width:1023px){nav[aria-label="Sections"]{display:none !important}[data-toc-grid]{grid-template-columns:minmax(0,75ch) !important}} /* ====== approved colour pass, 2026-09-11 ====== */ /* focus ring turns light inside dark surfaces (WCAG 1.4.11) */ [style*="#0F1E2D"] a:focus-visible,[style*="#0F1E2D"] button:focus-visible,[style*="#0F1E2D"] [role="button"]:focus-visible, [style*="#091421"] a:focus-visible,[style*="#091421"] button:focus-visible,[style*="#091421"] [role="button"]:focus-visible, [style*="#050B13"] a:focus-visible,[style*="#050B13"] button:focus-visible,[style*="#050B13"] [role="button"]:focus-visible, [style*="rgb(15, 30, 45)"] a:focus-visible,[style*="rgb(15, 30, 45)"] button:focus-visible, [style*="rgb(9, 20, 33)"] a:focus-visible,[style*="rgb(9, 20, 33)"] button:focus-visible, [style*="rgb(5, 11, 19)"] a:focus-visible,[style*="rgb(5, 11, 19)"] button:focus-visible{ outline-color:#F6F9FC!important} /* ====== end colour pass ====== */ /* ====== responsive + text-zoom layer v4, 2026-09-11 ====== */ :root{--gut:64px;--vs:1} @media (max-width:1180px){:root{--gut:40px;--vs:.78}} @media (max-width:900px){:root{--gut:28px}} @media (max-width:760px){:root{--vs:.52}} @media (max-width:560px){:root{--gut:20px}} html,body{max-width:100%} img{max-width:100%;height:auto} [style*="height:27px"],[style*="height: 27px"]{height:auto!important;min-height:27px!important} [style*="height:46px"],[style*="height: 46px"]{height:auto!important;min-height:46px!important} [style*="height:262px"],[style*="height: 262px"]{height:auto!important;min-height:262px!important} @media (max-width:1180px){ [style*="height:54px"],[style*="height: 54px"]{height:auto!important;min-height:54px!important} [style*="height:56px"],[style*="height: 56px"]{height:auto!important;min-height:56px!important} [style*="height:84px"],[style*="height: 84px"]{height:auto!important;min-height:84px!important} [style*="height:220px"],[style*="height: 220px"]{height:auto!important;min-height:220px!important} [style*="height:96px"],[style*="height: 96px"]{height:auto!important;min-height:96px!important} [style*="height:90px"],[style*="height: 90px"]{height:auto!important;min-height:90px!important} [style*="height:66px"],[style*="height: 66px"]{height:auto!important;min-height:66px!important} [style*="height:64px"],[style*="height: 64px"]{height:auto!important;min-height:64px!important} } @media (max-width:1180px){ [style*="font-size:66px"],[style*="font-size: 66px"]{font-size:52px!important} [style*="font-size:62px"],[style*="font-size: 62px"]{font-size:49px!important} [style*="font-size:60px"],[style*="font-size: 60px"]{font-size:47px!important} [style*="font-size:58px"],[style*="font-size: 58px"]{font-size:46px!important} [style*="font-size:52px"],[style*="font-size: 52px"]{font-size:42px!important} [style*="font-size:44px"],[style*="font-size: 44px"]{font-size:36px!important} [style*="font-size:42px"],[style*="font-size: 42px"]{font-size:35px!important} [style*="font-size:40px"],[style*="font-size: 40px"]{font-size:33px!important} [style*="font-size:38px"],[style*="font-size: 38px"]{font-size:31px!important} [style*="font-size:34px"],[style*="font-size: 34px"]{font-size:29px!important} [style*="gap:96px"],[style*="gap: 96px"]{gap:40px!important} [style*="gap:80px"],[style*="gap: 80px"]{gap:36px!important} [style*="gap:64px"],[style*="gap: 64px"]{gap:32px!important} [style*="gap:56px"],[style*="gap: 56px"]{gap:30px!important} [style*="gap:48px"],[style*="gap: 48px"]{gap:26px!important} [style*="gap:44px"],[style*="gap: 44px"]{gap:24px!important} [style*="gap:38px"],[style*="gap: 38px"]{gap:20px!important} [style*="gap:33px"],[style*="gap: 33px"]{gap:18px!important} [style*="gap:32px"],[style*="gap: 32px"]{gap:18px!important} header [style*="display:flex"],[style*="display: flex"]{flex-wrap:wrap!important} } @media (max-width:900px) and (min-width:761px){ [style*="grid-template-columns:auto 1fr"],[style*="grid-template-columns: auto 1fr"]{grid-template-columns:auto minmax(0,1fr)!important} [style*="grid-template-columns:1fr auto"],[style*="grid-template-columns: 1fr auto"]{grid-template-columns:minmax(0,1fr) auto!important} } @media (max-width:900px){ [style*="display:grid"],[style*="display: grid"]{grid-template-columns:minmax(0,1fr)!important} [style*="display:flex"],[style*="display: flex"]{flex-wrap:wrap!important} h1 span,h2 span,h1,h2{white-space:normal!important} nav{gap:16px!important;row-gap:10px!important} [style*="margin-left:auto"],[style*="margin-left: auto"]{margin-left:0!important} [style*="padding-right:44px"],[style*="padding-right: 44px"]{padding-right:0!important} [style*="max-width:1280px"],[style*="max-width: 1280px"], [style*="max-width:1440px"],[style*="max-width: 1440px"]{max-width:100%!important} } @media (max-width:760px){ [style*="font-size:66px"],[style*="font-size: 66px"]{font-size:35px!important} [style*="font-size:62px"],[style*="font-size: 62px"]{font-size:34px!important} [style*="font-size:60px"],[style*="font-size: 60px"]{font-size:33px!important} [style*="font-size:58px"],[style*="font-size: 58px"]{font-size:32px!important} [style*="font-size:52px"],[style*="font-size: 52px"]{font-size:30px!important} [style*="font-size:44px"],[style*="font-size: 44px"]{font-size:27px!important} [style*="font-size:42px"],[style*="font-size: 42px"]{font-size:26px!important} [style*="font-size:40px"],[style*="font-size: 40px"]{font-size:25px!important} [style*="font-size:38px"],[style*="font-size: 38px"]{font-size:24px!important} [style*="font-size:36px"],[style*="font-size: 36px"]{font-size:24px!important} [style*="font-size:34px"],[style*="font-size: 34px"]{font-size:23px!important} [style*="font-size:32px"],[style*="font-size: 32px"]{font-size:23px!important} [style*="font-size:30px"],[style*="font-size: 30px"]{font-size:22px!important} [style*="font-size:21px"],[style*="font-size: 21px"]{font-size:19px!important} [style*="font-size:20px"],[style*="font-size: 20px"]{font-size:18px!important} [style*="font-size:19px"],[style*="font-size: 19px"]{font-size:18px!important} [style*="width:220px"],[style*="width: 220px"]{width:140px!important} [style*="height:220px"],[style*="height: 220px"]{height:140px!important} [style*="width:150px"],[style*="width: 150px"]{width:auto!important;max-width:100%!important} [style*="width:460px"],[style*="width: 460px"]{display:none!important} [style*="radial-gradient(circle"],[style*="radial-gradient( circle"]{display:none!important} iframe{max-width:100%!important;transform:none!important} [style*="padding:52px 48px"],[style*="padding: 52px 48px"]{padding:32px 22px!important} [style*="padding:40px 44px 44px"],[style*="padding: 40px 44px 44px"]{padding:26px 22px 28px!important} [style*="padding:36px 32px 38px"],[style*="padding: 36px 32px 38px"]{padding:26px 22px 28px!important} } /* images keep the height they declare; the height:auto rules above are for text boxes */ img[style*="height:27px"],img[style*="height: 27px"]{height:27px!important;min-height:0!important} img[style*="height:46px"],img[style*="height: 46px"]{height:46px!important;min-height:0!important} img[style*="height:54px"],img[style*="height: 54px"]{height:54px!important;min-height:0!important} img[style*="height:56px"],img[style*="height: 56px"]{height:56px!important;min-height:0!important} img[style*="height:64px"],img[style*="height: 64px"]{height:64px!important;min-height:0!important} img[style*="height:66px"],img[style*="height: 66px"]{height:66px!important;min-height:0!important} img[style*="height:84px"],img[style*="height: 84px"]{height:84px!important;min-height:0!important} img[style*="height:90px"],img[style*="height: 90px"]{height:90px!important;min-height:0!important} img[style*="height:96px"],img[style*="height: 96px"]{height:96px!important;min-height:0!important} img[style*="height:220px"],img[style*="height: 220px"]{height:220px!important;min-height:0!important} img[style*="height:262px"],img[style*="height: 262px"]{height:262px!important;min-height:0!important} /* The REACH US column holds one unbreakable string, hello@constructured.com. In a five-column footer it is wider than its track at almost every width, so: 1. the column gets a wider track and the gap comes in, so at normal text sizes the address never breaks at all; 2. between 901 and 1060px the footer drops to two columns, the band where five never fit; 3. only then, as a last resort, the address itself may break mid-word. That fires when an enlarged minimum font size makes it unavoidable, and a broken word beats a broken layout. It does not fire at normal sizes. */ @media (min-width:1061px){ footer [style*="grid-template-columns"]{ grid-template-columns:26% repeat(3,minmax(0,1fr)) minmax(0,1.45fr)!important; column-gap:36px!important} } @media (max-width:1060px) and (min-width:901px){ footer [style*="grid-template-columns"]{ grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:44px!important; column-gap:32px!important;align-items:start!important} } footer a[href^="mailto:"]{overflow-wrap:anywhere} /* the global flex-wrap rule below 1180px was breaking icon away from text in the REACH US rows; the text still wraps inside, the pair stays together */ @media (max-width:1180px){footer a{flex-wrap:nowrap!important}} .dc-skip{position:absolute;left:-9999px;top:0;z-index:100} .dc-skip:focus{left:12px;top:12px;position:fixed;background:#FCFAF6;color:#0B1922;padding:12px 18px;border:2px solid #06638F;border-radius:8px;font-weight:600} /* ====== end responsive layer ====== */ /* headings must never be forced onto one line on a narrow screen */ @media (max-width:900px){ h1[style*="white-space:nowrap"],h2[style*="white-space:nowrap"],h3[style*="white-space:nowrap"], h1[style*="white-space: nowrap"],h2[style*="white-space: nowrap"],h3[style*="white-space: nowrap"]{ white-space:normal!important} } /* 44px minimum tap height (WCAG 2.5.8). Applies to phones and any coarse pointer; desktop mouse users keep the tighter visual rhythm. */ @media (pointer:coarse),(max-width:1024px){ header nav a, footer a, footer span[style*="font-size:16px"]{ min-height:44px; display:inline-flex; align-items:center; } header nav > a, header nav > div > a{padding-block:10px} footer a{padding-block:4px} } /* mobile navigation */ .dc-navbtn{display:none} .dc-navpanel{display:none} @media (max-width:1024px){ header nav{display:none!important} header .dc-cta{display:none!important} .dc-navbtn{display:inline-flex!important} .dc-navpanel{display:block!important} } @media (min-width:1025px){ .dc-navbtn,.dc-navpanel{display:none!important} } .dc-navbtn:focus-visible{outline:2px solid #0074AE;outline-offset:3px} @media (pointer:coarse),(max-width:1024px){ header .dc-logo{min-height:44px} }