@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Inter+Tight:wght@500;600;700;800&family=Quicksand:wght@300;400;500;600;700&display=swap');

/* ==========================================================
   TOKENS  (Superlist-inspired: dark bg, vibrant accent)
   ========================================================== */
:root{
    /* Light theme (Cluely-style): bg = soft blue-gray, "white" = ink text */
    --bg     : #f5f7fa;
    --bg2    : #eef1f6;
    --bg3    : #ffffff;
    --bg4    : #fbfcfe;
    --white  : #0e1116;
    --w90    : rgba(14,17,22,.88);
    --w70    : rgba(14,17,22,.66);
    --w50    : rgba(14,17,22,.5);
    --w30    : rgba(14,17,22,.32);
    --w12    : rgba(14,17,22,.12);
    --w06    : rgba(14,17,22,.06);
    --w03    : rgba(14,17,22,.03);
    --accent : #0a8bff;
    --acc-lt : #5db1ff;
    --acc10  : rgba(10,139,255,.10);
    --acc20  : rgba(10,139,255,.20);
    --acc30  : rgba(10,139,255,.30);
    --acc05  : rgba(10,139,255,.05);
    --d90    : rgba(0,0,0,.9);
    --d60    : rgba(0,0,0,.6);
    --d20    : rgba(0,0,0,.2);
    --d08    : rgba(0,0,0,.08);
    --font   : 'Quicksand','Inter',system-ui,-apple-system,sans-serif;
    --mw     : 1200px;
    --r-sm   : 12px;
    --r-md   : 20px;
    --r-lg   : 28px;
    --r-xl   : 40px;
    --ease   : cubic-bezier(.23,1,.32,1);
    --ease-io: cubic-bezier(.77,0,.175,1);
    --spring : cubic-bezier(.34,1.56,.64,1);
    --puzzle-blue: #4A7FB5;
    --puzzle-orange: #D95B2B;
    /* Leadership image: adjust size (90%, 100%, 110%, 120%) and position in :root */
    --ceo-img-size : 90%;
    --ceo-img-pos-x : right;
    --ceo-img-pos-y : top;
    --ceo-img-translate-x : 0px;
    --ceo-img-translate-y : 0px;
}

/* ==========================================================
   RESET
   ========================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);background:var(--bg);color:var(--white);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
img{display:block;max-width:100%}

/* ==========================================================
   NAV  (Seturn-style: centered unified pill)
   ========================================================== */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:14px 0;
    transition:background .4s var(--ease);
    pointer-events:none;
}
/* No scrim behind the pill: it carries its own blur and shadow, and a light
   band smeared a milky haze over any dark section that scrolled beneath it. */
.nav.scrolled{background:none}
.st-nav-container{
    display:flex;justify-content:center;
    padding:0 clamp(16px,4vw,40px);
    pointer-events:none;
}
.st-nav-pill{
    pointer-events:auto;
    display:flex;align-items:center;
    width:fit-content;max-width:100%;
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(15px);
    backdrop-filter:blur(15px);
    border:1px solid rgba(14,17,22,.08);
    box-shadow:0 8px 32px rgba(14,17,22,.08);
    border-radius:28px;
    padding:4px 4px 4px 14px;
    min-height:48px;
}
.st-nav-brand{
    display:flex;align-items:center;
    color:var(--white);flex-shrink:0;
    padding-right:4px;
}
/* p-mark-v2 is already black ink + orange accent — no invert (that would hide it) */
/* The loop GIF is cropped and padded to the still's 541:673 framing, so both
   fill the same box at the same size and neither shifts the pill. */
.st-nav-logo{height:32px;width:auto;display:block}
/* Clicking the mark keeps focus (the handler cancels the navigation) — keep the
   ring for keyboard users, drop the box a mouse click would leave behind. */
.st-nav-brand:focus{outline:none}
.st-nav-brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.st-nav-wordmark{
    font-size:15px;font-weight:600;letter-spacing:-.02em;
    line-height:1;
}
.st-nav-menu{
    display:flex;align-items:center;
    padding:0 12px 0 16px;
}
.st-nav-list{
    display:flex;align-items:center;gap:4px;
    list-style:none;margin:0;padding:0;
}
.st-nav-link{
    display:inline-flex;align-items:center;
    padding:6px 14px;border-radius:100px;
    font-size:14px;font-weight:500;line-height:20px;
    color:var(--white);opacity:.7;white-space:nowrap;
    transition:opacity .2s,background .2s;
}
.st-nav-link:hover,.st-nav-link.active{
    opacity:1;
    background:rgba(14,17,22,.06);
}
.st-nav-cta{
    flex-shrink:0;
    padding:8px 20px;border-radius:100px;
    font-size:14px;font-weight:500;line-height:20px;
    color:#fff;text-align:center;white-space:nowrap;
    background:var(--puzzle-blue);
    transition:transform .2s,opacity .2s,background .2s;
}
.st-nav-cta:hover{
    transform:scale(.97);opacity:.95;
    background:var(--puzzle-orange);
}

/* Burger */
.burger,.st-nav-burger{
    display:none;flex-direction:column;gap:5px;padding:10px;
    background:rgba(14,17,22,.06);border-radius:8px;
}
.burger span,.st-nav-burger span{
    display:block;width:20px;height:1.5px;background:var(--white);
    transition:.3s var(--ease);
}
.burger.open span:nth-child(1),.st-nav-burger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.burger.open span:nth-child(2),.st-nav-burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3),.st-nav-burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Legacy nav aliases (subpages) */
.nav-wrap{
    max-width:var(--mw);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    height:48px;
}
.nav-links{display:flex;gap:28px;justify-content:center;flex:1;margin:0 24px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:36px;display:block}
.logo span{font-size:15px;font-weight:700;letter-spacing:-.02em}
.nav-links a{font-size:13px;font-weight:400;color:var(--w50);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-btn{
    font-size:13px;font-weight:500;color:#fff;
    background:var(--accent);padding:8px 20px;border-radius:100px;
    transition:opacity .2s,box-shadow .3s;
    box-shadow:0 0 24px var(--acc20);
}
.nav-btn:hover{opacity:.9;box-shadow:0 0 32px var(--acc30)}

/* Mobile menu */
.mob-menu{
    display:none;position:fixed;inset:0;z-index:99;
    background:rgba(245,247,250,.88);
    -webkit-backdrop-filter:blur(28px) saturate(1.5);
    backdrop-filter:blur(28px) saturate(1.5);
    padding:calc(104px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
    flex-direction:column;gap:0;
}
.mob-menu.open{display:flex}
.mob-menu a{
    font-size:clamp(20px,5.5vw,26px);font-weight:600;color:var(--w90);
    padding:14px 0;letter-spacing:-.02em;text-align:center;
    transition:color .2s,opacity .15s;
}
.mob-menu a:hover{color:var(--white)}
.mob-menu a:active{opacity:.5}
.mob-menu-cta{
    margin-top:auto;display:flex;align-items:center;justify-content:center;
    width:100%;padding:18px 28px;border-radius:100px;
    background:var(--puzzle-blue);
    transition:background .2s,transform .15s;
}
.mob-menu a.mob-menu-cta{font-size:17px;font-weight:600;color:#fff;letter-spacing:0;padding:18px 28px}
.mob-menu-cta:hover{background:var(--puzzle-orange)}
.mob-menu-cta:active{transform:scale(.98);opacity:1}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn-fill{
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(180deg,var(--acc-lt),var(--accent));color:#fff;
    padding:16px 32px;border-radius:100px;
    font-size:15px;font-weight:600;
    transition:transform .25s var(--spring),box-shadow .3s,opacity .2s;
    box-shadow:0 4px 24px var(--acc20);
}
.btn-fill:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 40px var(--acc30);opacity:.95}
.btn-fill svg{transition:transform .2s}
.btn-fill:hover svg{transform:translateX(3px)}

.btn-outline{
    display:inline-flex;align-items:center;gap:8px;
    padding:16px 32px;border-radius:100px;
    font-size:15px;font-weight:500;color:var(--w70);
    border:1px solid var(--w12);
    transition:color .2s,border-color .2s,background .2s,transform .25s var(--spring);
}
.btn-outline:hover{color:var(--white);border-color:var(--w30);background:var(--w06);transform:translateY(-2px)}

/* ==========================================================
   HERO  (Superlist: dramatic orbs, massive type)
   ========================================================== */
.hero-stack{
    position:relative;z-index:3;
}
.hero{
    position:relative;
    min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;
    padding:160px 32px clamp(80px,10vw,120px);
    overflow:hidden;
}
#networkCanvas{
    position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;
}
.hero-orb{
    position:absolute;border-radius:50%;pointer-events:none;
    filter:blur(100px);opacity:.6;
}
.hero-orb-1{
    width:700px;height:700px;top:-15%;left:50%;transform:translateX(-50%);
    background:radial-gradient(circle,var(--acc20),transparent 70%);
    animation:orbFloat 10s ease-in-out infinite;
}
.hero-orb-2{
    width:500px;height:500px;bottom:-10%;right:-10%;
    background:radial-gradient(circle,rgba(10,139,255,.12),transparent 70%);
    animation:orbFloat 14s ease-in-out infinite reverse;
}
@keyframes orbFloat{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(-40px)}
}
.hero-content{position:relative;z-index:2;max-width:900px;overflow:visible}

