/* ─── FONTS ─────────────────────────────────────────────────────────────────── Self-hosted woff2 files live in assets/fonts/. Syne (headings): weights 600, 700, 800 Inter (body): weights 400, 500, 600, 700 Source URLs from fonts.gstatic.com — re-download if updating font versions. ──────────────────────────────────────────────────────────────────────────── */ @font-face{font-family:'Syne';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/syne-600.woff2') format('woff2')} @font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/syne-700.woff2') format('woff2')} @font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/syne-800.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-700.woff2') format('woff2')} /* ─── THEME SYSTEM ──────────────────────────────────────────────────────────── The site has a dark/light theme toggle (sun/moon icon in the nav). Dark is the default. Light is activated by setting data-theme="light" on . HOW IT WORKS: - All colours are CSS custom properties (variables) defined in :root (dark values). - [data-theme="light"] overrides those same variables with light equivalents. - Most elements just use var(--bg), var(--tx-h) etc. and switch automatically. - The toggle JS lives in each HTML page (near ); it sets/removes data-theme="light" on and persists the choice in localStorage ('lf-theme'). - A pre-paint script in reads localStorage before first render to prevent flash of wrong theme. INTENTIONAL EXCEPTIONS — do NOT convert these to variables: - footer: always hardcoded #0b1020 (dark). The footer stays dark in both themes. - .hero-scrim / .page-hero-scrim: always dark overlay (photos underneath are dark). - .hero h1, .page-hero h1: always color:#fff (sits over the always-dark scrim). - .cta-section: always dark gradient — a deliberate design choice. - The nav is hardcoded white/light — it looks the same in both themes by design. VARIABLE REFERENCE: --bg page background --bg-alt slightly offset background (logo strip, alternating sections) --bg-card card / surface background --bg-hover card hover state --bg-input form input background --tx primary body text --tx-2 secondary text (descriptions, sub-copy) --tx-3 muted text (meta, labels, captions) --tx-4 slightly stronger secondary (bold spans, strong tags) --tx-5 hero paragraph text (sits over dark scrim in both themes) --tx-h headings (h2, h3, card titles etc.) --teal brand teal accent (darker in light mode for contrast) --hi highlight blue (icons, links) --bdr default border (cards, dividers) --bdr-2 slightly stronger border --bdr-3 strongest border (social icons etc.) --icon-bg icon container background --loc-bg location card background ──────────────────────────────────────────────────────────────────────────── */ :root{ --bg:#09111f;--bg-alt:#0f1a2e;--bg-card:#111d30;--bg-hover:#0d1726;--bg-input:#0b1626; --tx:#e8edf8;--tx-2:#9aabcb;--tx-3:#7d8aaa;--tx-4:#c5cedf;--tx-5:#b8c5df;--tx-h:#fff; --teal:#19e3c0;--hi:#7ea8ff; --bdr:rgba(255,255,255,.07);--bdr-2:rgba(255,255,255,.1);--bdr-3:rgba(255,255,255,.12); --icon-bg:rgba(61,90,254,.2);--loc-bg:rgba(255,255,255,.04); --fp-land:rgba(255,255,255,0.115);--fp-pin:#fff;--fp-pin-remote:rgba(255,255,255,0.15);--fp-pin-stroke:rgba(0,0,0,0.18);--fp-pin-dot:rgba(0,0,0,0.35) } [data-theme="light"]{ --bg:#f4f6fb;--bg-alt:#eef0f7;--bg-card:#fff;--bg-hover:#f0f4fa;--bg-input:#f4f6fb; --tx:#1a2138;--tx-2:#5a6588;--tx-3:#7d8aaa;--tx-4:#3b4563;--tx-5:#4a5a88;--tx-h:#0b1020; --teal:#0d9488;--hi:#3d5afe; --bdr:rgba(0,0,0,.07);--bdr-2:rgba(0,0,0,.1);--bdr-3:rgba(0,0,0,.12); --icon-bg:rgba(61,90,254,.12);--loc-bg:rgba(0,0,0,.03); --fp-land:rgba(0,0,0,0.12);--fp-pin:#3d5afe;--fp-pin-remote:rgba(61,90,254,0.25);--fp-pin-stroke:rgba(61,90,254,0.4);--fp-pin-dot:rgba(255,255,255,0.9) } /* ─── BASE RESET & GLOBALS ────────────────────────────────────────────────── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} img{max-width:100%;height:auto;display:block} a{text-decoration:none;color:inherit} body{font-family:'Inter',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} .container{max-width:var(--max,1240px);margin:0 auto;padding:0 28px} .section-label{font-size:10.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:14px;display:block} .section-h{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.3px;color:var(--tx-h)} /* fade-up: elements start invisible; JS IntersectionObserver adds .v to trigger the transition */ .fade-up{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .fade-up.v{opacity:1;transform:translateY(0)} @media(max-width:600px){.container{padding:0 20px}} /* ─── NAVIGATION ────────────────────────────────────────────────────────────── Sticky white nav — intentionally hardcoded light in both themes. Includes desktop dropdown menus (CSS hover) and mobile hamburger. Theme toggle button (.theme-toggle) styles are at the bottom of this file. ──────────────────────────────────────────────────────────────────────────── */ .nav{position:sticky;top:0;z-index:100;height:64px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08)} .nav-inner{display:flex;align-items:center;height:100%;max-width:1240px;margin:0 auto;padding:0 28px;gap:4px} .nav-logo{display:flex;align-items:center;flex-shrink:0;margin-right:16px} .nav-logo img{height:34px;width:auto} .nav-links{display:flex;align-items:center;gap:2px;flex:1} .nav-item{position:relative} .nav-link{display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:500;color:#3b4563;padding:7px 11px;border-radius:8px;transition:color .15s,background .15s;white-space:nowrap;cursor:pointer;background:none;border:none;font-family:Inter,sans-serif} .nav-link:hover,.nav-item:hover>.nav-link{color:#0b1020;background:rgba(11,16,32,.06)} a.nav-link{color:#3b4563} .nav-arrow{font-size:10px;opacity:.6;transition:transform .2s} .nav-item:hover .nav-arrow{transform:rotate(180deg)} .dropdown{display:none;position:absolute;top:100%;left:-12px;background:#fff;border:1px solid #dde2f0;border-radius:12px;padding:8px;min-width:210px;box-shadow:0 8px 32px rgba(11,16,32,.12);z-index:200;margin-top:0;padding-top:16px}.dropdown::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px} .nav-item:hover .dropdown{display:flex;flex-direction:column} .dropdown a{font-size:13.5px;font-weight:500;color:#3b4563;padding:9px 14px;border-radius:8px;white-space:nowrap;transition:all .12s} .dropdown a:hover{background:#f4f6fb;color:#0b1020} .drop-divider{height:1px;background:#ebeef6;margin:4px 0} .nav-cta{background:#3d5afe;color:#fff!important;font-weight:700;font-size:13.5px;padding:9px 20px;border-radius:100px;margin-left:auto;flex-shrink:0;transition:all .2s;white-space:nowrap;font-family:Inter,sans-serif} .nav-cta:hover{filter:brightness(.88)} .hamburger{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto;background:none;border:none;cursor:pointer} .hamburger span{display:block;height:2px;width:22px;background:#0b1020;border-radius:2px} .mob-nav{display:none;position:fixed;inset:0;top:64px;background:#fff;padding:24px 28px;z-index:99;flex-direction:column;gap:2px;overflow-y:auto} .mob-nav.open{display:flex} .mob-link{font-size:16px;font-weight:600;color:#0b1020;padding:13px 0;border-bottom:1px solid #ebeef6;display:flex;justify-content:space-between;align-items:center;cursor:pointer} .mob-sub{padding-left:14px;display:none;flex-direction:column} .mob-sub.open{display:flex} .mob-sub a{font-size:14px;color:#546080;padding:9px 0;border-bottom:1px solid #f4f6fb} .mob-cta-wrap{margin-top:16px} .mob-cta{display:block;text-align:center;background:#3d5afe;color:#fff;font-weight:700;font-size:15px;padding:14px;border-radius:100px;font-family:Inter,sans-serif} @media(max-width:900px){.nav-links{display:none}.hamburger{display:flex}} /* ─── FOOTER ────────────────────────────────────────────────────────────────── Always dark (#0b1020) regardless of theme — intentional design decision. Uses var(--tx-3) etc. which resolve correctly against the dark bg in both themes. ──────────────────────────────────────────────────────────────────────────── */ footer{background:#0b1020;padding:52px 0 24px;color:#fff} .ft-top{display:grid;grid-template-columns:1fr 200px 1fr 1fr;gap:44px;padding-bottom:36px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.07)} .ft-brand p{font-size:13px;color:var(--tx-3);line-height:1.65;max-width:240px;margin-bottom:10px} .ft-link{color:var(--tx-3);font-size:12.5px;transition:color .15s} .ft-link:hover{color:#3d5afe} .ft-social{display:flex;gap:8px;margin-top:14px} .ft-social a{width:32px;height:32px;border-radius:8px;border:1px solid var(--bdr-3);display:flex;align-items:center;justify-content:center;color:var(--tx-3);transition:all .15s} .ft-social a:hover{border-color:#3d5afe;color:#3d5afe} .ft-offices h4,.ft-legal h4{font-family:Syne,sans-serif;font-weight:700;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin-bottom:14px} .ft-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--tx-3)} @media(max-width:900px){.ft-top{grid-template-columns:1fr 1fr;gap:28px}} @media(max-width:600px){.ft-top{grid-template-columns:1fr}.ft-bottom{flex-direction:column;text-align:center}} /* ─── MARQUEE / LOGO STRIP ────────────────────────────────────────────────── */ .marquee-wrap{position:relative;overflow:hidden} .marquee-wrap::before,.marquee-wrap::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none} .marquee-track{display:flex;align-items:center;gap:44px;width:max-content;animation:marquee 45s linear infinite;padding:0 22px} .marquee-track:hover{animation-play-state:paused} @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* ─── THEME-AWARE BASE ──────────────────────────────────────────────────────── These rules apply the CSS variables to the page. Placed after the nav/footer hardcoded blocks above so specificity works correctly. ──────────────────────────────────────────────────────────────────────────── */ body{background:var(--bg);color:var(--tx)} .section-label{color:#3d5afe} .section-h{color:var(--tx-h)} section{padding:90px 0} /* ─── HERO (homepage full-height) ───────────────────────────────────────────── The scrim gradient and h1 color:#fff are hardcoded — the hero always sits over a dark photo regardless of theme. Do not change these to variables. ──────────────────────────────────────────────────────────────────────────── */ .hero{position:relative;height:92vh;min-height:560px;max-height:800px;display:flex;align-items:center;overflow:hidden} .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%} .hero-scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(9,17,31,.96) 0%,rgba(9,17,31,.80) 48%,rgba(9,17,31,.18) 100%)} .hero .container{position:relative;z-index:1;width:100%} .hero-inner{max-width:660px} .hero-inner .section-label{color:var(--teal)} .hero h1{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(32px,4.5vw,62px);line-height:1.05;letter-spacing:-.5px;color:#fff;margin-bottom:20px} .hero h1 em{color:var(--teal);font-style:normal} .hero p{font-size:clamp(15px,1.6vw,18px);color:var(--tx-5);max-width:540px;margin-bottom:32px;line-height:1.65} .hero-btns{display:flex;gap:14px;flex-wrap:wrap} .btn-p{background:#3d5afe;color:#fff;font-weight:700;font-size:14px;padding:14px 28px;border-radius:100px;display:inline-flex;align-items:center;gap:8px;transition:all .2s;font-family:Inter,sans-serif} .btn-p:hover{filter:brightness(.88)} .btn-o{border:1.5px solid rgba(255,255,255,.35);color:#fff;font-size:14px;font-weight:600;padding:13px 24px;border-radius:100px;transition:all .2s;font-family:Inter,sans-serif} .btn-o:hover{border-color:rgba(255,255,255,.8)} /* ─── LOGO STRIP (marquee colours) ───────────────────────────────────────── */ .logos-strip{padding:36px 0;background:var(--bg-alt)} .marquee-wrap::before{background:linear-gradient(90deg,var(--bg-alt) 0%,transparent 100%)} .marquee-wrap::after{background:linear-gradient(270deg,var(--bg-alt) 0%,transparent 100%)} /* ─── SERVICES GRID (homepage) ──────────────────────────────────────────────── 2-row CSS grid that flows columns horizontally, wrapped in a scrollable container (.svc-grid-scroll) with drag support. Arrows and scrollbar are handled by inline JS/CSS on index.html. ──────────────────────────────────────────────────────────────────────────── */ .svc-grid{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:460px;gap:16px;padding:4px 2px 4px} .svc-card{background:var(--bg-card);border:1px solid var(--bdr);padding:36px;border-radius:16px;transition:background .2s} .svc-card:hover{background:var(--bg-hover)} .svc-icon{width:44px;height:44px;background:var(--icon-bg);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--hi)} .svc-icon svg{width:22px;height:22px} .svc-card h3{font-family:Syne,sans-serif;font-weight:800;font-size:20px;color:var(--tx-h);margin-bottom:10px} .svc-card p{font-size:14.5px;color:var(--tx-2);line-height:1.65} .svc-card a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#3d5afe;margin-top:18px;transition:gap .15s} .svc-card a:hover{gap:10px} /* ─── WHY LOOP FUTURE CARDS ───────────────────────────────────────────────── */ .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .why-card{background:var(--bg-card);border:1px solid var(--bdr);padding:28px 24px;border-radius:14px} .why-icon{width:40px;height:40px;background:var(--icon-bg);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--hi)} .why-icon svg{width:20px;height:20px} .why-card h3{font-family:Syne,sans-serif;font-weight:800;font-size:16px;color:var(--tx-h);margin-bottom:8px;line-height:1.3;min-height:2.6em} .why-card p{font-size:13.5px;color:var(--tx-3);line-height:1.65} /* ─── PATHS GRID ("what are you looking for") ─────────────────────────────── */ .paths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .path-card{background:var(--bg-card);border:1px solid var(--bdr);border-top:3px solid #3d5afe;padding:32px;border-radius:0 0 14px 14px;transition:background .2s,border-top-color .2s} .path-card:hover{background:var(--bg-hover);border-top-color:var(--teal)} .path-icon{width:44px;height:44px;background:var(--icon-bg);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--hi)} .path-icon svg{width:22px;height:22px} .path-card h3{font-family:Syne,sans-serif;font-weight:800;font-size:18px;color:var(--tx-h);margin-bottom:10px;line-height:1.25} .path-card p{font-size:14px;color:var(--tx-2);line-height:1.65} .path-card a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#3d5afe;margin-top:16px;transition:gap .15s} .path-card a:hover{gap:10px} /* ─── PEOPLE SECTION (homepage) ──────────────────────────────────────────── */ .people-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .people-imgs{display:grid;grid-template-columns:1fr 1fr;gap:8px} .people-imgs img{width:100%;height:220px;object-fit:cover;border-radius:12px} /* ─── B CORP SECTION ────────────────────────────────────────────────────────── The B Corp logo is white (brightness(0) invert(1) = white on dark). In light mode the invert is dropped so it goes black — see overrides below. The section background uses var(--bg-alt) so it's distinguishable from adjacent card-coloured sections in light mode. ──────────────────────────────────────────────────────────────────────────── */ .bcorp-wrap{display:grid;grid-template-columns:160px 1fr;gap:60px;align-items:start} .bcorp-logo img{width:100%;max-width:130px;filter:brightness(0) invert(1)} .bcorp-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px} .bcorp-pillar strong{font-family:Syne,sans-serif;font-size:14px;font-weight:700;color:#fff;display:block;margin-bottom:6px} .bcorp-pillar p{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.6} [data-theme="light"] .hero p{color:rgba(255,255,255,.85)} /* ─── CTA SECTION ───────────────────────────────────────────────────────────── Always dark gradient — intentional in both themes. Do not convert to vars. ──────────────────────────────────────────────────────────────────────────── */ .cta-section{background:linear-gradient(135deg,#0b1a38 0%,#09111f 100%);padding:90px 0;text-align:center;position:relative;overflow:hidden} .cta-section::before{content:'';position:absolute;inset:-1px;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(61,90,254,.14) 0%,transparent 70%);pointer-events:none} .cta-section h2{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(26px,3.5vw,44px);color:#fff;margin-bottom:18px;max-width:600px;margin-left:auto;margin-right:auto;position:relative} .cta-section p{font-size:16px;color:var(--tx-2);margin-bottom:32px;position:relative} /* ─── PAGE HERO (inner pages) ───────────────────────────────────────────────── Shorter hero for all non-homepage pages. Same scrim/hardcoded rule applies. ──────────────────────────────────────────────────────────────────────────── */ .page-hero{position:relative;padding:120px 0 80px;overflow:hidden;display:flex;align-items:center} .page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%} .page-hero-scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(9,17,31,.97) 0%,rgba(9,17,31,.84) 55%,rgba(9,17,31,.28) 100%)} .page-hero .container{position:relative;z-index:1;width:100%} .page-hero-inner{max-width:640px} /* ─── ABOUT: STORY, STATS, LEADERS ───────────────────────────────────────── */ .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .story-photo{width:100%;height:420px;object-fit:cover;border-radius:16px} .stat-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px} .stat-item{padding:32px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.07)} .stat-item:last-child{border-right:none} .stat-item strong{font-family:Syne,sans-serif;font-size:clamp(36px,4vw,52px);font-weight:800;color:#3d5afe;display:block;line-height:1} .stat-item span{font-size:13px;color:var(--tx-3);margin-top:8px;display:block} .leaders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .leader-card{background:var(--bg-card);border:1px solid var(--bdr);border-radius:16px;overflow:hidden;transition:background .2s} .leader-card:hover{background:var(--bg-hover)} .leader-photo{width:100%;height:220px;object-fit:cover;object-position:top center;display:block;transition:transform .4s} .leader-card:hover .leader-photo{transform:scale(1.04)} .leader-body{padding:20px 22px} .leader-body h3{font-family:Syne,sans-serif;font-weight:800;font-size:15px;color:var(--tx-h);margin-bottom:3px} .leader-role{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#3d5afe;display:block;margin-bottom:10px} .leader-body p{font-size:13px;color:var(--tx-3);line-height:1.6} /* ─── ABOUT: VALUES & OFFICES ─────────────────────────────────────────────── */ .vals-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .val-card{background:var(--bg-card);border:1px solid var(--bdr);border-radius:14px;padding:26px 18px;text-align:center;transition:background .2s} .val-card:hover{background:var(--bg-hover)} .val-card img{height:52px;width:52px;margin:0 auto 16px;object-fit:contain} .val-card h3{font-family:Syne,sans-serif;font-weight:700;font-size:13.5px;color:var(--tx-h);margin-bottom:7px;line-height:1.3} .val-card p{font-size:12px;color:var(--tx-3);line-height:1.6} .offices-prose{font-size:16px;color:var(--tx-2);line-height:1.85;max-width:820px;margin-bottom:36px} .offices-prose strong{color:var(--tx-4)} .offices-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .offices-pics img{width:100%;height:196px;object-fit:cover;border-radius:12px} /* ─── SERVICE PAGES: STICKY SUB-NAV ──────────────────────────────────────── */ .svc-navig{background:var(--bg-card);border-bottom:1px solid var(--bdr);position:sticky;top:64px;z-index:50;overflow-x:auto} .svc-navig-inner{display:flex;max-width:1240px;margin:0 auto;padding:0 28px} .snav-link{font-size:13px;font-weight:600;color:var(--tx-3);padding:16px 20px;white-space:nowrap;border-bottom:2px solid transparent;transition:all .2s} .snav-link:hover{color:var(--tx-h);border-bottom-color:#3d5afe} /* ─── SERVICE PAGES: INTRO & DETAIL ROWS ─────────────────────────────────── */ .svc-intro-row{display:grid;grid-template-columns:1.1fr 1fr;gap:52px;align-items:start} .svc-intro-stats{display:flex;flex-direction:column;gap:28px} .svc-big-stat strong{font-family:Syne,sans-serif;font-size:clamp(36px,4vw,52px);font-weight:800;color:#3d5afe;display:block;line-height:1} .svc-big-stat span{font-size:13px;color:var(--tx-3);margin-top:5px;display:block} .svc-icon-lg{width:52px;height:52px;background:var(--icon-bg);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--hi)} .svc-icon-lg svg{width:26px;height:26px} .svc-tagline{font-size:17px;font-weight:600;color:var(--tx-4);line-height:1.4;margin-bottom:16px} .svc-body p{font-size:15px;color:var(--tx-2);line-height:1.75;margin-bottom:14px} .svc-detail-row{display:grid;grid-template-columns:1.4fr 1fr;gap:52px;padding:48px 0 80px} .case-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:14px} .case-card{background:var(--bg-card);border:1px solid var(--bdr);padding:22px;border-radius:12px;margin-bottom:14px} .case-industry{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:rgba(61,90,254,.15);color:var(--hi);border-radius:100px;padding:3px 10px;display:inline-block;margin-bottom:10px} .case-card h4{font-family:Syne,sans-serif;font-weight:700;font-size:16px;color:var(--tx-h);margin-bottom:8px} .case-card p{font-size:14.5px;color:var(--tx-2);line-height:1.65} .photo-strip{display:grid;grid-template-columns:repeat(3,1fr)} .photo-strip img{width:100%;height:260px;object-fit:cover} .models-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .model-card{background:var(--bg-card);border:1px solid var(--bdr);padding:28px;border-radius:16px} .model-badge{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:rgba(61,90,254,.15);color:var(--hi);padding:4px 12px;border-radius:100px;display:inline-block;margin-bottom:14px} .model-card h3{font-family:Syne,sans-serif;font-weight:800;font-size:17px;color:var(--tx-h);margin-bottom:9px} .model-card p{font-size:14px;color:var(--tx-2);line-height:1.65} .ai-strip{display:flex;align-items:center;gap:16px;padding:18px 28px;background:rgba(61,90,254,.1);border:1px solid rgba(61,90,254,.25);border-radius:12px;margin-top:44px} .ai-strip-icon{width:36px;height:36px;background:var(--icon-bg);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--hi)} .ai-strip p{font-size:13.5px;color:var(--tx-2);line-height:1.5} .ai-strip p strong{color:var(--tx-4)} /* ─── ABOUT: TIMELINE ─────────────────────────────────────────────────────── */ .timeline{position:relative;padding-left:36px;max-width:680px} .timeline::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,#3d5afe,rgba(61,90,254,.12))} .tl-item{position:relative;padding-bottom:36px} .tl-item:last-child{padding-bottom:0} .tl-dot{position:absolute;left:-43px;top:5px;width:14px;height:14px;background:#3d5afe;border-radius:50%;box-shadow:0 0 0 3px rgba(61,90,254,.22)} .tl-year{font-family:Syne,sans-serif;font-weight:800;font-size:12px;color:#3d5afe;letter-spacing:2px;text-transform:uppercase;margin-bottom:5px} .tl-title{font-family:Syne,sans-serif;font-weight:700;font-size:16px;color:var(--tx-h);margin-bottom:7px;line-height:1.3} .tl-body{font-size:13.5px;color:var(--tx-3);line-height:1.65} /* ─── LIFE AT LOOP / CULTURE CARDS ───────────────────────────────────────── */ .culture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .culture-card{background:var(--bg-card);border:1px solid var(--bdr);padding:28px 24px;border-radius:14px} .culture-card h3{font-family:Syne,sans-serif;font-weight:800;font-size:16px;color:var(--tx-h);margin-bottom:9px;line-height:1.3} .culture-card p{font-size:14px;color:var(--tx-3);line-height:1.65} /* ─── ESG PAGE ────────────────────────────────────────────────────────────── */ .esg-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:44px} .esg-metric{background:var(--bg-card);border:1px solid var(--bdr);padding:32px 24px;border-radius:14px;text-align:center} .esg-metric strong{font-family:Syne,sans-serif;font-size:clamp(28px,3.5vw,44px);font-weight:800;color:#3d5afe;display:block;line-height:1} .esg-metric span{font-size:13px;color:var(--tx-3);margin-top:8px;display:block} .doc-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .doc-card{background:var(--bg-card);border:1px solid var(--bdr);padding:20px 24px;border-radius:12px;display:flex;align-items:center;gap:16px;transition:background .2s} .doc-card:hover{background:var(--bg-hover)} .doc-icon{width:40px;height:40px;background:var(--icon-bg);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--hi)} .doc-icon svg{width:18px;height:18px} .doc-card h4{font-family:Syne,sans-serif;font-weight:700;font-size:14px;color:var(--tx-h);margin-bottom:3px} .doc-card p{font-size:12px;color:var(--tx-3)} /* ─── CONTACT PAGE ────────────────────────────────────────────────────────── */ .contact-wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:start} .contact-detail{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px} .contact-detail-icon{width:36px;height:36px;background:var(--icon-bg);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--hi)} .contact-detail-icon svg{width:16px;height:16px} .contact-detail p{font-size:14.5px;color:var(--tx-2);line-height:1.65} .contact-detail strong{color:var(--tx-4);display:block;margin-bottom:2px} .loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px} .loc-card{background:var(--loc-bg);border:1px solid var(--bdr);border-radius:12px;padding:18px 20px} .loc-card strong{font-family:Syne,sans-serif;font-size:13px;font-weight:700;color:var(--tx-h);display:block;margin-bottom:6px} .loc-card p{font-size:12.5px;color:var(--tx-3);line-height:1.6} .cform{background:var(--bg-card);border:1px solid var(--bdr);border-radius:16px;padding:36px} .cform h3{font-family:Syne,sans-serif;font-weight:700;font-size:20px;color:var(--tx-h);margin-bottom:24px} .cform label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--tx-3);display:block;margin-bottom:7px} .cform input,.cform textarea,.cform select{width:100%;background:var(--bg-input);border:1px solid var(--bdr-2);border-radius:10px;padding:13px 16px;font-size:15px;font-family:Inter,sans-serif;color:var(--tx);outline:none;transition:border .15s;-webkit-appearance:none;appearance:none} .cform input:focus,.cform textarea:focus,.cform select:focus{border-color:#3d5afe} .cform textarea{resize:vertical;min-height:120px} .cform-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cform-group{margin-bottom:18px} .cf-status{font-size:13.5px;line-height:1.5;padding:12px 14px;border-radius:10px;margin-top:14px} .cf-status.ok{background:rgba(25,227,192,.1);color:var(--teal);border:1px solid rgba(25,227,192,.3)} .cf-status.err{background:rgba(255,90,90,.08);color:#ff6b6b;border:1px solid rgba(255,90,90,.3)} .btn-p:disabled{opacity:.6;cursor:not-allowed} /* ─── CAREERS PAGE ────────────────────────────────────────────────────────── */ .careers-hero-inner{max-width:680px} .open-roles{display:grid;grid-template-columns:1fr;gap:12px;max-width:680px} .role-card{background:var(--bg-card);border:1px solid var(--bdr);border-radius:12px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:background .2s} .role-card:hover{background:var(--bg-hover)} .role-card h4{font-family:Syne,sans-serif;font-weight:700;font-size:16px;color:var(--tx-h);margin-bottom:4px} .role-card p{font-size:13px;color:var(--tx-3)} .role-badge{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;background:rgba(61,90,254,.15);color:var(--hi);padding:4px 12px;border-radius:100px;white-space:nowrap;flex-shrink:0} /* ─── FOOTPRINT SECTION ───────────────────────────────────────────────────── */ .fp-flags{display:flex;margin-bottom:36px} .fp-flag{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px 8px;text-align:center;min-width:0} .fp-flag-img{width:48px;height:48px;border-radius:50%;overflow:hidden;margin-bottom:8px;box-shadow:0 0 0 2px var(--bdr-2);flex-shrink:0} .fp-flag-img img{width:100%;height:100%;object-fit:cover;display:block} .fp-flag-country{font-size:13px;font-weight:600;color:var(--tx-h);margin-bottom:3px;display:block} .fp-flag-cities{font-size:10.5px;color:var(--tx-3);line-height:1.55;display:block} .fp-stats{display:flex;margin-bottom:40px} .fp-stat{flex:1;padding:0 24px;border-right:1px solid var(--bdr)} .fp-stat:first-child{padding-left:0} .fp-stat:last-child{border-right:none;padding-right:0} .fp-stat-num{font-family:'Syne',sans-serif;font-size:30px;font-weight:800;color:var(--hi);line-height:1;margin-bottom:6px} .fp-stat-desc{font-size:13px;color:var(--tx-3);line-height:1.4} .fp-map-wrap{border-radius:12px;overflow:hidden;background:var(--bg-card);margin-bottom:14px} .fp-legend{display:flex;gap:24px;font-size:12px;color:var(--tx-3)} .fp-legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle} @media(max-width:900px){ .fp-flags{flex-wrap:wrap} .fp-flag{flex:0 0 33.333%} .fp-stats{flex-direction:column} .fp-stat{padding:14px 0;border-right:none;border-bottom:1px solid var(--bdr)} .fp-stat:last-child{border-bottom:none} } @media(max-width:600px){ .fp-flag{flex:0 0 50%} } /* ─── RESPONSIVE BREAKPOINTS ──────────────────────────────────────────────── */ @media(max-width:900px){.svc-grid{grid-auto-columns:320px}.people-cols{grid-template-columns:1fr}.bcorp-wrap{grid-template-columns:1fr}.bcorp-pillars{grid-template-columns:1fr}.why-grid{grid-template-columns:1fr 1fr}.svc-intro-row{grid-template-columns:1fr}.svc-detail-row{grid-template-columns:1fr;padding:32px 0 60px}.models-grid{grid-template-columns:1fr}.story-grid{grid-template-columns:1fr}.leaders-grid{grid-template-columns:repeat(2,1fr)}.stat-strip{grid-template-columns:repeat(2,1fr)}.stat-item{border-bottom:1px solid var(--bdr)}.paths-grid{grid-template-columns:1fr}.photo-strip{grid-template-columns:1fr 1fr}.culture-grid{grid-template-columns:1fr 1fr}.esg-metrics{grid-template-columns:1fr 1fr}.doc-cards{grid-template-columns:1fr}.contact-wrap{grid-template-columns:1fr}} @media(max-width:640px){.why-grid{grid-template-columns:1fr}.vals-grid{grid-template-columns:1fr 1fr}.offices-pics{grid-template-columns:1fr 1fr}.leaders-grid{grid-template-columns:1fr}.stat-strip{grid-template-columns:1fr 1fr}.culture-grid{grid-template-columns:1fr}.esg-metrics{grid-template-columns:1fr}.cform-row{grid-template-columns:1fr}.loc-grid{grid-template-columns:1fr}} /* ─── LIGHT THEME: LOGO FILTERS ─────────────────────────────────────────────── Logos and tech stack icons are white PNGs (designed for dark backgrounds). In light mode, brightness(0) converts them to black so they're visible. The !important overrides inline filter styles set by the dark-theme technique. CSS *="..." selectors still match after the assets/images/ path restructure because they use substring matching. ──────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .marquee-track img{filter:brightness(0)} .marquee-track .sb-logo{filter:invert(1) opacity(.4)} [data-theme="light"] .marquee-track .sb-logo{filter:opacity(.4)} [data-theme="light"] img[src*="tech-stack-icons"]{filter:brightness(0) opacity(.65)!important} [data-theme="light"] img[src*="customer-logos"]{filter:brightness(0) opacity(.65)!important} /* svc-strip-name has color:#fff hardcoded in every service page inline