/* ============================================================ KLB Consulting Group — served site stylesheet (uploads/klb-css/site.css) Global, presentation-only rules. Grows per panel. Source is commented; the served copy is this file (minified at the perf phase). ============================================================ */ /* Lucide stroke icons: never fill, always stroke currentColor (Elementor colours Icon-widget SVGs via `fill` by default — wrong for stroke icons, and its per-element fill rule beats a non-important global, so force it). */ .elementor-icon svg, .elementor-button-icon svg, .elementor-icon-list-icon svg, .klb-ico svg, .e-n-menu svg { fill: none !important; stroke: currentColor; } .elementor-icon svg [fill]:not([fill="none"]) { fill: none !important; } /* Design elevation tokens (navy-tinted, restrained) — from the DS elevation.css */ :root{ --klb-shadow-xs:0 1px 2px rgba(30,36,84,.06); --klb-shadow-sm:0 1px 3px rgba(30,36,84,.08), 0 1px 2px rgba(30,36,84,.06); --klb-shadow-md:0 4px 12px rgba(30,36,84,.10), 0 2px 4px rgba(30,36,84,.06); --klb-shadow-lg:0 12px 28px rgba(30,36,84,.12), 0 4px 10px rgba(30,36,84,.07); --klb-shadow-xl:0 24px 56px rgba(30,36,84,.16), 0 8px 18px rgba(30,36,84,.08); /* ClosingCTA photo bg (root-relative so it survives the domain cutover) */ --klb-contact-bg:url("/wp-content/uploads/2026/07/contact-bg.webp"); } /* icon-in-shape recipe (engine trap #5): centre an SVG inside a circle/shape. */ .icon-in-shape, .icon-in-shape .elementor-icon-wrapper, .icon-in-shape .elementor-icon { display: flex; align-items: center; justify-content: center; line-height: 0; } .icon-in-shape svg { display: block; } /* ============================================================ SITE HEADER (Theme Builder) — fixed, transparent over hero, frosted white on scroll. Matches the design's SiteHeader. ============================================================ */ .klb-header{ position:fixed; top:0; left:0; right:0; z-index:1000; width:100%; padding-top:10px; background:transparent; border-bottom:1px solid transparent; transition:background .22s ease, box-shadow .22s ease, border-color .22s ease; } .klb-header.scrolled{ background:rgba(248,249,250,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom-color:#d9dde4; box-shadow:0 1px 2px rgba(16,20,57,.06); } .klb-header > .e-con-inner, .klb-header > .e-con-inner > .klb-header-inner{ width:100%; } .klb-header-inner{ width:100%; } .klb-header-inner > .e-con-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:80px; max-width:1380px; margin:0 auto; padding-inline:clamp(20px,4vw,40px); transition:height .22s ease; } .klb-header.scrolled .klb-header-inner > .e-con-inner{ height:68px; } /* logo — dark asset, inverted to white while transparent */ .klb-logo img{ width:132px; height:auto; display:block; transition:filter .22s ease; } .klb-header:not(.scrolled) .klb-logo img{ filter:brightness(0) invert(1); } /* nav links */ .klb-nav .elementor-nav-menu > li > a.elementor-item{ font-family:Montserrat,sans-serif; font-size:14px; font-weight:600; letter-spacing:.005em; padding:9px 13px !important; border-radius:6px; white-space:nowrap; color:#fff; transition:color .14s, background .14s; } .klb-header.scrolled .klb-nav .elementor-nav-menu > li > a.elementor-item{ color:#3c4350; } .klb-nav .elementor-nav-menu > li > a.elementor-item:hover{ background:rgba(255,255,255,.14); color:#fff; } .klb-header.scrolled .klb-nav .elementor-nav-menu > li > a.elementor-item:hover{ background:#f2f3f9; color:#2a3168; } /* current-page item must NOT change colour — identical to the rest (kit forces an accent colour on the active item, so override with !important). */ .klb-nav .elementor-nav-menu > li.elementor-item-active > a.elementor-item, .klb-nav .elementor-nav-menu > li.current-menu-item > a.elementor-item{ color:#fff !important; background:transparent !important; } .klb-header.scrolled .klb-nav .elementor-nav-menu > li.elementor-item-active > a.elementor-item, .klb-header.scrolled .klb-nav .elementor-nav-menu > li.current-menu-item > a.elementor-item{ color:#3c4350 !important; } .klb-nav .elementor-nav-menu > li.elementor-item-active > a.elementor-item:hover{ background:rgba(255,255,255,.14) !important; } .klb-header.scrolled .klb-nav .elementor-nav-menu > li.elementor-item-active > a.elementor-item:hover{ background:#f2f3f9 !important; color:#2a3168 !important; } /* dropdown caret */ .klb-nav .elementor-nav-menu .sub-arrow, .klb-nav .elementor-item-anchor + .sub-arrow{ opacity:.7; } /* Desktop dropdown indicator. Elementor renders NO submenu indicator element at all on the main menu (engine trap: `submenu_icon` is ignored and SmartMenus only injects .sub-arrow on the mobile dropdown), so the three parents with flyouts had no affordance whatsoever. Draw it as an ::after chevron on the anchor: `background:currentColor` + mask means it follows the link colour automatically in BOTH header states (white over the hero, navy once .scrolled) with no extra rules, and display:inline-block leaves the anchor's own layout model untouched. Rotates 180deg when the flyout is open. */ @media (min-width:1025px){ /* NB: Elementor already defines `.elementor-item::after` for its nav pointer (underline/background) effect as position:absolute with its own inset and margins. Those win over a plain declaration and fling the chevron to the left of the label, so the layout properties must be reset with !important. This menu's hover state is a background pill, not a pointer underline, so nothing visual is lost. */ .klb-nav .elementor-nav-menu > li.menu-item-has-children > a.elementor-item::after{ content:""; display:inline-block !important; vertical-align:middle; position:static !important; inset:auto !important; margin:-2px 0 0 7px !important; width:11px !important; height:11px !important; background:currentColor !important; -webkit-mask:var(--klb-chevd) center/contain no-repeat; mask:var(--klb-chevd) center/contain no-repeat; /* Elementor's pointer rule also ships opacity:0 (it fades the underline in on hover) and beats a plain declaration, which rendered the chevron invisible. */ transition:transform .2s ease; opacity:.9 !important; } .klb-nav .elementor-nav-menu > li.menu-item-has-children:hover > a.elementor-item::after, .klb-nav .elementor-nav-menu > li.menu-item-has-children.highlighted > a.elementor-item::after, .klb-nav .elementor-nav-menu > li.menu-item-has-children > a.elementor-item[aria-expanded="true"]::after{ transform:rotate(180deg); opacity:1 !important; } } /* dropdown flyout — white card, navy top rule, chevron rows */ .klb-nav .elementor-nav-menu--dropdown, .klb-nav ul.sub-menu{ transform:none !important; left:0 !important; min-width:320px; background:#fff; border-top:3px solid #2a3168; border-radius:0 0 12px 12px; box-shadow:0 24px 48px -12px rgba(16,20,57,.25); padding:8px !important; margin-top:12px; } .klb-nav .sub-menu li a.elementor-sub-item{ display:flex; align-items:center; gap:14px; padding:13px 16px !important; border-radius:8px; font-family:Montserrat,sans-serif; font-size:15px; font-weight:600; color:#1e2454; letter-spacing:-.005em; white-space:nowrap; background:transparent !important; } .klb-nav .sub-menu li a.elementor-sub-item::before{ content:""; flex:none; width:16px; height:16px; background:currentColor; -webkit-mask:var(--klb-chev) center/contain no-repeat; mask:var(--klb-chev) center/contain no-repeat; color:#4a5396; } .klb-nav .sub-menu li a.elementor-sub-item:hover{ background:#f2f3f9 !important; } :root{ --klb-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5396' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); --klb-chevd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231e2454' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Request-a-quote button: primary navy default (scrolled), inverse white while transparent */ .klb-quote .elementor-button{ font-family:Montserrat,sans-serif; font-weight:700; font-size:14px; letter-spacing:.01em; border-radius:6px; padding:11px 20px; background:#1e2454 !important; color:#fff !important; border:1px solid #1e2454 !important; } .klb-header:not(.scrolled) .klb-quote .elementor-button{ background:#fff !important; color:#1e2454 !important; border-color:#fff !important; } .klb-quote .elementor-button:hover{ background:#2a3168 !important; } .klb-header:not(.scrolled) .klb-quote .elementor-button:hover{ background:#f2f3f9 !important; color:#1e2454 !important; } .klb-quote .elementor-button-icon svg{ stroke:currentColor; } /* mobile-only click-to-call phone icon (hidden on desktop; revealed in the media query) */ .klb-callmob{ display:none; } /* mobile: Nav Menu widget's own toggle handles <=1024 */ @media (max-width:1024px){ /* keep the bar to logo + phone + hamburger only (design hides the quote button here — it reappears inside the opened menu); never let the row wrap. */ .klb-header-inner > .e-con-inner{ flex-wrap:nowrap !important; height:72px; } .klb-quote{ display:none !important; } .klb-nav{ margin-left:0 !important; } .klb-header-inner > .e-con-inner{ height:72px; } .klb-header.scrolled .klb-header-inner > .e-con-inner{ height:72px; } /* click-to-call phone icon — pushes itself + the hamburger to the right edge */ .klb-callmob{ display:flex !important; margin-left:auto; align-items:center; } .klb-callmob .elementor-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; } .klb-callmob .elementor-icon svg{ width:24px; height:24px; fill:none !important; stroke:#fff !important; stroke-width:2; } .klb-header.scrolled .klb-callmob .elementor-icon svg{ stroke:#1e2454 !important; } /* hamburger: bold, clearly visible white icon (navy on scroll) */ .klb-nav .elementor-menu-toggle{ display:flex !important; align-items:center; justify-content:center; width:44px; height:44px; color:#fff; } .klb-nav .elementor-menu-toggle svg{ width:30px !important; height:30px !important; fill:#fff !important; } .klb-header.scrolled .klb-nav .elementor-menu-toggle svg{ fill:#1e2454 !important; } /* the closed dropdown container must NOT paint a white strip under the bar */ .klb-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown[aria-hidden="true"]{ display:none !important; } /* top-level mobile menu ONLY (the __container) = full-viewport-width panel under the fixed bar. Nested sub-menus keep their inline/accordion behaviour. */ .klb-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown{ position:fixed !important; left:0 !important; right:0 !important; top:72px !important; width:100vw !important; max-width:100vw !important; background:#fff !important; margin:0 !important; border-radius:0 !important; box-shadow:0 12px 24px rgba(16,20,57,.18); max-height:calc(100vh - 72px); overflow-y:auto; } .klb-nav .elementor-nav-menu--dropdown a.elementor-item{ color:#1e2454 !important; font-size:15px !important; font-weight:600 !important; padding:15px 24px !important; border-bottom:1px solid #eef0f4; } /* current-page items must stay navy in the dropdown — the desktop "keep active item white" rule leaks in and renders them white-on-white (invisible). Higher specificity wins. */ .klb-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown li.current-menu-item > a.elementor-item, .klb-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown li.current-menu-ancestor > a.elementor-item, .klb-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown li.elementor-item-active > a.elementor-item{ color:#1e2454 !important; background:transparent !important; } .klb-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active{ background:#f2f3f9 !important; } .klb-nav .elementor-nav-menu--dropdown .elementor-sub-item{ padding-left:40px !important; } /* --- mobile accordion: parent items expand their children (no anchor navigation) --- */ /* parent link lays out with a chevron pushed to the right */ .klb-nav .elementor-nav-menu--dropdown li.menu-item-has-children > a.elementor-item{ display:flex !important; align-items:center; } /* These used to target `.sub-arrow`, but Elementor renders NO submenu indicator element on either menu, so those rules never matched and the mobile parents had no chevron at all. Draw it as ::after on the anchor instead (the anchor is already display:flex, so margin-left:auto parks it on the right edge). Rotates on .klb-open (set by the wp_footer accordion JS) and on SmartMenus' own aria-expanded, so it is correct however the item was opened. */ .klb-nav .elementor-nav-menu--dropdown li.menu-item-has-children > a.elementor-item::after{ content:""; display:block !important; position:static !important; inset:auto !important; flex:0 0 18px; width:18px !important; height:18px !important; margin:0 0 0 auto !important; background:currentColor !important; -webkit-mask:var(--klb-chevd) center/contain no-repeat; mask:var(--klb-chevd) center/contain no-repeat; transition:transform .2s ease; opacity:.9 !important; } .klb-nav .elementor-nav-menu--dropdown li.menu-item-has-children.klb-open > a.elementor-item::after, .klb-nav .elementor-nav-menu--dropdown li.menu-item-has-children > a.elementor-item[aria-expanded="true"]::after{ transform:rotate(180deg); opacity:1 !important; } /* children collapsed until the parent is tapped open; expanded = flat in-flow block (override the desktop flyout's absolute white card so it doesn't float/overlap) */ .klb-nav .elementor-nav-menu--dropdown li.menu-item-has-children > ul.sub-menu{ display:none !important; } .klb-nav .elementor-nav-menu--dropdown li.menu-item-has-children.klb-open > ul.sub-menu{ display:block !important; position:static !important; min-width:0 !important; width:100% !important; margin:0 !important; padding:0 !important; background:#f7f8fb !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } .klb-nav .elementor-nav-menu--dropdown li.menu-item-has-children.klb-open > ul.sub-menu > li > a.elementor-item{ padding:14px 24px 14px 44px !important; background:transparent !important; font-weight:500 !important; font-size:14px !important; border-bottom:1px solid #eef0f4; } } /* ============================================================ SITE FOOTER (Theme Builder) — matches design SiteFooter. ============================================================ */ .klb-footer{ background:#0c0f29; color:#c4cae0; gap:0 !important; } .klb-footer a{ text-decoration:none; } .klb-footer-top > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(48px,4vw,80px) clamp(20px,4vw,40px) 44px; display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:clamp(28px,3vw,44px); } .klb-foot-logo{ display:inline-flex !important; align-self:flex-start; background:#fff; border-radius:10px; padding:18px 22px; box-shadow:0 4px 12px rgba(0,0,0,.18); } .klb-foot-logo img{ width:132px !important; height:auto !important; max-width:132px !important; display:block; } .klb-foot-blurb, .klb-foot-blurb p{ font-size:14px; line-height:1.65; max-width:38ch; color:#c4cae0 !important; margin:22px 0 0; } .klb-foot-tag, .klb-foot-tag .elementor-heading-title{ font-size:13px; font-weight:700; color:#fff !important; margin:22px 0 0; letter-spacing:.06em; text-transform:uppercase; } .klb-foot-clabel, .klb-foot-clabel .elementor-heading-title{ color:#97a0c8 !important; } .klb-foot-col h4, .klb-foot-col .elementor-heading-title{ font-size:12px; font-weight:700; color:#fff !important; text-transform:uppercase; letter-spacing:.1em; margin:0 0 16px; } .klb-foot-col .elementor-nav-menu{ display:flex; flex-direction:column; gap:11px; } .klb-foot-col .elementor-nav-menu a.elementor-item{ padding:0 !important; font-size:13.5px; font-weight:400 !important; color:#c4cae0; background:transparent !important; line-height:1.3; } .klb-foot-col .elementor-nav-menu a.elementor-item:hover{ color:#fff; } /* rows below the grid */ .klb-foot-row{ border-top:1px solid rgba(255,255,255,.14); } .klb-foot-row > .e-con-inner{ max-width:1380px; margin:0 auto; } .klb-foot-contact > .e-con-inner{ padding:24px clamp(20px,4vw,40px); display:flex; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:24px; flex-wrap:wrap !important; } .klb-foot-contact > .e-con-inner > *{ flex:0 0 auto !important; width:auto !important; } /* Zero the default 20px container flex-gap in the top grid columns; design uses explicit margins. */ .klb-footer-top > .e-con-inner > .e-con{ gap:0 !important; } .klb-foot-contact .klb-foot-cinfo{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; } .klb-foot-contact a, .klb-foot-contact .klb-foot-loc{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:#fff; } .klb-foot-contact .klb-foot-loc{ color:#c4cae0; font-weight:400; } .klb-foot-social{ display:flex; align-items:center; gap:10px; } .klb-foot-social a{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:6px; border:1px solid rgba(255,255,255,.14); color:#c4cae0; } .klb-foot-social a:hover{ color:#fff; border-color:#6973ad; background:rgba(255,255,255,.05); } .klb-foot-certs > .e-con-inner{ padding:28px clamp(20px,4vw,40px); } .klb-foot-certs .klb-foot-clabel{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#97a0c8; margin:0 0 22px !important; } .klb-foot-certrow{ display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; } .klb-foot-certrow > *{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; padding:14px 22px; box-shadow:0 1px 2px rgba(0,0,0,.12); } .klb-foot-certrow img{ height:54px; width:auto; display:block; object-fit:contain; } .klb-foot-legalbar{ max-width:1380px; margin:0 auto; padding:20px clamp(20px,4vw,40px); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; } .klb-foot-legalbar, .klb-foot-legalbar a, .klb-foot-legalbar span{ font-size:12.5px; color:#97a0c8; text-decoration:none; } .klb-foot-links{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .klb-foot-credit{ display:flex; align-items:center; gap:7px; } .klb-foot-credit img{ width:16px; height:16px; display:block; opacity:.85; } @media (max-width:1024px){ .klb-footer-top > .e-con-inner{ grid-template-columns:1fr 1fr; } } /* mobile: sitemap fully stacks, one column, left aligned */ @media (max-width:767px){ .klb-footer-top > .e-con-inner{ grid-template-columns:1fr; } .klb-foot-col, .klb-foot-col .elementor-nav-menu{ text-align:left; } /* divider line below the "Embedded. Compliant. Protected." tagline */ .klb-foot-tag{ padding-bottom:28px !important; border-bottom:1px solid rgba(255,255,255,.14); } /* contact block: phone / email / location each on its own line, left aligned */ .klb-foot-contact > .e-con-inner{ flex-direction:column !important; align-items:flex-start !important; gap:20px !important; } .klb-foot-contact .klb-foot-cinfo{ flex-direction:column !important; align-items:flex-start !important; gap:16px !important; width:100%; } /* certifications: uniform 2-up grid so logos sit in equal cards */ .klb-foot-certrow{ display:grid !important; grid-template-columns:1fr 1fr; gap:12px !important; } .klb-foot-certrow > *{ width:auto !important; padding:16px !important; } .klb-foot-certrow img{ height:auto !important; max-height:46px; max-width:100%; } } /* ============================================================ HOME — HERO — pixel-matched to the design (Header.jsx Hero). Foreground LCP + CSS gradient layers. All values measured from the design at 1440x900. ============================================================ */ .klb-hero{ position:relative; overflow:hidden; height:100vh; min-height:600px; background:#1e2454; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start; } .klb-hero-img{ position:absolute; inset:0; margin:0; z-index:0; } .klb-hero-img img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; object-position:center right; transform:scaleX(-1); } .klb-hero::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,#11142f 0%,#11142f 30%,rgba(16,20,57,.85) 45%,rgba(16,20,57,.35) 66%,rgba(16,20,57,.05) 100%); } .klb-hero::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(0deg,rgba(16,20,57,.5) 0%,transparent 30%); } .klb-hero-content{ position:relative; z-index:3; width:100%; max-width:1380px; margin:0 auto; padding:clamp(100px,13vh,140px) clamp(20px,4vw,40px) clamp(32px,5vh,56px); } /* mobile: tighten the space between the fixed header and the hero eyebrow ~20% (hero is vertically centred, so trimming top padding shifts the eyebrow up by half). */ @media (max-width:767px){ .klb-hero-content{ padding-top:clamp(84px,11vh,120px) !important; } } .klb-hero-inner{ max-width:760px; padding:0; gap:0 !important; } .klb-hero-content{ gap:0 !important; } .klb-hero-eyebrow .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:13px !important; font-weight:700 !important; line-height:1.5; letter-spacing:.16em !important; text-transform:uppercase; color:#97a0c8 !important; margin:0 0 20px; } .klb-hero-h1 .elementor-heading-title{ font-family:Montserrat,sans-serif; font-weight:800 !important; text-transform:uppercase; font-size:clamp(2rem,1.2rem + 3.4vw,3.75rem) !important; line-height:1.03 !important; letter-spacing:-.01em !important; color:#fff !important; margin:0; } .klb-hero-h1 .klb-accent{ color:#97a0c8; } .klb-hero-lead, .klb-hero-lead p{ font-family:Montserrat,sans-serif; font-size:clamp(1.0625rem,1rem + .4vw,1.25rem); line-height:1.6; color:#c4cae0 !important; margin:24px 0 0; max-width:56ch; } .klb-hero-cta{ margin-top:32px; padding:0; } .klb-hero-cta .elementor-button{ height:54px; padding:0 30px; border-radius:4px; background:#fff !important; color:#1e2454 !important; border:1px solid #fff !important; font-family:Montserrat,sans-serif; font-size:16px; font-weight:700; letter-spacing:.01em; display:inline-flex; align-items:center; gap:10px; } .klb-hero-cta .elementor-button:hover{ background:#f2f3f9; } .klb-hero-cta .elementor-button svg{ width:18px; height:18px; } .klb-hero-divider{ height:1px; min-height:1px; background:rgba(255,255,255,.14); margin:28px 0 22px; max-width:560px; padding:0; } .klb-hero-trust{ margin-top:0; } .klb-hero-trust > .elementor-widget-container{ margin:0 !important; padding:0 !important; } .klb-hero-trust .elementor-icon-list-items{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; max-width:560px; margin:0 !important; padding:0 !important; } .klb-hero-trust .elementor-icon-list-item{ display:flex; align-items:center; gap:11px; margin:0 !important; padding:0 !important; } .klb-hero-trust .elementor-icon-list-icon{ width:18px; height:18px; flex:none; margin:0 !important; display:flex; align-items:center; justify-content:center; } .klb-hero-trust .elementor-icon-list-icon svg{ width:18px !important; height:18px !important; stroke:#97a0c8 !important; fill:none !important; } .klb-hero-trust .elementor-icon-list-text, .klb-hero-trust .elementor-icon-list-item > a, .klb-hero-trust .elementor-icon-list-item .elementor-icon-list-text{ font-family:Montserrat,sans-serif; font-size:14px; font-weight:500 !important; color:#fff !important; letter-spacing:.01em; padding:0 !important; } @media (max-width:520px){ .klb-hero-trust .elementor-icon-list-items{ grid-template-columns:1fr; } } /* ============================================================ CTA STRIP (reused section template) — navy-900 bar under the hero. ============================================================ */ .klb-cta-strip{ background:#11142f; border-bottom:1px solid rgba(255,255,255,.14); } .klb-cta-strip-inner > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(22px,2.2vw,32px) clamp(20px,4vw,40px); display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:20px; flex-wrap:wrap !important; } .klb-cta-strip-inner > .e-con-inner > .e-con{ flex:0 1 auto !important; width:auto !important; } .klb-cta-h3 .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:clamp(1.125rem,0.95rem + 0.6vw,1.375rem) !important; font-weight:700 !important; color:#fff !important; letter-spacing:-.015em !important; margin:0; line-height:1.25; } .klb-cta-sub, .klb-cta-sub p{ font-family:Montserrat,sans-serif; font-size:14px; line-height:1.5; color:#c4cae0 !important; margin:6px 0 0; } .klb-phone-link{ display:inline-flex; align-items:center; gap:9px; font-family:Montserrat,sans-serif; font-weight:700; text-decoration:none; white-space:nowrap; } .klb-cta-btn .elementor-button{ height:44px; background:#fff !important; color:#1e2454 !important; font-family:Montserrat,sans-serif; font-size:14px; font-weight:600; border-radius:4px; padding:0 20px; display:inline-flex; align-items:center; gap:9px; border:1px solid #fff !important; letter-spacing:.01em; } .klb-cta-btn .elementor-button:hover{ background:#f2f3f9; } .klb-cta-btn .elementor-button svg{ width:16px; height:16px; } @media (max-width:640px){ .klb-cta-strip-inner > .e-con-inner{ flex-direction:column !important; align-items:flex-start !important; } } /* ============================================================ SHARED SECTION ATOMS — eyebrow / h2 / lead (used across panels) ============================================================ */ .klb-eyebrow .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:12px !important; font-weight:600 !important; letter-spacing:.16em !important; text-transform:uppercase; color:#38407e !important; margin:0 0 14px !important; } .klb-eyebrow.klb-on-dark .elementor-heading-title{ color:#97a0c8 !important; } .klb-h2 .elementor-heading-title{ font-family:Montserrat,sans-serif; font-weight:700 !important; font-size:clamp(1.75rem,1.2rem + 1.8vw,2.6rem) !important; line-height:1.12 !important; letter-spacing:-.02em !important; color:#1e2454 !important; margin:0; text-wrap:balance; } .klb-h2.klb-on-dark .elementor-heading-title{ color:#fff !important; } .klb-lead, .klb-lead p{ font-family:Montserrat,sans-serif; font-size:clamp(1rem,0.95rem + 0.3vw,1.1875rem); line-height:1.6; color:#6f7a8d !important; margin:16px 0 0; } .klb-lead.klb-on-dark, .klb-lead.klb-on-dark p{ color:#c4cae0 !important; } /* ============================================================ HOME — WHAT IS panel (light) — 2-col intro + 3-col step grid ============================================================ */ .klb-whatis{ background:#f8f9fa; } .klb-whatis-inner > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(56px,5vw,96px) clamp(20px,4vw,40px); } .klb-whatis-top{ display:grid !important; grid-template-columns:0.95fr 1.05fr; gap:clamp(28px,4vw,64px); align-items:start; } .klb-whatis-para, .klb-whatis-para p{ font-family:Montserrat,sans-serif; font-size:clamp(1rem,0.95rem + 0.3vw,1.125rem); line-height:1.65; color:#3c4350 !important; margin:0; } .klb-whatis-para.mt, .klb-whatis-para.mt p{ margin-top:16px; } .klb-whatis-steps{ margin-top:clamp(40px,4.5vw,64px); padding-top:clamp(32px,3.5vw,48px); border-top:1px solid #d9dde4; } .klb-whatis-grid{ display:grid !important; grid-template-columns:repeat(3,1fr); column-gap:clamp(32px,4vw,72px); row-gap:clamp(32px,3.5vw,52px); } .klb-whatis-step{ display:flex !important; flex-direction:row !important; gap:20px !important; align-items:flex-start !important; } .klb-whatis-badge{ flex:none !important; width:62px; height:62px; border-radius:6px; background:#1e2454; align-self:flex-start; display:flex !important; align-items:center !important; justify-content:center !important; } .klb-whatis-badge .elementor-widget-icon, .klb-whatis-badge .elementor-icon{ display:flex; align-items:center; justify-content:center; line-height:0; } .klb-whatis-badge svg{ width:26px !important; height:26px !important; stroke:#fff !important; stroke-width:1.75; } .klb-step-h3 .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:clamp(1.125rem,1rem + 0.4vw,1.375rem) !important; font-weight:700 !important; color:#1e2454 !important; margin:6px 0 8px !important; letter-spacing:-.015em !important; line-height:1.2; } .klb-step-body, .klb-step-body p{ font-family:Montserrat,sans-serif; font-size:15px; line-height:1.55; color:#6f7a8d !important; margin:0; } @media (max-width:940px){ .klb-whatis-grid{ grid-template-columns:1fr 1fr; } .klb-whatis-top{ grid-template-columns:1fr; } } @media (max-width:560px){ .klb-whatis-grid{ grid-template-columns:1fr; } } /* mobile: keep each step as icon-left + heading/body inline on the right (Elementor forces child containers to full width <=767 + wrap, which otherwise stacks them). */ @media (max-width:767px){ .klb-whatis-step{ flex-wrap:nowrap !important; align-items:flex-start !important; } .klb-whatis-badge{ flex:0 0 62px !important; width:62px !important; } .klb-whatis-step > :last-child{ width:auto !important; flex:1 1 auto !important; min-width:0 !important; } } /* ============================================================ HOME — SERVICES panel (white) — header + Loop Carousel of service cards ============================================================ */ .klb-services{ background:#fff; } .klb-services-inner > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(56px,5vw,96px) clamp(20px,4vw,40px); } .klb-services-head{ display:flex !important; flex-direction:row !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px; flex-wrap:wrap !important; margin-bottom:clamp(32px,3.5vw,52px); } .klb-services-head > .e-con{ flex:0 1 auto !important; width:auto !important; } .klb-services-head-left{ max-width:900px; } .klb-services-head-left .klb-lead{ text-wrap:balance; } .klb-services-h2 .elementor-heading-title{ font-family:Montserrat,sans-serif; font-weight:800 !important; text-transform:uppercase; font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem) !important; line-height:1.05 !important; letter-spacing:-.01em !important; color:#1e2454 !important; margin:0; text-wrap:balance; } .klb-services-h2 .klb-accent2{ color:#4a5396 !important; } .klb-viewall .elementor-button{ background:transparent !important; color:#1e2454 !important; border:1px solid #bcc3cf !important; font-family:Montserrat,sans-serif; font-weight:600; font-size:14px; border-radius:6px; padding:12px 22px; display:inline-flex; align-items:center; gap:9px; } .klb-viewall .elementor-button:hover{ background:#f2f3f9 !important; } .klb-viewall .elementor-button svg{ width:16px; height:16px; } /* Loop carousel + card */ .klb-svc-loop .swiper-slide{ height:auto; } /* give the swiper room below so it stops clipping the card shadow into a hard line */ .klb-svc-loop .swiper{ overflow:hidden !important; padding-bottom:44px !important; } /* iOS Safari: the swiper pagination can escape overflow and float over later sections; isolating the loop confines its stacking so following sections paint over any stray dots */ .klb-svc-loop, .klb-tst-loop{ isolation:isolate; } /* "Services Overview" is a mobile-only first item in the Services dropdown (desktop parent already links to the overview page, so hide it there) */ @media (min-width:1025px){ .klb-nav .klb-svc-overview-mobile{ display:none !important; } } .klb-svc-loop .swiper-slide > .elementor-loop-item, .klb-svc-loop .elementor-loop-item{ height:auto !important; } .klb-svc-card{ position:relative; height:460px !important; min-height:460px !important; border-radius:10px; overflow:hidden; background:#1e2454; box-shadow:0 26px 54px -22px rgba(16,20,57,.14); transition:transform .22s ease, box-shadow .22s ease; } .klb-svc-card:hover{ transform:translateY(-4px); box-shadow:0 34px 64px -24px rgba(16,20,57,.20); } .klb-svc-photo{ position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; z-index:0; } .klb-svc-card::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(12,15,41,.94) 6%, rgba(12,15,41,.35) 48%, rgba(12,15,41,.12) 100%); } .klb-svc-badge{ position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:2; width:52px; height:52px; border-radius:50%; background:#fff; display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 1px 3px rgba(0,0,0,.18); } .klb-svc-badge svg{ width:24px !important; height:24px !important; stroke:#1e2454 !important; fill:none !important; } .klb-svc-bottom{ position:absolute; left:24px; right:24px; bottom:24px; z-index:2; display:flex !important; flex-direction:column !important; gap:18px; align-items:flex-start !important; } .klb-svc-title-h{ font-family:Montserrat,sans-serif; font-weight:700; text-transform:uppercase; font-size:1.375rem; line-height:1.15; letter-spacing:.005em; color:#fff; margin:0; white-space:pre-line; } .klb-svc-plus{ position:relative; width:48px; height:48px; border-radius:50%; background:#1e2454; border:1px solid rgba(255,255,255,.15); flex:none; } .klb-svc-plus::before,.klb-svc-plus::after{ content:""; position:absolute; background:#fff; border-radius:1px; } .klb-svc-plus::before{ top:23px; left:15px; width:18px; height:2px; } .klb-svc-plus::after{ left:23px; top:15px; width:2px; height:18px; } .klb-cardlink{ position:absolute; inset:0; z-index:3; } /* card link stretch: neutralise shortcode wrapper positioning */ .klb-svc-card .elementor-widget-shortcode, .klb-svc-card .elementor-widget-shortcode > .elementor-widget-container{ position:static !important; } /* swiper nav arrows: white circles with a thin navy chevron (inject via mask; Elementor's eicon is fill-based and renders invisible here) */ .klb-svc-loop .elementor-swiper-button{ width:48px !important; height:48px !important; background:#fff !important; border-radius:50%; box-shadow:0 12px 28px -8px rgba(16,20,57,.4); display:flex !important; align-items:center; justify-content:center; } .klb-svc-loop .elementor-swiper-button i, .klb-svc-loop .elementor-swiper-button svg, .klb-svc-loop .elementor-swiper-button .eicon{ display:none !important; } .klb-svc-loop .elementor-swiper-button::after{ content:""; width:22px; height:22px; background:#1e2454; -webkit-mask:var(--klb-chev-nav) center/22px 22px no-repeat; mask:var(--klb-chev-nav) center/22px 22px no-repeat; } .klb-svc-loop .elementor-swiper-button-prev::after{ transform:scaleX(-1); } /* small gap between the arrow and the card edge (design: 6px inset) */ .klb-svc-loop .elementor-swiper-button-prev{ left:6px !important; right:auto !important; } .klb-svc-loop .elementor-swiper-button-next{ right:6px !important; left:auto !important; } :root{ --klb-chev-nav:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); } /* pagination: navy pill (active) + grey circles, with clear space above (design ~36-48px) */ .klb-svc-loop .swiper-pagination{ position:relative !important; margin-top:40px !important; } .klb-svc-loop .swiper-pagination-bullet{ width:8px !important; height:8px !important; background:#bcc3cf !important; opacity:1 !important; border-radius:999px !important; margin:0 5px !important; transition:width .22s ease; } .klb-svc-loop .swiper-pagination-bullet-active{ width:30px !important; background:#1e2454 !important; border-radius:999px !important; } /* ============================================================ HOME — STATS band (navy) — 4 numbered stats (Counter widget). Stat numbers use Venera (the design's display face). ============================================================ */ @font-face{ font-family:'Venera'; src:url('../klb-fonts/venera-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } .klb-stats{ background:#1e2454; overflow:hidden; } .klb-stats-inner > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(44px,4vw,72px) clamp(20px,4vw,40px); display:grid !important; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px); } .klb-stat{ border-left:1px solid rgba(255,255,255,.14); padding-left:22px !important; } .klb-stat .elementor-widget-container, .klb-stat .elementor-counter{ text-align:left !important; } .klb-stat .elementor-counter, .klb-stat .elementor-counter-number-wrapper{ align-items:flex-start !important; justify-content:flex-start !important; } .klb-stat .elementor-counter-number-wrapper{ font-family:'Venera',Montserrat,sans-serif !important; font-size:52px !important; font-weight:700 !important; color:#fff !important; line-height:1; letter-spacing:.03em; text-align:left !important; } .klb-stat .elementor-counter-number{ font-family:'Venera',Montserrat,sans-serif !important; font-size:52px !important; font-weight:700 !important; color:#fff !important; text-align:left !important; } .klb-stat .elementor-counter-title{ display:none !important; } .klb-stat-label .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:14px !important; font-weight:600 !important; color:#fff !important; margin:10px 0 0 !important; letter-spacing:-.005em; } .klb-stat-sub, .klb-stat-sub p{ font-family:Montserrat,sans-serif; font-size:12.5px; line-height:1.5; color:#c4cae0 !important; margin:6px 0 0; } @media (max-width:940px){ .klb-stats-inner > .e-con-inner{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .klb-stats-inner > .e-con-inner{ grid-template-columns:1fr 1fr; } } /* ============================================================ HOME — WHO WE ARE (white) — intro + 2x2 value grid + photo ============================================================ */ .klb-wwa{ background:#fff; } .klb-wwa-inner > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(56px,5vw,96px) clamp(20px,4vw,40px); display:grid !important; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,4vw,64px); align-items:stretch; } .klb-lead-body, .klb-lead-body p{ color:#3c4350 !important; } .klb-wwa-vals{ display:grid !important; grid-template-columns:1fr 1fr; gap:20px 28px; margin:30px 0 !important; } .klb-wwa-val{ display:flex !important; flex-direction:row !important; gap:13px; align-items:flex-start !important; } .klb-wwa-badge{ flex:none !important; width:38px; height:38px; border-radius:6px; background:#f2f3f9; margin-top:1px; display:flex !important; align-items:center !important; justify-content:center !important; } .klb-wwa-badge .elementor-widget-icon, .klb-wwa-badge .elementor-icon, .klb-wwa-badge .elementor-icon-wrapper{ display:flex !important; align-items:center !important; justify-content:center !important; line-height:0 !important; margin:0 !important; padding:0 !important; } .klb-wwa-badge svg{ width:19px !important; height:19px !important; stroke:#2a3168 !important; display:block; } .klb-wwa-vh .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:15.5px !important; font-weight:700 !important; color:#1e2454 !important; letter-spacing:-.01em; margin:0 !important; } .klb-wwa-vb, .klb-wwa-vb p{ font-family:Montserrat,sans-serif; font-size:13.5px; line-height:1.5; color:#6f7a8d !important; margin-top:3px; } .klb-wwa-img{ align-self:stretch; margin:0; } .klb-wwa-img img{ width:100% !important; height:100% !important; min-height:clamp(340px,38vw,480px); object-fit:cover; object-position:62% center; border-radius:10px; border:1px solid #d9dde4; box-shadow:0 1px 2px rgba(16,20,57,.08); display:block; } /* reusable primary (navy) button */ .klb-primary-btn .elementor-button{ background:#1e2454 !important; color:#fff !important; border:1px solid #1e2454 !important; font-family:Montserrat,sans-serif; font-weight:700; font-size:14px; border-radius:6px; padding:13px 24px; display:inline-flex; align-items:center; gap:9px; } .klb-primary-btn .elementor-button:hover{ background:#2a3168 !important; } .klb-primary-btn .elementor-button svg{ width:16px !important; height:16px !important; } @media (max-width:880px){ .klb-wwa-inner > .e-con-inner{ grid-template-columns:1fr; } .klb-wwa-img{ display:none; } } @media (max-width:560px){ .klb-wwa-vals{ grid-template-columns:1fr; } } /* mobile: keep icon-left with heading/body inline on the right for the value items (Who We Are + How We Help + Capabilities). Elementor forces child containers full width <=767 + wrap, which otherwise stacks icon above text. */ @media (max-width:767px){ .klb-wwa-val, .klb-hwh-val, .klb-capd-val{ flex-wrap:nowrap !important; align-items:flex-start !important; } .klb-wwa-badge, .klb-hwh-badge, .klb-capd-badge{ flex:0 0 auto !important; } .klb-wwa-val > :last-child, .klb-hwh-val > :last-child, .klb-capd-val > :last-child{ width:auto !important; flex:1 1 auto !important; min-width:0 !important; } } /* ============================================================ WHY CHOOSE US (reused section template) — light, 3 top-accent cards ============================================================ */ .klb-why{ background:#f8f9fa; } .klb-why .klb-h2 .klb-accent{ color:#4a5396; } .klb-why-inner > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(56px,5vw,96px) clamp(20px,4vw,40px); } .klb-why-head{ max-width:720px; margin-bottom:clamp(32px,3.5vw,48px) !important; } .klb-why-grid{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:20px; } .klb-why-card{ background:#fff; border-top:3px solid #1e2454; border-radius:0 0 10px 10px; box-shadow:var(--klb-shadow-md); padding:30px 28px !important; transition:transform .2s ease, box-shadow .2s ease; } .klb-why-card:hover{ transform:translateY(-3px); box-shadow:var(--klb-shadow-lg); } .klb-why-badge{ width:48px; height:48px; border-radius:6px; background:#1e2454; margin-bottom:20px !important; display:flex !important; align-items:center !important; justify-content:center !important; } .klb-why-badge .elementor-icon, .klb-why-badge .elementor-icon-wrapper{ display:flex !important; align-items:center; justify-content:center; line-height:0 !important; } .klb-why-badge svg{ width:23px !important; height:23px !important; stroke:#fff !important; } .klb-why-ch .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:18.5px !important; font-weight:700 !important; color:#1e2454 !important; margin:0 0 10px !important; letter-spacing:-.015em; line-height:1.3; } .klb-why-cb, .klb-why-cb p{ font-family:Montserrat,sans-serif; font-size:14.5px; line-height:1.6; color:#6f7a8d !important; margin:0; } @media (max-width:940px){ .klb-why-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .klb-why-grid{ grid-template-columns:1fr; } } /* ============================================================ HOME — OUR APPROACH (white) — Nested Tabs (4 tabs x 4 cards) ============================================================ */ .klb-approach{ background:#fff; } .klb-approach-inner > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(56px,5vw,96px) clamp(20px,4vw,40px); } .klb-approach-head{ display:flex !important; flex-direction:row !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px; flex-wrap:wrap !important; margin-bottom:clamp(28px,3vw,40px); } .klb-approach-head > .e-con{ flex:0 1 auto !important; width:auto !important; } .klb-approach-head-left{ max-width:680px; } /* nested tabs heading (tab buttons) */ .klb-approach-tabs .e-n-tabs-heading{ border-bottom:1px solid #d9dde4 !important; margin-bottom:clamp(24px,2.6vw,36px); display:flex !important; flex-wrap:wrap !important; gap:0 !important; --n-tabs-heading-border-width:0; } .klb-approach-tabs .e-n-tab-title{ flex:1 1 0 !important; min-width:150px; padding:20px 22px !important; justify-content:center; font-family:Montserrat,sans-serif !important; font-weight:700 !important; text-transform:uppercase; font-size:13.5px !important; letter-spacing:.06em !important; color:#6f7a8d !important; background:transparent !important; border:none !important; position:relative; white-space:nowrap; border-radius:6px 6px 0 0 !important; transition:background .18s, color .18s; } .klb-approach-tabs .e-n-tab-title:hover{ color:#2a3168 !important; } .klb-approach-tabs .e-n-tab-title[aria-selected="true"]{ background:#1e2454 !important; color:#fff !important; } .klb-approach-tabs .e-n-tab-title[aria-selected="true"]::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:48px; height:3px; background:#97a0c8; border-radius:2px; } .klb-approach-tabs .e-n-tab-title .e-n-tab-icon, .klb-approach-tabs .e-n-tab-title .e-n-tab-title-text{ font:inherit; } .klb-approach-tabs .e-n-tabs-content{ padding:0 !important; } .klb-approach-tabs .e-n-tabs-content > .e-con{ padding:0 !important; } /* mobile: the 4 tabs wrap into an uneven 2x2 — stack them full-width as clean pill buttons (active navy-filled, inactive light-bordered) instead. Tap behaviour unchanged. */ @media (max-width:767px){ .klb-approach-tabs .e-n-tabs-heading{ flex-direction:column !important; flex-wrap:nowrap !important; border-bottom:0 !important; gap:10px !important; margin-bottom:28px !important; } .klb-approach-tabs .e-n-tab-title{ flex:0 0 auto !important; width:100% !important; min-width:0 !important; white-space:normal !important; border-radius:8px !important; border:1px solid #d9dde4 !important; background:#f8f9fa !important; padding:15px 18px !important; } .klb-approach-tabs .e-n-tab-title[aria-selected="true"]{ background:#1e2454 !important; border-color:#1e2454 !important; color:#fff !important; } .klb-approach-tabs .e-n-tab-title[aria-selected="true"]::after{ display:none !important; } /* accordion behaviour: flatten the heading + content wrappers so each tab's panel renders directly beneath its own title (title -> content -> next title), instead of all content stacking after the group. Tab JS unchanged; still one open at a time. */ .klb-approach-tabs .e-n-tabs{ display:flex !important; flex-direction:column !important; gap:10px !important; } .klb-approach-tabs .e-n-tabs-heading, .klb-approach-tabs .e-n-tabs-content{ display:contents !important; } .klb-approach-tabs .e-n-tab-title:nth-child(1){ order:1 !important; } .klb-approach-tabs .e-n-tabs-content > *:nth-child(1){ order:2 !important; } .klb-approach-tabs .e-n-tab-title:nth-child(2){ order:3 !important; } .klb-approach-tabs .e-n-tabs-content > *:nth-child(2){ order:4 !important; } .klb-approach-tabs .e-n-tab-title:nth-child(3){ order:5 !important; } .klb-approach-tabs .e-n-tabs-content > *:nth-child(3){ order:6 !important; } .klb-approach-tabs .e-n-tab-title:nth-child(4){ order:7 !important; } .klb-approach-tabs .e-n-tabs-content > *:nth-child(4){ order:8 !important; } .klb-approach-tabs .e-n-tabs-content > .e-con:not(.e-active){ display:none !important; } .klb-approach-tabs .e-n-tabs-content > .e-con.e-active{ margin:2px 0 6px !important; } } /* card grid */ .klb-appr-grid{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:20px; } .klb-appr-card{ background:#fff; border:1px solid #d9dde4; border-radius:10px; box-shadow:0 1px 2px rgba(16,20,57,.06); padding:clamp(26px,2.4vw,32px) !important; transition:transform .2s ease, box-shadow .2s ease; } .klb-appr-card:hover{ box-shadow:0 18px 40px -12px rgba(16,20,57,.18); transform:translateY(-3px); } .klb-appr-badge{ width:50px; height:50px; border-radius:6px; background:#f2f3f9; margin-bottom:22px !important; display:flex !important; align-items:center !important; justify-content:center !important; } .klb-appr-badge .elementor-icon, .klb-appr-badge .elementor-icon-wrapper{ display:flex !important; align-items:center; justify-content:center; line-height:0 !important; } .klb-appr-badge svg{ width:23px !important; height:23px !important; stroke:#2a3168 !important; } .klb-appr-ch .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:18.5px !important; font-weight:700 !important; color:#1e2454 !important; letter-spacing:-.015em; line-height:1.25; margin:0 !important; } .klb-appr-accent{ width:40px !important; min-height:3px; height:3px; background:#4a5396; border-radius:2px; margin:14px 0 16px !important; padding:0; } .klb-appr-cb, .klb-appr-cb p{ font-family:Montserrat,sans-serif; font-size:14.5px; line-height:1.6; color:#6f7a8d !important; margin:0 0 22px; } .klb-arrowlink .elementor-button{ background:transparent !important; color:#2a3168 !important; border:none !important; padding:0 !important; font-family:Montserrat,sans-serif; font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:7px; letter-spacing:.01em; } .klb-arrowlink .elementor-button svg{ width:16px !important; height:16px !important; } @media (max-width:940px){ .klb-appr-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .klb-appr-grid{ grid-template-columns:1fr; } .klb-approach-tabs .e-n-tab-title{ min-width:120px; font-size:12px !important; } } /* ============================================================ HOME — TESTIMONIALS (navy gradient) — single-quote Loop Carousel ============================================================ */ .klb-tst{ position:relative; background:#1e2454; overflow:hidden; } .klb-tst::before{ content:""; position:absolute; inset:0; background:linear-gradient(157deg,#1e2454 0%,#101439 100%); z-index:0; } .klb-tst::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% -10%, rgba(74,83,150,.4), transparent 55%); z-index:0; } .klb-tst-inner > .e-con-inner{ position:relative; z-index:1; max-width:1380px; margin:0 auto; padding:clamp(96px,9vw,150px) clamp(20px,4vw,40px) clamp(56px,5vw,88px); } .klb-tst-stage{ position:relative; max-width:1000px; margin:0 auto !important; } /* watermark: shrink-wrap to the text (max-content) and centre it exactly like the design, so the full word "TESTIMONIALS" reads (not clipped to the stage width). */ .klb-tst-wm{ position:absolute; top:0; left:50%; transform:translate(-50%,-50%); width:max-content !important; max-width:none !important; text-align:center; pointer-events:none; z-index:0; } .klb-tst-wm .elementor-heading-title{ font-family:Montserrat,sans-serif !important; font-weight:800 !important; color:rgba(255,255,255,.09) !important; font-size:clamp(4.5rem,2.6rem + 9.5vw,15rem) !important; line-height:1 !important; letter-spacing:.02em; margin:0; text-transform:uppercase; white-space:nowrap; } /* card (loop item) */ .klb-tst-card{ position:relative; background:#fff !important; border-top:3px solid #1e2454; border-radius:0 0 10px 10px !important; box-shadow:var(--klb-shadow-xl); padding:clamp(56px,5vw,80px) clamp(40px,6vw,110px) clamp(40px,4vw,64px) !important; text-align:center; } .klb-tst-badge{ position:absolute; top:-32px; left:50%; transform:translateX(-50%); z-index:5; width:64px; height:64px; border-radius:6px; background:#1e2454; display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:var(--klb-shadow-md); } .klb-tst-badge .elementor-icon, .klb-tst-badge .elementor-icon-wrapper{ display:flex !important; align-items:center; justify-content:center; line-height:0 !important; } .klb-tst-badge svg{ width:28px !important; height:28px !important; stroke:#fff !important; } /* Design renders the quote at 16px — its own clamp is invalid (no spaces around the +), so it falls back to the inherited body size. Matching the design as-shown. */ .klb-tst-quote{ font-family:Montserrat,sans-serif; font-size:16px; line-height:1.5; font-weight:600; color:#161a21 !important; margin:0 auto clamp(28px,3vw,40px); max-width:44ch; letter-spacing:-.01em; text-wrap:balance; } .klb-tst-avatar{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:#f2f3f9; border:1px solid #e3e6f1; color:#1e2454; font-family:Montserrat,sans-serif; font-weight:700; font-size:22px; margin-bottom:18px; } .klb-tst-author{ font-family:Montserrat,sans-serif; font-size:16px; font-weight:700; color:#1e2454; } .klb-tst-org{ font-family:Montserrat,sans-serif; font-size:13.5px; color:#6f7a8d; margin-top:3px; } /* single-slide carousel: white round arrows outside the card + white dots */ .klb-tst-loop{ position:relative; } /* badge now lives on the stage, so the swiper can clip the horizontal peek cleanly; bottom padding (inside the clip box) preserves the card's drop shadow. */ .klb-tst-loop .swiper{ overflow:hidden !important; padding-bottom:48px !important; margin-bottom:-48px; } .klb-tst-loop .elementor-swiper-button{ width:54px !important; height:54px !important; background:#fff !important; border-radius:50%; box-shadow:var(--klb-shadow-lg); display:flex !important; align-items:center; justify-content:center; z-index:5; } .klb-tst-loop .elementor-swiper-button i, .klb-tst-loop .elementor-swiper-button svg, .klb-tst-loop .elementor-swiper-button .eicon{ display:none !important; } .klb-tst-loop .elementor-swiper-button::after{ content:""; width:22px; height:22px; background:#1e2454; -webkit-mask:var(--klb-chev-nav) center/22px 22px no-repeat; mask:var(--klb-chev-nav) center/22px 22px no-repeat; } .klb-tst-loop .elementor-swiper-button-prev{ left:-22px !important; right:auto !important; } .klb-tst-loop .elementor-swiper-button-prev::after{ transform:scaleX(-1); } .klb-tst-loop .elementor-swiper-button-next{ right:-22px !important; left:auto !important; } .klb-tst-loop .swiper-pagination{ position:relative !important; margin-top:clamp(24px,2.5vw,34px) !important; } .klb-tst-loop .swiper-pagination-bullet{ width:8px !important; height:8px !important; background:rgba(255,255,255,.35) !important; opacity:1 !important; border-radius:999px !important; margin:0 5px !important; transition:width .22s; } .klb-tst-loop .swiper-pagination-bullet-active{ width:30px !important; background:#fff !important; border-radius:999px !important; } /* ============================================================ CAPABILITY (reused section template) — navy photo bg + glass card ============================================================ */ .klb-cap{ position:relative; overflow:hidden; background:#11142f; } .klb-cap::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(16,20,57,.72) 0%, rgba(30,36,84,.68) 100%); } .klb-cap::after{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 85% -10%, rgba(74,83,150,.45), transparent 50%); } .klb-cap-inner > .e-con-inner{ position:relative; z-index:1; max-width:1380px; margin:0 auto; padding:clamp(56px,5vw,96px) clamp(20px,4vw,40px); } .klb-cap-head{ display:flex !important; flex-direction:row !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px; flex-wrap:wrap !important; margin-bottom:clamp(28px,3vw,44px); } .klb-cap-head > .e-con{ flex:0 1 auto !important; width:auto !important; } .klb-cap-head-left{ max-width:680px; } /* inverse button (white bg, navy text) */ .klb-inverse-btn .elementor-button{ background:#fff !important; color:#1e2454 !important; border:1px solid #fff !important; font-family:Montserrat,sans-serif; font-weight:700; font-size:14px; border-radius:6px; padding:13px 24px; display:inline-flex; align-items:center; gap:9px; } .klb-inverse-btn .elementor-button:hover{ background:#f2f3f9 !important; } .klb-inverse-btn .elementor-button svg{ width:16px !important; height:16px !important; } /* glass card */ .klb-cap-card > .e-con-inner{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:clamp(28px,3vw,44px); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:grid !important; grid-template-columns:1.62fr 0.78fr; gap:clamp(28px,3.5vw,56px); align-items:center !important; } /* keep the checklist column centred even if the grid item stretches */ .klb-cap-card > .e-con-inner > .e-con:nth-child(2){ align-self:center !important; display:flex !important; flex-direction:column !important; justify-content:center !important; } .klb-cap-iconrow{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:14px; margin-bottom:20px; } .klb-cap-icon{ flex:none !important; width:46px; height:46px; border-radius:6px; background:rgba(255,255,255,.1); display:flex !important; align-items:center !important; justify-content:center !important; } .klb-cap-icon .elementor-icon, .klb-cap-icon .elementor-icon-wrapper{ display:flex !important; align-items:center; justify-content:center; line-height:0 !important; } .klb-cap-icon svg{ width:22px !important; height:22px !important; stroke:#fff !important; } .klb-cap-tag .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:11.5px !important; font-weight:600 !important; letter-spacing:.14em !important; text-transform:uppercase; color:#97a0c8 !important; margin:0 !important; } .klb-cap-ch .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:clamp(1.35rem,1.1rem + 0.8vw,1.85rem) !important; font-weight:700 !important; color:#fff !important; margin:0 0 14px !important; letter-spacing:-.015em; line-height:1.2; } .klb-cap-cb, .klb-cap-cb p{ font-family:Montserrat,sans-serif; font-size:clamp(15px,0.95rem + 0.2vw,16.5px); line-height:1.65; color:#c4cae0 !important; margin:0; max-width:54ch; } .klb-cap-list .elementor-icon-list-items{ display:flex; flex-direction:column; gap:16px; } .klb-cap-list .elementor-icon-list-item{ margin:0 !important; padding:0 !important; align-items:center !important; } .klb-cap-list .elementor-icon-list-icon{ display:flex !important; align-items:center !important; justify-content:center !important; line-height:0 !important; height:20px; } .klb-cap-list .elementor-icon-list-icon svg{ width:20px !important; height:20px !important; stroke:#97a0c8 !important; fill:none !important; display:block; } .klb-cap-list .elementor-icon-list-text{ font-family:Montserrat,sans-serif; font-size:15.5px !important; color:#fff !important; font-weight:500 !important; } @media (max-width:880px){ .klb-cap-card > .e-con-inner{ grid-template-columns:1fr; } } /* ============================================================ INDUSTRIES (reused section template) — 13 tiles, auto-fill grid ============================================================ */ .klb-ind{ background:#fff; } .klb-ind-inner > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(56px,5vw,96px) clamp(20px,4vw,40px); } .klb-ind-head{ display:flex !important; flex-direction:row !important; align-items:flex-end !important; justify-content:space-between !important; gap:28px; flex-wrap:wrap !important; margin-bottom:clamp(28px,3vw,44px); } .klb-ind-head > .e-con{ flex:0 1 auto !important; width:auto !important; } .klb-ind-head-left{ max-width:760px; } .klb-ind-grid{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; align-items:stretch; } .klb-ind-tile{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:16px; min-height:56px; background:#fff; border:1px solid #d9dde4; border-left:3px solid #1e2454; border-radius:0 10px 10px 0; box-shadow:var(--klb-shadow-sm); padding:18px 20px !important; transition:transform .2s ease, box-shadow .2s ease; } .klb-ind-tile:hover{ transform:translateY(-3px); box-shadow:var(--klb-shadow-lg); } .klb-ind-icon{ flex:none !important; width:46px; height:46px; border-radius:6px; background:#1e2454; display:flex !important; align-items:center !important; justify-content:center !important; } .klb-ind-icon .elementor-icon, .klb-ind-icon .elementor-icon-wrapper{ display:flex !important; align-items:center; justify-content:center; line-height:0 !important; } .klb-ind-icon svg{ width:22px !important; height:22px !important; stroke:#fff !important; } .klb-ind-th .elementor-heading-title{ font-family:Montserrat,sans-serif; font-size:16px !important; font-weight:700 !important; color:#1e2454 !important; margin:0 !important; letter-spacing:-.01em; line-height:1.25; } /* ============================================================ FAQ (home, INLINE Nested Accordion) — navy gradient, 2-col, glass accordion items, chevron box that rotates on open. ============================================================ */ .klb-faq{ position:relative; background:#1e2454; overflow:hidden; } .klb-faq::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(157deg,#1e2454 0%,#101439 100%); } .klb-faq::after{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 12% -10%, rgba(74,83,150,.4), transparent 50%); } .klb-faq-inner{ position:relative; z-index:1; } .klb-faq-inner > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(56px,5vw,96px) clamp(20px,4vw,40px); } .klb-faq-grid{ display:grid !important; grid-template-columns:0.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:start; } .klb-faq-left{ } .klb-faq-h2 .elementor-heading-title{ font-family:Montserrat,sans-serif; font-weight:800 !important; text-transform:uppercase; font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem) !important; line-height:1.05 !important; letter-spacing:-.01em; color:#fff !important; margin:0 !important; } .klb-faq-h2 .klb-accent{ color:#97a0c8; } .klb-faq-ask{ margin-top:28px; } /* Nested Accordion column */ .klb-faq-acc .e-n-accordion{ display:flex; flex-direction:column; gap:14px; } .klb-faq-acc .e-n-accordion-item{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:10px !important; overflow:hidden; transition:background .2s ease; } .klb-faq-acc .e-n-accordion-item[open]{ background:rgba(255,255,255,.10) !important; border-top:3px solid #97a0c8 !important; } .klb-faq-acc .e-n-accordion-item-title{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:18px; padding:clamp(20px,2vw,26px) clamp(20px,2vw,28px) !important; cursor:pointer; list-style:none; } .klb-faq-acc .e-n-accordion-item-title::-webkit-details-marker, .klb-faq-acc .e-n-accordion-item-title::marker{ display:none; content:""; } /* design order: question text LEFT (grows), chevron box RIGHT */ .klb-faq-acc .e-n-accordion-item-title-header{ order:0 !important; flex:1 1 auto !important; text-align:left !important; } .klb-faq-acc .e-n-accordion-item-title-icon{ order:1 !important; } .klb-faq-acc .e-n-accordion-item-title-header, .klb-faq-acc .e-n-accordion-item-title-text, .klb-faq-acc .e-n-accordion-item-title-header > *{ font-family:Montserrat,sans-serif !important; font-size:clamp(1rem,0.95rem + 0.3vw,1.1875rem) !important; font-weight:700 !important; color:#fff !important; letter-spacing:-.005em; line-height:1.35 !important; margin:0 !important; text-align:left !important; } .klb-faq-acc .e-n-accordion-item-title-icon{ flex:none !important; width:34px; height:34px; border-radius:4px; display:flex !important; align-items:center !important; justify-content:center !important; background:rgba(255,255,255,.1); color:#fff; transition:background .18s ease, color .18s ease; } .klb-faq-acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon{ background:#fff; color:#1e2454; } .klb-faq-acc .e-n-accordion-item-title-icon svg, .klb-faq-acc .e-n-accordion-item-title-icon span{ width:18px; height:18px; transition:transform .22s ease; } .klb-faq-acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg{ transform:rotate(180deg); } .klb-faq-acc .e-n-accordion-item-title-icon .e-opened{ display:none; } .klb-faq-acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-closed{ display:none; } .klb-faq-acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-opened{ display:flex; } /* seamless open panel: the answer content container (.e-con-full, direct child of the accordion item) carries a default border — remove it and add the gap. */ .klb-faq-acc .e-n-accordion-item-title{ border:none !important; box-shadow:none !important; } .klb-faq-acc .e-n-accordion-item > .e-con, .klb-faq-acc .e-n-accordion-item > .e-con-full, .klb-faq-acc .e-n-accordion-item > .e-con-boxed{ border:none !important; box-shadow:none !important; background:transparent !important; } .klb-faq-acc .e-n-accordion-item[open] .e-n-accordion-item-title{ padding-bottom:clamp(4px,0.6vw,10px) !important; } .klb-faq-acc .e-n-accordion-item > .e-con-full > .e-con-inner, .klb-faq-acc .e-n-accordion-item > .e-con-full, .klb-faq-acc .e-n-accordion-item > .e-con-boxed > .e-con-inner{ padding:clamp(18px,2vw,30px) clamp(20px,2vw,28px) clamp(24px,2vw,30px) !important; } .klb-faq-ans, .klb-faq-ans p{ font-family:Montserrat,sans-serif; font-size:16px !important; line-height:1.7 !important; color:#c4cae0 !important; margin:0; max-width:none !important; } @media (max-width:900px){ .klb-faq-grid{ grid-template-columns:1fr !important; } } /* ============================================================ CLOSING CTA (#contact) — reused section template on every page. Navy photo bg + overlay, left copy/benefits/phone, right GF card. ============================================================ */ .klb-cta2{ position:relative; background:#00113f; overflow:hidden; } .klb-cta2 .klb-cta2-bg{ position:absolute; inset:0; z-index:0; background-image:var(--klb-contact-bg); background-size:cover; background-position:center; transform:scaleX(-1); } .klb-cta2::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(16,20,57,.72) 0%, rgba(30,36,84,.68) 100%); } .klb-cta2::after{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(circle at 12% -10%, rgba(74,83,150,.42), transparent 48%); } .klb-cta2-inner{ position:relative; z-index:2; } .klb-cta2-inner > .e-con-inner{ max-width:1380px; margin:0 auto; padding:clamp(56px,5vw,96px) clamp(20px,4vw,40px); display:grid !important; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:start; } .klb-cta2-lead, .klb-cta2-lead p{ font-family:Montserrat,sans-serif; font-size:clamp(1rem,0.95rem + 0.3vw,1.1875rem) !important; line-height:1.6; color:#c4cae0 !important; margin:16px 0 30px !important; max-width:48ch; } /* benefits checklist */ /* Ensure Elementor icon lists lay out correctly even when their widget CSS isn't enqueued: Elementor's optimized asset loading omits the icon-list CSS on pages where the widget only appears inside an EMBEDDED template (e.g. the closing-CTA benefits + capability checklist), so it falls back to a raw