/* Hero bottom — fade out into the services section.
   Eased stops: a plain 2-stop gradient starts with a visible tangent line. */
.hero::after{
    content:'';position:absolute;left:0;right:0;bottom:0;
    height:clamp(180px,22vw,300px);
    background:linear-gradient(180deg,
        rgba(245,247,250,0) 0%,
        rgba(245,247,250,.05) 18%,
        rgba(245,247,250,.2) 40%,
        rgba(245,247,250,.5) 62%,
        rgba(245,247,250,.82) 82%,
        var(--bg) 100%);
    z-index:1;pointer-events:none;
}

.pill{
    display:inline-block;font-size:22px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--white);background:transparent;
    padding:8px 20px;border-radius:100px;margin-bottom:36px;
    border:none;
}
.hero h1{
    font-size:clamp(52px,9vw,100px);
    font-weight:800;letter-spacing:-.045em;line-height:1.08;
    margin-bottom:28px;padding-bottom:.15em;
    background:linear-gradient(180deg,var(--white) 40%,var(--w50) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-sub{
    font-size:clamp(17px,2vw,20px);font-weight:400;
    color:var(--w70);line-height:1.7;max-width:560px;margin:0 auto 48px;
}
.hero-sub strong{color:var(--w90);font-weight:600}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.hero-metrics{
    position:relative;z-index:2;
    display:flex;align-items:center;justify-content:center;gap:48px;
    margin-top:80px;
    padding:28px 48px;border-radius:var(--r-xl);
    background:var(--w03);border:1px solid var(--w06);
    backdrop-filter:blur(12px);
}
.metric{display:flex;flex-direction:column;align-items:center;gap:2px}
.metric-val{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--white)}
.metric-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--w30)}
.metric-sep{width:1px;height:32px;background:var(--w12)}

/* ==========================================================
   LOGOS BAR
   ========================================================== */
.logos-bar{
    position:relative;z-index:2;background:var(--bg);
    border-top:1px solid var(--w06);border-bottom:1px solid var(--w06);
    padding:36px 32px;
}
.logos-wrap{
    max-width:var(--mw);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:48px;
}
.logos-lbl{
    font-size:12px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:var(--w50);white-space:nowrap;
}
.logos-row{display:flex;gap:48px;align-items:center}
.logos-row span{
    font-size:18px;font-weight:700;color:var(--w50);
    letter-spacing:-.01em;transition:color .25s;
}
.logos-row span:hover{color:var(--white)}

/* ==========================================================
   STATEMENT (Big about text)
   ========================================================== */
.statement{
    position:relative;z-index:2;background:var(--bg);
    padding:160px 32px;
}
.statement-wrap{max-width:900px;margin:0 auto;text-align:center}
.statement-wrap p{
    font-size:clamp(22px,3vw,36px);font-weight:300;
    color:var(--w50);line-height:1.55;letter-spacing:-.01em;
}
.statement-wrap strong{color:var(--w90);font-weight:500}

/* ==========================================================
   CEO / LEADERSHIP  (Hero-style: text left, large image right)
   ========================================================== */
.ceo-section{
    position:relative;z-index:2;
    background:var(--bg2);padding:0;
    border-top:1px solid var(--w06);border-bottom:1px solid var(--w06);
    overflow:hidden;
}
.ceo-wrap{
    max-width:1400px;margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
    min-height:560px;
}
.ceo-content{
    display:flex;flex-direction:column;justify-content:center;
    padding:80px 64px 80px 48px;max-width:560px;
}
.ceo-chip{
    display:inline-block;font-size:11px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--w50);margin-bottom:28px;
}
.ceo-headline{
    font-size:clamp(36px,5vw,56px);font-weight:800;
    letter-spacing:-.04em;color:var(--white);line-height:1.08;
    margin-bottom:24px;
}
.ceo-bio{
    font-size:clamp(16px,1.5vw,18px);font-weight:400;
    color:var(--w70);line-height:1.65;margin-bottom:36px;
}
.ceo-bio strong{color:var(--white);font-weight:600}
.ceo-cta{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--accent);color:#fff;
    padding:16px 32px;border-radius:12px;
    font-size:15px;font-weight:600;
    transition:opacity .2s,transform .25s var(--spring),box-shadow .3s;
    box-shadow:0 4px 24px var(--acc20);
    width:fit-content;
}
.ceo-cta:hover{
    opacity:.95;transform:translateY(-2px);
    box-shadow:0 8px 32px var(--acc30);
}
.ceo-img{
    position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:flex-end;
}
.ceo-img img{
    width:100%;height:100%;min-width:100%;min-height:100%;
    object-fit:cover;object-position:center top;
}
.ceo-img-zoom,.ceo-save-pos{display:none!important;pointer-events:none;visibility:hidden}
.ceo-img-zoom{
    position:absolute;bottom:16px;right:16px;z-index:10;
    width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
    color:var(--white);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s,border-color .2s,transform .2s;
}
.ceo-img-zoom:hover{
    background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.4);
    transform:scale(1.08);
}
.ceo-save-pos{
    margin-top:20px;font-size:12px;font-weight:500;
    color:var(--w50);background:none;border:none;
    padding:8px 0;cursor:pointer;
    border-bottom:1px solid transparent;
    transition:color .2s,border-color .2s;
}
.ceo-save-pos:hover{color:var(--white);border-bottom-color:var(--w30)}

/* ==========================================================
   SERVICES  (Dark theme, card layout)
   ========================================================== */
.services{
    position:relative;z-index:2;
    background:var(--bg);padding:120px 32px;
    border-top:1px solid var(--w06);
}
.services-wrap{max-width:var(--mw);margin:0 auto}

.services-header{
    text-align:center;margin-bottom:64px;
}
.services-header .chip-dark{margin-bottom:20px}
.services-header h2{
    font-size:clamp(34px,5vw,52px);font-weight:800;
    letter-spacing:-.04em;color:var(--white);line-height:1.05;margin-bottom:16px;
}
.services-header p{
    font-size:clamp(16px,1.5vw,18px);font-weight:400;
    color:var(--w50);max-width:520px;margin:0 auto;line-height:1.65;
}

/* Services grid — all logos and info visible */
.services-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
.service-card{
    background:var(--bg2);border:1px solid var(--w06);
    border-radius:var(--r-lg);overflow:hidden;
    display:flex;flex-direction:column;
    transition:border-color .3s,box-shadow .3s,transform .3s var(--spring);
}
.service-card:hover{
    border-color:var(--w12);box-shadow:0 12px 48px rgba(14,17,22,.1);
    transform:translateY(-6px);
}
.service-card-vis{
    display:flex;align-items:center;justify-content:center;
    background:var(--bg2);border-bottom:1px solid var(--w06);
    padding:36px;aspect-ratio:4/3;overflow:hidden;
    transition:border-color .3s,box-shadow .3s;
}
.service-card-vis img{max-width:100%;max-height:100%;object-fit:contain}
.service-card:nth-child(2) .service-card-vis img{max-width:70%;max-height:70%}
.service-card-txt{padding:32px;flex:1;display:flex;flex-direction:column}
.service-tag{
    display:inline-block;font-size:10px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--w50);margin-bottom:12px;
}
.service-card-txt h3{
    font-size:clamp(20px,2.5vw,26px);font-weight:800;
    color:var(--white);letter-spacing:-.03em;margin-bottom:12px;
}
.service-card-txt p{font-size:14px;color:var(--w50);line-height:1.7;margin-bottom:16px}
.service-card-txt p strong{color:var(--white)}
.service-card-txt ul{margin-bottom:20px}
.service-card-txt li{
    font-size:15px;color:var(--w50);padding:6px 0 6px 20px;position:relative;
}
.service-card-txt li::before{
    content:'';position:absolute;left:0;top:50%;
    width:6px;height:6px;border-radius:50%;background:var(--white);
    transform:translateY(-50%);
}
.link-arrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:14px;font-weight:600;color:var(--accent);transition:gap .2s;
    margin-top:auto;
}
.link-arrow:hover{gap:12px}

