/* Careers: ascending platforms, scoped to the hero illustration. */ .career-rise{width:100%;max-width:29rem;min-width:0;margin:0 auto} .career-rise-art{display:block;width:100%;height:auto;margin-top:.35rem;overflow:visible} /* Shared vertices keep all six treads and risers connected. */ .career-rise .rise-side{fill:var(--card);stroke:var(--bar);stroke-width:1.3} .career-rise .rise-front{fill:var(--paper-2);stroke:var(--bar);stroke-width:1.3} .career-rise .rise-top{fill:var(--verdict-bg);stroke:var(--bar);stroke-width:1.3} .career-rise .rise-edge{fill:none;stroke:var(--steel);stroke-width:1.5} .career-rise .rise-edge-active{stroke:var(--signal-bright);stroke-width:2.5} .career-rise .rise-shadow{fill:var(--machine);opacity:.3} .career-rise .rise-person{fill:var(--signal-bright)} .career-rise .rise-callouts{fill:none;stroke:var(--cool);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.78} .career-rise .rise-labels{fill:var(--cool);font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:normal;opacity:.9} /* ============================================================ Novacoast — site.css Standard sans-serif typography with neutral service icons. Brand colour remains available for actions and diagram meaning. Theme: (default light; .theme toggle in the nav stores the choice) ============================================================ */ :root,[data-theme="light"]{ --paper:#E6E4DD;--paper-2:#DCD9D0;--card:#F2F0EA; --ink:#16181B;--slate:#565C61;--rule:#C4BFB4;--rule-soft:#D5D0C6; --machine:#232A2E;--machine-text:#C9D2D6;--machine-rule:#333B40; --steel:#6E828C;--bar:#6E828C; --signal:#C25A08;--signal-bright:#FC9A18; --verdict-bg:#232A2E;--verdict-ink:#EDEAE3; --btn-bg:#16181B;--btn-ink:#E6E4DD;--btn-hover:#000; --menu-bg:#F2F0EA;--shadow:0 18px 50px rgba(20,22,25,.14); --alert-bg:#F4E5E0;--alert-ink:#8C2E12; } [data-theme="dark"]{ --paper:#1E2328;--paper-2:#171B1F;--card:#252B31; --ink:#E9E7E1;--slate:#98A1A8;--rule:#394147;--rule-soft:#2E353B; --machine:#12161A;--machine-text:#AEBAC1;--machine-rule:#262D33; --steel:#7E939E;--bar:#5C7480; --signal:#F09030;--signal-bright:#FC9A18; --verdict-bg:#E9E7E1;--verdict-ink:#16181B; --btn-bg:#FC9A18;--btn-ink:#1A1207;--btn-hover:#FFB040; --menu-bg:#252B31;--shadow:0 18px 50px rgba(0,0,0,.5); --alert-bg:#3A2019;--alert-ink:#F0B29A; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} main [id]{scroll-margin-top:88px} body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:inherit} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--signal);outline-offset:3px} .wrap{max-width:76rem;margin:0 auto;padding:0 2rem} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .m{font-family:var(--sans)} .s{font-family:var(--sans)} h1{font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.03;letter-spacing:-.03em;font-weight:700;max-width:16ch} h2{font-size:clamp(1.7rem,3.1vw,2.45rem);line-height:1.1;letter-spacing:-.022em;font-weight:700;max-width:22ch} h3{font-size:1.02rem;font-weight:600;letter-spacing:-.005em} p{max-width:34rem} .lede{font-size:1.14rem;line-height:1.6;color:var(--slate);max-width:36rem} .lede + .lede{margin-top:.85rem} .lbl{font-family:var(--sans);font-size:.76rem;color:var(--slate);display:block;margin-bottom:1rem} .lbl i{display:none} section{padding:5.25rem 0;border-top:1px solid var(--rule)} .sechead{margin-bottom:2.75rem} .sechead p{margin-top:1rem} /* nav */ .nav{border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--paper);z-index:40} .nav .wrap{max-width:98rem} .nav .in{display:flex;align-items:center;gap:1rem;height:64px;position:relative} .mark{display:flex;align-items:baseline;gap:.5rem;font-weight:700;text-decoration:none;font-size:1.02rem;letter-spacing:-.01em;margin-right:.4rem;white-space:nowrap} .mark b{width:10px;height:10px;background:var(--signal-bright);display:block;border-radius:0px;transform:translateY(-1px)} .mark span{font-family:var(--sans);font-size:.68rem;font-weight:400;color:var(--slate)} .nl{display:flex;gap:0;flex:1;list-style:none;min-width:0;overflow:hidden} .nl>li{display:flex;align-items:center;align-self:stretch} .nl>li>a{font:inherit;font-size:.9rem;color:var(--slate);padding:.55rem .2rem .55rem .6rem;border-radius:2px 0 0 2px;text-decoration:none;white-space:nowrap} .nl>li>a:hover,.nl>li.open>a{color:var(--ink);background:var(--paper-2)} .chev{font:inherit;background:none;border:0;color:var(--slate);padding:.55rem .55rem .55rem .3rem;border-radius:0 2px 2px 0;cursor:pointer;display:inline-flex;align-items:center} .chev::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6} .nl>li.open .chev,.chev:hover{color:var(--ink);background:var(--paper-2)} .navcta{display:flex;gap:.5rem;align-items:center;margin-left:auto;flex-shrink:0} .ir{text-decoration:none;font-size:.8rem;font-family:var(--sans);border:1px solid var(--signal);color:var(--signal);padding:.42rem .75rem;border-radius:2px;white-space:nowrap} .ir:hover{background:var(--signal);color:#fff} .theme{font:inherit;font-size:.72rem;font-family:var(--sans);background:none;border:1px solid var(--rule);color:var(--slate);padding:.4rem .6rem;border-radius:2px;cursor:pointer} .theme:hover{color:var(--ink);border-color:var(--ink)} .burger{display:none;font:inherit;background:none;border:1px solid var(--rule);border-radius:2px;padding:.4rem .6rem;color:var(--ink);cursor:pointer;font-size:.85rem} /* mega menu */ .mega{position:absolute;left:0;right:0;top:calc(100% - 1px);background:var(--menu-bg);border:1px solid var(--rule);border-radius:0 0 2px 2px;box-shadow:var(--shadow);padding:1.6rem;display:grid;grid-template-columns:repeat(var(--cols,3),1fr) 15rem;gap:1.6rem;z-index:50;visibility:hidden;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s} .mega[data-open="true"]{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:0s} .mega.two{--cols:2}.mega.one{--cols:1} .mega .col h4{font-family:var(--sans);font-size:.72rem;color:var(--slate);font-weight:400;margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule)} .mega .col a{display:block;text-decoration:none;padding:.5rem 0;border-bottom:1px solid var(--rule-soft)} .mega .col a:last-child{border-bottom:0} .mega .col a b{display:block;font-weight:600;font-size:.93rem} .mega .col a small{display:block;color:var(--slate);font-size:.8rem;line-height:1.35;margin-top:.1rem} .mega .col a:hover b{color:var(--signal)} .mega .promo{background:var(--paper-2);border-left:3px solid var(--signal);padding:1.2rem 1.3rem;border-radius:0 2px 2px 0;align-self:start} .mega .promo .k{font-family:var(--sans);font-size:.7rem;color:var(--signal);display:block;margin-bottom:.5rem} .mega .promo h5{font-size:1rem;font-weight:600;margin-bottom:.4rem;line-height:1.3} .mega .promo p{font-size:.86rem;color:var(--slate);line-height:1.45;margin-bottom:.9rem} .mega .promo.alert{border-left-color:var(--alert-ink);background:var(--alert-bg);color:var(--alert-ink)} .mega .promo.alert .k,.mega .promo.alert p{color:inherit} @media(max-width:1079px){ .nl{display:none;position:fixed;inset:64px 0 0 0;background:var(--paper);flex-direction:column;gap:0;padding:1rem 2rem 3rem;overflow:auto;z-index:39} .nl[data-open="true"]{display:flex} .nl>li{border-bottom:1px solid var(--rule);flex-wrap:wrap} .nl>li>a{flex:1;padding:.9rem 0;font-size:1.05rem;color:var(--ink);white-space:normal} .chev{padding:.9rem .4rem} .mega{flex-basis:100%} .mega{position:static;width:auto;box-shadow:none;border:0;padding:0 0 1rem;background:transparent;display:none;visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:none} .mega[data-open="true"]{display:block} .mega .col{margin-bottom:1rem} .burger{display:inline-block} .theme{display:none} } /* buttons */ .btn{display:inline-block;text-decoration:none;padding:.72rem 1.3rem;border-radius:2px;font-size:.94rem;font-weight:500;border:0;font-family:inherit;cursor:pointer} .b1{background:var(--btn-bg);color:var(--btn-ink)} .b1:hover{background:var(--btn-hover)} .b2{border:1px solid var(--rule);color:var(--ink);background:transparent} .b2:hover{border-color:var(--ink)} .acts{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;margin-top:2rem} /* hero */ .hero{padding:5rem 0 4.5rem;border-top:0} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:start} .hero h1{margin-bottom:1.4rem} .grad{ background:linear-gradient(115deg,#F28A16 0%,#F1574A 48%,#22B8E4 100%); -webkit-background-clip:text;background-clip:text;color:transparent; -webkit-text-fill-color:transparent; } .glow{position:relative;isolation:isolate;white-space:nowrap} .glow::before{content:'';position:absolute;z-index:-1;pointer-events:none; left:-.42em;right:-.42em;top:-.34em;bottom:-.28em; background:radial-gradient(closest-side,color-mix(in srgb,var(--signal-bright) var(--glow-strength,30%),transparent),transparent)} .glow.soft{--glow-strength:20%} /* On paper the halo reads as a smudge rather than a glow. */ [data-theme="light"] .glow::before{display:none} .alt{display:none} body.copyB .pri{display:none} body.copyB .alt{display:block} .standfirst{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--rule);display:flex;gap:3rem;flex-wrap:wrap} .standfirst div{max-width:15rem} .standfirst dt{font-family:var(--sans);font-size:.72rem;color:var(--slate);margin-bottom:.4rem} .standfirst dd{font-size:.95rem;line-height:1.45} @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:3rem}} /* proof band */ .proof{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:3.5rem} .proof>div{padding:1.3rem 1.2rem 1.3rem 0;border-right:1px solid var(--rule-soft)} .proof>div:last-child{border-right:0} .proof .n{font-family:var(--sans);font-size:1.2rem;font-weight:500;display:block;margin-bottom:.25rem} .proof .d{font-size:.84rem;color:var(--slate);line-height:1.4;max-width:none} @media(max-width:900px){.proof{grid-template-columns:repeat(2,1fr)}.proof>div:nth-child(2n){border-right:0}} @media(max-width:560px){.proof{grid-template-columns:1fr}.proof>div{border-right:0;border-bottom:1px solid var(--rule-soft)}} /* evidence panel */ .panel{border:1px solid var(--rule);border-radius:2px;background:var(--card)} .panel-top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--sans);font-size:.72rem;color:var(--slate);padding:.85rem 1.2rem;border-bottom:1px solid var(--rule)} .panel-top em{font-style:normal;border:1px solid var(--rule);padding:.12rem .45rem;border-radius:2px} .panel-body{padding:1.2rem} .funnel{padding:1.5rem 1.6rem} .frow{display:grid;grid-template-columns:5.2rem 1fr;gap:1rem;align-items:center;padding:.62rem 0;border-bottom:1px solid var(--rule-soft)} .fnum{font-family:var(--sans);font-size:1rem;text-align:right;font-weight:500} .flab{font-size:.9rem;color:var(--slate);margin-bottom:.35rem;max-width:none} .bar{height:7px;background:var(--bar);border-radius:1px} .frow.final{border-bottom:0;padding-top:1rem;margin-top:.5rem;border-top:2px solid var(--signal)} .frow.final .fnum{color:var(--signal);font-size:1.15rem} .frow.final .flab{color:var(--ink);font-weight:600;font-size:.98rem} .frow.final .bar{background:var(--signal)} .funnel-foot{font-family:var(--sans);font-size:.74rem;color:var(--slate);margin-top:.9rem;line-height:1.5;max-width:none} .caseid{font-family:var(--sans);font-size:.95rem;font-weight:500;display:flex;justify-content:space-between;margin-bottom:.25rem} .casemeta{font-family:var(--sans);font-size:.76rem;color:var(--slate);margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--rule-soft)} .step{display:grid;grid-template-columns:1.1rem 1fr auto;gap:.7rem;font-family:var(--sans);font-size:.8rem;padding:.5rem 0;border-bottom:1px solid var(--rule-soft);align-items:baseline} .step .g{color:var(--steel)} .step .t{color:var(--slate);font-size:.74rem} .step.human{border-bottom:0;padding-top:.85rem;margin-top:.4rem;border-top:2px solid var(--signal)} .step.human .g,.step.human span:nth-child(2){color:var(--signal);font-weight:500} .case-foot{display:flex;justify-content:space-between;font-family:var(--sans);font-size:.78rem;color:var(--slate);margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--rule-soft)} .case-foot b{color:var(--ink);font-weight:500} .note{margin-top:1.5rem;font-family:var(--sans);font-size:.76rem;color:var(--slate);border-left:2px solid var(--rule);padding-left:.9rem;line-height:1.6;max-width:38rem} .case-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:1.5rem} @media(max-width:900px){.case-grid{grid-template-columns:1fr}} /* own/ours */ .own{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:2px;overflow:hidden} .own>div{padding:1.9rem} .own>div:first-child{border-right:1px solid var(--rule);background:var(--card)} .own h3{margin-bottom:.9rem} .own ul{list-style:none} .own li{padding:.55rem 0;border-bottom:1px solid var(--rule-soft);font-size:.96rem;color:var(--slate)} .own li:last-child{border-bottom:0} @media(max-width:820px){.own{grid-template-columns:1fr}.own>div:first-child{border-right:0;border-bottom:1px solid var(--rule)}} /* pulls */ .leave{margin-top:1.4rem;padding:1.3rem 1.5rem;border-left:3px solid var(--signal);background:var(--paper-2);border-radius:0 2px 2px 0} .leave p{font-family:var(--sans);font-size:1.1rem;line-height:1.55;max-width:44rem} .aside{margin-top:2.2rem;padding:1.4rem 1.6rem;background:var(--paper-2);border-left:3px solid var(--ink);border-radius:0 2px 2px 0} [data-theme="dark"] .aside{background:var(--card);border-left-color:var(--signal)} .aside p{font-family:var(--sans);font-size:1.08rem;line-height:1.55;max-width:44rem} .verdict{margin-top:2.2rem;padding:1.6rem 1.8rem;background:var(--verdict-bg);color:var(--verdict-ink);border-radius:2px} .verdict p{font-family:var(--sans);font-size:1.24rem;line-height:1.55;max-width:46rem} .verdict b{font-weight:500} /* the line */ .line{display:grid;grid-template-columns:1fr 4px 1fr;border-radius:2px;overflow:hidden} .mach{background:var(--machine);color:var(--machine-text);padding:2.1rem 2rem} .mach .k{font-family:var(--sans);font-size:.74rem;color:var(--steel);display:block;margin-bottom:1.3rem} .mach ol{list-style:none;counter-reset:s} .mach li{counter-increment:s;font-family:var(--sans);font-size:.85rem;line-height:1.4;padding:.68rem 0;border-bottom:1px solid var(--machine-rule);display:flex;gap:.9rem} .mach li:last-child{border-bottom:0} .mach li::before{content:counter(s,decimal-leading-zero);color:var(--steel);flex-shrink:0} .mach .f{margin-top:1.3rem;font-family:var(--sans);font-size:.76rem;color:var(--steel);line-height:1.5;max-width:none} .divider{background:linear-gradient(180deg,var(--steel),var(--signal))} .hum{background:var(--card);padding:2.1rem 2rem;border:1px solid var(--rule);border-left:0} .hum .k{font-family:var(--sans);font-size:.74rem;color:var(--signal);display:block;margin-bottom:1.3rem} .hum .stem{font-family:var(--sans);font-size:1.28rem;line-height:1.5;margin-bottom:1.4rem;max-width:29ch} .hum ul{list-style:none} .hum li{font-family:var(--sans);font-size:1.04rem;line-height:1.5;padding:.75rem 0 .75rem 1.1rem;border-left:2px solid var(--rule);margin-bottom:.45rem} .hum li:last-child{border-left-color:var(--signal)} @media(max-width:820px){.line{grid-template-columns:1fr}.divider{height:4px}.hum{border-left:1px solid var(--rule)}} /* split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:3rem} .split .k{font-family:var(--sans);font-size:.74rem;display:block;margin-bottom:.55rem} .split .a .k{color:var(--steel)} .split .b .k{color:var(--signal)} .split h3{margin-bottom:.6rem} .split p{font-size:.96rem;color:var(--slate);margin-bottom:1.1rem} .split ul{list-style:none} .split li{padding:.55rem 0;border-bottom:1px solid var(--rule-soft);font-size:.95rem} .split li:last-child{border-bottom:0} .split .a li{font-family:var(--sans);font-size:.83rem} .split .b li{font-family:var(--sans);font-size:1.02rem} .split .pair{margin-top:1.15rem} .split .pair>div{padding:.8rem 0;border-bottom:1px solid var(--rule-soft)} .split .pair>div:last-child{border-bottom:0} .split .pair h4{font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:.28rem} .split .pair p{font-size:.88rem;line-height:1.5;margin-bottom:0;max-width:none} @media(max-width:820px){.split{grid-template-columns:1fr;gap:2.4rem}} /* hinged: two halves held apart by the gradient, steel to signal */ .split.hinged{grid-template-columns:1fr 2px 1fr;gap:0} .split.hinged .a,.split.hinged .b{padding-top:1.15rem;border-top:2px solid var(--rule)} .split.hinged .a{padding-right:3rem;border-top-color:var(--steel)} .split.hinged .b{padding-left:3rem;border-top-color:var(--signal)} /* The hinged halves lead with the verb at display size; the h3 carries the claim. */ .split.hinged .k{ font-size:clamp(1.55rem,2.7vw,2.05rem);font-weight:700;letter-spacing:-.025em; line-height:1;margin-bottom:.7rem; } .split.hinged .a .k{color:var(--cool)} .split.hinged h3{font-size:1.2rem;margin-bottom:.65rem} .split.hinged p{font-size:1rem} @media(max-width:820px){.split.hinged{grid-template-columns:1fr}.split.hinged .a{padding-right:0}.split.hinged .b{padding-left:0}.split.hinged .divider{margin:2.2rem 0;border-top:0}} /* sequence columns */ .seq{display:grid;grid-template-columns:repeat(var(--n,4),1fr);border-top:1px solid var(--rule)} .seq.three{--n:3}.seq.two{--n:2} .seq>div{padding:1.6rem 1.4rem 0 0;border-right:1px solid var(--rule-soft)} .seq>div:last-child{border-right:0;padding-right:0} .seq .n{font-family:var(--sans);font-size:.74rem;color:var(--signal);display:block;margin-bottom:.8rem} .seq h3{margin-bottom:.5rem} .seq p{font-size:.9rem;color:var(--slate);line-height:1.5} .seq ul{list-style:none;margin-top:.8rem} .seq li{font-size:.88rem;padding:.35rem 0;border-bottom:1px solid var(--rule-soft);color:var(--slate)} .seq li:last-child{border-bottom:0} .seq .eg{font-family:var(--sans);font-size:.74rem;color:var(--slate);margin-top:.9rem;max-width:none} .seq .eg+ul{margin-top:.45rem;border-top:1px solid var(--rule-soft)} .seq ul.ruled{margin-top:1rem;border-top:1px solid var(--rule-soft)} .seq .eg+ul li,.seq ul.ruled li{padding:.4rem 0;padding-left:1.15rem;position:relative} .seq .eg+ul li::before,.seq ul.ruled li::before{content:'';position:absolute;left:0;top:.85em;width:6px;height:6px;border-radius:1px;background:var(--signal-bright)} .seq ul:has(li:only-child){margin-top:1rem;border-top:1px solid var(--rule-soft)} .seq ul:has(li:only-child) li{padding:.6rem 0 0} @media(max-width:900px){.seq{grid-template-columns:1fr 1fr}.seq>div:nth-child(2n){border-right:0}} @media(max-width:560px){.seq{grid-template-columns:1fr}.seq>div{border-right:0;border-bottom:1px solid var(--rule-soft);padding-bottom:1.4rem}} /* tiles */ .incl{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)} .incl.two{grid-template-columns:repeat(2,1fr)} .incl.four{grid-template-columns:repeat(4,1fr)} .incl>div,.incl>a{padding:1.5rem 1.4rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);text-decoration:none;display:block} .incl>a:hover{background:var(--card)} .incl .t{font-family:var(--sans);font-size:.72rem;color:var(--slate);display:block;margin-bottom:.7rem} .incl h3{margin-bottom:.45rem} .incl p{font-size:.9rem;color:var(--slate);line-height:1.5} .incl .inc{display:inline-block;margin-top:.7rem;font-family:var(--sans);font-size:.72rem;color:var(--signal)} .incl .loc{display:block;margin-top:.8rem;font-family:var(--sans);font-size:.7rem;letter-spacing:normal;color:var(--slate);opacity:.75} @media(max-width:900px){.incl,.incl.four{grid-template-columns:1fr 1fr}} @media(max-width:560px){.incl,.incl.two,.incl.four{grid-template-columns:1fr}} /* service rows: title left, description right */ .svc-rows{border-top:1px solid var(--rule);margin:0} .svc-rows>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(1.5rem,4vw,4rem);padding:1.5rem 0;border-bottom:1px solid var(--rule-soft)} .svc-rows dt{font-size:1.15rem;font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--ink)} .svc-rows dd{margin:0;font-size:.95rem;line-height:1.6;color:var(--slate);max-width:44rem} @media(max-width:700px){.svc-rows>div{grid-template-columns:1fr;gap:.4rem}} /* compliance bar */ .frameworks{margin-top:2.5rem;padding:1.6rem 1.8rem;background:var(--paper-2);border:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start} .frameworks-head{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:.4rem} .frameworks-head .k{font-family:var(--sans);font-size:.72rem;color:var(--signal)} .frameworks-head b{font-size:1.05rem;font-weight:600;color:var(--ink)} .framework-list{grid-column:1 / -1;grid-row:2;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .9rem} .framework-list li{font-family:var(--sans);font-size:.8rem;color:var(--ink);white-space:nowrap} .framework-list li+li{padding-left:.9rem;border-left:1px solid var(--rule)} .frameworks>p{grid-column:2;grid-row:1;margin:0;font-size:.92rem;line-height:1.65;color:var(--slate);max-width:36rem} @media(max-width:760px){.frameworks{grid-template-columns:1fr}.frameworks-head,.framework-list,.frameworks>p{grid-column:1;grid-row:auto}} /* numbered steps */ .steps{list-style:none;counter-reset:step;margin:0;padding:0;border-top:1px solid var(--rule)} .steps>li{counter-increment:step;display:grid;grid-template-columns:4.5rem minmax(0,1fr);column-gap:clamp(1rem,3vw,2.5rem);row-gap:0;padding:1.6rem 0;border-bottom:1px solid var(--rule-soft)} .steps>li::before{grid-column:1;grid-row:1 / span 2;content:counter(step,decimal-leading-zero);font-family:var(--sans);font-size:.8rem;color:var(--signal);padding-top:.25rem} .steps h3{grid-column:2;margin:0 0 .4rem;font-size:1.15rem;letter-spacing:-.015em} .steps p{grid-column:2;margin:0;font-size:.95rem;line-height:1.6;color:var(--slate);max-width:46rem} @media(max-width:600px){.steps>li{grid-template-columns:1fr;row-gap:.4rem}.steps>li::before{grid-column:1;grid-row:auto}.steps h3,.steps p{grid-column:1}} /* prose with lead-in points */ .prose-points{max-width:46rem} .prose-points p{font-size:1rem;line-height:1.7;color:var(--slate);max-width:none} .prose-points p+p{margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--rule-soft)} .prose-points b{color:var(--ink);font-weight:600} /* two worlds */ .worlds{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem} .world{border:1px solid var(--rule);border-radius:2px;padding:2rem;background:var(--card)} .world .k{font-family:var(--sans);font-size:.74rem;color:var(--signal);display:block;margin-bottom:.9rem} .world h3{font-size:1.5rem;letter-spacing:-.02em;margin-bottom:.6rem} .world .sub{font-family:var(--sans);font-size:1.12rem;line-height:1.45;margin-bottom:1rem} .world p{font-size:.94rem;color:var(--slate);margin-bottom:1.2rem} .world ul{list-style:none;margin-bottom:1.4rem} .world li{padding:.45rem 0;border-bottom:1px solid var(--rule-soft);font-size:.92rem} .world li:last-child{border-bottom:0} .world a.more{text-decoration:none;font-weight:500;font-size:.92rem;border-bottom:1px solid var(--signal)} @media(max-width:820px){.worlds{grid-template-columns:1fr}} /* history */ .hist{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem} .hist p{font-family:var(--sans);font-size:1.06rem;line-height:1.5} .hist .y{font-family:var(--sans);font-size:.74rem;color:var(--signal);display:block;margin-bottom:.6rem} @media(max-width:820px){.hist{grid-template-columns:1fr;gap:1.6rem}} /* leadership */ .people{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)} .people>div{padding:1.3rem 1.2rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)} .people .ph{aspect-ratio:1;width:100%;height:auto;object-fit:cover;object-position:center 18%;background:var(--paper-2);border-radius:4px;margin-bottom:.9rem} .people b{display:block;font-weight:600;font-size:.95rem} .people small{color:var(--slate);font-size:.82rem} .team-shot{margin:2rem 0 0} .team-shot img{width:100%;height:auto;aspect-ratio:1920/537;object-fit:cover;object-position:center 32%;border-radius:2px} .team-shot figcaption{font-family:var(--sans);font-size:.72rem;color:var(--slate);margin-top:.75rem} @media(max-width:900px){.people{grid-template-columns:repeat(2,1fr)}.team-shot img{aspect-ratio:16/9}} /* timeline */ .tl{list-style:none;border-left:2px solid var(--rule);margin-left:.4rem} .tl li{padding:.4rem 0 1.2rem 1.6rem;position:relative} .tl li::before{content:"";position:absolute;left:-7px;top:.85rem;width:12px;height:12px;background:var(--paper);border:2px solid var(--signal);border-radius:50%} .tl .y{font-family:var(--sans);font-size:.76rem;color:var(--signal);display:block;margin-bottom:.2rem} .tl p{font-size:.96rem} /* faq */ .faq{border-top:1px solid var(--rule);max-width:48rem} .faq details{border-bottom:1px solid var(--rule);padding:1rem 0} .faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--sans);color:var(--signal)} .faq details[open] summary::after{content:"–"} .faq p{margin-top:.7rem;color:var(--slate);font-size:.96rem;max-width:44rem} /* form */ .form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:44rem} .form label{display:block;font-family:var(--sans);font-size:.72rem;color:var(--slate);margin-bottom:.35rem} .form input,.form select,.form textarea{width:100%;font:inherit;font-size:.95rem;padding:.65rem .8rem;background:var(--card);border:1px solid var(--rule);border-radius:2px;color:var(--ink)} .form input:focus,.form textarea:focus,.form select:focus{border-color:var(--ink);outline:0} .form .full{grid-column:1/-1} @media(max-width:600px){.form{grid-template-columns:1fr}} /* close */ .close p{font-family:var(--sans);font-size:1.2rem;line-height:1.6;max-width:44rem;margin-bottom:1.2rem} .scope{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.25rem} .scope .m{font-size:.78rem;line-height:1.5;color:var(--slate);max-width:22rem} /* placeholder */ .ph-note{border:1px dashed var(--rule);background:var(--card);padding:1.2rem 1.4rem;border-radius:2px;font-family:var(--sans);font-size:.78rem;color:var(--slate);line-height:1.6;max-width:44rem} .ph-note b{color:var(--signal);font-weight:500} /* breadcrumb */ .crumb{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;font-family:var(--sans);font-size:.74rem;line-height:1.45;color:var(--slate);margin:0 0 1.5rem} .crumb a{text-decoration:none} .crumb a:hover{color:var(--ink)} .crumb span{margin:0;opacity:.5} /* footer */ footer{border-top:1px solid var(--rule);padding:3rem 0 3.5rem;font-size:.88rem;color:var(--slate)} .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem} .company-footer-links a span{color:var(--signal);font-size:.75em} .fproof{margin-top:.2rem;font-family:var(--sans);font-size:.72rem;letter-spacing:normal} .footer-wordmark{display:inline-flex;margin-bottom:.7rem} .footer-wordmark img{display:block;width:auto;height:30px} .footer-wordmark .footer-wordmark-dark{display:block} .footer-wordmark .footer-wordmark-light{display:none} [data-theme="dark"] .footer-wordmark .footer-wordmark-dark{display:none} [data-theme="dark"] .footer-wordmark .footer-wordmark-light{display:block} .fgrid h5{font-family:var(--sans);font-size:.72rem;color:var(--slate);font-weight:400;margin-bottom:.8rem} .fgrid ul{list-style:none} .fgrid li{padding:.22rem 0} .fgrid a{text-decoration:none} .fgrid a:hover{color:var(--ink)} .fbot{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--rule-soft);display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-family:var(--sans);font-size:.72rem} .fbot a{text-decoration:none} .fbot a:hover{color:var(--ink)} .fbot nav{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center} .fbot nav a{text-decoration:none} .fico{display:inline-flex;align-items:center;justify-content:center;width:1.45rem;height:1.45rem;margin-block:-.28rem;opacity:.38} .fico svg{width:.8rem;height:.8rem;display:block} .fico+.fico{margin-left:-.55rem} .fico:hover{opacity:.85;color:var(--ink)} @media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.fgrid{grid-template-columns:1fr}} /* internal copy toggle */ .toggle{position:fixed;right:1rem;bottom:1rem;z-index:50;background:var(--machine);color:#C9D2D6;border-radius:2px;padding:.5rem .6rem;font-family:var(--sans);font-size:.7rem;display:flex;gap:.4rem;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.25)} [data-theme="dark"] .toggle{background:#E9E7E1;color:#2A3036} .toggle span{opacity:.6;margin-right:.2rem} .toggle button{font:inherit;background:transparent;border:1px solid rgba(128,128,128,.4);color:inherit;padding:.2rem .5rem;border-radius:2px;cursor:pointer} .toggle button[aria-pressed="true"]{background:var(--signal-bright);border-color:var(--signal-bright);color:#1A1207} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mega .col a::before,.mega .col a::after{transition:none}.mega .col a:hover::after,.mega .col a:focus-visible::after{animation:none}} /* Type follows the Novacoast style guide v1.5: Helvetica Neue for display and body, JetBrains Mono (system mono fallback) for machine output, data and labels. */ /* Palette from the style guide v1.5: brand ink, navy-undertone greys, orange as ink. */ :root,[data-theme="light"]{ --sans:"Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; --paper:#F4F6F7;--paper-2:#E7EAED;--card:#FFFFFF; --ink:#0A1821;--slate:#5A666F;--rule:#CBD1D6;--rule-soft:#E7EAED; --machine:#0A0D10;--machine-text:#CBD1D6;--machine-rule:#2A343D; --steel:#5B7286;--bar:#3D5266;--signal:#FC9A18;--signal-bright:#FC9A18; --verdict-bg:#0A1821;--verdict-ink:#F4F6F7; --btn-bg:#FC9A18;--btn-ink:#0A1821;--btn-hover:#E28C05; --menu-bg:#FFFFFF;--shadow:0 22px 60px #0A0D1024; --alert-bg:#0A1821;--alert-ink:#F4F6F7;--cool:#3D5266; color-scheme:light; } [data-theme="dark"]{ --paper:#1B222A;--paper-2:#12181E;--card:#232C35; --ink:#F4F6F7;--slate:#AEB7BF;--rule:#354049;--rule-soft:#2B353E; --machine:#0E1216;--machine-text:#CBD1D6;--machine-rule:#2A343D; --steel:#8AA0B2;--bar:#5B7286;--signal:#FC9A18;--signal-bright:#FC9A18; --verdict-bg:#2B353E;--verdict-ink:#F4F6F7; --btn-bg:#FC9A18;--btn-ink:#0A0D10;--btn-hover:#FDB047; --menu-bg:#232C35;--shadow:0 22px 60px #0008; --alert-bg:#0E1216;--alert-ink:#CBD1D6;--cool:#8AA0B2; color-scheme:dark; } html{scroll-padding-top:100px} body{line-height:1.65} h1,h2,h3{text-wrap:balance} h1{font-weight:800;font-size:clamp(2.65rem,4.6vw,4.25rem);line-height:1.06;letter-spacing:-.045em;max-width:19ch} h2{font-weight:750;max-width:29ch;line-height:1.15;font-size:clamp(1.9rem,3.3vw,2.85rem)} h3{font-size:1.12rem;line-height:1.35} .wrap{max-width:82rem;padding-inline:clamp(1.25rem,4vw,3rem)} section{padding-block:clamp(3.5rem,7vw,6.75rem);border-color:var(--rule-soft)} main>section:nth-child(even){background:var(--card)} .lbl{color:var(--signal);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase} .m,.caseid,.casemeta,.step,.fnum,.panel-top,.case-foot{font-family:var(--mono)} .lbl i{display:none} .lede{font-size:1.125rem;line-height:1.75} .skip{position:fixed;top:12px;left:12px;z-index:100;background:var(--btn-bg);color:var(--btn-ink);padding:.6rem 1rem;border-radius:6px;transform:translateY(-150%)} .skip:focus{transform:translateY(0)} :focus-visible{outline:3px solid var(--cool);outline-offset:4px} button,a,input,select,textarea{touch-action:manipulation} .nav{background:var(--paper);border-color:var(--rule);box-shadow:0 1px 0 #00000004} .nav .in{height:80px;gap:.65rem;padding-inline:1.5rem} .mark{align-items:center;font-size:1.45rem;letter-spacing:-.055em;font-weight:800;gap:.6rem} .mark b{width:34px;height:34px;transform:none;background:url('logo-block.svg') center/cover;border-radius:0px;flex-shrink:0} .mark span{font-size:.58rem;letter-spacing:0;max-width:5ch;white-space:normal;line-height:1.45} .nl{overflow:visible;justify-content:center} .nl>li>a{font-size:.84rem;font-weight:600;padding-left:.5rem;color:var(--ink)} .chev{min-width:28px;min-height:44px;justify-content:center;padding:.5rem} .nl>li>a[aria-current="page"]{color:var(--signal)} .navcta{gap:.55rem} .navcta .ir{border:0;padding:.4rem 0;font-size:.68rem} .theme,.burger{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border-radius:7px;color:var(--ink)} .theme{min-width:46px;font-size:.7rem} .burger{display:none} .btn{border-radius:999px;padding:.8rem 1.5rem;font-weight:650;line-height:1.5;transition:background-color .15s,transform .15s,border-color .15s} .btn:hover{transform:translateY(-1px)} .b1{box-shadow:0 3px 10px #F28A1615} .b2{background:var(--card)} .hero{padding-block:clamp(3.5rem,6vw,6rem) clamp(3rem,5vw,4.5rem);background:var(--paper)} .hero:has(.proof){padding-bottom:clamp(2rem,3vw,2.75rem)} .hero:has(.security-visual) .hero-grid{align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(22rem,1.2fr);gap:clamp(2rem,4vw,4.5rem)} .hero:has(.security-visual) .security-visual{display:flex;min-height:100%} .hero:has(.security-visual) .orbit-map{flex:1;height:auto;min-height:24rem} .hero-grid{gap:clamp(2rem,5vw,5rem);align-items:center;grid-template-columns:1.15fr 1fr} .hero:has(.crumb){padding-top:2.35rem} .hero:has(.crumb) .hero-grid{align-items:start} .hero .panel{position:relative;overflow:hidden;border-radius:2px;box-shadow:none} .panel-top{padding:1rem 1.6rem;background:var(--paper-2);font-size:.68rem} .panel-top em{border-radius:999px;padding:.15rem .55rem} .panel-body{padding:1.6rem} .panel,.own,.world,.line,.verdict,.ph-note{border-radius:2px} .hero .step b{font-size:1.15rem;letter-spacing:-.02em} .hero .note{line-height:1.8;border-left-color:var(--signal-bright)} .proof{margin-top:4rem;border-bottom:0;gap:0} .proof>div{padding:1.7rem 1.1rem} .proof>div:first-child{padding-left:0} .proof .n{font-family:var(--sans);font-size:1.3rem;font-weight:750;line-height:1.3;letter-spacing:-.025em;margin-bottom:.6rem} .proof .d{font-size:.78rem;line-height:1.6;display:block} .world{padding:2.25rem;background:var(--paper)} .world .sub{font-size:1.05rem;color:var(--ink);line-height:1.7} .world h3{font-size:1.65rem} .world a.more{display:inline-block;margin-top:.5rem;padding-bottom:.25rem} .world a.more:hover{color:var(--signal)} .seq>div{padding:1.75rem 1.5rem} .seq>div:first-child{padding-left:0} .seq .n{color:var(--signal)} .incl{border:0;gap:1rem} .incl>div,.incl>a{border:1px solid var(--rule);border-radius:2px;background:var(--paper);padding:1.75rem} .incl>a:hover{border-color:var(--cool)} .leave,.aside{border-radius:0 2px 2px 0;padding:1.6rem 1.8rem} .leave p,.aside p,.verdict p,.close p{line-height:1.75} .hum .stem{font-size:1.4rem;font-weight:600} .hum li,.split .b li{font-size:1rem} .close .scope{margin-top:1.75rem} footer{padding-block:4rem;background:var(--paper-2)} .fgrid{grid-template-columns:2fr 1fr 1fr;gap:2rem} .fgrid:has(.company-footer-links){grid-template-columns:2fr 1fr 1fr 1fr} .fgrid li{padding:.32rem 0} .form input,.form select,.form textarea{border-radius:7px;padding:.8rem 1rem} .form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--cool);outline-offset:2px} .mega{border-radius:0 0 2px 2px;padding:2rem;max-height:calc(100dvh - 114px);overflow:auto;border-top:1px solid var(--rule)} .mega[data-open="true"]{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)) minmax(210px,.95fr);gap:1.6rem} .mega .col h4{font-size:.65rem;letter-spacing:normal;padding-bottom:.75rem;margin-bottom:.6rem} .mega .col a{position:relative;padding:.65rem .5rem;border:0;border-radius:6px} .mega .col a::before{content:'';position:absolute;left:.5rem;right:.5rem;bottom:.3rem;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)} .mega .col a::after{content:'';position:absolute;right:.5rem;bottom:.12rem;width:3px;height:5px;background:var(--signal);opacity:0} .mega .col a:hover,.mega .col a:focus-visible{background:var(--paper-2)} .mega .col a:hover::before,.mega .col a:focus-visible::before{transform:scaleX(1);animation:selection-flare .68s ease-out .22s both} .mega .col a:hover::after,.mega .col a:focus-visible::after{animation:selection-cursor .52s steps(1,end) .22s both} .mega .col a b{font-size:.87rem;line-height:1.45} .mega .col a small{font-size:.76rem;line-height:1.55;margin-top:.2rem} .mega .promo{background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;padding:1.5rem;align-self:stretch} .mega .promo h5{font-size:1.3rem;letter-spacing:-.025em;line-height:1.25;margin-block:.8rem} .mega .promo p{font-size:.85rem;line-height:1.65} .mega .promo.alert{background:#0A1821;color:#F4F6F7;border-color:#34506B} .mega .promo.alert .k{color:#FDB047} .mega .intro{grid-column:1/-1;margin:0;padding-bottom:1rem;border-bottom:1px solid var(--rule);font-size:.9rem;line-height:1.5;color:var(--slate)} @keyframes menu-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @keyframes selection-flare{0%,100%{background:var(--signal);box-shadow:0 0 0 transparent}28%{background:var(--signal-bright);box-shadow:0 0 3px var(--signal-bright),0 0 10px color-mix(in srgb,var(--signal-bright) 72%,transparent),0 0 18px color-mix(in srgb,var(--signal-bright) 36%,transparent)}} @keyframes selection-cursor{0%,36%{opacity:0}37%,61%,100%{opacity:1}62%,79%{opacity:.12}} @media(min-width:1080px) and (max-width:1450px){.navcta .ir{display:none}.nav .in{gap:.4rem}.nav .mark{font-size:1.3rem}.nav .mark span{display:none}} @media(max-width:1079px){ .nav .in{height:72px}.nl{inset:var(--drawer-top,72px) 0 0;padding:1rem clamp(1.25rem,4vw,3rem) 3rem;overflow:auto;overscroll-behavior:contain;justify-content:flex-start} .nl>li>a{padding:1.1rem 0;font-size:1.1rem}.chev{min-width:48px;min-height:48px} .burger{display:inline-flex}.theme{display:inline-flex}.mega{max-height:none;border:0;border-radius:0;padding:0 0 1.5rem;overflow:visible} .mega[data-open="true"]{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;animation:none}.mega .promo{grid-column:1/-1}.mega .col{margin:0} body.menu-open{overflow:hidden}.navcta .ir{font-size:.7rem} } @media(max-width:900px){.hero-grid,.hero:has(.security-visual) .hero-grid{grid-template-columns:1fr;align-items:start}.hero:has(.security-visual) .orbit-map{flex:none;height:22rem;min-height:0}.hero h1{max-width:22ch}.proof>div:first-child{padding-left:1.1rem}.proof>div:last-child{grid-column:1/-1}.fgrid{grid-template-columns:1fr 1fr}} @media(max-width:900px){.fgrid:has(.company-footer-links){grid-template-columns:1fr 1fr}} @media(max-width:600px){ .nav .in{padding-inline:1rem;gap:.5rem}.nav .mark{font-size:1.25rem}.nav .mark b{width:28px;height:28px}.nav .mark span{display:none}.navcta{gap:.35rem}.navcta .ir{display:none} .navcta>.btn{display:none}.theme,.burger{min-height:42px}.hero{padding-block:3rem 2.5rem}.hero:has(.crumb){padding-top:1.85rem}.hero:has(.crumb) .hero-grid{align-items:start}.crumb{margin-bottom:1.25rem}.hero .panel-body{padding:1.2rem}.hero-grid{gap:2.5rem} .mega[data-open="true"]{grid-template-columns:1fr;gap:1rem}.mega .promo{grid-column:auto}.mega .col h4:empty{display:none} .proof{margin-top:2.5rem;grid-template-columns:1fr 1fr}.proof>div{border-bottom:1px solid var(--rule-soft)}.proof>div:last-child{grid-column:1/-1} .proof .n{font-size:1.15rem}.world{padding:1.5rem}.seq>div{padding:1.5rem 0}.panel-top{padding:1rem;gap:1rem}.step{overflow-wrap:anywhere} .fgrid,.fgrid:has(.company-footer-links){grid-template-columns:1fr}.scope .m{max-width:none}.crumb{font-size:.65rem}.mach,.hum{padding:1.5rem} } /* Connected security visuals and reference-inspired navigation. */ .nl>li>a{font-family:var(--sans);font-size:.9rem;font-weight:500;letter-spacing:-.01em} .mega .col a b{font-size:.94rem;font-weight:550;letter-spacing:-.01em} .mega .col a small{font-size:.8rem;font-weight:400} .mega .col h4{letter-spacing:normal;font-weight:500} .navcta .ir-cta{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;text-decoration:none;border:0;border-radius:999px;padding:.75rem 1.05rem;background:var(--signal-bright);color:#101B27;font-size:.8rem;font-weight:650;box-shadow:0 5px 20px #F28A1626;transition:box-shadow .18s} .live-dot,.ir-cta::before{display:inline-block;content:'';width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#2BF58A;box-shadow:0 0 12px #2BF58A65} .ir-cta::before{border:1px solid #12653b;box-shadow:0 0 0 3px #142c2420} .navcta .ir-cta:hover,.navcta .ir-cta:focus-visible{box-shadow:0 5px 24px #F28A1645} .navcta .ir-cta:hover::before,.navcta .ir-cta:focus-visible::before{animation:ir-ping 1.5s ease-out infinite} @keyframes ir-ping{0%{box-shadow:0 0 0 3px #142c2420,0 0 0 0 #2BF58A99}70%{box-shadow:0 0 0 3px #142c2420,0 0 0 8px #2BF58A00}100%{box-shadow:0 0 0 3px #142c2420,0 0 0 8px #2BF58A00}} .security-visual,.platform-map{background:#0B1825;color:#F4F6F7;border:1px solid #2B4255;border-radius:2px;overflow:hidden;box-shadow:none} .visual-caption,.platform-heading{display:flex;justify-content:space-between;gap:1rem;padding:1.3rem 1.5rem;border-bottom:1px solid #283d4e;font: .63rem var(--sans);letter-spacing:normal;color:#A9BECE} .visual-caption .live-dot,.platform-heading .live-dot{margin-right:.5rem} .orbit-map{height:335px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at center,#2BF58A12,transparent 65%),radial-gradient(#49627938 1px,transparent 1px);background-size:auto,20px 20px} .hero .security-visual{border:2px solid #58758A;border-radius:2px} .orbit{position:absolute;border:1px solid #2BF58A35;border-radius:50%;width:290px;height:212px;transform:rotate(-5deg)} .orbit-outer{width:340px;height:235px;border-color:#61BDD451;transform:rotate(-65deg)} .orbit-inner{width:210px;height:300px;border-color:#2BF58A28;transform:rotate(-35deg)} .orbit-core{position:relative;display:flex;flex-direction:column;justify-content:center;text-align:center;width:176px;height:176px;border:1px solid #2BF58A80;border-radius:50%;background:#0D2230;box-shadow:0 0 35px #2BF58A0d} .orbit-core>span{font: .58rem var(--sans);letter-spacing:normal;color:#2BF58A} .orbit-core strong{font-size:1.35rem;line-height:1.2;letter-spacing:-.03em;margin:.7rem 0} .orbit-core small{color:#A9BECE;font-size:.7rem} .orbit-key{position:absolute;right:1.25rem;bottom:1.25rem;z-index:3;display:flex;flex-direction:column;gap:.2rem;color:#8AC5A9;font-family:var(--sans);font-size:.625rem;font-weight:400;line-height:1.4;letter-spacing:0} .orbit-key>span{display:flex;align-items:center;gap:.45rem} .orbit-key>span::before{content:"";width:3px;height:3px;flex:none;border-radius:50%;background:currentColor} .hero .orbit-map{width:100%} .orbit-point{position:absolute;width:5px;height:5px;background:#2BF58A;border-radius:50%;box-shadow:0 0 10px #2BF58A99} .point-one{top:57px;right:105px}.point-two{bottom:42px;right:126px}.point-three{top:50%;left:50%} .orbit-map[data-orbit-ready] .orbit-point{top:50%;left:50%;right:auto;bottom:auto;margin:-2.5px 0 0 -2.5px;pointer-events:none;z-index:1;will-change:transform} .orbit-map[data-orbit-ready] .orbit-core{z-index:2} .orbit-map[data-orbit-ready] .orbit-trail{width:2px;height:2px;margin:-1px 0 0 -1px;box-shadow:0 0 5px #2BF58A4D} .visual-footer{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #283d4e;padding:1rem;text-align:center;font:.65rem var(--sans);color:#B6C9D8;text-transform:none;letter-spacing:normal} .visual-footer span+span{border-left:1px solid #283d4e} .practice-art{display:flex;align-items:center;gap:.75rem;margin-bottom:1.7rem;padding-bottom:1.3rem;border-bottom:1px solid var(--rule)} .practice-art svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;color:var(--ink);flex:none} .practice-art{display:none!important} .world .service-tags{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;margin:1.2rem 0;padding:0} .world .service-tags li{font-size:.72rem;border:1px solid var(--rule);border-radius:999px;padding:.25rem .65rem} .world .service-tags li::before{display:none} .ai-path{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);border-radius:2px;overflow:hidden;margin:1.75rem 0} .ai-path>div{display:flex;flex-direction:column;padding:1.7rem;background:var(--card)} .ai-path>div+div{border-left:1px solid var(--rule)} .ai-path span{font:.65rem var(--sans);color:var(--slate)} .ai-path h3{margin:.8rem 0 .6rem}.ai-path p{font-size:.92rem;color:var(--slate);margin-bottom:1.15rem} .diagram-label{font:.65rem var(--sans);color:#2BF58A;letter-spacing:normal;text-transform:none}.human-label{color:#FDB047} /* --- the funnel: your stack -> Novacoast Intelligence -> our analysts -> you --- */ .model-brief{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(17rem,.9fr);column-gap:clamp(2.5rem,6vw,6rem);align-items:start} .model-brief .lbl{grid-column:1} .model-brief h2{grid-column:1;margin-bottom:1.15rem;max-width:16ch} .model-brief>p{grid-column:1;font-size:1.08rem;line-height:1.7;color:var(--slate);max-width:38rem} .model-brief .acts{grid-column:1;margin-top:1.6rem} .model-ways{grid-column:2;grid-row:3/5;margin:0} .model-ways>div{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.4rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--rule)} .model-ways>div:last-child{border-bottom:1px solid var(--rule)} .model-ways dt{font-size:.98rem;font-weight:650;letter-spacing:-.015em} .model-ways dd{margin:0;color:var(--slate);font-size:.95rem;line-height:1.55;max-width:none} @media(max-width:820px){ .model-brief{grid-template-columns:1fr} .model-ways{grid-column:1;grid-row:auto;margin-top:1.75rem} .model-ways>div{grid-template-columns:1fr;gap:.25rem} } .fnl-layer{margin:0 auto;padding:0 1.5rem} .fnl-stack{padding-top:1.9rem} .fnl-cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;font:.6rem var(--sans);letter-spacing:normal;text-transform:none;color:#839BAC;margin-bottom:.9rem} .fnl-metric{color:#61BDD4} .fnl-tools{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem} .fnl-tool{padding:.85rem .7rem;border:1px solid #385369;border-radius:9px;background:#132839;text-align:center} .fnl-kind{display:block;font-size:.92rem;font-weight:600;color:#F4F6F7} .fnl-vendors{display:block;margin-top:.4rem;font:.58rem var(--sans);line-height:1.6;color:#7B93A5} .fnl-flow{position:relative;overflow:hidden} .fnl-flow-wide{height:76px} .fnl-flow-thin{height:60px} .fnl-flow svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5} .fnl-dot{position:absolute;top:0;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#61BDD4;opacity:.5} .fnl-dot:nth-child(3n){top:14%}.fnl-dot:nth-child(3n+1){top:47%}.fnl-dot:nth-child(3n+2){top:76%} .fnl-dot-pass{background:#FFC178;opacity:.85} .fnl-mid{max-width:52rem} .fnl-engine{position:relative;padding:1.9rem 2rem;border:1px solid #385369;border-radius:2px;text-align:center;background:#0E2030;box-shadow:none} .fnl-engine h3{font-size:1.6rem;letter-spacing:-.025em;margin:.7rem 0 .8rem;color:#F4F6F7} .fnl-engine p{margin:0 auto;max-width:52ch;color:#ADC2D1;font-size:.95rem} .ni-mark{background:linear-gradient(100deg,#FFB040 0%,#F78248 28%,#8FB6F0 64%,#54D2E4 100%);background-size:165% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} @supports not ((background-clip:text) or (-webkit-background-clip:text)){.ni-mark{color:#FFB040;-webkit-text-fill-color:#FFB040}} .fnl-verbs{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem} .fnl-verbs span{padding:.35rem .8rem;border:1px solid #3A5A6E;border-radius:999px;font:.66rem var(--sans);letter-spacing:normal;text-transform:none;color:#BCD3E0;background:#0F2434} .fnl-bottom{max-width:38rem} .fnl-analysts{padding:1.6rem 1.8rem;border:1px solid #7A5426;border-radius:2px;background:#141B23;text-align:center;box-shadow:none} .fnl-analysts h3{font-size:1.35rem;letter-spacing:-.02em;margin:.6rem 0 .55rem;color:#F4F6F7} .fnl-analysts p{margin:0 auto;max-width:46ch;color:#ADC2D1;font-size:.9rem} .fnl-faces{display:flex;justify-content:center;margin-bottom:1rem} .fnl-faces img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #0B1825;box-shadow:0 0 0 1px #F0903066} .fnl-faces img+img{margin-left:-13px} .fnl-split{height:42px;max-width:38rem;margin:0 auto} .fnl-split svg{width:100%;height:100%} .fnl-branches{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:44rem;margin:0 auto;padding:0 1.5rem 2rem} .fnl-branch{padding:1rem 1.15rem;border:1px solid;border-radius:2px} .fnl-branch strong{display:block;margin:.3rem 0 .35rem;font-size:1rem;color:#F4F6F7} .fnl-share{font:.58rem var(--sans);letter-spacing:normal;text-transform:none} .fnl-note{font-size:.82rem;color:#A7BCCB} .is-handled{border-color:#2BF58A4D;background:#0E2620} .is-handled .fnl-share{color:#5FE3A4} .is-escalated{border-color:#F0903047;background:#241B12} .is-escalated .fnl-share{color:#F0A855} .logo-strip{margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--rule)} .logo-strip-cap{display:block;font:.6rem var(--sans);letter-spacing:normal;text-transform:none;color:var(--slate);margin-bottom:1.35rem} .logo-strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.4rem 1.75rem} .logo-strip li{margin:0;padding:0;display:flex;align-items:center} .logo-strip li::before{display:none} .logo-strip img{height:22px;width:auto;max-width:140px;filter:grayscale(1) contrast(0) brightness(1.9);opacity:.5;transition:opacity .25s,filter .25s} [data-theme="light"] .logo-strip img,:root:not([data-theme]) .logo-strip img{filter:grayscale(1) contrast(0) brightness(.45);opacity:.62} [data-theme="dark"] .logo-strip img{filter:grayscale(1) contrast(0) brightness(1.9)} .logo-strip li:hover img{opacity:.95} .logo-strip img[alt="Cisco"]{height:28px} .logo-strip img[alt="Zscaler"],.logo-strip img[alt="CrowdStrike"]{height:18px} .logo-strip img[alt="Palo Alto Networks"],.logo-strip img[alt="SentinelOne"]{height:17px} .logo-strip img[alt="Fortinet"]{height:15px} @media(prefers-reduced-motion:no-preference){ .fnl-dot{top:0;opacity:0;animation:fnl-rain 4.6s linear infinite} .fnl-dot-pass{opacity:0;animation:fnl-pass 5.6s linear infinite} .ni-mark{animation:ni-pan 9s ease-in-out infinite alternate} @keyframes fnl-rain{0%{transform:translateY(-4px);opacity:0}12%{opacity:.85}68%{opacity:.5}88%{opacity:0}100%{transform:translateY(76px);opacity:0}} @keyframes fnl-pass{0%{transform:translateY(-4px);opacity:0}15%{opacity:.95}85%{opacity:.95}100%{transform:translateY(60px);opacity:0}} @keyframes ni-pan{to{background-position:100% 0}} } .platform-ownership{display:flex;justify-content:space-between;gap:1rem;padding:1.25rem 2rem;background:#132B30;border-top:1px solid #2BF58A30;font-size:.85rem} .platform-ownership strong{color:#72EAAE}.platform-ownership span{color:#BCD0D9} .platform-details{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:2.25rem} .platform-details h3{margin:.65rem 0}.platform-details p{color:var(--slate);font-size:.95rem} @media(max-width:1079px){.nl>li>a{font-size:1.1rem}.navcta .ir-cta{font-size:.8rem}} @media(max-width:860px){.fnl-tools{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){.ai-path,.platform-details{grid-template-columns:1fr}.ai-path>div+div{border-left:0;border-top:1px solid var(--rule)}.platform-ownership{flex-direction:column}.platform-heading{font-size:.55rem;padding:1rem}.fnl-layer{padding:0 1rem}.fnl-stack{padding-top:1.4rem}.fnl-tools{grid-template-columns:repeat(2,1fr);gap:.5rem}.fnl-engine{padding:1.5rem 1.2rem}.fnl-engine h3{font-size:1.3rem}.fnl-analysts{padding:1.3rem 1.1rem}.fnl-branches{grid-template-columns:1fr;padding:0 1rem 1.5rem}.logo-strip ul{justify-content:center;gap:1.1rem 1.75rem}.logo-strip img{max-width:96px}.fnl-split{height:30px}.fnl-split svg{display:none}.fnl-flow-wide{height:56px}.fnl-flow-thin{height:44px}} @media(max-width:600px){.navcta .ir-cta{display:inline-flex;font-size:.66rem;padding:.6rem .7rem}.nav .mark{font-size:0;gap:0}.nav .mark b{width:30px;height:30px}.navcta{margin-left:auto}.orbit-map{height:310px}.orbit-outer{width:280px}.orbit-key{right:1rem;bottom:1rem}.visual-caption{font-size:.55rem;padding:1rem}.practice-art{gap:.6rem}} .eg{font-family:var(--sans);font-size:.74rem;color:var(--slate);margin-top:.9rem;max-width:none} .fill-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start} .fill-grid .sechead{margin-bottom:0} .fill-grid .acts{margin-top:1.75rem} .fill-grid + .ai-path{margin-top:1.5rem} @keyframes ai-start-flow{to{stroke-dashoffset:-20}} @media(max-width:900px){.fill-grid{grid-template-columns:1fr;gap:2rem}} .hero-grid .sechead{margin-bottom:1.35rem} .talk-list{list-style:none} .talk-list li{padding:.7rem 0;border-bottom:1px solid var(--rule-soft);font-size:.95rem;line-height:1.45} .talk-list li:last-child{border-bottom:0} /* Homepage closing checklist: an unfinished working sheet. */ .checklist-close .fill-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center} .checklist-close .sechead{margin-bottom:1.25rem} .checklist-close h2{max-width:13ch;font-size:clamp(2rem,3.5vw,3rem)} .checklist-close p{font-size:1.08rem;max-width:30rem;color:var(--slate)} .work-checklist{position:relative;isolation:isolate;min-width:0;padding:2.3rem 2.4rem 1.8rem;background:var(--card);border:1px solid var(--rule);box-shadow:5px 6px 0 var(--paper-2),6px 7px 0 var(--rule)} .work-checklist::before{content:"";position:absolute;top:0;bottom:0;left:3.05rem;border-left:1px solid var(--rule-soft);z-index:-1} .checklist-label{display:block;margin-left:2.2rem;margin-bottom:.8rem;font-size:.75rem;color:var(--slate)} .work-checklist h3{margin:0 0 1.6rem 2.2rem;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.08;letter-spacing:-.035em;font-weight:700} .work-checklist-items{list-style:none} .work-checklist-items li{display:flex;align-items:flex-start;gap:1rem;padding:1rem 0;border-top:1px solid var(--rule-soft);font-size:1rem;line-height:1.5} .work-checklist-items li::before{content:"";flex:0 0 1.2rem;height:1.2rem;margin-top:.15rem;border:1.5px solid var(--slate);border-radius:2px;background:var(--card)} .checklist-note{display:inline-block;margin-left:.75rem;color:var(--signal);font-size:.9rem;font-style:italic;white-space:nowrap;transform:rotate(-5deg);border-bottom:1px solid currentColor} @media(max-width:900px){.checklist-close .fill-grid{grid-template-columns:1fr}.checklist-close .fill-grid>div:first-child{order:2}.checklist-close h2{max-width:none}.work-checklist{max-width:38rem;width:100%;margin-inline:auto}} @media(max-width:600px){.work-checklist{padding:1.6rem 1.25rem 1rem}.work-checklist::before{left:1.9rem}.work-checklist h3{font-size:2rem}.work-checklist-items li{font-size:.95rem}.checklist-note{margin-left:.5rem}} #built{padding:6.5rem 0} .inhouse{max-width:42rem;margin:0 auto;text-align:center} .inhouse h2{max-width:none;font-size:clamp(2.6rem,7vw,4.5rem);letter-spacing:-.038em;line-height:1.02} .inhouse .lede{margin:1.4rem auto 0;max-width:34rem} .inhouse-body{margin:1rem auto 0;max-width:36rem;color:var(--slate)} .inhouse .acts{justify-content:center;margin-top:2.1rem} .seq .eg{max-width:none;font-family:var(--sans);font-size:.74rem;color:var(--slate);margin-top:.9rem} .seq p,.ai-path p{max-width:none} /* Services: staffing diagram (our bench is your bench) */ .bench{margin:0;border:1px solid var(--rule);border-radius:2px;background:var(--card);overflow:hidden;position:relative;box-shadow:none} .bench-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:.68rem var(--sans);color:var(--slate);padding:1rem 1.6rem;background:var(--paper-2);border-bottom:1px solid var(--rule)} .bench-top em{font-style:normal;border:1px solid var(--rule);padding:.15rem .55rem;border-radius:999px} .bench-art{display:block;width:100%;height:auto;padding:1.2rem 1.4rem .4rem;background: radial-gradient(circle at 22% 55%,color-mix(in srgb,var(--signal-bright) 14%,transparent),transparent 34%), radial-gradient(circle at 78% 50%,color-mix(in srgb,var(--cool) 12%,transparent),transparent 40%)} .bench-tag,.bench-col{font:600 8.5px var(--sans);letter-spacing:normal;fill:var(--slate)} .bench-col{text-anchor:middle;font-size:7.5px;fill:var(--cool)} .bench-gap{fill:color-mix(in srgb,var(--signal-bright) 7%,transparent);stroke:var(--signal);stroke-width:1.2;stroke-dasharray:5 4} .bench-band{fill:none;stroke:url(#bench-cable);stroke-width:18;stroke-linecap:round;opacity:.16} .bench-line{fill:none;stroke:url(#bench-cable);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:4 6;animation:bench-flow 2.6s linear infinite} .bench-line-2{animation-delay:-.9s;opacity:.7}.bench-line-3{animation-delay:-1.8s;opacity:.7} @keyframes bench-flow{to{stroke-dashoffset:-20}} .bench-you circle,.bench-you path{fill:none;stroke:var(--signal-bright);stroke-width:2.4;stroke-linecap:round} .bench-you circle:first-child{fill:color-mix(in srgb,var(--signal-bright) 22%,transparent)} .bench-pulse{stroke-width:1!important;opacity:.55;transform-origin:80px 119px;transform-box:view-box;animation:bench-pulse 3.2s ease-out infinite} @keyframes bench-pulse{0%{transform:scale(.72);opacity:.55}100%{transform:scale(1.25);opacity:0}} .bench-crew circle{fill:var(--cool);opacity:.55;stroke:var(--card);stroke-width:1.5} .bench-crew circle:nth-child(3n){opacity:.85}.bench-crew circle:nth-child(4n+2){opacity:.4} .bench-roles{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:.6rem 1.6rem 0} .bench-roles li{font-size:.72rem;border:1px solid var(--rule);border-radius:999px;padding:.28rem .7rem;color:var(--ink)} .bench-roles li::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal-bright);margin-right:.45rem;vertical-align:middle} .bench-roles li:nth-child(2)::before{background:var(--cool)}.bench-roles li:nth-child(3)::before{background:#169F65}.bench-roles li:nth-child(4)::before{background:var(--steel)} .bench-foot{padding:1rem 1.6rem 1.4rem;font-size:.84rem;line-height:1.6;color:var(--slate);max-width:none} .bench-foot b{color:var(--ink);font-weight:600} /* Services: closing call timeline */ .close,.spot{position:relative;overflow:hidden} .close::before,.spot::before{content:'';position:absolute;inset:auto -10% -40% auto;width:60%;height:120%;pointer-events:none;background: radial-gradient(closest-side,color-mix(in srgb,var(--signal-bright) 13%,transparent),transparent)} .spot.tr::before{inset:-30% -14% auto auto;width:80%;height:130%;transform:none;background: radial-gradient(closest-side,color-mix(in srgb,var(--signal-bright) 9%,transparent),transparent)} .close .wrap,.spot .wrap{position:relative} .close-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center} .close-grid .sechead{margin-bottom:1.35rem} .callmap{margin:0;border:1px solid var(--rule);border-radius:2px;background:var(--card);padding:1.5rem 1.7rem 1.4rem;box-shadow:none} .callmap-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:.68rem var(--sans);color:var(--slate);margin-bottom:1.1rem;letter-spacing:normal} .callmap-head em{font-style:normal;color:var(--ink)} .callspec{list-style:none;margin:0;padding:0;display:grid;gap:.7rem} .callspec>div{display:grid;grid-template-columns:8rem 1fr;gap:1rem;align-items:baseline;padding-bottom:.7rem;border-bottom:1px dashed var(--rule)} .callspec>div:last-child{border-bottom:none;padding-bottom:0} .callspec dt{margin:0;font:.68rem var(--sans);color:var(--slate);letter-spacing:normal} .callspec dd{margin:0;font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .callmap-foot{margin-top:1.2rem;padding-top:.9rem;border-top:1px dashed var(--rule);font:.68rem var(--sans);color:var(--signal);letter-spacing:normal} @media(max-width:900px){.close-grid{grid-template-columns:1fr;gap:2.25rem}.callmap{padding:1.25rem}.bench-top{padding:.85rem 1.1rem}.bench-roles,.bench-foot{padding-left:1.1rem;padding-right:1.1rem}.callspec>div{grid-template-columns:6.5rem 1fr}} /* Services hero: an open engineering drawing, with theme-aware SVG ink. */ .engineering-blueprint{margin:0;min-width:0;width:100%;max-width:38rem;justify-self:center} .engineering-blueprint-art{display:block;width:100%;height:auto;overflow:visible} .engineering-blueprint-art path{stroke-linejoin:round;stroke-linecap:round} .bp-grid-line{fill:none;stroke:var(--rule);stroke-width:.6;opacity:.4} .bp-registration{fill:none;stroke:var(--slate);stroke-width:1;opacity:.45} .bp-guides{fill:none;stroke:var(--slate);stroke-width:1;stroke-dasharray:3 6;opacity:.4} .bp-plate{fill:var(--paper-2);stroke:var(--bar);stroke-width:1.1} .bp-plate-top{fill:var(--card)} .bp-edge{fill:none;stroke:var(--bar);stroke-width:1;opacity:.55} .bp-trace{fill:none;stroke:var(--bar);stroke-width:.8;opacity:.35} .bp-module{fill:var(--paper);stroke:var(--bar);stroke-width:1.2} .bp-module path+path,.bp-module ellipse{fill:none} .bp-labels{font:10px var(--sans);letter-spacing:normal;fill:var(--slate)} .bp-leader{fill:none;stroke:var(--slate);stroke-width:.8;opacity:.55} .bp-route-halo{fill:none;stroke:var(--paper);stroke-width:8} .bp-route{fill:none;stroke:var(--cool);stroke-width:2.5} .bp-route-pulse{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:5 100;stroke-dashoffset:5;opacity:0;animation:blueprint-connect 3.6s .4s ease-in-out 1} .bp-gap{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-dasharray:3 4} .bp-callout{fill:none;stroke:var(--signal);stroke-width:1} .bp-annotation{font:10px var(--sans);letter-spacing:normal;fill:var(--signal)} .bp-ports{fill:var(--paper);stroke:var(--cool);stroke-width:2} .engineering-blueprint figcaption{display:flex;align-items:center;justify-content:center;gap:.65rem;font:.72rem/1.5 var(--sans);color:var(--slate);margin-top:.3rem} .bp-caption-mark{width:18px;height:2px;background:var(--cool);flex:none} @keyframes blueprint-connect{0%{stroke-dashoffset:5;opacity:0}10%,85%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}} @media(max-width:560px){.engineering-blueprint figcaption{font-size:.65rem}} /* Contact: office addresses, matching live Contact Us line breaks and gold rule */ .locs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 2.5rem;align-items:start} .locs article{min-width:0} .locs h3{font-size:1.05rem;font-weight:400;letter-spacing:-.01em;line-height:1.35;max-width:none;padding-bottom:.5rem;margin-bottom:.85rem;border-bottom:6px solid var(--signal-bright)} .locs h3 b{font-weight:700} .locs address{font-style:normal;font-size:1.02rem;line-height:1.65;color:var(--slate);max-width:none} .locs-group{font-size:1.35rem;font-weight:750;letter-spacing:-.02em;max-width:none;margin:3.25rem 0 1.75rem} @media(max-width:900px){.locs{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.75rem}.locs-group{margin-top:2.75rem}} @media(max-width:560px){.locs{grid-template-columns:1fr;gap:1.75rem}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}} /* industries hero: hub and spokes panel */ .hub .panel-body{padding:1rem 1.2rem 1.1rem} .hub-art{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)} .hub-ring{fill:none;stroke:var(--rule-soft);stroke-width:1;stroke-dasharray:3 5} .hub-core circle{fill:var(--paper-2);stroke:var(--signal);stroke-width:1.5} .hub-mark{fill:var(--signal-bright)} .hub-t{font-size:17px;font-weight:700;fill:var(--ink);letter-spacing:-.03em} .spoke line{stroke:var(--rule);stroke-width:1.25;transition:stroke .2s} .spoke circle{fill:var(--card);stroke:var(--steel);stroke-width:1.5;transition:stroke .2s,fill .2s} .hub-name{font-size:13.5px;font-weight:600;fill:var(--ink);transition:fill .2s} .hub-chip{font-family:var(--sans);font-size:10.5px;fill:var(--slate)} .spoke{cursor:pointer;outline:0} .spoke:hover line,.spoke:focus-visible line{stroke:var(--signal)} .spoke:hover circle,.spoke:focus-visible circle{stroke:var(--signal);fill:var(--signal-bright)} .spoke:hover .hub-name,.spoke:focus-visible .hub-name{fill:var(--signal)} .spoke:focus-visible circle{stroke-width:3} @media(prefers-reduced-motion:no-preference){ .spoke line{stroke-dasharray:140;stroke-dashoffset:140;animation:spoke-draw .7s ease-out forwards} .spoke:nth-of-type(2) line{animation-delay:.06s}.spoke:nth-of-type(3) line{animation-delay:.12s}.spoke:nth-of-type(4) line{animation-delay:.18s} .spoke:nth-of-type(5) line{animation-delay:.24s}.spoke:nth-of-type(6) line{animation-delay:.3s}.spoke:nth-of-type(7) line{animation-delay:.36s} @keyframes spoke-draw{to{stroke-dashoffset:0}} } @media(max-width:560px){.hub-chip{display:none}.hub-name{font-size:15px}.hub-t{font-size:19px}} /* Mobile: the contact card is a grid item, so it needs min-width:0 to shrink. Without it the unbreakable phone/email strings hold it at 310px and .close{overflow:hidden} silently clips its right edge under ~340px. */ .close-grid>*{min-width:0} .callspec dd{overflow-wrap:anywhere} @media(max-width:380px){ .callspec>div{grid-template-columns:1fr;gap:.2rem} } /* Touch targets. Footer, breadcrumb and inline contact links are sized for desktop density; on touch they fall under the 24px minimum (WCAG 2.5.8). Padding grows the hit area without moving the text. */ @media(pointer:coarse),(max-width:600px){ input,select,textarea,.form input,.form select,.form textarea{font-size:16px} .hero-grid>*,.split>*,.incl>*,.seq>*{min-width:0} h1,h2,h3,p{overflow-wrap:break-word} .fgrid li{padding:0} .fgrid li a{display:inline-block;padding-block:.5rem} .fbot nav a{display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:24px} .fbot span a{display:inline-block;padding-block:.35rem} .fico{width:24px;height:24px;margin-block:-.3rem} .crumb{gap:.5rem .7rem} .crumb a{display:inline-block;padding-block:.35rem} .callspec dd a,.standfirst dd a{display:inline-block;padding-block:.3rem} } /* Compliance frameworks: the names are the data, so they get the mono face. The eyebrow sits above a hairline; the standard names read as a set. */ .fw>div{padding-top:1.5rem} .fw .t{font-size:.64rem;letter-spacing:normal;text-transform:none;color:var(--slate);margin-bottom:0;padding-bottom:.85rem;border-bottom:1px solid var(--rule-soft)} .fw h3{font-family:var(--sans);font-size:.95rem;font-weight:500;letter-spacing:-.01em;line-height:1.45;color:var(--ink);margin:.85rem 0 .55rem;text-wrap:balance} .fw h3 i{font-style:normal;color:var(--cool)} .fw p{font-size:.9rem;line-height:1.65;color:var(--slate)} /* AI enablement: diagrams and icon rows instead of stacked paragraphs. */ .half-art{display:block;width:100%;max-width:21rem;height:auto;margin:0 0 1.5rem} .half-art .ha-ink{fill:none;stroke:var(--slate);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .half-art .ha-paper{fill:var(--card)} .half-art .ha-accent{stroke:var(--signal);stroke-width:1.7} .half-art .ha-label{font-family:Georgia,"Times New Roman",serif;font-size:13px;font-style:italic;font-weight:400;letter-spacing:normal;fill:var(--slate)} .marks{list-style:none;margin-top:1.2rem} .marks li{display:grid;grid-template-columns:.55rem 1fr;gap:.7rem;align-items:start;padding:.72rem 0;border-bottom:1px solid var(--rule-soft);font-size:.92rem;line-height:1.4;color:var(--ink)} .marks li::before{content:"";width:5px;height:5px;border-radius:50%;margin-top:.5rem;background:var(--steel)} .marks li:last-child{border-bottom:0} .split .a .marks li,.split .b .marks li{font-family:var(--sans);font-size:.92rem} .split .b .marks li::before{background:var(--signal)} .split.hinged .a,.split.hinged .b{padding-top:1.5rem} /* Where AI shows up: a list on the left, the detail revealed on the right. Hover switches panels on pointer devices; click and arrow keys work everywhere. */ .reveal{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);border-top:1px solid var(--rule)} .reveal-list{display:flex;flex-direction:column} .reveal-list button{ position:relative;appearance:none;background:none;border:0;border-bottom:1px solid var(--rule-soft); font:inherit;font-size:1.05rem;font-weight:600;letter-spacing:-.005em;color:var(--slate); text-align:left;padding:1.05rem 1.6rem 1.05rem 1.15rem;cursor:pointer; transition:color .18s ease,padding-left .18s ease; } .reveal-list button::before{ content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--signal); transform:scaleY(0);transform-origin:top;transition:transform .22s ease; } .reveal-list button:hover{color:var(--ink)} .reveal-list button[aria-selected="true"]{color:var(--ink);padding-left:1.55rem} .reveal-list button[aria-selected="true"]::before{transform:scaleY(1)} .reveal-panes{display:grid;border-left:1px solid var(--rule);padding:1.7rem 0 1.7rem 2.6rem;min-width:0} .reveal-panes>[role="tabpanel"]{ grid-area:1/1;align-self:start;min-width:0; opacity:1;transition:opacity .24s ease,transform .24s ease; } .reveal-panes>[role="tabpanel"][hidden]{ display:block;opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none; } .reveal-panes .n{font-family:var(--sans);font-size:.74rem;color:var(--signal);display:block;margin-bottom:.9rem} .reveal-panes p{font-size:1.24rem;line-height:1.5;letter-spacing:-.008em;color:var(--ink);max-width:32ch} @media (max-width:820px){ .reveal{grid-template-columns:1fr} .reveal-panes{border-left:0;padding:1.4rem 0 .25rem} .reveal-panes p{font-size:1.06rem;max-width:none} } @media (prefers-reduced-motion:reduce){ .reveal-list button,.reveal-list button::before,.reveal-panes>[role="tabpanel"]{transition:none} .reveal-panes>[role="tabpanel"][hidden]{transform:none} } /* Engagement phases: phase label + duration + a flow chevron. */ .seq.phases{border-top:0} .seq.phases>div{position:relative;padding:1.5rem 1.75rem 0 1.75rem} .seq.phases>div:first-child{padding-left:0} .seq.phases>div:not(:last-child)::after{ content:""; position:absolute; top:1.95rem; right:.35rem; width:8px; height:8px; border-right:2px solid var(--signal); border-top:2px solid var(--signal); transform:rotate(45deg); opacity:.55; } .seq.phases .phase-meta{margin-bottom:.7rem} .seq.phases .phase-label{ display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:normal;color:var(--ink); } .seq.phases .phase-label b{font-weight:600;color:var(--signal)} .seq.phases .phase-dur{ display:block;margin-top:.28rem; font-family:var(--sans);font-size:.65rem;letter-spacing:normal;color:var(--slate); } .seq.phases h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.15rem} .seq.phases ul{margin-top:.6rem} .seq.phases li{position:relative;padding:.5rem 0 .5rem .85rem} .seq.phases li::before{ content:"";position:absolute;left:0;top:1.05rem; width:5px;height:5px; border-right:1.5px solid var(--steel);border-top:1.5px solid var(--steel); transform:rotate(45deg);opacity:.55; } @media(max-width:900px){ .seq.phases>div{padding:1.5rem 1.25rem 0 1.25rem} .seq.phases>div:nth-child(2n+1){padding-left:0} .seq.phases>div:nth-child(2n){padding-right:0} .seq.phases>div:not(:last-child)::after{display:none} } @media(max-width:560px){ .seq.phases>div{padding-left:0;padding-right:0} } @media(prefers-reduced-motion:no-preference){ } /* Framework closer: last row of the same hairline grid. */ .pace{display:flex;align-items:baseline;gap:1.1rem;margin-top:0;padding:1.4rem 0 0;border-top:1px solid var(--rule);max-width:none} .pace b{flex:none;font-size:2.4rem;font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink)} .pace span{font-size:.95rem;line-height:1.55;color:var(--slate);max-width:52ch} @media(max-width:560px){.pace{gap:.8rem}.pace b{font-size:1.9rem}} /* Homepage facts: a centered byline under the whole hero. */ .hero ul.proof{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:0; row-gap:.75rem; list-style:none; margin:3.5rem 0 0; padding:1.2rem 0 0; border-top:1px solid var(--rule); border-bottom:0; text-align:center; line-height:1.45; } .hero ul.proof li{ padding:0; border:0; font-size:.95rem; font-weight:500; letter-spacing:-.01em; color:var(--slate); } .hero ul.proof li::before,.hero ul.proof li::after{content:none} /* Hairline dividers instead of gaps, so the facts read as one line of record. */ .hero ul.proof li{padding:.1rem 1.5rem} .hero ul.proof li:first-child{padding-left:0} .hero ul.proof li:last-child{padding-right:0} .hero ul.proof li+li{border-left:1px solid var(--rule)} .hero ul.proof .pf-lead b{ font-weight:750; font-size:1.05rem; letter-spacing:-.03em; color:var(--ink); margin-right:.2rem; } .hero ul.proof .pf-geo{display:flex;align-items:center;gap:.5rem} .hero ul.proof .pf-geo img{display:block;width:auto;height:12px;box-shadow:0 0 0 1px var(--rule);border-radius:1px} .hero ul.proof .pf-cert{border-left:0;padding-left:1.5rem} .cert-badge{ display:inline-flex; align-items:center; gap:.42rem; padding:.28rem .6rem; border:1px solid var(--rule); border-radius:2px; background:var(--card); font-size:.72rem; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--ink); white-space:nowrap; } .cert-badge svg{flex:none;fill:var(--signal);opacity:.9} .cert-badge .cert-tick{fill:none;stroke:var(--card);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cert-badge em{font-style:normal;font-weight:400;color:var(--slate)} @media(max-width:900px){ .hero ul.proof{margin-top:2.75rem} .hero ul.proof li{padding:.1rem 1.1rem} .hero ul.proof .pf-cert{padding-left:1.1rem} } @media(max-width:560px){ .hero ul.proof{flex-direction:column;align-items:center;row-gap:.5rem} .hero ul.proof li,.hero ul.proof li:first-child{padding:0} .hero ul.proof li+li{border-left:0} .hero ul.proof .pf-cert{padding-left:0;margin-top:.15rem} } /* Shared panel details: fine rules and plain labels keep the content prominent. */ .panel-top,.bench-top{background:transparent} .panel-top em,.bench-top em{border:0;border-radius:0;padding:0} .world .service-tags,.bench-roles{column-gap:0;row-gap:.4rem} .world .service-tags li,.bench-roles li{border:0;border-radius:0;padding:.15rem .75rem} .world .service-tags li:first-child,.bench-roles li:first-child{padding-left:0} .world .service-tags li+li,.bench-roles li+li{border-left:1px solid var(--rule)} .bench-roles li::before{display:none} .live-dot{background:#A9BECE;box-shadow:none} .bench-art{background:none} /* Readable labels without decorative tracking or heading markers. */ .lbl,.world .k,.mega .col h4,.fgrid h5,.form label{font-size:.8rem;font-weight:600} .world .k{color:var(--slate)} /* ============================================================ Security Operations hero: the first-mile flow diagram. Stacked hero — copy above, the diagram full width beneath it. ============================================================ */ .hero-stack .hero-copy .lede{max-width:44rem} .flow{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:2px;padding:1.1rem 1.3rem 1rem;margin-top:2.6rem} .flow-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--sans);font-size:.72rem;color:var(--slate);margin-bottom:.7rem} .flow-top em{font-style:normal;border:1px solid var(--rule);padding:.12rem .45rem;border-radius:2px} .flow-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .flow-scroll svg{display:block;width:100%;height:auto;min-width:900px} .flow .grid-dot{fill:var(--rule-soft)} .flow .src{fill:var(--bar);opacity:.55} .flow .srcl{font-family:var(--sans);font-size:11px;fill:var(--slate)} /* Ribbons carry the volume; the drop-offs peel away and fade out. */ .flow .rib path{fill:var(--bar);opacity:.18} .flow .drop path{fill:var(--bar);opacity:.11} .flow .hit{fill:transparent} .flow .gate{cursor:pointer;outline:none} .flow .band{fill:var(--bar);stroke:var(--steel);stroke-width:1;transition:fill .2s ease,stroke .2s ease} .flow .gate:hover .band,.flow .gate:focus .band,.flow .gate.active .band{fill:color-mix(in srgb,var(--signal) 55%,transparent);stroke:var(--signal)} .flow .cnt{font-family:var(--sans);font-size:22px;font-weight:600;fill:var(--ink)} .flow .cnt .unit{font-size:12px;font-weight:400;fill:var(--slate)} .flow .cnt.hot{fill:var(--signal)} .flow .cnt.hot .unit{fill:var(--signal);opacity:.8} .flow .stl,.flow .endlbl{font-family:var(--sans);font-size:13px;fill:var(--ink)} .flow .sub{font-family:var(--sans);font-size:10.5px;fill:var(--slate)} .flow .ai{font-family:var(--sans);font-size:9.5px;fill:var(--slate);opacity:.75} .flow .ai.hot{fill:var(--signal);opacity:1} .flow .gate:hover .sub,.flow .gate:focus .sub,.flow .gate.active .sub, .flow .gate:hover .ai,.flow .gate:focus .ai,.flow .gate.active .ai{fill:var(--ink);opacity:1} .flow .feedl{font-family:var(--sans);font-size:9.5px;fill:var(--slate)} .flow .feed{fill:none;stroke:var(--steel);stroke-width:1;stroke-dasharray:3 4;opacity:.7;animation:flow-feed 1.4s linear infinite} .flow .fl{fill:none;stroke:var(--steel);stroke-width:1.2;stroke-dasharray:4 6;opacity:.5;animation:flow-march 1.6s linear infinite} .flow .fl.main{stroke-width:1.6;opacity:.7} /* One case travels the length of the diagram, then a person is paged. */ .flow .pulse{fill:none;stroke:var(--signal);stroke-width:3;stroke-linecap:round;stroke-dasharray:70 3000;stroke-dashoffset:3070;animation:flow-pulse 7s ease-in-out infinite} .flow .endring{fill:none;stroke:var(--signal);stroke-width:1;opacity:.35;animation:flow-ring 7s ease-out infinite} .flow .endnode{fill:color-mix(in srgb,var(--signal) 10%,transparent);stroke:var(--signal);stroke-width:2;animation:flow-node 7s ease-out infinite} .flow .glyph circle{fill:var(--signal)} .flow .glyph path{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round} .flow .paged{font-family:var(--sans);font-size:14px;fill:var(--ink);opacity:0;animation:flow-paged 7s ease-out infinite} .flow .brk{stroke:var(--rule)} .flow .brk.hot{stroke:var(--signal)} .flow .brkl{font-family:var(--sans);font-size:10px;fill:var(--slate)} .flow .brkl.hot{fill:var(--signal)} .flow-desc{font-family:var(--sans);font-size:.82rem;color:var(--slate);line-height:1.55;margin-top:.85rem;max-width:none;min-height:3.1em;transition:color .2s ease} .flow-desc.on{color:var(--ink)} .flow.paused .fl,.flow.paused .feed,.flow.paused .pulse, .flow.paused .endring,.flow.paused .endnode,.flow.paused .paged{animation-play-state:paused} @keyframes flow-march{to{stroke-dashoffset:-10}} @keyframes flow-feed{to{stroke-dashoffset:-7}} @keyframes flow-pulse{0%{stroke-dashoffset:3070;opacity:0}5%{opacity:1}60%{stroke-dashoffset:0;opacity:1}68%{opacity:0}100%{stroke-dashoffset:0;opacity:0}} @keyframes flow-ring{0%,58%{r:36;opacity:.35}64%{r:52;opacity:0}100%{r:36;opacity:.35}} @keyframes flow-node{0%,58%{fill:color-mix(in srgb,var(--signal) 10%,transparent)}62%,80%{fill:var(--signal)}100%{fill:color-mix(in srgb,var(--signal) 10%,transparent)}} @keyframes flow-paged{0%,58%{opacity:0}63%,86%{opacity:1}100%{opacity:0}} @media(prefers-reduced-motion:reduce){ .flow .fl,.flow .feed,.flow .pulse,.flow .endring,.flow .endnode,.flow .paged{animation:none} .flow .paged{opacity:1} .flow .endnode{fill:var(--signal)} } @media(max-width:700px){ .flow{padding:1rem} .flow .cnt{font-size:24px} .flow .stl,.flow .endlbl{font-size:15px} .flow .sub,.flow .ai,.flow .srcl,.flow .feedl,.flow .brkl{font-size:12px} } /* ============================================================ How we work hero: this page carries no illustration, so the header holds the screen and a single warm spotlight — thrown from above left, pooling behind the headline — does the work. ============================================================ */ .hero.beam{ --nav-h:80px;--beam:13%;--beam-soft:5%;--beam-pool:7%; position:relative; min-height:min(calc(100svh - var(--nav-h)),60rem); display:grid; background: radial-gradient(72% 80% at 26% -14%, color-mix(in srgb,var(--signal-bright) var(--beam),transparent) 0, color-mix(in srgb,var(--signal-bright) var(--beam-soft),transparent) 46%, transparent 74%), radial-gradient(54% 42% at 32% 64%, color-mix(in srgb,var(--signal-bright) var(--beam-pool),transparent) 0, transparent 72%), var(--paper); } [data-theme="dark"] .hero.beam{--beam:20%;--beam-soft:8%;--beam-pool:10%} /* The light spills onto the rule between this section and the next. */ .hero.beam::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent 0, color-mix(in srgb,var(--signal-bright) 60%,transparent) 27%,transparent 64%); } /* Crumb stays at the top; the label, headline and lede centre in what is left. */ .hero.beam>.wrap{display:flex;flex-direction:column;width:100%} .hero.beam .crumb{margin-bottom:auto} .hero.beam h1{font-size:clamp(2.9rem,6vw,5.25rem);max-width:13ch;letter-spacing:-.05em} .hero.beam .lede{margin-bottom:auto;font-size:clamp(1.125rem,1.5vw,1.32rem);max-width:34rem} @media(max-width:1079px){.hero.beam{--nav-h:72px}} /* Fixed AI illustration repeats only in selected pale sections. */ main>section.ai-hero{position:relative;isolation:isolate;clip-path:inset(0);background:var(--paper)} .hero.ai-hero{min-height:36rem} .ai-hero::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("illustrations/ai-enablement-threads.png") no-repeat right center;background-size:auto 115%;opacity:.24;-webkit-mask-image:linear-gradient(to right,transparent 25%,#000 76%),linear-gradient(to bottom,transparent,#000 16%,#000 75%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 25%,#000 76%),linear-gradient(to bottom,transparent,#000 16%,#000 75%,transparent);mask-composite:intersect} @media(prefers-reduced-motion:reduce){.ai-hero::before{position:absolute}} .ai-hero .hero-grid{display:block} .ai-hero .hero-grid>div{max-width:35rem} @media(max-width:900px){.hero.ai-hero{min-height:0}.ai-hero::before{opacity:.1;background-position:65% center;-webkit-mask-image:linear-gradient(to right,transparent,#000),linear-gradient(to bottom,transparent,#000 25%,transparent);mask-image:linear-gradient(to right,transparent,#000),linear-gradient(to bottom,transparent,#000 25%,transparent)}} /* ============================================================ Homepage rhythm: no two consecutive sections share a shape. practices = intro rail left, rows right model = spec list left, brief right (mirrored) ai = full-width dark band, centred head, three tracks ============================================================ */ /* practices: the section head becomes a rail beside the content, and the two practices are rules-and-rows instead of cards. */ .practice-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);column-gap:clamp(2.5rem,6vw,6rem);align-items:start} .practice-intro{position:sticky;top:112px} .practice-intro h2{max-width:14ch;font-size:clamp(2rem,3.6vw,3.1rem)} .practice-intro .lede{margin-top:1.1rem;max-width:26rem} .story-index{list-style:none;margin:2rem 0 0;padding:0;border-left:1px solid var(--rule)} .story-index li{position:relative;display:flex;gap:.8rem;align-items:center;padding:.42rem 0 .42rem 1rem;font:600 .72rem var(--sans);color:var(--slate);transition:color .35s ease,transform .35s ease} .story-index li::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--signal);transform:scaleY(0);transform-origin:center;transition:transform .35s ease} .story-index li span{font-size:.62rem;font-variant-numeric:tabular-nums;opacity:.65} .story-index li.is-active{color:var(--ink);transform:translateX(.3rem)} .story-index li.is-active::before{transform:scaleY(1)} #practices .worlds{grid-template-columns:1fr;gap:0} #practices .world{position:relative;border:0;border-top:1px solid var(--rule);background:transparent;padding:clamp(3rem,7vh,5rem) 0;min-height:55vh;border-radius:0} #practices .world:first-child{padding-top:.35rem;border-top:0} #practices .chapter-number{position:absolute;right:0;top:clamp(3rem,7vh,5rem);font:600 .68rem var(--sans);color:var(--slate);font-variant-numeric:tabular-nums} #practices .world:first-child .chapter-number{top:.35rem} #practices .world .k{margin-bottom:.7rem} #practices .world h3{font-size:1.55rem;letter-spacing:-.025em} #practices .world .sub{max-width:38rem;margin-bottom:1.1rem} .world-links{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.3rem} #practices .world a.more{margin-top:0} .story-ways{margin:1.7rem 0 0} .story-ways>div{display:grid;grid-template-columns:6.5rem 1fr;gap:1.2rem;padding:1rem 0;border-top:1px solid var(--rule)} .story-ways>div:last-child{border-bottom:1px solid var(--rule)} .story-ways dt{font-size:1rem;font-weight:650;color:var(--ink)} .story-ways dt a,.seq h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)} .story-ways dt a:hover,.seq h3 a:hover{color:var(--signal);border-bottom-color:var(--signal)} .story-ways dd{margin:0;color:var(--slate);font-size:.95rem;line-height:1.55} @media(prefers-reduced-motion:no-preference) and (min-width:901px){ #practices.story-ready .story-chapter{opacity:.32;transform:translateY(1.25rem);transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)} #practices.story-ready .story-chapter.is-active{opacity:1;transform:none} } @media(max-width:900px){ .practice-layout{grid-template-columns:1fr;row-gap:2.5rem} .practice-intro{position:static} .practice-intro h2,.practice-intro .lede{max-width:none} .story-index{display:none} #practices .world{min-height:0;padding:2.5rem 0} #practices .world:first-child{padding-top:0} #practices .chapter-number,#practices .world:first-child .chapter-number{top:2.5rem} #practices .world:first-child .chapter-number{top:0} } @media(max-width:560px){.story-ways>div{grid-template-columns:1fr;gap:.25rem}} /* model: mirror the brief so the page stops starting every block at the left margin. */ .model-brief{grid-template-columns:minmax(16rem,.82fr) minmax(0,1.18fr)} .model-brief .lbl{grid-column:2;grid-row:1} .model-brief h2{grid-column:2;grid-row:2} .model-brief>p{grid-column:2;grid-row:3} .model-brief .acts{grid-column:2;grid-row:4} .model-ways{grid-column:1;grid-row:2/5;margin:0} .model-ways>div:first-child{border-top:0} @media(max-width:900px){ .model-brief{grid-template-columns:1fr} .model-brief .lbl,.model-brief h2,.model-brief>p,.model-brief .acts{grid-column:1;grid-row:auto} .model-ways{grid-column:1;grid-row:auto;margin-top:1.75rem} .model-ways>div:first-child{border-top:1px solid var(--rule)} } /* ai: a dark band, edge to edge, with a centred head. */ main>section.band{background:var(--machine);color:var(--machine-text);border-top:0} .band h2,.band h3{color:#F2F7FB} .band .lbl{color:var(--signal-bright)} .band .lede,.band p{color:var(--machine-text)} .band .sechead{text-align:center;max-width:44rem;margin-inline:auto;margin-bottom:3rem} .band .sechead h2{max-width:none} .band .sechead .lede{margin-inline:auto} .band .ai-path{border:0;border-radius:0;margin:0;border-block:1px solid var(--machine-rule)} .band .ai-path>div{background:transparent;padding:2.1rem 1.9rem 2.3rem} .band .ai-path>div:first-child{padding-left:0} .band .ai-path>div:last-child{padding-right:0} .band .ai-path>div+div{border-left:1px solid var(--machine-rule)} .band .ai-path span{color:var(--steel);letter-spacing:.08em} .band .acts{justify-content:center;margin-top:2.5rem} .band .b2{background:transparent;color:#F2F7FB;border-color:#ffffff33} .band .b2:hover{border-color:var(--signal-bright);color:var(--signal-bright)} @media(max-width:700px){ .band .ai-path>div{padding-inline:0} .band .ai-path>div+div{border-left:0} } /* Neutral section labels for AI governance and enablement. */ #halves .split.hinged .k{color:#000} [data-theme="dark"] #halves .split.hinged .k{color:var(--ink)} /* SOC detail chapters: a quiet, sticky introduction beside the record. */ main>section.soc-story{background:var(--paper);padding-block:clamp(3.5rem,6vw,5rem);scroll-margin-top:96px} .soc-story-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2.5rem,6vw,6rem);align-items:start} .soc-story-intro{position:sticky;top:112px;margin:0} .soc-story-intro h2{max-width:16ch;font-size:clamp(2rem,3.3vw,2.8rem)} .soc-story-intro .lede{max-width:26rem;font-size:1rem;line-height:1.65;margin-top:1.25rem} .soc-story-details{min-width:0} .soc-story .case-grid{grid-template-columns:1fr;gap:2.25rem} .soc-story .panel{border:0;border-radius:0;background:transparent} .soc-story .panel-top{padding:0 0 1rem;background:transparent;border-bottom:1px solid var(--rule);font-size:.74rem;gap:1rem;flex-wrap:wrap} .soc-story .panel-top em{border:0;border-radius:0;padding:0;color:var(--slate)} .soc-story .panel-body{padding:1.15rem 0 0} .soc-story .assembled-list{list-style:disc;padding-left:1.2rem;margin-top:1.1rem} .soc-story .assembled-list li{padding:.55rem 0;border-bottom:1px solid var(--rule-soft);font-family:var(--sans);font-size:.9rem} .soc-story .assembled-list li:last-child{border-bottom:0} .soc-story .step{padding-block:.7rem} .soc-story .note{max-width:none;margin-top:1rem;border:0;padding:0;font-size:.72rem} .soc-story .split{grid-template-columns:1fr;gap:2.25rem} .soc-story .split>div+div{padding-top:2rem;border-top:1px solid var(--rule)} .soc-story .split .k{color:var(--slate);margin-bottom:.85rem} .soc-story .split h3{font-size:1.35rem;letter-spacing:-.025em} .soc-story .split li,.soc-story .split .a li,.soc-story .split .b li{font-size:.9rem} .soc-story .split ul{list-style:disc;padding-left:1.2rem} .soc-story .seq{grid-template-columns:1fr;border-top:0} .soc-story .seq>div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);column-gap:1.25rem;padding:1.65rem 0;border:0;border-bottom:1px solid var(--rule-soft)} .soc-story .seq>div:first-child{padding-top:0} .soc-story .seq .n{grid-column:1;grid-row:1/3;margin:0;padding-top:.2rem;color:var(--slate)} .soc-story .seq h3,.soc-story .seq p{grid-column:2} .soc-story .seq h3{font-size:1.2rem;letter-spacing:-.02em} .soc-story .aside{padding:0;background:transparent;border:0;border-radius:0;margin-top:1.5rem} .soc-story .aside p{font-size:.9rem;color:var(--slate);line-height:1.6} @media(max-width:900px){ .soc-story-layout{grid-template-columns:1fr;gap:2.25rem} .soc-story-intro{position:static} .soc-story-intro h2{max-width:22ch} .soc-story-intro .lede{max-width:36rem} } @media(max-width:560px){ .soc-story .seq>div{grid-template-columns:1fr;gap:0} .soc-story .seq .n{grid-row:auto;margin-bottom:.6rem;padding:0} .soc-story .seq h3,.soc-story .seq p{grid-column:1} .soc-story .step{column-gap:.45rem;font-size:.76rem} .soc-story .step .t{font-size:.68rem;white-space:nowrap} .soc-story .case-foot{flex-wrap:wrap;gap:.4rem 1rem} } @media(min-width:901px) and (max-height:650px){ .soc-story-intro{position:static} } /* full-height centred page closer */ main>section.close-full{min-height:calc(100svh - 80px);display:flex;align-items:center;text-align:center;padding-block:clamp(5rem,10vw,8rem);background:var(--paper);border-top:1px solid var(--rule)} .close-full>.wrap{width:100%} .close-full::before{display:none} .close-full .sechead{margin:0 auto 1.5rem;max-width:52rem} .close-full .lbl{justify-content:center} .close-full h2{max-width:29ch;margin-inline:auto} .close-full p{max-width:40rem;margin-inline:auto} .close-full .scope{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:2rem} .close-full .scope .m{max-width:none} @media(max-width:560px){ main>section.close-full{min-height:auto;padding-block:5rem} } /* ============================================================ Homepage section ladder (body.home only) The hero takes the cool page tint, one step lighter than the CTA band below. Below it the page steps white → dark → gray → white. ============================================================ */ body.home .hero{ position:relative;isolation:isolate; /* Keep the homepage hero light in either site theme. */ --paper:#F4F6F7;--paper-2:#E7EAED;--card:#FFFFFF; --ink:#0A1821;--slate:#5A666F;--rule:#CBD1D6;--rule-soft:#E7EAED; --signal:#5A666F;--signal-bright:#808B93;--steel:#808B93;--cool:#516275; --btn-bg:#0A1821;--btn-ink:#FFF;--btn-hover:#1E262E; color-scheme:light; background:var(--paper); color:var(--ink); border-bottom:0; } body.home .hero h1{color:var(--ink)} @media(min-width:901px){body.home .hero .hero-grid{column-gap:clamp(1.5rem,3vw,3.5rem)}} body.home .hero .b1{box-shadow:0 3px 10px #0000000D} body.home .hero .b2{border-color:var(--rule);background:#FFF} body.home .hero .b2:hover{border-color:var(--ink)} /* The visual loses its frame and sits directly on the hero. */ body.home .hero .security-visual{color:var(--ink);background:transparent;border:0;box-shadow:none;overflow:visible} body.home .hero .orbit-map{background:none;isolation:isolate} @media(max-width:380px){ body.home .hero .orbit{max-width:75%;max-height:70%} } /* Center the dot field on the orbit and fade it into the surrounding hero. */ body.home .hero{overflow:clip} body.home .hero .orbit-map::before{ content:"";position:absolute;inset:-6rem;z-index:-1;pointer-events:none; background:radial-gradient(rgb(115 115 115 / 37%) 1px,transparent 1px); background-size:30px 30px; -webkit-mask-image:radial-gradient(circle closest-side,#000 12%,#0008 48%,transparent 100%); mask-image:radial-gradient(circle closest-side,#000 12%,#0008 48%,transparent 100%); } body.home .hero .orbit{border-color:#A3A3A3} body.home .hero .orbit-outer{border-color:#B8B8B8} body.home .hero .orbit-inner{border-color:#D4D4D4} body.home .hero .orbit-core{border-color:#A3A3A3;background:#FBFCFD;box-shadow:0 0 35px #00000005} body.home .hero .orbit-core>span{color:#404040} body.home .hero .orbit-core small{color:#666} body.home .hero .orbit-key{color:#595959} /* Literal orange: the hero redefines --signal as slate. */ body.home .hero .orbit-point{background:#FC9A18;box-shadow:0 0 10px #FC9A1866} body.home .hero .orbit-map .orbit-point:not(.orbit-trail){box-shadow:0 0 0 1px #000} body.home .orbit-key [data-orbit="one"],body.home .orbit-map .point-one{--orbit-accent:#187650} body.home .orbit-key [data-orbit="two"],body.home .orbit-map .point-two{--orbit-accent:#2563C4} body.home .orbit-key [data-orbit="three"],body.home .orbit-map .point-three{--orbit-accent:#8550B5} body.home .orbit-key [data-orbit]{border-radius:2px;transition:color .2s;cursor:default} body.home .orbit-key [data-orbit]:is(:hover,:focus), body.home .orbit-map:has(.point-one:hover) [data-orbit="one"], body.home .orbit-map:has(.point-two:hover) [data-orbit="two"], body.home .orbit-map:has(.point-three:hover) [data-orbit="three"]{color:var(--orbit-accent)} body.home .orbit-key [data-orbit]:focus-visible{outline:1px solid currentColor;outline-offset:4px} body.home .hero .orbit-point{transition:background-color .2s,box-shadow .2s} body.home .hero .orbit-map .orbit-point:not(.orbit-trail){pointer-events:auto;cursor:default} /* Expand the hover target without enlarging the visible dot. */ body.home .hero .orbit-point:not(.orbit-trail)::before{content:"";position:absolute;inset:-12px;border-radius:50%} body.home .hero .orbit-map .orbit-point:not(.orbit-trail):hover, body.home .hero .orbit-map:has([data-orbit="one"]:is(:hover,:focus)) .point-one, body.home .hero .orbit-map:has([data-orbit="two"]:is(:hover,:focus)) .point-two, body.home .hero .orbit-map:has([data-orbit="three"]:is(:hover,:focus)) .point-three{ background:#FC9A18;box-shadow:0 0 0 1px #000,0 0 0 4px #FC9A1840,0 0 14px #FC9A18; /* Keep the selected dot bright despite the animation's depth opacity. */ opacity:1!important; } body.home .hero .orbit-map[data-orbit-ready] .orbit-trail{box-shadow:0 0 0 .5px #000} body.home .hero .glow::before{display:none} /* Sections below the hero: gray, dark band, gray, then white. */ body.home main>section#practices, body.home main>section.close{background:#E6EBF2} body.home main>section#built{background:#FFF} /* ── Events list ─────────────────────────────────────────────────────── */ .ev-tabs{display:flex;gap:1.4rem;border-bottom:1px solid var(--rule);margin:0 0 2.4rem} .ev-tabs button{appearance:none;background:none;border:0;border-bottom:1px solid transparent;color:var(--slate);font:inherit;font-size:.9rem;padding:.1rem 0 .7rem;margin-bottom:-1px;cursor:pointer;border-radius:0} .ev-tabs button:hover{color:var(--ink)} .ev-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)} .ev-pane-kicker{font-family:var(--sans);font-size:.74rem;font-weight:400;color:var(--slate);margin:0 0 1.5rem} .js .ev-pane-kicker{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} html:not(.js) .ev-tabs{display:none} html:not(.js) .ev-pane[hidden]{display:block} html:not(.js) .ev-pane + .ev-pane{margin-top:3rem} .ev-empty{color:var(--slate);margin:0 0 1.25rem} .ev-group + .ev-group{margin-top:2.75rem} .ev-month{font-family:var(--sans);font-size:.74rem;font-weight:400;letter-spacing:normal;color:var(--slate);padding-bottom:.55rem;border-bottom:1px solid var(--rule)} .evlist{list-style:none;margin:0;padding:0} .ev{display:grid;grid-template-columns:11.5rem minmax(0,1fr) auto;gap:1.5rem;align-items:baseline;padding:1.05rem 0;border-bottom:1px solid var(--rule-soft)} .ev:last-child{border-bottom:0} .ev.is-next{box-shadow:inset 2px 0 0 var(--signal-bright);padding-left:.9rem} .ev-when{font-family:var(--sans);font-size:.85rem;color:var(--ink);white-space:nowrap} .ev-mon{color:var(--slate)} .ev-day{color:var(--ink)} .ev-next{font-family:var(--sans);font-size:.72rem;color:var(--signal);margin:0 0 .28rem} .ev-what h3{font-size:1.05rem;font-weight:600;line-height:1.3;letter-spacing:-.01em} .ev-what h3 a{text-decoration:none} .ev-what h3 a:hover{color:var(--signal)} .ev-where{font-family:var(--sans);font-size:.82rem;color:var(--slate);line-height:1.45;margin-top:.25rem} .ev-booth{display:inline-block;font-family:var(--sans);font-size:.72rem;color:var(--ink);border:1px solid var(--rule);border-radius:2px;padding:.2rem .5rem;white-space:nowrap} @media(max-width:600px){ .ev{grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;padding:1.15rem 0} .ev-when{grid-column:1;grid-row:1} .ev-meta{grid-column:2;grid-row:1;justify-self:end} .ev-what{grid-column:1/-1;grid-row:2} .ev.is-next{padding-left:.75rem} } /* ── Video Library ───────────────────────────────────────────────────── */ .video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem} .video-grid[hidden]{display:none} .video-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--rule);border-radius:2px;background:var(--card);overflow:hidden;cursor:pointer;color:inherit;text-align:left;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} .video-card:hover,.video-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--cool);outline:none} .video-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)} .video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease} .video-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,18,20,.55),transparent 58%);opacity:0;transition:opacity .2s ease;pointer-events:none} .video-card:hover .video-thumb img,.video-card:focus-visible .video-thumb img{transform:scale(1.05)} .video-card:hover .video-thumb::after,.video-card:focus-visible .video-thumb::after{opacity:1} .play-badge{position:absolute;inset:0;margin:auto;z-index:1;width:3.1rem;height:3.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(22,24,27,.78);color:#fff;pointer-events:none;transition:transform .2s ease,background-color .2s ease,color .2s ease} .play-badge svg{margin-left:.12rem} .video-card:hover .play-badge,.video-card:focus-visible .play-badge{transform:scale(1.12);background:var(--signal-bright);color:#1A1207} .video-meta{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.05rem 1.15rem} .video-meta h3{font-size:1.02rem;font-weight:650;line-height:1.35;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .video-date{order:-1;font-family:var(--sans);font-size:.72rem;color:var(--signal)} .video-meta p{font-size:.86rem;line-height:1.5;color:var(--slate);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .video-more{display:inline-block;margin-top:1.6rem;font-size:.9rem;text-decoration:none} .video-more:hover{color:var(--signal)} .video-error{border:1px dashed var(--rule);border-radius:2px;background:var(--card);padding:2.4rem 1.5rem;text-align:center;max-width:36rem;margin:0 auto} .video-error[hidden]{display:none} .video-error p{color:var(--slate);margin-bottom:1.1rem} .video-card.is-skeleton{pointer-events:none;cursor:default;box-shadow:none;transform:none;border-color:var(--rule)} .video-card.is-skeleton:hover,.video-card.is-skeleton:focus-visible{transform:none;box-shadow:none;border-color:var(--rule)} .skel-line{display:block;height:.7rem;border-radius:2px;margin-bottom:.45rem;background:var(--paper-2)} .skel-line:first-child{width:42%} .skel-line:nth-child(2){width:88%;height:.95rem} .skel-line:nth-child(3){width:72%} .video-thumb.skel,.skel-line{ background-image:linear-gradient(90deg,var(--paper-2) 0%,var(--card) 45%,var(--paper-2) 100%); background-size:200% 100%; animation:skeleton-shimmer 1.4s ease-in-out infinite; } @keyframes skeleton-shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} } .video-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:1.5rem} .video-modal[hidden]{display:none} .video-modal-backdrop{position:absolute;inset:0;background:rgba(12,14,16,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .video-modal-dialog{position:relative;z-index:1;width:min(64rem,100%);background:var(--machine);color:var(--machine-text);border-radius:2px;box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:hidden;animation:video-modal-in .22s ease-out} .video-modal-frame{position:relative;aspect-ratio:16/9;background:#000} .video-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video-modal-caption{margin:0;padding:.85rem 3.2rem .95rem 1.1rem;font-size:.92rem;line-height:1.45;color:#E9E7E1} .video-modal-close{position:absolute;top:.7rem;right:.7rem;z-index:2;width:2.2rem;height:2.2rem;border:0;border-radius:50%;background:rgba(22,24,27,.82);color:#fff;font:inherit;font-size:1.2rem;line-height:1;cursor:pointer} .video-modal-close:hover{background:var(--signal-bright);color:#1A1207} body.video-modal-open{overflow:hidden} @keyframes video-modal-in{ from{opacity:0;transform:translateY(8px) scale(.98)} to{opacity:1;transform:none} } @media(max-width:900px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}} @media(max-width:600px){.video-grid{grid-template-columns:1fr;gap:.9rem}.video-modal{padding:.75rem}} @media(prefers-reduced-motion:reduce){ .video-thumb.skel,.skel-line{animation:none} .video-card,.video-thumb img,.play-badge,.video-thumb::after{transition:none} .video-card:hover,.video-card:focus-visible{transform:none} .video-card:hover .video-thumb img,.video-card:focus-visible .video-thumb img{transform:none} .video-card:hover .play-badge,.video-card:focus-visible .play-badge{transform:none} .video-modal-dialog{animation:none} } /* HubSpot embeds on contact and IR, scoped to .engage-form-card */ .engage-form-card{ background:var(--card); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--shadow); padding:clamp(1.5rem,4vw,2.5rem); max-width:44rem; font-family:var(--sans); color:var(--ink); } .engage-form-card .hbspt-form, .engage-form-card .hs-form, .engage-form-card form.hs-form{ width:100% !important; max-width:none !important; font-family:var(--sans) !important; color:var(--ink) !important; } .engage-form-card fieldset{ border:0 !important; margin:0 0 1rem !important; padding:0 !important; max-width:none !important; width:100% !important; float:none !important; display:block !important; } .engage-form-card fieldset.form-columns-1, .engage-form-card fieldset.form-columns-2, .engage-form-card fieldset.form-columns-3{ display:grid !important; gap:1rem; max-width:none !important; } .engage-form-card fieldset.form-columns-1{grid-template-columns:1fr} .engage-form-card fieldset.form-columns-2{grid-template-columns:1fr 1fr} .engage-form-card fieldset.form-columns-3{grid-template-columns:1fr 1fr 1fr} .engage-form-card .hs-form-field, .engage-form-card .hs-form-field .input{ float:none !important; width:100% !important; max-width:none !important; padding:0 !important; margin:0 !important; } .engage-form-card .hs-form-field{margin:0 !important} .engage-form-card .hs-form-field > label, .engage-form-card .hs-form-field legend.hs-field-desc, .engage-form-card label.hs-form-label{ display:block; font-family:var(--sans) !important; font-size:.72rem !important; font-weight:400 !important; letter-spacing:0 !important; color:var(--slate) !important; margin:0 0 .35rem !important; line-height:1.4; } .engage-form-card .hs-form-required, .engage-form-card .hs-form-required span{ color:var(--signal) !important; margin-left:.15rem; } .engage-form-card .hs-field-desc{ font-size:.78rem; color:var(--slate); margin:.2rem 0 .4rem; } .engage-form-card .hs-input, .engage-form-card input.hs-input, .engage-form-card textarea.hs-input, .engage-form-card select.hs-input{ display:block !important; width:100% !important; max-width:none !important; box-sizing:border-box !important; font-family:var(--sans) !important; font-size:1rem !important; font-weight:400 !important; line-height:1.5 !important; color:var(--ink) !important; background:var(--paper) !important; border:1px solid var(--rule) !important; border-radius:7px !important; padding:.8rem 1rem !important; box-shadow:none !important; outline:0 !important; height:auto !important; min-height:0 !important; } .engage-form-card textarea.hs-input{ min-height:7rem !important; resize:vertical; } .engage-form-card .hs-input::placeholder{ color:var(--slate); opacity:.85; } .engage-form-card .hs-input:focus, .engage-form-card .hs-input:focus-visible, .engage-form-card input.hs-input:focus, .engage-form-card textarea.hs-input:focus, .engage-form-card select.hs-input:focus{ outline:3px solid var(--cool) !important; outline-offset:2px !important; border-color:var(--ink) !important; box-shadow:none !important; } .engage-form-card input[type="checkbox"].hs-input, .engage-form-card input[type="radio"].hs-input{ display:inline-block !important; width:auto !important; max-width:none !important; height:auto !important; padding:0 !important; margin:.2rem .55rem 0 0 !important; border-radius:3px !important; box-shadow:none !important; } .engage-form-card .inputs-list{ list-style:none; margin:0; padding:0; } .engage-form-card .hs-form-booleancheckbox-display, .engage-form-card .hs-form-checkbox-display, .engage-form-card .hs-form-radio-display{ display:flex; align-items:flex-start; gap:.15rem; font-size:.86rem; color:var(--ink); line-height:1.45; } .engage-form-card .legal-consent-container, .engage-form-card .legal-consent-container .hs-richtext, .engage-form-card .legal-consent-container p{ font-size:.78rem !important; color:var(--slate) !important; line-height:1.55; } .engage-form-card .hs_submit, .engage-form-card .hs-submit, .engage-form-card .hs_submit .actions{ margin-top:.35rem; padding:0 !important; float:none !important; text-align:left !important; } .engage-form-card .hs-button, .engage-form-card input.hs-button, .engage-form-card input[type="submit"].hs-button, .engage-form-card .hs-button.primary{ appearance:none; -webkit-appearance:none; display:inline-block !important; width:auto !important; max-width:100%; height:auto !important; margin:0 !important; background:var(--btn-bg) !important; background-image:none !important; color:var(--btn-ink) !important; border:0 !important; border-radius:999px !important; padding:.8rem 1.5rem !important; font-family:var(--sans) !important; font-size:.94rem !important; font-weight:650 !important; line-height:1.5 !important; letter-spacing:0 !important; text-shadow:none !important; text-transform:none !important; cursor:pointer; box-shadow:0 3px 10px #F28A1615 !important; transition:background-color .15s,transform .15s; } .engage-form-card .hs-button:hover, .engage-form-card input.hs-button:hover, .engage-form-card input[type="submit"].hs-button:hover{ background:var(--btn-hover) !important; background-image:none !important; transform:translateY(-1px); } .engage-form-card .hs-button:focus, .engage-form-card .hs-button:focus-visible{ outline:3px solid var(--cool) !important; outline-offset:2px !important; } .engage-form-card .hs-input.error, .engage-form-card .hs-input.invalid, .engage-form-card .invalid.error .hs-input, .engage-form-card input.hs-input.error, .engage-form-card textarea.hs-input.error{ border-color:#c0392b !important; } .engage-form-card .hs-error-msgs, .engage-form-card ul.no-list.hs-error-msgs{ list-style:none; margin:.35rem 0 0 !important; padding:0 !important; } .engage-form-card .hs-error-msgs label, .engage-form-card label.hs-error-msg, .engage-form-card .hs-error-msg{ color:#c0392b !important; font-size:.78rem !important; font-weight:400 !important; } .engage-form-card .hs_error_rollup, .engage-form-card .hs-error-msgs.hs-main-font-element{ color:#c0392b !important; } .engage-form-card .submitted-message{ font-size:1rem; line-height:1.6; color:var(--ink); } [data-theme="dark"] .engage-form-card .hs-input.error, [data-theme="dark"] .engage-form-card .hs-input.invalid, [data-theme="dark"] .engage-form-card .invalid.error .hs-input{ border-color:#f07167 !important; } [data-theme="dark"] .engage-form-card .hs-error-msgs label, [data-theme="dark"] .engage-form-card label.hs-error-msg, [data-theme="dark"] .engage-form-card .hs-error-msg, [data-theme="dark"] .engage-form-card .hs_error_rollup{ color:#f07167 !important; } /* Forms without fieldsets (careers) stack fields with no gap; lay them out on a grid. */ .engage-form-card form.hs-form{ display:grid !important; grid-template-columns:1fr 1fr; gap:1.1rem 1rem; } .engage-form-card form.hs-form>*{grid-column:1/-1;min-width:0} .engage-form-card form.hs-form>.hs_firstname, .engage-form-card form.hs-form>.hs_lastname{grid-column:auto} .engage-form-card form.hs-form>fieldset{margin:0 !important} .engage-form-card .hs_submit{margin-top:.6rem} /* File input: dashed drop area with a secondary-style chooser. */ .engage-form-card input[type="file"].hs-input{ padding:.65rem .75rem !important; border-style:dashed !important; font-size:.9rem !important; color:var(--slate) !important; cursor:pointer; } .engage-form-card input[type="file"].hs-input::file-selector-button{ appearance:none; font:inherit; font-size:.86rem; font-weight:600; color:var(--ink); background:transparent; border:1px solid var(--ink); border-radius:999px; padding:.45rem 1rem; margin:0 .85rem 0 0; cursor:pointer; transition:background-color .15s,color .15s; } .engage-form-card input[type="file"].hs-input:hover::file-selector-button{ background:var(--ink); color:var(--paper); } /* Careers: copy beside the form. */ .apply-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44rem);gap:3rem 4rem;align-items:start} .apply-copy .sechead{margin-bottom:0} .apply-copy .standfirst{margin-top:2.25rem} .apply-copy .standfirst div{max-width:17rem} @media(max-width:900px){ .apply-grid{grid-template-columns:1fr;gap:2.5rem} } @media(max-width:600px){ .engage-form-card{border-radius:10px} .engage-form-card fieldset.form-columns-2, .engage-form-card fieldset.form-columns-3, .engage-form-card form.hs-form{ grid-template-columns:1fr !important; } .engage-form-card form.hs-form>.hs_firstname, .engage-form-card form.hs-form>.hs_lastname{grid-column:1/-1} .engage-form-card .hs-button, .engage-form-card input.hs-button, .engage-form-card input[type="submit"].hs-button{width:100% !important} } @media(prefers-reduced-motion:reduce){ .engage-form-card .hs-button, .engage-form-card input.hs-button{ transition:none; } .engage-form-card .hs-button:hover, .engage-form-card input.hs-button:hover{ transform:none; } } /* ============================================================ Dark theme corrections: components that hardcode light surfaces. ============================================================ */ [data-theme="dark"] .irbar{background:var(--machine);color:var(--machine-text);border-bottom:1px solid var(--rule-soft)} [data-theme="dark"] body.home .hero{ --paper:#151B21;--paper-2:#0E1216;--card:#1F272F; --ink:#F4F6F7;--slate:#AEB7BF;--rule:#354049;--rule-soft:#2B353E; --signal:#A9B2B9;--signal-bright:#8A969F;--steel:#6E7A83;--cool:#8AA0B2; --btn-bg:#F4F6F7;--btn-ink:#0A1821;--btn-hover:#FFFFFF; color-scheme:dark; } [data-theme="dark"] body.home .hero .b2{background:transparent} [data-theme="dark"] body.home .hero .orbit{border-color:#56616A} [data-theme="dark"] body.home .hero .orbit-outer{border-color:#434D55} [data-theme="dark"] body.home .hero .orbit-inner{border-color:#323B42} [data-theme="dark"] body.home .hero .orbit-core{border-color:#56616A;background:#1F272F;box-shadow:none} [data-theme="dark"] body.home .hero .orbit-core>span{color:#F4F6F7} [data-theme="dark"] body.home .hero .orbit-core small, [data-theme="dark"] body.home .hero .orbit-key{color:#A9B2B9} [data-theme="dark"] body.home .hero .orbit-map .orbit-point:not(.orbit-trail){box-shadow:0 0 0 1px #0A0D10} [data-theme="dark"] body.home main>section#practices, [data-theme="dark"] body.home main>section.close{background:var(--card)} [data-theme="dark"] body.home main>section#built{background:var(--paper)} [data-theme="dark"] .nav{background:var(--paper-2)} [data-theme="dark"] footer{background:var(--paper-2)} [data-theme="dark"] .panel{background:var(--card)} [data-theme="dark"] main>section:nth-child(even) .panel{background:var(--paper)} /* Light nav sits on white so the tinted hero beneath reads as its own band. */ :root:not([data-theme="dark"]) .nav{background:var(--card);border-bottom-color:var(--rule);box-shadow:0 1px 0 #0A182114} .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}