/* ============================================================ BUI — DIRECTION B — SHARED STYLESHEET Field-guide editorial system on a dark navy canvas. Loaded by every page. Page-specific styles live inline. ============================================================ */ /* Poppins is loaded from a in each page's , not with @import. An @import here is only discovered AFTER this file has been downloaded and parsed, which forced the browser into a serial chain: html -> bui.css -> fonts.googleapis.com -> fonts.gstatic.com -> first paint. Declaring it in the head lets the browser fetch the fonts in parallel with this stylesheet instead. Do not reintroduce @import for fonts. */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} :root{ --black:#2A3744;--black-mid:#344352;--black-soft:#3E5062; --orange:#D9861C;--orange-bright:#D9861C; --cream:#F5F0E8;--white:#FFFFFF; --grey-text:#A6B4BF;--grey-muted:#9AAAB4;--ink-rgb:255,255,255; --serif:'Poppins',system-ui,sans-serif; --sans:'Poppins',system-ui,sans-serif; --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0.05,0.35,1); } html{scroll-behavior:smooth;} /* HORIZONTAL SCROLL LOCK — applied globally across every page */ html,body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none;} body{font-family:var(--sans);background:var(--black);color:var(--white);position:relative;} /* Nothing should be able to push the page wider than the viewport */ img,svg,video,iframe,image-slot,table,pre,canvas{max-width:100%;} img{height:auto;} /* DOT GRID */ body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(circle,rgba(var(--ink-rgb),.045) 1px,transparent 1px);background-size:26px 26px;pointer-events:none;z-index:0;} /* PAPER GRAIN */ body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:1; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMjAnIGhlaWdodD0nMjIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjkyJyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAuMDQgIDAgMCAwIDAgMC4xMiAgMCAwIDAgMCAwLjI0ICAwIDAgMCAuNTUgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nLjU1Jy8+PC9zdmc+"); background-size:220px 220px;mix-blend-mode:overlay;opacity:.07; } /* CURTAIN PRELOADER */ .curtain{position:fixed;inset:0;z-index:9000;background:var(--black);color:var(--white);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:transform 1s cubic-bezier(.85,0,.15,1);} .curtain.gone{transform:translateY(-101%);pointer-events:none;} .curtain-mark{display:flex;align-items:center;justify-content:center;} .curtain-mark img{height:120px;width:auto;} .curtain-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--orange);width:0;animation:curtain-load 1.6s cubic-bezier(.4,0,.2,1) forwards;} @keyframes curtain-load{to{width:100%;}} /* SCROLL PROGRESS */ .scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9500;} .scroll-progress>div{height:100%;width:0;background:var(--orange);transition:width .1s linear;} /* ============================================================ DUAL NAV */ body{padding-top:var(--header-h,126px);} .nav-utility{background:rgba(20,27,35,.97);border-bottom:1px solid rgba(var(--ink-rgb),.06);position:fixed;top:0;left:0;right:0;z-index:101;transition:transform .5s var(--ease-out);} .nav-utility.hide{transform:translateY(-100%);} .nav-utility-inner{max-width:1320px;margin:0 auto;padding:0 40px;height:34px;display:flex;align-items:center;justify-content:flex-end;gap:4px;} .util-link{font-size:11px;font-weight:500;letter-spacing:.04em;color:rgba(var(--ink-rgb),.42);text-decoration:none;padding:3px 9px;border-radius:2px;transition:color .2s,background .2s;white-space:nowrap;} .util-link:hover{color:rgba(var(--ink-rgb),.85);background:rgba(var(--ink-rgb),.05);} .util-divider{width:1px;height:12px;background:rgba(var(--ink-rgb),.1);flex-shrink:0;} .util-marketplace{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--orange);text-decoration:none;padding:3px 9px;border-radius:2px;border:1px solid rgba(217,134,28,.28);transition:background .2s,color .2s;white-space:nowrap;text-transform:uppercase;} .util-marketplace:hover{background:rgba(217,134,28,.15);color:var(--white);} .util-incident{font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--white);background:#B03020;text-decoration:none;padding:3px 12px;border-radius:2px;display:flex;align-items:center;gap:5px;transition:background .2s;white-space:nowrap;text-transform:uppercase;} .util-incident:hover{background:#962819;} .incident-dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse-dot 1.6s ease-in-out infinite;} @keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.35;}} nav#nav{position:fixed;top:34px;left:0;right:0;z-index:100;background:rgba(26,35,44,.95);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid rgba(var(--ink-rgb),.06);transition:transform .5s var(--ease-out);} nav#nav.hide{transform:translateY(calc(-100% - 34px));} .nav-inner{max-width:1320px;margin:0 auto;padding:0 40px;height:92px;display:flex;align-items:center;position:relative;z-index:1;} .nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;margin-right:36px;} .nav-logo img{height:84px;width:auto;display:block;} .nav-links{display:flex;align-items:center;list-style:none;gap:0;flex:1;} .nav-links li{position:relative;list-style:none;} .nav-links a{color:rgba(var(--ink-rgb),.65);text-decoration:none;font-size:13px;padding:8px 11px;transition:color .2s;white-space:nowrap;display:block;} .nav-links a:hover{color:var(--white);} .nav-links li>a.has-drop::after{content:'';display:inline-block;width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:3.5px solid rgba(var(--ink-rgb),.35);margin-left:5px;vertical-align:middle;transition:transform .2s;} .nav-links li:hover>a.has-drop::after,.nav-links li.nav-open>a.has-drop::after{transform:rotate(180deg);border-top-color:rgba(var(--ink-rgb),.8);} .nav-links li .dropdown{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(-6px);background:rgba(23,31,39,.98);backdrop-filter:blur(24px);border:1px solid rgba(var(--ink-rgb),.09);border-radius:3px;min-width:240px;padding:8px 0;opacity:0;visibility:hidden;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s;z-index:200;box-shadow:0 16px 40px rgba(0,0,0,.6);} .nav-links li:hover .dropdown,.nav-links li.nav-open .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} /* Transparent bridge directly beneath the nav item, spanning the offset gap so the pointer never crosses an unhovered dead zone on its way to the panel. Anchored to the item (not the panel) so it also covers the mega menu, whose panel is position:fixed and centred on the viewport rather than the item. */ .nav-links li.has-dropdown::after{content:'';position:absolute;top:100%;left:0;right:0;height:16px;} .nav-links li .dropdown a{display:block;padding:8px 18px;font-size:12.5px;color:rgba(var(--ink-rgb),.6);border-radius:0;background:transparent;transition:color .15s,background .15s;white-space:normal;} .nav-links li .dropdown a:hover{color:var(--white);background:rgba(var(--ink-rgb),.05);} .nav-links li .dropdown .drop-divider{height:1px;background:rgba(var(--ink-rgb),.07);margin:6px 0;} .nav-links li .dropdown.dropdown-mega{display:flex;gap:0;padding:22px 0;position:fixed;top:106px;left:50%;right:auto;min-width:0;width:min(1240px,calc(100vw - 32px));transform:translateX(-50%) translateY(-6px);} .nav-links li:hover .dropdown.dropdown-mega,.nav-links li.nav-open .dropdown.dropdown-mega{transform:translateX(-50%) translateY(0);} .dropdown-mega .mega-col{flex:1;padding:0 26px;border-right:1px solid rgba(var(--ink-rgb),.07);} .dropdown-mega .mega-col:last-child{border-right:none;} .dropdown-mega .mega-head{font-size:12px!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)!important;padding:0 0 10px!important;margin-bottom:6px;border-bottom:1px solid rgba(var(--ink-rgb),.09);} .dropdown-mega .mega-head:hover{background:transparent!important;color:var(--orange)!important;} .dropdown-mega .mega-col a{padding:7px 0!important;font-size:12.5px;} .dropdown-mega .mega-col a:hover{background:transparent!important;color:var(--white)!important;padding-left:4px!important;} .dropdown-mega .mega-sub{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-muted);padding:12px 0 4px;margin-top:8px;border-top:1px solid rgba(var(--ink-rgb),.09);} .drop-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--orange);color:var(--white);padding:1px 5px;border-radius:2px;margin-left:6px;vertical-align:middle;} .drop-ext{font-size:10px;font-weight:600;letter-spacing:.06em;color:#1E6FA5;background:rgba(30,111,165,.15);padding:1px 6px;border-radius:2px;margin-left:6px;vertical-align:middle;} .drop-subheader{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--ink-rgb),.28);padding:10px 18px 4px;pointer-events:none;} .nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto;} .nav-hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease,opacity .3s ease;} .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-hamburger.open span:nth-child(2){opacity:0;} .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-nav{display:none;background:rgba(21,28,36,.98);border-top:1px solid rgba(var(--ink-rgb),.07);max-height:80vh;overflow-y:auto;} .mobile-nav.open{display:block;} .mobile-nav a{display:block;color:rgba(var(--ink-rgb),.75);text-decoration:none;font-size:15px;padding:13px 24px;border-bottom:1px solid rgba(var(--ink-rgb),.04);transition:color .2s;} .mobile-nav a:hover{color:var(--white);} .mobile-nav .mobile-section{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--ink-rgb),.22);padding:14px 24px 6px;} .mobile-nav-actions{display:flex;gap:10px;padding:16px 24px 24px;flex-wrap:wrap;} .mobile-nav-actions a{cursor:pointer;flex:1;justify-content:center;text-align:center;} .btn-login,.btn-marketplace,.btn-incident{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 14px;border-radius:2px;text-decoration:none;} .btn-login{border:1px solid rgba(var(--ink-rgb),.2);color:var(--white);} .btn-marketplace{border:1px solid rgba(217,134,28,.4);color:var(--orange);} .btn-incident{background:#B03020;color:var(--white);display:flex;align-items:center;gap:6px;} @media(max-width:900px){ .nav-utility-inner{padding:0 20px;} .util-link.hide-mobile{display:none;} .nav-links{display:none;} .nav-hamburger{display:flex;} .nav-inner{padding:0 20px;} nav#nav{top:34px;} } @media(max-width:600px){ .nav-utility{position:fixed;} nav#nav{top:34px;position:fixed;} .nav-utility-inner{padding:0 8px;gap:2px;justify-content:space-between;overflow:hidden;} .util-link{font-size:9px;padding:2px 4px;letter-spacing:0;} .util-marketplace{font-size:8.5px;letter-spacing:0;padding:2px 5px;} .util-incident{font-size:8.5px;letter-spacing:0;padding:2px 5px;gap:4px;} .util-long{display:none;} .util-divider{display:none;} } /* ============================================================ BUTTONS */ .cta-primary{background:var(--orange);color:var(--white);padding:12px 26px;font-size:13px;font-family:var(--sans);font-weight:700;border:none;border-radius:2px;cursor:pointer;text-decoration:none;letter-spacing:.05em;text-transform:uppercase;transition:background .2s,transform .25s var(--ease-out),box-shadow .25s var(--ease-out);display:inline-block;white-space:nowrap;} .cta-primary:hover{background:var(--orange);filter:brightness(1.1);box-shadow:0 6px 20px rgba(217,134,28,.35);} .cta-ghost{background:transparent;color:rgba(var(--ink-rgb),.7);padding:12px 26px;font-size:13px;font-family:var(--sans);font-weight:600;border:1px solid rgba(var(--ink-rgb),.2);border-radius:2px;cursor:pointer;text-decoration:none;letter-spacing:.04em;transition:border-color .2s,color .2s;display:inline-block;white-space:nowrap;} .cta-ghost:hover{border-color:rgba(var(--ink-rgb),.5);color:var(--white);} /* SECTION COMMON */ .section-tag{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:10px;margin-bottom:18px;} .section-tag::before{content:'';width:20px;height:1.5px;background:var(--orange);flex-shrink:0;} /* SPLIT TEXT */ .split-line{display:block;} .split-word{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:inherit;padding:.06em .22em .5em .1em;margin:-.06em -.22em -.5em -.1em;} .split-word>span{display:inline-block;padding:.08em .06em .52em;margin:0 -.06em -.4em;transform:translateY(115%);transition:transform .85s var(--ease-out);transition-delay:var(--d,0s);} .is-revealed .split-word>span{transform:translateY(0);} /* FADE UP */ .fade-up{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s);} .is-revealed.fade-up,.is-revealed .fade-up{opacity:1;transform:translateY(0);} /* ============================================================ FOOTER */ footer{background:rgba(21,28,36,.98);padding:56px 40px 32px;position:relative;z-index:1;} .footer-inner{max-width:1320px;margin:0 auto;} .footer-cred{border-bottom:1px solid rgba(var(--ink-rgb),.07);padding-bottom:44px;margin-bottom:44px;} .footer-cred-head{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.4rem);font-weight:700;color:var(--white);letter-spacing:-.02em;line-height:1.1;margin-bottom:18px;} .footer-cred-head em{font-style:italic;color:var(--orange);} .footer-cred-line{font-size:13.5px;color:var(--grey-text);line-height:1.75;max-width:820px;margin-bottom:34px;} .footer-cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(var(--ink-rgb),.06);border-radius:4px;overflow:hidden;} .fc-block{background:rgba(34,45,56,.6);padding:22px 20px;text-decoration:none;display:block;transition:background .2s;} .fc-block:hover{background:rgba(var(--ink-rgb),.04);} .fc-title{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:9px;} .fc-body{font-size:12px;color:rgba(var(--ink-rgb),.5);line-height:1.55;} .footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;margin-bottom:44px;} .footer-top{position:relative;} .footer-brand-logo{margin-bottom:16px;} .footer-brand-logo img{height:44px;width:auto;} .footer-brand p{font-size:13px;color:rgba(var(--ink-rgb),.4);line-height:1.7;max-width:280px;} .footer-social{display:flex;align-items:center;gap:16px;margin-top:22px;} .footer-col .footer-social a{display:inline-flex;color:#D9861C;opacity:1;margin-bottom:0;transition:opacity .2s,color .2s;} .footer-col .footer-social a:hover{color:#D9861C;opacity:.75;} .footer-col .footer-social a svg{fill:currentColor;} .footer-social svg{width:22px;height:22px;display:block;} .footer-ftg{display:inline-flex;align-items:center;gap:12px;margin-top:20px;text-decoration:none;opacity:.7;transition:opacity .2s;} .footer-ftg:hover{opacity:1;} .footer-ftg span{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--ink-rgb),.35);} .footer-ftg img{height:20px;width:auto;} .footer-col h4{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--ink-rgb),.25);margin-bottom:16px;} .footer-col a{display:block;font-size:13.5px;color:rgba(var(--ink-rgb),.5);text-decoration:none;margin-bottom:9px;transition:color .2s;} .footer-col a:hover{color:var(--white);} .footer-bottom{border-top:1px solid rgba(var(--ink-rgb),.06);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;} .footer-copy{font-size:12px;color:rgba(var(--ink-rgb),.22);} .footer-legal{display:flex;gap:20px;flex-wrap:wrap;} .footer-legal a{font-size:12px;color:rgba(var(--ink-rgb),.28);text-decoration:none;transition:color .2s;} .footer-legal a:hover{color:rgba(var(--ink-rgb),.6);} /* ============================================================ INNER-PAGE COMPONENTS Shared building blocks for content pages (contact, offerings, resources, etc.) */ /* PAGE HERO — compact banner for inner pages */ .page-hero{background:var(--black);position:relative;overflow:hidden;border-bottom:1px solid rgba(var(--ink-rgb),.06);} .page-hero-edge{position:absolute;right:0;top:0;bottom:0;width:5px;background:var(--orange);z-index:3;} .page-hero-arc{position:absolute;right:-160px;top:50%;transform:translateY(-50%);width:640px;height:640px;border-radius:50%;border:1px solid rgba(217,134,28,.06);pointer-events:none;z-index:1;} .page-hero-inner{max-width:1320px;margin:0 auto;padding:72px 40px 64px;position:relative;z-index:2;} .page-eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;} .page-eyebrow-bar{width:28px;height:1.5px;background:var(--orange);} .page-eyebrow span{font-size:10px;font-weight:700;letter-spacing:.24em;color:var(--orange);text-transform:uppercase;} .page-title{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,6vw,5rem);line-height:.98;letter-spacing:-.02em;color:var(--white);max-width:16ch;} .page-title em{font-style:italic;color:var(--orange);} .page-lede{font-size:clamp(15px,1.6vw,18px);color:var(--grey-text);line-height:1.7;max-width:60ch;margin-top:26px;} /* BREADCRUMB */ .breadcrumb{max-width:1320px;margin:0 auto;padding:18px 40px 0;display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--ink-rgb),.62);position:relative;z-index:2;} .breadcrumb a{color:rgba(var(--ink-rgb),.8);text-decoration:none;transition:color .2s;} .breadcrumb a:hover{color:var(--orange);} .breadcrumb span{color:rgba(var(--ink-rgb),.32);} /* GENERIC SECTION SHELL */ .section{padding:80px 40px;position:relative;z-index:1;} .section-inner{max-width:1320px;margin:0 auto;} .section.dark{background:var(--black);} .section.mid{background:var(--black-mid);} .section.soft{background:var(--black-soft);} .section.cream{background:var(--cream);color:var(--black);} .section-heading{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.06;letter-spacing:-.02em;margin-top:14px;} .section-heading em{font-style:italic;color:var(--orange);} .section.cream .section-heading{color:var(--black);} .section-intro{font-size:15px;line-height:1.75;color:var(--grey-text);max-width:64ch;margin-top:18px;} .section.cream .section-intro{color:#334E5D;} .section.cream .section-tag{color:var(--orange);} .pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(var(--ink-rgb),.07);border-radius:4px;overflow:hidden;margin-top:44px;} .pillar{background:rgba(var(--ink-rgb),.03);padding:32px 28px;} .pillar-num{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--orange);display:block;margin-bottom:14px;} .pillar-title{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--white);margin-bottom:12px;letter-spacing:-.01em;} .pillar-body{font-size:14px;line-height:1.7;color:var(--grey-text);} .section.cream .pillar-title{color:var(--black);} .section.cream .pillar-body{color:#334E5D;} @media(max-width:900px){.pillar-grid{grid-template-columns:1fr;}} /* PROSE — long-form article body */ .prose{max-width:760px;margin:0 auto;} .prose p{font-size:16px;line-height:1.8;color:var(--grey-text);margin-bottom:22px;} .prose h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--white);letter-spacing:-.02em;line-height:1.15;margin:44px 0 18px;} .prose h3{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--white);margin:32px 0 12px;} .prose ul{margin:0 0 22px;padding-left:0;list-style:none;} .prose li{position:relative;padding-left:26px;font-size:16px;line-height:1.7;color:var(--grey-text);margin-bottom:12px;} .prose li::before{content:'';position:absolute;left:2px;top:11px;width:6px;height:6px;background:var(--orange);border-radius:50%;} .prose a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(217,134,28,.3);} .prose a:hover{border-color:var(--orange);} .prose strong{color:var(--white);font-weight:700;} .prose blockquote{border-left:3px solid var(--orange);padding:6px 0 6px 26px;margin:32px 0;font-family:var(--serif);font-size:22px;font-style:italic;line-height:1.4;color:var(--white);} /* IMAGE PLACEHOLDER — striped, with monospace caption */ .img-slot{position:relative;background:repeating-linear-gradient(135deg,rgba(var(--ink-rgb),.03),rgba(var(--ink-rgb),.03) 12px,rgba(var(--ink-rgb),.055) 12px,rgba(var(--ink-rgb),.055) 24px);border:1px solid rgba(var(--ink-rgb),.1);border-radius:3px;display:flex;align-items:center;justify-content:center;text-align:center;min-height:220px;color:rgba(var(--ink-rgb),.4);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.06em;padding:24px;} .section.cream .img-slot{background:repeating-linear-gradient(135deg,rgba(42,55,68,.05),rgba(42,55,68,.05) 12px,rgba(42,55,68,.09) 12px,rgba(42,55,68,.09) 24px);border-color:rgba(42,55,68,.15);color:#7d8a94;} /* CARD GRIDS (offerings / feature lists) */ .tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(var(--ink-rgb),.07);border-radius:4px;overflow:hidden;} .tile{background:rgba(var(--ink-rgb),.03);padding:34px 30px;text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:background .25s;position:relative;color:inherit;} .tile::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--tile-color,var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out);} .tile:hover{background:rgba(var(--ink-rgb),.07);} .tile:hover::before{transform:scaleX(1);} .tile-kicker{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tile-color,var(--orange));} .tile-name{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--white);line-height:1.12;letter-spacing:-.01em;} .tile-name em{font-style:italic;color:var(--tile-color,var(--orange));} .tile-desc{font-size:13.5px;color:var(--grey-text);line-height:1.6;flex:1;} .tile-cta{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tile-color,var(--orange));display:inline-flex;align-items:center;gap:7px;transition:gap .2s;margin-top:4px;} .tile:hover .tile-cta{gap:11px;} /* STAT ROW */ .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(var(--ink-rgb),.08);border-radius:4px;overflow:hidden;} .stat-cell{background:var(--black);padding:30px 26px;} .section.cream .stat-cell{background:var(--cream);} .stat-num{font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,3.4vw,3rem);color:var(--orange);line-height:.95;letter-spacing:-.02em;} .stat-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--grey-muted);margin-top:12px;line-height:1.4;} .section.cream .stat-label{color:#7d8a94;} /* CTA BAND (inner page footer CTA) */ .cta-section{background:var(--black-soft);padding:80px 40px;position:relative;overflow:hidden;z-index:1;} .cta-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(var(--ink-rgb),.04) 1px,transparent 1px);background-size:26px 26px;} .cta-edge{position:absolute;right:0;top:0;bottom:0;width:4px;background:var(--orange);z-index:2;} .cta-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:72px;align-items:center;position:relative;z-index:2;} .cta-heading{font-family:var(--serif);font-size:clamp(2rem,4vw,3.4rem);font-weight:700;color:var(--white);line-height:1.1;letter-spacing:-.02em;} .cta-heading em{font-style:italic;color:var(--orange);} .cta-sub{font-size:15px;color:var(--grey-text);line-height:1.75;max-width:480px;margin-top:16px;} .cta-btns{display:flex;flex-direction:column;gap:10px;min-width:180px;} /* HubSpot form on CTA sections — full-width light card, stacked below the copy so it never sits squished to the side */ .cta-inner:has(.hs-form-wrap){grid-template-columns:1fr;gap:36px;align-items:stretch;} .hs-form-wrap{background:#F6F1E8;border:1px solid rgba(36,48,57,.12);border-radius:6px;padding:38px 40px 44px;max-width:none;width:100%;justify-self:stretch;box-shadow:0 16px 44px rgba(0,0,0,.28);} .hs-form-wrap .hs-form-heading{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:-.01em;color:#243039;margin:0 0 18px;} .hs-form-wrap .hs-richtext,.hs-form-wrap .hs-form h2,.hs-form-wrap .hs-form h3{color:rgba(36,48,57,.72);font-size:13px;margin:0 0 14px;font-weight:400;} .hs-form-wrap form{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;} .hs-form-wrap form>.hs-richtext,.hs-form-wrap form>.hs_submit,.hs-form-wrap form>.hs-form-field[class*="message"],.hs-form-wrap form>.hs-dependent-field,.hs-form-wrap form>fieldset.form-columns-1{grid-column:1 / -1;} .hs-form-wrap form label{color:#243039!important;font-size:13px;font-weight:600;display:block;margin-bottom:6px;} .hs-form-wrap .hs-form-field{margin-bottom:16px;} .hs-form-wrap input[type=text],.hs-form-wrap input[type=email],.hs-form-wrap input[type=tel],.hs-form-wrap input[type=number],.hs-form-wrap select,.hs-form-wrap textarea{width:100%;background:#fff;border:1px solid rgba(36,48,57,.2);border-radius:4px;padding:11px 13px;color:#243039;font-size:14px;font-family:inherit;box-sizing:border-box;} .hs-form-wrap select option{color:#000;} .hs-form-wrap input:focus,.hs-form-wrap select:focus,.hs-form-wrap textarea:focus{outline:none;border-color:var(--acc-soft,var(--orange));} .hs-form-wrap ::placeholder{color:rgba(36,48,57,.5);} .hs-form-wrap .hs-error-msg,.hs-form-wrap .hs-error-msgs label{color:#c0392b!important;font-weight:400;} .hs-form-wrap .hs-button{background:var(--acc,var(--orange));border:none;color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;padding:13px 26px;border-radius:4px;cursor:pointer;margin-top:6px;} .hs-form-wrap .hs-button:hover{filter:brightness(1.1);} @media(max-width:600px){.hs-form-wrap form{grid-template-columns:1fr;}.hs-form-wrap{padding:28px 22px 32px;}} /* Raw HubSpot embed target (#hs-form-here) — HubSpot renders default dark text, so give it a light card so it stays readable on the dark theme. */ #hs-form-here{background:#F6F1E8;border:1px solid rgba(36,48,57,.12);border-radius:6px;padding:30px 30px 34px;color:#243039;box-shadow:0 10px 30px rgba(0,0,0,.18);} #hs-form-here .hs-form-heading,#hs-form-here h1,#hs-form-here h2,#hs-form-here h3,#hs-form-here label,#hs-form-here .hs-richtext,#hs-form-here legend,#hs-form-here p{color:#243039;} #hs-form-here input[type=text],#hs-form-here input[type=email],#hs-form-here input[type=tel],#hs-form-here input[type=number],#hs-form-here select,#hs-form-here textarea{background:#fff;border:1px solid rgba(36,48,57,.22);color:#243039;} #hs-form-here ::placeholder{color:rgba(36,48,57,.5);} html[data-theme="light"] #hs-form-here{background:#fff;} html[data-theme="light"] .hs-form-wrap{background:#fff;border-color:rgba(36,48,57,.12);box-shadow:0 12px 34px rgba(36,48,57,.1);} /* FORM (styled placeholder — swap for HubSpot embed) */ .form-shell{background:rgba(var(--ink-rgb),.03);border:1px solid rgba(var(--ink-rgb),.09);border-radius:4px;padding:36px 34px;} .form-note{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:9px;margin-bottom:22px;} .form-note::before{content:'';width:18px;height:1.5px;background:var(--orange);} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .field{margin-bottom:16px;display:flex;flex-direction:column;gap:7px;} .field label{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-text);} .field input,.field select,.field textarea{background:rgba(var(--ink-rgb),.04);border:1px solid rgba(var(--ink-rgb),.12);border-radius:2px;padding:12px 14px;color:var(--white);font-family:var(--sans);font-size:14px;transition:border-color .2s,background .2s;} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);background:rgba(var(--ink-rgb),.06);} .field textarea{resize:vertical;min-height:120px;} .field-consent{display:flex;gap:11px;align-items:flex-start;font-size:12px;color:var(--grey-text);line-height:1.6;} .field-consent input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--orange);} .form-disclaimer{font-size:12px;color:var(--grey-muted);line-height:1.65;margin-top:18px;} .form-disclaimer a,.field-consent a{color:var(--orange);text-decoration:none;} /* RESPONSIVE */ @media(max-width:900px){ .page-hero-inner{padding:56px 20px 48px;} .breadcrumb{padding:16px 20px 0;} .section{padding:56px 20px;} .cta-section{padding:56px 20px;} .tile-grid{grid-template-columns:1fr 1fr;} .stat-row{grid-template-columns:1fr 1fr;} .cta-inner{grid-template-columns:1fr;gap:32px;} .footer-top{grid-template-columns:1fr 1fr;gap:32px;} .footer-cred-grid{grid-template-columns:1fr 1fr;} .footer-bottom{flex-direction:column;align-items:flex-start;} .form-row{grid-template-columns:1fr;} } @media(max-width:600px){ .tile-grid{grid-template-columns:1fr;} .stat-row{grid-template-columns:1fr;} .footer-top{grid-template-columns:1fr;} .footer-cred-grid{grid-template-columns:1fr;} .footer-legal{gap:12px;} } /* REDUCED MOTION */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;} .split-word>span{transform:none;} .fade-up{opacity:1;transform:none;} .curtain{display:none;} } /* ============================================================ ARTICLE (blog post / webinar detail) */ .article{background:var(--black);padding:60px 40px 96px;position:relative;z-index:1;} .article-inner{max-width:768px;margin:0 auto;} .article-back{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);text-decoration:none;margin-bottom:26px;transition:gap .2s;} .article-back:hover{gap:12px;} .article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin-bottom:30px;font-size:12px;color:var(--grey-muted);} .article-cat{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(217,134,28,.3);border-radius:2px;padding:5px 10px;} .article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--grey-muted);} .article-meta strong{color:var(--grey-text);font-weight:600;} .article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:-14px 0 34px;} .article-tag{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-muted);border:1px solid rgba(var(--ink-rgb),.16);border-radius:2px;padding:5px 11px;transition:color .2s,border-color .2s;} a.article-tag:hover{color:var(--orange);border-color:var(--orange);} .article-figure{margin:0 0 40px;border-radius:4px;overflow:hidden;border:1px solid rgba(var(--ink-rgb),.08);} .article-figure image-slot{width:100%;aspect-ratio:16/9;display:block;} .article-figure img{width:100%;height:auto;display:block;} .article-figure figcaption{font-size:11.5px;color:var(--grey-muted);padding:12px 16px;line-height:1.5;background:rgba(var(--ink-rgb),.02);} .article-lede{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.42;color:var(--white);margin-bottom:38px;padding-bottom:36px;border-bottom:1px solid rgba(var(--ink-rgb),.09);} .article-video{position:relative;aspect-ratio:16/9;margin:0 0 40px;border-radius:4px;overflow:hidden;border:1px solid rgba(var(--ink-rgb),.08);background:#000;} .article-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .article-share{margin-top:56px;padding-top:28px;border-top:1px solid rgba(var(--ink-rgb),.09);display:flex;align-items:center;gap:14px;} .article-share-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-muted);margin-right:2px;} .article-share a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(var(--ink-rgb),.15);display:flex;align-items:center;justify-content:center;color:var(--grey-text);transition:border-color .2s,color .2s;} .article-share a:hover{border-color:var(--orange);color:var(--orange);} .article-share svg{width:15px;height:15px;fill:currentColor;} .article .form-shell{margin-top:42px;} .article .prose{max-width:none;} /* CASE STUDY — wider column + lighter body text for readability */ .article.case-study .article-inner{max-width:940px;} .article.case-study .prose p,.article.case-study .prose li{color:#C2CED8;} body:has(.article.case-study) .breadcrumb{color:#9BAAB6;} .article.case-study .article-meta{color:#9BAAB6;} .article.case-study .article-meta .dot{background:#9BAAB6;} .article.case-study .article-share-label{color:#9BAAB6;} /* CASE STUDY FACTS PANEL */ .case-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(var(--ink-rgb),.08);border:1px solid rgba(var(--ink-rgb),.08);border-radius:4px;overflow:hidden;margin:0 0 40px;} .case-fact{background:var(--black);padding:18px 20px;} .case-fact-label{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:9px;} .case-fact-value{font-size:14px;color:var(--white);line-height:1.45;font-weight:600;} @media(max-width:700px){.case-facts{grid-template-columns:1fr 1fr;}} .article-figure img{width:100%;display:block;object-fit:cover;} @media(max-width:900px){.article{padding:40px 20px 64px;}} /* WEBINAR WATCH BLOCK */ .watch-hero{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;border:1px solid rgba(var(--ink-rgb),.1);background:repeating-linear-gradient(135deg,rgba(var(--ink-rgb),.03),rgba(var(--ink-rgb),.03) 12px,rgba(var(--ink-rgb),.055) 12px,rgba(var(--ink-rgb),.055) 24px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;margin-bottom:20px;} .watch-hero .play-btn{width:76px;height:76px;border-radius:50%;background:rgba(217,134,28,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 36px rgba(0,0,0,.45);} .watch-hero .play-btn svg{width:26px;height:26px;margin-left:5px;fill:#fff;} .watch-hero .watch-note{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.05em;color:rgba(var(--ink-rgb),.5);text-align:center;padding:0 20px;} .watch-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px;} .article .watch-video{position:relative;aspect-ratio:16/9;margin:0 0 44px;border-radius:4px;overflow:hidden;border:1px solid rgba(var(--ink-rgb),.1);background:#000;} .article .watch-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} /* ============================================================ DETAIL PAGE COMPONENTS Shared building blocks for service / product detail pages (Cyber MXDR, Cyber DFIR, NettProtect, Sendmarc, AI for Business, Database Services, pen-test scoping). Accent reads var(--acc), set per page on (defaults to orange). */ :root{--acc:var(--orange);--acc-soft:var(--orange-bright);} /* Anchor sub-nav under the hero */ .detail-subnav{background:rgba(20,27,35,.6);border-bottom:1px solid rgba(var(--ink-rgb),.06);position:relative;z-index:2;} html[data-theme="light"] .detail-subnav{background:rgba(255,255,255,.55);border-bottom-color:rgba(36,48,57,.12);} html[data-theme="light"] .detail-subnav a{color:#3B4A55;} .detail-subnav-inner{max-width:1320px;margin:0 auto;padding:0 40px;display:flex;gap:2px;flex-wrap:wrap;justify-content:space-between;} .detail-subnav a{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-text);text-decoration:none;padding:16px 18px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;} .detail-subnav a:hover{color:var(--white);border-bottom-color:var(--acc);} /* Lead / intro band */ .lead-band{background:var(--black-mid);border-top:1px solid rgba(var(--ink-rgb),.06);} .lead-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:start;} .lead-heading{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.02em;color:var(--white);} .lead-heading em{font-style:italic;color:var(--acc-soft);} .lead-body p{font-size:16px;line-height:1.8;color:var(--grey-text);margin-bottom:18px;} .lead-body p:last-child{margin-bottom:0;} .lead-body strong{color:var(--white);font-weight:600;} /* Feature / step cards */ .fcard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(var(--ink-rgb),.07);border:1px solid rgba(var(--ink-rgb),.07);border-radius:4px;overflow:hidden;margin-top:40px;} .fcard-grid.cols-3{grid-template-columns:repeat(3,1fr);} .fcard{background:rgba(var(--ink-rgb),.025);padding:36px 32px;position:relative;transition:background .25s;} .fcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out);} .fcard:hover{background:rgba(var(--ink-rgb),.05);} .fcard:hover::before{transform:scaleX(1);} .fcard-step{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--acc-soft);letter-spacing:.02em;margin-bottom:14px;display:block;} .fcard-kicker{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-soft);margin-bottom:12px;} .fcard-title{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--white);line-height:1.16;margin-bottom:13px;letter-spacing:-.01em;} .fcard-title em{font-style:italic;color:var(--acc-soft);} .fcard-body{font-size:14px;color:var(--grey-text);line-height:1.72;} .fcard-body strong{color:#cdd8e0;font-weight:600;} .fcard-body a{color:var(--acc-soft);text-decoration:none;border-bottom:1px solid rgba(var(--ink-rgb),.2);} /* Pull quote with avatar */ .pquote{max-width:940px;margin:0 auto;display:flex;gap:30px;align-items:center;} .pquote-avatar{width:88px;height:88px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid rgba(var(--ink-rgb),.12);} .pquote-avatar image-slot,.pquote-avatar img{width:100%;height:100%;display:block;object-fit:cover;} .pquote-text{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.42;color:var(--white);} .pquote-cite{display:block;font-family:var(--sans);font-style:normal;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-soft);margin-top:16px;} /* Credentials grid (auto columns) */ .creds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(var(--ink-rgb),.07);border:1px solid rgba(var(--ink-rgb),.07);border-radius:4px;overflow:hidden;margin-top:40px;} .creds-item{background:rgba(var(--ink-rgb),.025);padding:30px 28px;} .creds-item h4{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-soft);margin-bottom:12px;} .creds-item p{font-size:13.5px;color:var(--grey-text);line-height:1.68;} /* Checklist (two columns of ticks) */ .checklist{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;} .checklist.one-col{grid-template-columns:1fr;} .checklist li{position:relative;padding-left:30px;font-size:15px;color:var(--grey-text);line-height:1.6;} .checklist li strong{color:var(--white);font-weight:600;} .checklist li::before{content:'';position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:3px;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;} /* Tier cards */ .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(var(--ink-rgb),.07);border:1px solid rgba(var(--ink-rgb),.07);border-radius:4px;overflow:hidden;margin-top:40px;} .tier{background:rgba(var(--ink-rgb),.025);padding:36px 30px 38px;position:relative;display:flex;flex-direction:column;} .tier::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc);} .tier-name{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-soft);margin-bottom:18px;} .tier-title{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--white);letter-spacing:-.01em;margin-bottom:16px;} .tier-body{font-size:14px;color:var(--grey-text);line-height:1.72;} /* Accent-aware primary button on detail pages */ body[data-acc-btn] .cta-primary{background:var(--acc);} body[data-acc-btn] .cta-primary:hover{background:var(--acc-soft);box-shadow:0 6px 20px rgba(30,111,165,.35);} @media(max-width:900px){ .detail-subnav-inner{padding:0 20px;overflow-x:auto;flex-wrap:nowrap;} .lead-grid{grid-template-columns:1fr;gap:28px;} .fcard-grid,.fcard-grid.cols-3,.creds-grid,.tier-grid{grid-template-columns:1fr;} .checklist{grid-template-columns:1fr;} .pquote{flex-direction:column;text-align:center;gap:20px;} } /* ============================================================ VIDEO FEATURE */ .video-feature{background:var(--black);padding:88px 40px;position:relative;z-index:1;border-top:1px solid rgba(var(--ink-rgb),.06);} .video-feature.mid{background:var(--black-mid);} .video-feature-inner{max-width:1320px;margin:0 auto;} .video-feature-head{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;margin-bottom:38px;} .video-feature-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.02em;color:var(--white);margin-top:14px;} .video-feature-title em{font-style:italic;color:var(--orange);} .video-feature-sub{font-size:15px;color:var(--grey-text);line-height:1.75;max-width:44ch;} .video-frame{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;border:1px solid rgba(var(--ink-rgb),.1);background:#000;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);} .video-frame::after{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;background:var(--orange);z-index:3;pointer-events:none;} .video-frame video,.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;} @media(max-width:900px){ .video-feature{padding:56px 20px;} .video-feature-head{grid-template-columns:1fr;gap:16px;} } /* PRINT / PDF */ @media print{ .fade-up,.is-revealed .fade-up{opacity:1!important;transform:none!important;} .split-word>span{transform:none!important;} .curtain,.scroll-progress{display:none!important;} .nav-utility,nav#nav{position:static!important;transform:none!important;} body{cursor:auto!important;} *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;} } /* ============================================================ LIGHT / DARK THEME */ html{color-scheme:dark;} html[data-theme="light"]{ color-scheme:light; --black:#FFFFFF;--black-mid:#EDF1F5;--black-soft:#E1E8EF; --white:#243039;--cream:#FFFFFF; --grey-text:#3F4B55;--grey-muted:#5A6772; --ink-rgb:36,48,57; } body,nav#nav,.nav-utility,footer,.section,.cta-section,.page-hero,.article,.video-feature,.lead-band{transition:background-color .35s ease,color .35s ease,border-color .35s ease;} html[data-theme="light"] .nav-utility{background:#3E5062;border-bottom-color:rgba(255,255,255,.08);} html[data-theme="light"] .util-link{color:rgba(255,255,255,.55);} html[data-theme="light"] .util-link:hover{color:#fff;background:rgba(255,255,255,.1);} html[data-theme="light"] .util-divider{background:rgba(255,255,255,.16);} html[data-theme="light"] .util-marketplace:hover{color:#fff;background:rgba(217,134,28,.28);} html[data-theme="light"] nav#nav{background:rgba(255,255,255,.93);border-bottom-color:rgba(36,48,57,.1);} html[data-theme="light"] .nav-links a{color:rgba(36,48,57,.82);} html[data-theme="light"] .nav-links li .dropdown{background:rgba(255,255,255,.99);box-shadow:0 16px 40px rgba(40,50,60,.16);} html[data-theme="light"] .mobile-nav{background:rgba(255,255,255,.99);} html[data-theme="light"] .nav-hamburger span{background:#243039;} html[data-theme="light"] footer{background:#fff;border-top:1px solid rgba(36,48,57,.1);} html[data-theme="light"] .footer-cred{border-bottom-color:rgba(36,48,57,.1);} html[data-theme="light"] .footer-cred-head{color:#243039;} html[data-theme="light"] .footer-cred-line{color:rgba(36,48,57,.74);} html[data-theme="light"] footer{background:#fff;border-top:1px solid rgba(36,48,57,.1);padding-bottom:0;} html[data-theme="light"] .footer-lower{background:#33475A;margin:0 calc(50% - 50vw) 0;padding:52px calc(50vw - 50%) 32px;} html[data-theme="light"] .footer-brand p{color:rgba(255,255,255,.6);} html[data-theme="light"] .footer-col h4{color:rgba(255,255,255,.5);} html[data-theme="light"] .footer-col a{color:rgba(255,255,255,.72);} html[data-theme="light"] .footer-col a:hover{color:#fff;} html[data-theme="light"] .footer-col .footer-social a{color:#D9861C;} html[data-theme="light"] .footer-col .footer-social a:hover{color:#D9861C;opacity:1;} html[data-theme="light"] .footer-ftg span{color:rgba(255,255,255,.55);} html[data-theme="light"] .footer-copy{color:rgba(255,255,255,.44);} html[data-theme="light"] .footer-legal a{color:rgba(255,255,255,.5);} html[data-theme="light"] .footer-legal a:hover{color:#fff;} html[data-theme="light"] .footer-bottom{border-top-color:rgba(255,255,255,.12);} html[data-theme="light"] .footer-brand-logo img, html[data-theme="light"] .footer-ftg img{filter:none!important;} html[data-theme="light"] .footer-cred-grid{background:#33475A;} html[data-theme="light"] .fc-block{background:#33475A;border:none;} html[data-theme="light"] .fc-block:hover{background:#3E5265;} html[data-theme="light"] .fc-body{color:rgba(255,255,255,.66);} html[data-theme="light"] .section.cream, html[data-theme="light"] .section.cream .section-heading, html[data-theme="light"] .section.cream .section-intro, html[data-theme="light"] .aw-track,html[data-theme="light"] .aw-next, html[data-theme="light"] .aw-stat-num,html[data-theme="light"] .aw-entry h3, html[data-theme="light"] .ftg-companies-title,html[data-theme="light"] .about-csr-title{color:#243039;} html[data-theme="light"] .company-card, html[data-theme="light"] .csr-card, html[data-theme="light"] .case-card, html[data-theme="light"] .cs-card{background:#fff;} html[data-theme="light"] .section.cream .pillar-title, html[data-theme="light"] .company-name, html[data-theme="light"] .csr-card h3, html[data-theme="light"] .tc-gov-title, html[data-theme="light"] .tc-gov-cols h3, html[data-theme="light"] .tc-doc-name, html[data-theme="light"] .aw-track-title, html[data-theme="light"] .aw-year-num, html[data-theme="light"] .aw-card.title, html[data-theme="light"] .aw-next-title, html[data-theme="light"] .cs-title, html[data-theme="light"] .cs-loadmore, html[data-theme="light"] .case-title-text, html[data-theme="light"] .cases-title{color:#243039;} html[data-theme="light"] .cta-primary, html[data-theme="light"] .btn-incident, html[data-theme="light"] .util-incident, html[data-theme="light"] .drop-badge, html[data-theme="light"] .cs-filter.active, html[data-theme="light"] .hotline-lead-txt{color:#fff;} .nav-links>li>a.nav-active{color:var(--white);} .theme-toggle{margin-left:14px;flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--ink-rgb),.2);background:rgba(var(--ink-rgb),.05);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--white);transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease-out);padding:0;} .theme-toggle:hover{background:rgba(var(--ink-rgb),.12);border-color:rgba(var(--ink-rgb),.34);transform:translateY(-1px);} .theme-toggle svg{width:16px;height:16px;display:block;} .theme-toggle .icon-moon{display:none;} .theme-toggle .icon-sun{display:block;} html[data-theme="light"] .theme-toggle .icon-sun{display:none;} html[data-theme="light"] .theme-toggle .icon-moon{display:block;} @media(max-width:900px){.theme-toggle{margin-left:auto;margin-right:6px;}} html[data-theme="light"] .code-block{background:#1d262f;color:#e7edf2;border-color:rgba(255,255,255,.12);} /* hardcoded emphasis/text colours need light-mode-specific overrides for contrast */ html[data-theme="light"] .ftg-who-body strong, html[data-theme="light"] .ftg-fit-body strong, html[data-theme="light"] .ftg-reach-body strong, html[data-theme="light"] .tc-ms-lead strong, html[data-theme="light"] .tc-emphasis, html[data-theme="light"] .loc-about-body strong, html[data-theme="light"] .aw-cred strong, html[data-theme="light"] .aw-story-text, html[data-theme="light"] .sec-panel-body strong, html[data-theme="light"] .panel-list li strong, html[data-theme="light"] .idr-body strong, html[data-theme="light"] .careers-about-body strong, html[data-theme="light"] .job-about-body strong, html[data-theme="light"] .fcard-body strong, html[data-theme="light"] .tl-row, html[data-theme="light"] .tl-note strong, html[data-theme="light"] .svc-body strong, html[data-theme="light"] .choice span{color:var(--white);} /* white-on-transparent logos need darkening on light surfaces */ html[data-theme="light"] img[src*="-white"]{filter:invert(1) brightness(.82);} /* curtain + nav logo: use true-color light variant (orange preserved, tagline darkened) instead of a hue-warping filter */ html[data-theme="light"] .curtain-mark img{filter:none;content:url("bui-logo-light.webp");} html[data-theme="light"] .nav-logo img{content:url("bui-logo-light.webp");} /* HERO MICROSOFT CREDENTIALS */ .hero-creds{margin-top:34px;display:flex;flex-direction:column;gap:14px;} .hero-creds-label{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--ink-rgb),.45);} .hero-creds-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;} .hero-creds-row img{height:58px;width:auto;display:block;border-radius:8px;} .hero-creds-row .cred-card{background:#fff;border:1px solid rgba(var(--ink-rgb),.28);border-radius:9px;padding:5px;display:flex;} .hero-creds-row .cred-card img{height:48px;border-radius:5px;} @media(max-width:600px){.hero-creds{margin-top:26px;gap:10px;}.hero-creds-row{gap:12px 16px;}.hero-creds-row img{height:44px;}.hero-creds-row .cred-card img{height:36px;}} /* ============================================================ POPPINS TYPE TUNING (global) Poppins is geometric and wide — tighten display tracking and ease weights so headings keep the editorial rhythm. ============================================================ */ h1,h2,h3,h4,.hero-headline .line-serif,.hero-headline .line-italic,.services-title,.solutions-title,.products-title,.why-title,.cases-title,.pull-quote-text,.proof-num,.case-metric,.solution-name,.entry-label,.product-name,.page-hero-title,.section-title{letter-spacing:-.035em;font-weight:600;} .hero-headline .line-sans{font-weight:600;letter-spacing:-.04em;} .proof-num,.case-metric,.product-name{font-weight:700;} .hero-headline .line-italic,h1 em,h2 em,h3 em,.services-title em,.solutions-title em,.products-title em,.why-title em,.cases-title em,.pull-quote-text .accent,.solution-name em{font-style:italic;font-weight:500;} .strip-value em,.entry-label{font-style:normal;} /* ---- Lite YouTube facade (click-to-play) ---- */ .yt-facade{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;margin:0;border:0;background:#000;cursor:pointer;overflow:hidden;z-index:2;} .yt-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease;} .yt-facade::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.05) 55%);z-index:1;transition:opacity .35s ease;} .yt-facade-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:74px;height:74px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 40px -10px rgba(0,0,0,.65);transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .25s ease;} .yt-facade-btn svg{width:24px;height:24px;margin-left:3px;fill:#fff;display:block;} .yt-facade-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;color:var(--white);font-size:13px;line-height:1.45;text-align:left;letter-spacing:.01em;} .yt-facade:hover img,.yt-facade:focus-visible img{transform:scale(1.04);} .yt-facade:hover .yt-facade-btn,.yt-facade:focus-visible .yt-facade-btn{transform:translate(-50%,-50%) scale(1.08);} .yt-facade:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;} .yt-facade[hidden]{display:none;} .yt-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:14px;text-decoration:underline;background:#000;} @media (max-width:600px){ .yt-facade-btn{width:58px;height:58px;} .yt-facade-btn svg{width:19px;height:19px;} .yt-facade-label{padding:14px 16px;font-size:12px;} } @media (prefers-reduced-motion:reduce){ .yt-facade img,.yt-facade-btn{transition:none;} .yt-facade:hover img,.yt-facade:focus-visible img{transform:none;} .yt-facade:hover .yt-facade-btn,.yt-facade:focus-visible .yt-facade-btn{transform:translate(-50%,-50%);} }