.tech-stack{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.tech-item{
    display:flex;align-items:center;gap:8px;
    font-size:13px;font-weight:600;color:var(--w70);
    padding:8px 14px;background:var(--bg);border-radius:var(--r-sm);
    border:1px solid var(--w06);
}
.tech-icon-img{width:32px;height:32px;object-fit:contain;border-radius:8px}
.icon-box{
    width:100px;height:100px;display:flex;align-items:center;justify-content:center;
    background:var(--acc10);border-radius:var(--r-md);
    border:1px solid var(--w06);
}
.icon-box svg{stroke:var(--w50)}

.puzzle-studio-tagline{font-size:16px;font-weight:600;color:var(--white);margin-bottom:8px}
.service-card-vis.puzzle-studio-vis{
    display:flex;align-items:center;justify-content:center;
    padding:48px;background:transparent;border:none;
}
.service-card-vis.puzzle-studio-vis .puzzle-studio-logo-large{
    width:100%;max-width:420px;max-height:100%;object-fit:contain
}

/* ==========================================================
   SERVICES — Seturn-style cards (index)
   ========================================================== */
.svc-section{
    position:relative;z-index:2;
    background:var(--bg);
    padding:120px 32px 140px;
}
.svc-wrap{max-width:var(--mw);margin:0 auto}
.svc-header{text-align:center;max-width:720px;margin:0 auto 72px}
.svc-label{
    display:inline-block;font-size:11px;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--w50);margin-bottom:24px;
}
.svc-title{
    font-size:clamp(34px,5.2vw,56px);font-weight:700;
    letter-spacing:-.03em;line-height:1.08;color:var(--white);
    font-family:'Quicksand',var(--font);
}
.svc-title-muted{color:var(--w50)}
.svc-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.svc-card{
    display:flex;flex-direction:column;
    border:1px solid var(--w12);border-radius:var(--r-lg);
    background:var(--bg3);overflow:hidden;min-height:520px;
    box-shadow:0 12px 32px rgba(14,17,22,.08);
    transition:border-color .3s var(--ease),background .3s var(--ease),transform .35s var(--spring),box-shadow .35s;
}
.svc-card:hover{
    border-color:var(--w30);
    background:var(--bg4);
    transform:translateY(-4px);
    box-shadow:0 24px 64px rgba(14,17,22,.14);
}
.svc-card-img-wrap{background:linear-gradient(180deg,var(--w06),transparent)}
.svc-card-img-wrap{
    display:flex;align-items:center;justify-content:center;
    min-height:220px;padding:40px 32px 24px;
}
.svc-card-img{
    width:auto;height:clamp(120px,14vw,180px);
    object-fit:contain;
    animation:svcDance 3.6s ease-in-out infinite;
}
.svc-card:nth-child(2) .svc-card-img{animation-delay:.45s}
.svc-card:nth-child(3) .svc-card-img{animation-delay:.9s}

/* Kayou mascot (AI card): floats with the other illustrations, and blinks.
   Blink timing matches meet-kayou-webapp so he behaves the same on both sites. */
/* He keeps the shared illustration height so all three titles stay on one line;
   the viewBox is padded instead, which shrinks him inside the same box. */
.svc-mascot{overflow:visible;filter:drop-shadow(0 8px 20px rgba(37,99,235,.20))}
.svc-mascot .m-eye{
    transform-box:fill-box;transform-origin:center;
    animation:mascotBlink 4.8s infinite;
}
@keyframes mascotBlink{
    0%,92%,100%{transform:scaleY(1)}
    96%{transform:scaleY(.1)}
}
@media (prefers-reduced-motion:reduce){
    .svc-mascot .m-eye{animation:none}
}
@keyframes svcDance{
    0%,100%{transform:translateY(0) rotate(0deg)}
    20%{transform:translateY(-9px) rotate(-5deg)}
    40%{transform:translateY(0) rotate(0deg)}
    60%{transform:translateY(-7px) rotate(5deg)}
    80%{transform:translateY(-2px) rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){.svc-card-img{animation:none}}
.svc-card-body{
    display:flex;flex-direction:column;flex:1;
    padding:8px 28px 32px;
}
.svc-card-title{
    font-size:clamp(22px,2.4vw,28px);font-weight:700;
    letter-spacing:-.02em;color:var(--white);margin-bottom:8px;
}
.svc-card-lead{
    font-size:15px;font-weight:400;color:var(--w50);
    line-height:1.5;margin-bottom:28px;
}
.svc-list{
    list-style:none;margin-top:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;
}
.svc-card-cta{
    margin-top:24px;align-self:flex-start;
    display:inline-flex;align-items:center;justify-content:center;
    padding:12px 26px;border-radius:100px;
    font-size:14px;font-weight:600;color:var(--white);
    background:var(--w12);
    transition:background .25s var(--ease),transform .2s var(--spring);
}
.svc-card-cta:hover{background:var(--w30);transform:translateY(-2px)}
.svc-card-cta:active{transform:scale(.97)}
.svc-card-cta--blue{
    background:linear-gradient(180deg,var(--acc-lt),var(--accent));color:#fff;
    box-shadow:0 4px 20px var(--acc20);
    transition:transform .25s var(--spring),box-shadow .3s,opacity .2s;
    will-change:transform;
}
.svc-card-cta--blue:hover{
    background:linear-gradient(180deg,var(--acc-lt),var(--accent));
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 40px var(--acc30);opacity:.95;
}
.svc-list li{
    display:flex;align-items:flex-start;gap:8px;
    font-size:13px;font-weight:500;color:var(--w70);line-height:1.35;
}
.svc-check{
    flex-shrink:0;width:18px;height:18px;color:var(--w30);
    margin-top:1px;
}
.svc-grid.rv{opacity:1;transform:none;transition:none}
.svc-grid.rv .svc-card{opacity:0;transform:translateY(24px)}
.svc-grid.rv.vis .svc-card{
    opacity:1;transform:translateY(0);
    transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s,box-shadow .35s;
}
.svc-grid.rv.vis .svc-card:nth-child(2){transition-delay:.08s}
.svc-grid.rv.vis .svc-card:nth-child(3){transition-delay:.16s}
@media(max-width:980px){
    .svc-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
    .svc-section{padding:100px 24px 120px}
    /* Compact rectangle: icon on the left, content on the right */
    .svc-card{
        min-height:auto;
        display:grid;grid-template-columns:96px 1fr;align-items:start;
    }
    .svc-card-img-wrap{
        min-height:0;padding:20px 0 20px 18px;
        align-items:flex-start;justify-content:center;
        background:none;
    }
    .svc-card-img{height:64px;animation:none}
    .svc-card-body{padding:18px 18px 20px 16px}
    .svc-card-title{font-size:20px;margin-bottom:4px}
    .svc-card-lead{font-size:13px;margin-bottom:14px}
    .svc-list{grid-template-columns:1fr 1fr;gap:8px 10px}
    .svc-list li{font-size:12px}
    .svc-check{width:15px;height:15px}
    .svc-card-cta{margin-top:16px;padding:9px 20px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
    .svc-grid.rv .svc-card{opacity:1;transform:none}
    .svc-grid.rv.vis .svc-card{transition:none}
}
@media(hover:none){.svc-card:hover{transform:none}}

/* ==========================================================
   SPLIT SECTIONS  (Uber-style: text + illustration)
   ========================================================== */
.split-section{
    position:relative;z-index:2;background:var(--bg);
    padding:110px 32px;
}
.split-wrap{
    max-width:var(--mw);margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);
    align-items:center;
}
.split-media{
    position:relative;border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 20px 50px -24px rgba(20,20,40,.18);
    aspect-ratio:1.02/1;
}
/* Landscape artwork: match the file's ratio so cover doesn't crop the sides off */
.split-media--wide{aspect-ratio:1.3/1}
.split-media img{width:100%;height:100%;object-fit:cover;display:block}
/* The Labs icon is a transparent PNG — no panel, no frame, it sits on the page. */
.split-media--labs-logo{background:none;box-shadow:none;border-radius:0;overflow:visible}
.split-media--labs-logo img{object-fit:contain}

/* "Alive" media: the liquid runs on its own (data-liquid-ambient) instead of
   chasing the cursor, so the frame keeps its shape — only a slow light drifts
   across on top of it. */
.split-media--alive::after{
    content:"";position:absolute;inset:-25%;z-index:2;pointer-events:none;
    background:radial-gradient(38% 52% at 32% 28%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%);
    mix-blend-mode:soft-light;
    animation:mediaSheen 19s var(--ease) infinite alternate;
    will-change:transform;
}
@keyframes mediaSheen{
    from{transform:translate3d(-7%,-5%,0)}
    to{transform:translate3d(9%,7%,0)}
}
@media(prefers-reduced-motion:reduce){
    .split-media--alive::after{animation:none}
}
.liquid-image-canvas{
    position:absolute;inset:0;width:100%;height:100%;z-index:1;
    display:block;pointer-events:none;
}
.liquid-image-cursor{
    position:absolute;left:0;top:0;z-index:2;
    width:13px;height:13px;border-radius:50%;
    border:1.5px solid rgba(10,139,255,.48);
    background:rgba(255,255,255,.48);
    box-shadow:0 2px 10px rgba(10,139,255,.16);
    opacity:0;transform:translate(-50%,-50%);
    transition:opacity .25s ease;pointer-events:none;
}
.liquid-image.liquid-ready .liquid-image-cursor{opacity:1}
@media(pointer:coarse){.liquid-image-cursor{display:none}}
.split-section--flip .split-media{order:-1}
.split-label{
    display:inline-block;font-size:11px;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--w50);margin-bottom:20px;
}
.split-title{
    font-size:clamp(30px,4vw,54px);font-weight:700;
    letter-spacing:-.02em;line-height:1.12;color:var(--white);
    margin-bottom:18px;
}
.split-copy{
    font-size:clamp(15px,1.4vw,17px);color:var(--w70);
    line-height:1.7;max-width:520px;margin-bottom:32px;
}
/* first of two stacked paragraphs */
.split-copy--tight{margin-bottom:16px}
.split-copy strong{color:var(--w90);font-weight:600}

/* ==========================================================
   AI / PUZZLE LABS
   ========================================================== */
.ai-section{
    position:relative;z-index:2;
    background:var(--bg);
    padding:0 32px 140px;
}
.ai-wrap{max-width:var(--mw);margin:0 auto}
.ai-header{text-align:center;max-width:760px;margin:0 auto 56px}
.ai-label{
    display:inline-block;font-size:12px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent);margin-bottom:20px;
}
/* The brand name reads blue wherever it appears in this section */
.ai-brand{color:var(--accent);font-weight:700}
.ai-title{
    font-family:'Quicksand',var(--font);
    font-size:clamp(32px,4.6vw,52px);font-weight:700;
    letter-spacing:-.03em;line-height:1.1;color:var(--white);
    margin-bottom:18px;
}
.ai-title-muted{color:var(--w50)}
.ai-lead{
    font-size:clamp(15px,1.5vw,17px);color:var(--w70);
    line-height:1.7;max-width:620px;margin:0 auto;
}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ai-card{
    display:flex;flex-direction:column;
    padding:34px 30px 32px;
    border:1px solid var(--w12);border-radius:var(--r-lg);
    background:var(--bg3);
    box-shadow:0 12px 32px rgba(14,17,22,.08);
    transition:border-color .3s var(--ease),transform .35s var(--spring),box-shadow .35s;
}
.ai-card:hover{
    border-color:var(--acc30);transform:translateY(-4px);
    box-shadow:0 24px 64px rgba(14,17,22,.14);
}
.ai-card-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:52px;height:52px;margin-bottom:22px;
    border-radius:var(--r-sm);
    background:var(--acc10);color:var(--accent);
}
.ai-card-icon svg{width:26px;height:26px}
.ai-card-title{
    font-size:21px;font-weight:700;letter-spacing:-.02em;
    color:var(--white);margin-bottom:10px;
}
.ai-card-copy{font-size:15px;line-height:1.65;color:var(--w70)}
.ai-ctas{
    display:flex;align-items:center;justify-content:center;
    gap:22px;flex-wrap:wrap;margin-top:52px;
}
@media(max-width:980px){
    .ai-grid{grid-template-columns:1fr}
    .ai-card{padding:28px 24px}
}
@media(max-width:560px){
    .ai-section{padding:0 20px 100px}
    .ai-header{margin-bottom:40px}
}
@media (hover:none){.ai-card:hover{transform:none}}
.split-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.split-link{
    font-size:15px;font-weight:600;color:var(--white);
    border-bottom:1.5px solid var(--w30);padding-bottom:2px;
    transition:border-color .2s;
}
.split-link:hover{border-color:var(--white)}
@media(max-width:900px){
    .split-section{padding:72px 24px}
    .split-wrap{grid-template-columns:1fr;gap:32px}
    /* Image on top, text below on phones */
    .split-media,.split-section--flip .split-media{order:-1}
    .split-text{text-align:center}
    .split-copy{margin:0 auto 24px}
    .split-ctas{justify-content:center}
}

/* ==========================================================
   COMPANIES WE MANAGE — selected portfolio cards
   ========================================================== */
.co-section{
    position:relative;z-index:2;
    background:var(--bg);
    padding:96px 0 110px;
    overflow:hidden;
}
.co-section .co-label{color:var(--w50)}
.co-section .co-header{max-width:none}
.co-section .co-title{
    font-family:'Quicksand',var(--font);
    max-width:900px;margin-left:auto;margin-right:auto;
    font-size:clamp(34px,4.2vw,58px);
    font-weight:700;line-height:1.05;letter-spacing:-.02em;
    text-align:center;
    color:var(--white);
}
.co-section .co-title-muted{color:var(--white)}
.co-section .co-lead{color:var(--w70)}
.co-wrap{max-width:var(--mw);margin:0 auto;padding:0 32px}
.co-header{text-align:center;max-width:680px;margin:0 auto 56px}
.co-label{
    display:inline-block;font-size:11px;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--w50);margin-bottom:24px;
}

/* Homepage section names share one larger typographic treatment. */
.split-label,
.svc-label,
.co-label{
    font-family:var(--font-display);
    font-size:clamp(20px,2.4vw,32px);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.02em;
    text-transform:none;
    color:var(--w50);
}
#about .split-label{
    display:block;
    font-size:clamp(30px,3.8vw,46px);
    font-weight:700;
    line-height:1.12;
    letter-spacing:-.03em;
    color:var(--accent);
    margin-bottom:14px;
}
.co-title{
    font-size:clamp(34px,5.2vw,56px);font-weight:500;
    letter-spacing:-.03em;line-height:1.08;color:var(--white);
    font-family:'Quicksand',var(--font);margin-bottom:16px;
}
.co-title-muted{color:var(--w50)}
.co-lead{
    font-size:clamp(13px,1.35vw,15px);color:var(--w50);
    line-height:1.6;max-width:500px;margin:0 auto;
}
.co-managed-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;margin:48px auto 0;max-width:980px}
.co-managed-card{
    grid-column:span 2;
    min-width:0;background:#fff;border:1px solid rgba(18,35,70,.08);border-radius:22px;
    padding:12px 12px 16px;box-shadow:0 14px 36px rgba(24,47,88,.08);
    transition:transform .35s var(--spring),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.co-managed-card:hover{transform:translateY(-6px);box-shadow:0 28px 65px rgba(24,47,88,.16);border-color:rgba(10,139,255,.22)}
.co-managed-logo{
    height:110px;border-radius:14px;background:linear-gradient(145deg,#f2f6fc,#fff);
    display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden;
}
.co-managed-logo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.co-managed-logo--encyclo{padding:7px}
.co-managed-logo--encyclo img{transform:scale(1.18)}
.co-managed-card h3{font:700 15px/1.2 'Quicksand',var(--font);color:var(--white);letter-spacing:-.02em;margin:13px 3px 4px}
.co-managed-card p{font-size:10px;font-weight:600;color:var(--w50);margin:0 3px;text-transform:uppercase;letter-spacing:.07em}
.co-managed-card:nth-child(5){grid-column:2 / span 2}
@media(max-width:768px){
    .co-section{padding:100px 0 90px}
    .co-wrap{padding:0 20px}
    .co-managed-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:42px}
    .co-managed-card,.co-managed-card:nth-child(5){grid-column:auto}
    .co-managed-card{padding:12px 12px 18px;border-radius:18px}
    .co-managed-logo{height:104px;padding:15px;border-radius:13px}
    .co-managed-card h3{font-size:15px;margin-top:14px}
    .co-managed-card p{font-size:10px}
}
@media(max-width:440px){
    .co-managed-grid{grid-template-columns:1fr}
    .co-managed-card:nth-child(5){grid-column:auto}
    .co-managed-logo{height:120px}
}

/* ==========================================================
   BENTO GRID  (Dark — Superlist card feel)
   ========================================================== */
.bento{
    position:relative;z-index:2;
    background:var(--bg);padding:160px 32px;
}
.bento-wrap{max-width:var(--mw);margin:0 auto}

/* Dark headings */
.sec-top-dark{text-align:center;margin-bottom:72px}
.chip-dark{
    display:inline-block;font-size:11px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);background:var(--acc10);
    padding:6px 18px;border-radius:100px;margin-bottom:24px;
    border:1px solid var(--acc20);
}
.chip-spotlight{
    display:inline-block;font-size:11px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--white);background:var(--w06);
    padding:6px 18px;border-radius:100px;margin-bottom:24px;
    border:1px solid var(--w12);
}
.sec-top-dark h2{
    font-size:clamp(34px,5vw,56px);font-weight:800;
    letter-spacing:-.04em;color:var(--white);line-height:1.05;margin-bottom:16px;
}
.sec-top-dark p{
    font-size:clamp(16px,1.5vw,18px);font-weight:400;
    color:var(--w50);max-width:480px;margin:0 auto;line-height:1.65;
}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{
    background:var(--bg2);border:1px solid var(--w06);
    border-radius:var(--r-lg);padding:44px;
    transition:border-color .35s,background .35s,transform .35s var(--spring),box-shadow .35s;
}
.card:hover{
    border-color:var(--w12);background:var(--bg3);
    transform:translateY(-6px);box-shadow:0 12px 48px rgba(14,17,22,.1);
}
.card-tall{grid-row:1/3;display:flex;flex-direction:column;justify-content:center}
.card-wide{grid-column:1/-1}
.card-num{
    display:inline-block;font-size:12px;font-weight:700;
    color:var(--accent);font-family:'Courier New',monospace;
    letter-spacing:.06em;margin-bottom:28px;
}
.card h3{
    font-size:26px;font-weight:800;color:var(--white);
    letter-spacing:-.03em;line-height:1.2;margin-bottom:14px;
}
.card p{font-size:15px;font-weight:300;color:var(--w50);line-height:1.75}

/* ==========================================================
   SPOTLIGHT (Intelligence section)
   ========================================================== */
.spotlight{
    position:relative;z-index:2;
    background:var(--bg2);padding:160px 32px;
    border-top:1px solid var(--w12);border-bottom:1px solid var(--w12);
}
.spotlight-wrap{
    max-width:var(--mw);margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.spotlight-txt h2{
    font-size:clamp(36px,5vw,60px);font-weight:800;
    letter-spacing:-.04em;color:var(--white);line-height:1.0;margin-bottom:24px;
}
.spotlight-txt p{
    font-size:16px;font-weight:300;color:var(--w70);line-height:1.75;margin-bottom:40px;
}
.spotlight-img{
    display:flex;align-items:center;justify-content:center;
    background:var(--bg3);border:1px solid var(--w12);
    border-radius:var(--r-lg);padding:64px;aspect-ratio:1;
    transition:border-color .3s,box-shadow .3s;
}
.spotlight-img:hover{border-color:var(--w30);box-shadow:0 12px 48px rgba(14,17,22,.12)}
.spotlight-img img{max-width:50%;max-height:50%;object-fit:contain}

/* ==========================================================
   SOLUTIONS BUILT
   ========================================================== */
.solutions-section{
    position:relative;z-index:2;
    background:var(--bg);padding:120px 32px;
    border-top:1px solid var(--w06);
}
.solutions-wrap{max-width:var(--mw);margin:0 auto}
.solutions-section .sec-top-dark{margin-bottom:56px}
.solutions-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.solution-card{
    background:var(--bg2);border:1px solid var(--w06);
    border-radius:var(--r-lg);padding:32px;
    transition:border-color .3s,transform .3s var(--spring),box-shadow .3s;
    overflow:hidden;
}
.solution-card:hover{
    border-color:var(--w12);
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(14,17,22,.1);
}
.solution-icon{
    width:64px;height:64px;min-width:64px;max-width:64px;margin-bottom:16px;
    display:flex;align-items:center;justify-content:flex-start;
    background:#0f0f0f;border-radius:var(--r-sm);padding:8px;
    flex-shrink:0;box-sizing:border-box;overflow:hidden;
}
.solution-icon img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.solution-card-icon-white .solution-icon{background:#ffffff}
.solution-num{
    display:inline-block;font-size:12px;font-weight:700;
    color:var(--accent);font-family:'Courier New',monospace;
    letter-spacing:.06em;margin-bottom:16px;
}
.solution-card h3{
    font-size:20px;font-weight:800;color:var(--white);
    letter-spacing:-.02em;line-height:1.2;margin-bottom:10px;
}
.solution-card p{font-size:15px;font-weight:300;color:var(--w50);line-height:1.65}

/* ==========================================================
   MARQUEE
   ========================================================== */
.marquee{
    position:relative;z-index:2;
    background:var(--bg);border-top:1px solid var(--w06);
    overflow:hidden;padding:18px 0;
}
.marquee-inner{
    display:flex;align-items:center;width:max-content;
    animation:scroll 35s linear infinite;
}
.marquee-inner span{
    font-size:14px;font-weight:600;color:#b0b0b8;
    white-space:nowrap;padding:0 18px;letter-spacing:.04em;
    text-transform:uppercase;
}
.marquee-inner .sep{color:var(--w06);font-weight:300}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ==========================================================
   QUOTE (White section)
   ========================================================== */
.quote-sec{
    position:relative;z-index:2;
    background:var(--bg2);padding:140px 32px;
    border-top:1px solid var(--w06);border-bottom:1px solid var(--w06);
}
.quote-sec::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:80px;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);
    border-radius:2px;opacity:.8;
}
.quote-wrap{max-width:800px;margin:0 auto;text-align:center}
.quote-wrap blockquote{
    font-size:clamp(26px,4vw,46px);font-weight:300;
    color:var(--white);line-height:1.35;letter-spacing:-.03em;margin-bottom:36px;
}
.quote-wrap cite{display:flex;flex-direction:column;gap:4px;font-style:normal}
.quote-wrap cite strong{font-size:15px;font-weight:700;color:var(--white)}
.quote-wrap cite span{font-size:13px;color:#8a8a8a}

/* ==========================================================
   PORTFOLIO
   ========================================================== */
.portfolio{
    position:relative;z-index:2;
    background:var(--bg);padding:160px 32px;
}
.portfolio-wrap{max-width:680px;margin:0 auto}
.port-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.port-card{
    border:1px solid var(--w06);border-radius:var(--r-md);overflow:hidden;
    transition:border-color .35s,box-shadow .35s,transform .35s var(--spring);
}
.port-card:hover{
    border-color:var(--w12);
    box-shadow:0 12px 48px rgba(14,17,22,.1);
    transform:translateY(-6px);
}
.port-thumb{
    aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
    padding:20px;background:var(--bg2);
}
.port-thumb img{max-height:90%;max-width:85%;object-fit:contain}
.port-info{
    padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
    border-top:1px solid var(--w06);
}
.port-info h3{font-size:14px;font-weight:700;color:var(--white);margin-bottom:2px}
.port-tag{font-size:10px;font-weight:600;color:var(--w30);text-transform:uppercase;letter-spacing:.08em}
.port-arr{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--w06);
    display:flex;align-items:center;justify-content:center;color:var(--w30);
    transition:background .2s,border-color .2s,color .2s;
}
.port-card:hover .port-arr{background:var(--acc10);border-color:var(--accent);color:var(--accent)}

/* ==========================================================
   CTA
   ========================================================== */
.cta{
    position:relative;z-index:2;
    background:var(--bg2);padding:160px 32px;
    border-top:1px solid var(--w06);
}
.cta-box{
    max-width:680px;margin:0 auto;text-align:center;position:relative;
    border:1px solid var(--w06);border-radius:var(--r-xl);
    padding:88px 52px;background:var(--bg);overflow:hidden;
}
.cta-glow{
    position:absolute;top:-2px;left:50%;transform:translateX(-50%);
    width:200px;height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.cta-box h2{
    font-size:clamp(30px,4vw,44px);font-weight:800;
    letter-spacing:-.04em;color:var(--white);margin-bottom:14px;
}
.cta-box p{
    font-size:17px;font-weight:300;color:var(--w50);
    margin-bottom:40px;line-height:1.65;
}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ==========================================================
   FOOTER
   ========================================================== */
.ft{
    position:relative;z-index:2;
    background:var(--bg2);border-top:1px solid var(--w06);
    padding:100px 32px 0;overflow:hidden;
}
.ft-glow{
    position:absolute;top:-1px;left:50%;transform:translateX(-50%);
    width:320px;height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    opacity:.6;
}
.ft-wrap{
    max-width:var(--mw);margin:0 auto;
    display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:56px;align-items:start;
    padding-bottom:72px;
}
.ft-brand{text-align:center}
.ft-brand img{height:44px;margin:0 auto 20px;display:block}
.ft-tagline{
    font-size:18px;font-weight:600;color:var(--w90);
    letter-spacing:-.02em;line-height:1.3;margin-bottom:10px;
}
.ft-desc{font-size:14px;color:var(--w30);max-width:260px;line-height:1.7;margin:0 auto 24px}
.ft-socials{display:flex;gap:8px;justify-content:center}
.ft-social-link{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    border-radius:10px;border:1px solid var(--w06);color:var(--w30);
    transition:color .25s,border-color .25s,background .25s,transform .25s var(--spring);
}
.ft-social-link:hover{
    color:var(--white);border-color:var(--w30);background:var(--w06);
    transform:translateY(-2px);
}
.ft-col{text-align:center}
.ft-col h4{
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--w30);margin-bottom:24px;
    padding-bottom:12px;border-bottom:1px solid var(--w06);
}
.ft-col a,.ft-col p{
    display:block;font-size:14px;color:var(--w50);
    padding:6px 0;transition:color .2s;
}
.ft-col a:hover{color:var(--white)}
.ft-bottom{
    max-width:var(--mw);margin:0 auto;padding:28px 0;
    border-top:1px solid var(--w06);
    display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;
    font-size:12px;color:var(--w12);text-align:center;
}
.ft-back-top{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12px;font-weight:500;color:var(--w30);
    padding:8px 16px;border-radius:100px;border:1px solid var(--w06);
    transition:color .2s,border-color .2s,background .2s,transform .25s var(--spring);
}
.ft-back-top:hover{
    color:var(--white);border-color:var(--w30);background:var(--w06);
    transform:translateY(-2px);
}

/* ==========================================================
   CAREERS PAGE STYLES
   ========================================================== */
.page-hero{
    position:relative;z-index:1;padding:200px 32px 80px;text-align:center;
}
.page-hero h1{
    font-size:clamp(44px,7vw,80px);font-weight:800;
    letter-spacing:-.045em;line-height:1.0;margin-bottom:16px;
    background:linear-gradient(180deg,var(--white) 40%,var(--w50) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.page-hero p{font-size:clamp(16px,2vw,20px);font-weight:300;color:var(--w50)}

.s{position:relative;z-index:2;background:var(--bg);padding:120px 32px}
.s-inner{max-width:var(--mw);margin:0 auto}
.s-head{margin-bottom:64px}
.s-head.center{text-align:center}
.s-label{
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);margin-bottom:16px;
}
.s-title{
    font-size:clamp(32px,4vw,48px);font-weight:800;letter-spacing:-.04em;
    color:var(--white);line-height:1.1;margin-bottom:16px;
}
.s-desc{font-size:clamp(16px,1.5vw,18px);font-weight:300;color:var(--w50);line-height:1.7;max-width:560px}
.s-head.center .s-desc{margin:0 auto}

.info-block{
    border:1px solid var(--w06);border-radius:var(--r-lg);
    padding:clamp(32px,5vw,56px);margin-bottom:24px;text-align:center;
    transition:border-color .3s,transform .3s var(--spring),box-shadow .3s;
}
.info-block:hover{border-color:var(--w12);transform:translateY(-4px);box-shadow:0 8px 40px rgba(14,17,22,.1)}
.info-block h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.03em;margin-bottom:16px;color:var(--white)}
.info-block p{font-size:clamp(15px,1.5vw,17px);font-weight:300;color:var(--w50);line-height:1.7;max-width:680px;margin:0 auto}
.info-block-accent{background:var(--bg2)}

.perks{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    background:var(--w06);border:1px solid var(--w06);border-radius:var(--r-lg);
    overflow:hidden;margin-top:48px;
}
.perk{background:var(--bg);padding:40px 36px;transition:background .3s}
.perk:hover{background:var(--bg3)}
.perk h3{font-size:17px;font-weight:700;color:var(--white);margin-bottom:8px}
.perk p{font-size:14px;font-weight:300;color:var(--w50);line-height:1.65}

.btn-p{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--accent);color:#0f0f0f;
    padding:16px 32px;border-radius:100px;
    font-size:15px;font-weight:600;
    transition:transform .25s var(--spring),box-shadow .3s,opacity .2s;
    box-shadow:0 4px 24px var(--acc20);
}
.btn-p:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 40px var(--acc30);opacity:.95}
.btn-p svg{width:16px;height:16px;transition:transform .2s}
.btn-p:hover svg{transform:translateX(3px)}

/* ==========================================================
   MODAL (Careers)
   ========================================================== */
.modal{
    display:none;position:fixed;inset:0;z-index:200;
    background:rgba(14,17,22,.5);backdrop-filter:blur(12px);
    overflow-y:auto;padding:40px 20px;
}
.modal.open{
    display:flex;align-items:flex-start;justify-content:center;
    animation:fadeIn .25s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
    background:var(--bg2);border:1px solid var(--w06);
    border-radius:var(--r-lg);padding:44px;width:100%;max-width:540px;
    margin-top:60px;animation:slideUp .35s var(--ease);
}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.modal-top h2{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--white)}
.modal-close{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--r-sm);color:var(--w50);font-size:22px;transition:background .2s;
}
.modal-close:hover{background:var(--w06)}

.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--w50)}
.field input,.field textarea,.field select{
    background:var(--acc05);border:1px solid var(--w06);
    border-radius:var(--r-sm);padding:13px 16px;font-size:15px;
    color:var(--white);font-family:var(--font);outline:none;
    transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
    border-color:var(--acc30);box-shadow:0 0 16px var(--acc05);
}
.field input::placeholder,.field textarea::placeholder{color:var(--w12)}
.field textarea{resize:vertical;min-height:80px}
.field select option{background:var(--bg2)}

.upload-area{
    border:1px dashed var(--w12);border-radius:var(--r-sm);
    padding:28px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;
}
.upload-area:hover{border-color:var(--w30);background:var(--acc05)}
.upload-area input{display:none}
.upload-area .up-text{font-size:14px;color:var(--w50)}
.upload-area .up-text strong{color:var(--white)}
.upload-area .up-hint{font-size:12px;color:var(--w12);margin-top:4px}
.upload-area .up-file{font-size:12px;color:var(--w50);margin-top:8px}

.btn-submit{
    background:var(--accent);color:#0f0f0f;border:none;
    border-radius:100px;padding:15px 28px;font-size:15px;font-weight:600;
    cursor:pointer;font-family:var(--font);
    transition:box-shadow .3s,opacity .2s,transform .25s var(--spring);
    margin-top:8px;box-shadow:0 4px 24px var(--acc20);
}
.btn-submit:hover{opacity:.9;box-shadow:0 8px 40px var(--acc30);transform:translateY(-2px)}
.btn-submit:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ==========================================================
   REVEAL
   ========================================================== */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.vis{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.06s}
.rv-d2{transition-delay:.12s}
.rv-d3{transition-delay:.18s}
.rv-d4{transition-delay:.24s}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media(max-width:1024px){
    .spotlight-wrap{grid-template-columns:1fr;gap:56px}
    .ft-wrap{grid-template-columns:1fr 1fr;gap:40px 48px}
}
@media(max-width:768px){
    .nav{padding:12px 0}
    .nav-links{display:none}
    .nav-btn{display:none}
    .st-nav-menu,.st-nav-cta{display:none}
    .st-nav-pill{padding-right:4px}
    .burger,.st-nav-burger{display:flex}

    .hero{padding:140px 20px 80px;min-height:100vh;min-height:100svh}
    .hero h1{font-size:clamp(38px,11vw,60px)}
    .hero-sub{font-size:16px;margin-bottom:36px}
    .hero-btns{flex-direction:column;align-items:center}
    .hero-metrics{gap:28px;padding:24px 28px;flex-wrap:wrap;justify-content:center}

    .logos-wrap{flex-direction:column;text-align:center;gap:14px}
    .logos-row{gap:28px}

    .statement{padding:100px 20px}

    .ceo-wrap{grid-template-columns:1.1fr 0.9fr;min-height:400px;gap:0}
    .ceo-content{padding:32px 20px 32px 24px;max-width:100%;justify-content:center}
    .ceo-img{min-height:400px}
    .ceo-headline{font-size:clamp(22px,5vw,28px);margin-bottom:12px}
    .ceo-bio{font-size:14px;margin-bottom:20px;line-height:1.55}
    .ceo-cta{padding:12px 24px;font-size:14px}

    .services{padding:100px 20px}
    .services-grid{grid-template-columns:1fr;gap:24px}
    .service-card-vis{aspect-ratio:16/10;padding:24px;max-height:200px}
    .service-card-vis img{max-width:100%;max-height:100%}
    .service-card:nth-child(2) .service-card-vis img{max-width:100%;max-height:100%}
    .service-card-txt{padding:24px}
    .tech-icon-img{width:28px;height:28px}
    .solution-icon{width:48px;height:48px;min-width:48px;max-width:48px;padding:6px;margin-bottom:12px;overflow:hidden}
    .solution-icon img{width:36px;height:36px;max-width:36px;max-height:36px}

    .bento{padding:100px 20px}
    .grid{grid-template-columns:1fr}
    .card-tall{grid-row:auto}
    .card-wide{grid-column:auto}
    .card{padding:32px}

    .spotlight{padding:100px 20px}
    .spotlight-img{aspect-ratio:auto;padding:48px}

    .quote-sec{padding:100px 20px}
    .quote-wrap blockquote{font-size:clamp(22px,6vw,30px)}

    .solutions-section{padding:80px 20px}
    .solutions-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .solution-card{padding:20px}

    .portfolio{padding:80px 20px}
    .portfolio-wrap{max-width:100%}
    .port-grid{grid-template-columns:1fr;gap:12px;max-width:400px;margin:0 auto}

    .cta{padding:100px 20px}
    .cta-box{padding:56px 28px}
    .cta-btns{flex-direction:column;align-items:center}

    .ft{padding:60px 20px 0}
    .ft-wrap{grid-template-columns:1fr;gap:36px;padding-bottom:40px}
    .ft-brand{text-align:center}
    .ft-brand img{margin:0 auto 16px}
    .ft-tagline{font-size:16px}
    .ft-desc{max-width:100%;margin:0 auto 20px;text-align:center}
    .ft-socials{justify-content:center}
    .ft-col h4{margin-bottom:16px;padding-bottom:8px}
    .ft-bottom{flex-direction:column;gap:16px;text-align:center;padding:20px 0 28px}

    .page-hero{padding:160px 20px 60px}
    .s{padding:80px 20px}
    .perks{grid-template-columns:1fr}
    .modal-box{padding:28px;margin-top:20px}
    .mob-menu{padding:100px 20px 40px}
    .port-thumb{aspect-ratio:16/9;padding:16px}
    .port-thumb img{max-height:65%;max-width:60%}
    .port-info{padding:10px 14px}
    .port-info h3{font-size:13px}
}
@media(max-width:480px){
    .hero-metrics{flex-direction:column;gap:16px}
    .metric-sep{width:40px;height:1px}
    .logos-row{flex-direction:column;gap:10px}
    .ceo-wrap{min-height:360px}
    .ceo-content{padding:24px 16px 24px 20px}
    .ceo-img{min-height:360px}
    .ceo-headline{font-size:20px;margin-bottom:10px}
    .ceo-bio{font-size:13px;margin-bottom:16px}
    .ceo-chip{margin-bottom:16px;font-size:10px}

    .service-card-vis{padding:20px;max-height:160px}
    .service-card-vis img{max-width:80%;max-height:80%}
    .tech-icon-img{width:24px;height:24px}
    .solution-icon{width:40px;height:40px;min-width:40px;max-width:40px;padding:5px;margin-bottom:10px;overflow:hidden}
    .solution-icon img{width:30px;height:30px;max-width:30px;max-height:30px}
    .solutions-grid{grid-template-columns:1fr;gap:12px}
    .solution-card{padding:16px}
    .port-grid{max-width:320px}
    .port-thumb{aspect-ratio:16/10;padding:12px}
    .port-thumb img{max-height:55%;max-width:50%}
    .port-info{padding:8px 12px}
    .port-info h3{font-size:12px}
    .port-tag{font-size:9px}
}

/* ==========================================================
   DISPLAY TYPOGRAPHY — Uber style
   Uber Move renders where installed; Inter Tight is the
   free equivalent doing the work for visitors.
   ========================================================== */
:root{
    --font-display : 'Quicksand','Inter Tight','Inter',system-ui,sans-serif;
    --font-body    : 'Quicksand','Inter',system-ui,sans-serif;
}
body{font-family:var(--font-body)}
.hero h1,
.services-header h2,
.sec-top h2,
.ceo-headline,
.quote-wrap blockquote,
.cta-box h2,
.page-hero h1,
.leader-hero-content h1,
.values-header h2,
.s-title,
.info-block h2,
.company-card h3,
.metric-val{
    font-family:var(--font-display);
    font-weight:700;
    letter-spacing:-.03em;
    line-height:1.04;
}
.hero h1{font-weight:700;padding-bottom:.12em;font-size:clamp(48px,8vw,92px)}

/* Hero eyebrow — quiet, tracked-out label above the display type */
.pill{
    font-size:13px;font-weight:600;
    letter-spacing:.38em;text-indent:.38em;
    color:var(--w70);margin-bottom:28px;
    font-family:var(--font-display);
}

/* Big statement — bold editorial */
.statement-wrap p{
    font-family:var(--font-display);
    font-weight:600;font-size:clamp(24px,3vw,38px);
    line-height:1.3;letter-spacing:-.02em;
}
.statement-wrap strong{font-weight:700;color:var(--white)}

/* Footer tagline + mobile menu join the display voice */
.ft-tagline{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}
.mob-menu a{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}

/* ==========================================================
   FLUID INTERFACE PASS
   Press feedback on pointer-down, touch-safe hovers,
   visible focus, reduced-motion fallbacks.
   ========================================================== */

/* Press feedback — the interface answers on touch-down, not on release */
.btn-fill,.btn-outline,.btn-p,.btn-submit,.ceo-cta,.ft-back-top{will-change:transform}
.btn-fill:active,.btn-p:active,.btn-submit:active,.ceo-cta:active{
    transform:translateY(0) scale(.97);
    transition-duration:.1s;
    box-shadow:0 2px 12px var(--acc10);
}
.btn-outline:active,.ft-back-top:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.nav-btn{transition:opacity .2s,box-shadow .3s,transform .16s var(--ease)}
.nav-btn:active{transform:scale(.96)}
.ft-social-link:active{transform:scale(.94);transition-duration:.1s}
.company-card:active{transform:translateY(-1px) scale(.99);transition-duration:.12s}
.port-card:active,.card:active,.service-card:active,.solution-card:active{transform:translateY(-1px) scale(.995);transition-duration:.12s}
.modal-close:active{transform:scale(.92)}
.nav-links a:active{opacity:.6}

/* Mobile menu — enters as a material, links cascade in */
.mob-menu.open{animation:menuIn .45s var(--ease)}
.mob-menu.open a{animation:menuLink .5s var(--ease) backwards}
.mob-menu.open a:nth-child(1){animation-delay:.03s}
.mob-menu.open a:nth-child(2){animation-delay:.08s}
.mob-menu.open a:nth-child(3){animation-delay:.13s}
.mob-menu.open a:nth-child(4){animation-delay:.18s}
.mob-menu.open a:nth-child(5){animation-delay:.23s}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
@keyframes menuLink{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Focus — keyboard users get a clear, non-hover path */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
    outline:2px solid var(--w70);outline-offset:3px;border-radius:4px;
}
.btn-fill:focus-visible,.btn-outline:focus-visible,.nav-btn:focus-visible,
.ceo-cta:focus-visible,.btn-p:focus-visible,.btn-submit:focus-visible,.ft-back-top:focus-visible{border-radius:100px}

/* Touch devices — hover lifts are false positives on tap, keep press feedback only */
@media (hover:none){
    .btn-fill:hover,.svc-card-cta--blue:hover,.btn-outline:hover,.nav-btn:hover,.ceo-cta:hover,.btn-p:hover,.btn-submit:hover,
    .company-card:hover,.card:hover,.service-card:hover,.solution-card:hover,
    .port-card:hover,.info-block:hover,.ft-social-link:hover,.ft-back-top:hover{transform:none}
}

/* Reduced motion — gentler equivalents, not dead UI */
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .hero-orb,.marquee-inner{animation:none}
    .rv{transform:none;transition:opacity .25s ease}
    .rv.vis{transform:none}
    .mob-menu.open,.mob-menu.open a{animation:none}
    .modal.open{animation:none}
    .modal-box{animation:fadeIn .2s ease}
    .btn-fill:hover,.svc-card-cta--blue:hover,.btn-outline:hover,.ceo-cta:hover,.btn-p:hover,.company-card:hover,
    .card:hover,.service-card:hover,.solution-card:hover,.port-card:hover,.info-block:hover{transform:none}
}

/* ==========================================================
   AI RESEARCH & DEVELOPMENT
   ========================================================== */
.rnd-section{
    position:relative;z-index:2;
    background:var(--bg);
    padding:20px 32px 140px;
}
.rnd-wrap{max-width:var(--mw);margin:0 auto}
.rnd-header{text-align:center;max-width:760px;margin:0 auto 64px}
.rnd-label{
    display:inline-block;font-size:12px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent);margin-bottom:20px;
}
.rnd-title{
    font-family:'Quicksand',var(--font);
    font-size:clamp(30px,4.4vw,50px);font-weight:700;
    letter-spacing:-.03em;line-height:1.12;color:var(--white);
    margin-bottom:18px;
}
.rnd-title-muted{color:var(--w50)}
.rnd-lead{
    font-size:clamp(15px,1.5vw,17px);color:var(--w70);
    line-height:1.7;max-width:640px;margin:0 auto;
}
/* A pipeline, not a card set: the rule across the top ties the steps together */
.rnd-flow{
    list-style:none;
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    border-top:1px solid var(--w12);
}
.rnd-step{
    position:relative;
    padding:36px 40px 8px 0;
}
.rnd-step + .rnd-step{padding-left:40px;border-left:1px solid var(--w12)}
/* the marker riding the top rule */
.rnd-step::before{
    content:"";position:absolute;top:-4px;left:0;
    width:7px;height:7px;border-radius:50%;
    background:var(--accent);
}
.rnd-step + .rnd-step::before{left:40px}
.rnd-step-num{
    display:block;
    font-family:'Quicksand',var(--font);
    font-size:13px;font-weight:700;letter-spacing:.1em;
    color:var(--w30);margin-bottom:14px;
    font-variant-numeric:tabular-nums;
}
.rnd-step-title{
    font-size:clamp(19px,2.1vw,23px);font-weight:700;
    letter-spacing:-.02em;color:var(--white);margin-bottom:10px;
}
.rnd-step-copy{font-size:15px;line-height:1.65;color:var(--w50)}
.rnd-foot{
    margin-top:56px;text-align:center;
    font-size:clamp(16px,1.7vw,19px);font-weight:600;
    color:var(--w70);letter-spacing:-.01em;
}
@media(max-width:860px){
    .rnd-flow{grid-template-columns:1fr;border-top:none}
    .rnd-step{padding:28px 0 28px 26px;border-top:1px solid var(--w12)}
    .rnd-step + .rnd-step{padding-left:26px;border-left:none}
    .rnd-step::before,.rnd-step + .rnd-step::before{top:34px;left:0}
    .rnd-foot{margin-top:40px}
}
@media(max-width:560px){
    .rnd-section{padding:12px 20px 100px}
    .rnd-header{margin-bottom:44px}
}

/* ==========================================================
   SERVICE CARDS AS PUZZLE PIECES (desktop only)
   Each card grows a tab on its right edge and a socket on its left, so the
   three read as one interlocking row. Tabs/sockets are half-circle
   pseudo-elements rather than a clip-path, so they scale with the card and
   stay perfectly round instead of stretching with its aspect ratio.
   ========================================================== */
@media(min-width:981px){
    .svc-grid{gap:10px}
    .svc-card{
        position:relative;
        overflow:visible;              /* the tab has to escape the card box */
        border:none;
        box-shadow:none;
        /* drop-shadow traces the tab too; box-shadow would draw a plain rect */
        filter:drop-shadow(0 10px 22px rgba(14,17,22,.09));
    }
    .svc-card:hover{box-shadow:none;filter:drop-shadow(0 22px 44px rgba(14,17,22,.14))}
    /* the card no longer clips, so the image panel rounds its own top corners */
    .svc-card-img-wrap{border-radius:var(--r-lg) var(--r-lg) 0 0}

    /* a left-hand card must paint over the card it plugs into */
    .svc-card:nth-child(1){z-index:3}
    .svc-card:nth-child(2){z-index:2}
    .svc-card:nth-child(3){z-index:1}

    /* Knobs sit at 31% — inside the illustration band. At the vertical centre
       they overlapped the next card's title and ate its first letter. */
    /* tab: half-circle pushing out of the right edge */
    .svc-card:not(:last-child)::after{
        content:"";position:absolute;z-index:1;
        top:31%;right:-36px;
        width:72px;height:72px;border-radius:50%;
        background:var(--bg3);
        transform:translateY(-50%);
        clip-path:inset(0 0 0 50%);
    }
    /* socket: slightly larger half-circle of page colour cut into the left edge,
       so a rim of background stays visible around the tab that fills it */
    .svc-card:not(:first-child)::before{
        content:"";position:absolute;z-index:1;
        top:31%;left:-43px;
        width:86px;height:86px;border-radius:50%;
        background:var(--bg);
        transform:translateY(-50%);
        clip-path:inset(0 0 0 50%);
    }
}

/* Video in a split panel — the clip now supplies the motion, so this block
   carries no liquid canvas and no ambient sheen. */
.split-media--video{background:#eef1f6}
/* The clip is rendered with a light frame baked in — ~7.5% left/right, 8.4%
   top, 4.8% bottom. Scale past it so the artwork meets the panel edge. */
.split-video{
    width:100%;height:100%;display:block;object-fit:cover;
    transform:scale(1.2) translateY(-1%);
}
@media(prefers-reduced-motion:reduce){
    /* Nothing to fall back to but the first frame: the poster is exactly that. */
    .split-video{visibility:hidden}
    .split-media--video{
        background:#eef1f6 url('uploads/about-motion-poster.webp') center/cover no-repeat;
    }
}

/* ==========================================================
   AI CARDS AS PUZZLE PIECES (desktop only)
   Same interlock as the service cards on the homepage.
   ========================================================== */
@media(min-width:981px){
    .ai-grid{gap:10px}
    .ai-card{
        position:relative;overflow:visible;
        /* room for the socket (43px) and the incoming tab (26px) to sit clear
           of the text; the default 30px would have cut into the copy */
        padding:34px 48px 32px;
        border:none;box-shadow:none;
        filter:drop-shadow(0 10px 22px rgba(14,17,22,.09));
    }
    .ai-card:hover{
        border:none;box-shadow:none;
        filter:drop-shadow(0 22px 44px rgba(14,17,22,.14));
    }
    .ai-card:nth-child(1){z-index:3}
    .ai-card:nth-child(2){z-index:2}
    .ai-card:nth-child(3){z-index:1}
    .ai-card:not(:last-child)::after{
        content:"";position:absolute;z-index:1;
        top:50%;right:-36px;
        width:72px;height:72px;border-radius:50%;
        background:var(--bg3);
        transform:translateY(-50%);
        clip-path:inset(0 0 0 50%);
    }
    .ai-card:not(:first-child)::before{
        content:"";position:absolute;z-index:1;
        top:50%;left:-43px;
        width:86px;height:86px;border-radius:50%;
        background:var(--bg);
        transform:translateY(-50%);
        clip-path:inset(0 0 0 50%);
    }
}

/* ==========================================================
   SITE TYPE — Workday-style: extra-bold titles, semibold ink body.
   html-prefixed so these beat page-local <style> rules of equal
   class specificity. Panels on dark/blue backgrounds keep white.
   ========================================================== */
html body h1,html body h2{
    font-family:'Inter Tight','Inter',var(--font)!important;
    font-weight:800!important;letter-spacing:-.035em!important;
}
html .svc-card-title,html .rnd-step-title{
    font-family:'Inter Tight','Inter',var(--font);
    font-weight:800;letter-spacing:-.035em;
}
html .alx-head h2{color:#fff}
html .hero-sub,html .split-copy,html .svc-card-lead,
html .co-lead,html .co-section .co-lead,html .ai-lead,
html .rnd-lead,html .ab-lead,html .mk-lead,
html .ab-hero-cap p,html .mk-hero-cap p{
    font-weight:600;color:var(--white);
}
html .hero-sub strong,html .split-copy strong{font-weight:700;color:var(--white)}
html .alx-lead{font-weight:600;color:rgba(255,255,255,.86)}

/* ==========================================================
   FOOTER — blue variant (shared by homepage + careers)
   ========================================================== */
.ft--blue{
    background:linear-gradient(150deg,#06225f 0%,#0a3ea8 55%,#0a63d8 100%);
    border-top:none;
}
.ft--blue .ft-glow{background:linear-gradient(90deg,transparent,#81d0ff,transparent);opacity:.8}
.ft--blue .ft-tagline{color:#fff}
.ft--blue .ft-desc{color:rgba(255,255,255,.7)}
.ft--blue .ft-social-link{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.75)}
.ft--blue .ft-social-link:hover{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.ft--blue .ft-col h4{color:rgba(255,255,255,.55);border-bottom-color:rgba(255,255,255,.14)}
.ft--blue .ft-col a,.ft--blue .ft-col p{color:rgba(255,255,255,.78)}
.ft--blue .ft-col a:hover{color:#fff}
.ft--blue .ft-bottom{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.ft--blue .ft-back-top{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.75)}
.ft--blue .ft-back-top:hover{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}