/* ==========================================================
   ITM Solutions — Who We Are (2026)
   Concept: "Two sides of one brain" — Logic × Imagination.
   Builds on home-2026.css primitives (.v26, .wrap, .section,
   .eyebrow, .btn, .reveal) and tokens from site-chrome.css.
   ========================================================== */

body{background:var(--ink-0)}
.wwa{margin-top:-96px} /* run the hero under the floating nav */
.wwa{--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--warm:#ffb15c}
.wwa .mono{font-family:var(--mono);letter-spacing:-.01em}

/* ---------- Split hero ---------- */
.split{
    --split:50%;
    position:relative;height:min(100svh,900px);min-height:620px;overflow:hidden;
    cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;
    isolation:isolate;
}
.split-layer{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:120px var(--gutter) 160px}

/* Layer A — Logic */
.split-logic{
    background:
        radial-gradient(800px 500px at 30% 40%,rgba(0,172,237,.16),transparent 60%),
        var(--ink-0);
}
.split-logic::before{ /* blueprint grid */
    content:"";position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(0,172,237,.10) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,172,237,.10) 1px,transparent 1px),
        linear-gradient(rgba(0,172,237,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,172,237,.05) 1px,transparent 1px);
    background-size:96px 96px,96px 96px,24px 24px,24px 24px;
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 80%);
    mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 80%);
}
.split-logic .word{
    font-family:var(--mono);font-weight:500;color:#dff6ff;
    font-size:clamp(4rem,15vw,13rem);letter-spacing:-.07em;line-height:.9;
}
.split-logic .word .caret{display:inline-block;width:.08em;height:.78em;margin-left:.04em;background:var(--blue);vertical-align:-.04em;animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.code{
    position:absolute;font-family:var(--mono);font-size:12.5px;line-height:1.7;text-align:left;
    color:rgba(159,215,240,.55);white-space:pre;pointer-events:none;
}
.code b{color:var(--blue);font-weight:500}
.code i{color:var(--orange);font-style:normal}
.code-1{left:6%;top:22%}
.code-2{right:6%;bottom:26%}

/* Layer B — Imagination (clipped by --split) */
.split-imag{
    clip-path:inset(0 0 0 var(--split));
    background:
        radial-gradient(700px 520px at 70% 35%,rgba(247,148,29,.55),transparent 60%),
        radial-gradient(700px 520px at 30% 75%,rgba(0,167,158,.55),transparent 60%),
        radial-gradient(600px 420px at 85% 85%,rgba(124,140,255,.45),transparent 60%),
        #1a0f12;
}
.split-imag::before{ /* grain */
    content:"";position:absolute;inset:0;opacity:.12;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.split-imag .blob{position:absolute;border-radius:50%;filter:blur(40px);mix-blend-mode:screen;animation:drift 18s ease-in-out infinite}
.split-imag .blob.b1{width:34vw;height:34vw;left:52%;top:8%;background:rgba(255,177,92,.55)}
.split-imag .blob.b2{width:28vw;height:28vw;left:62%;top:52%;background:rgba(0,172,237,.45);animation-delay:-6s}
.split-imag .blob.b3{width:22vw;height:22vw;left:18%;top:40%;background:rgba(0,167,158,.5);animation-delay:-12s}
@keyframes drift{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(-6%,8%) scale(1.15)}
    66%{transform:translate(8%,-5%) scale(.9)}
}
.split-imag .word{
    position:relative;font-family:var(--serif);font-style:italic;font-weight:400;color:#fff7ee;
    font-size:clamp(3.6rem,13.5vw,12rem);letter-spacing:-.04em;line-height:.9;
}

/* Layer labels */
.side-label{
    position:absolute;top:128px;display:flex;align-items:center;gap:10px;
    font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.split-logic .side-label{left:var(--gutter);font-family:var(--mono);color:rgba(159,215,240,.8)}
.split-imag .side-label{right:var(--gutter);color:rgba(255,247,238,.85)}
.side-label .dot{width:8px;height:8px;border-radius:50%}
.split-logic .side-label .dot{background:var(--blue);box-shadow:0 0 12px var(--blue)}
.split-imag .side-label .dot{background:var(--warm);box-shadow:0 0 12px var(--warm)}

/* Divider + handle */
.split-divider{
    position:absolute;top:0;bottom:0;left:var(--split);width:1px;z-index:5;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.75) 20%,rgba(255,255,255,.75) 80%,transparent);
    pointer-events:none;
}
.split-handle{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:64px;height:64px;border-radius:999px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.5);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:12px;
    box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.split-handle i{margin:0 3px}
.split-range{ /* keyboard + screen-reader control, visually hidden */
    position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0;
}
.split:focus-within .split-handle{outline:2px solid var(--blue);outline-offset:4px}

/* Bottom caption (sits above both layers) */
.split-caption{
    position:absolute;left:0;right:0;bottom:0;z-index:7;pointer-events:none;
    padding:0 var(--gutter) 44px;
    display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
    background:linear-gradient(180deg,transparent,rgba(5,7,12,.75));
    padding-top:120px;
}
.split-caption h1{font-size:clamp(1.8rem,3.6vw,3rem);max-width:760px;line-height:1.05}
.split-caption .hint{font-size:13px;color:rgba(238,242,247,.6);display:flex;align-items:center;gap:8px}
.split-caption .hint kbd{
    font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:6px;
    border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;
}
.split-meter{
    position:absolute;z-index:7;top:128px;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.75);pointer-events:none;
    padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(5,7,12,.45);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;
}

@media (max-width:760px){
    .code{display:none}
    .side-label{top:110px}
    .split-meter{display:none}
    .split-caption .hint{display:none}
}

/* ---------- Manifesto (scroll-lit words) ---------- */
.manifesto p{
    font-size:clamp(1.7rem,3.8vw,3.1rem);line-height:1.18;letter-spacing:-.035em;font-weight:500;
    max-width:1100px;color:var(--text);
}
.js .manifesto .w{color:rgba(238,242,247,.16);transition:color .35s var(--ease)}
.js .manifesto .w.lit{color:var(--text)}
.js .manifesto .w.hl.lit{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}

/* ---------- Two brains ---------- */
.brains{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.brain{
    position:relative;overflow:hidden;border-radius:var(--radius-lg);
    padding:clamp(28px,4vw,56px);min-height:520px;display:flex;flex-direction:column;gap:22px;
    border:1px solid var(--line);
}
.brain .num{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.brain h3{font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:.98}
.brain .body,.brain .body p{color:var(--muted)!important;font-size:16.5px;line-height:1.65;margin:0 0 12px}
.brain .body strong{color:var(--text);font-weight:600}
.brain .traits{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding:0;list-style:none}
.brain .traits li{font-size:13px;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);color:var(--text)}

.brain-left{
    background:
        linear-gradient(rgba(0,172,237,.06) 1px,transparent 1px) 0 0/28px 28px,
        linear-gradient(90deg,rgba(0,172,237,.06) 1px,transparent 1px) 0 0/28px 28px,
        linear-gradient(180deg,var(--ink-2),var(--ink-1));
}
.brain-left .num,.brain-left .traits li{font-family:var(--mono)}
.brain-left .num{color:var(--blue)}
.brain-left h3{font-family:var(--mono);font-weight:500;letter-spacing:-.06em}
.brain-left .traits li{border-radius:8px;font-size:12.5px;color:#bfe9fb;border-color:rgba(0,172,237,.3);background:rgba(0,172,237,.06)}

.brain-right{
    background:
        radial-gradient(500px 380px at 100% 0%,rgba(247,148,29,.32),transparent 60%),
        radial-gradient(500px 380px at 0% 100%,rgba(0,167,158,.28),transparent 60%),
        var(--ink-2);
}
.brain-right .num{color:var(--warm)}
.brain-right h3 em{color:#fff7ee}
.brain-right .traits li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}

.brain .glyph{ /* oversized background mark */
    position:absolute;right:-.06em;bottom:-.2em;font-size:clamp(10rem,22vw,20rem);line-height:1;pointer-events:none;opacity:.06;color:#fff;
}
.brain-left .glyph{font-family:var(--mono)}
.brain-right .glyph{font-family:var(--serif);font-style:italic}

@media (max-width:900px){.brains{grid-template-columns:1fr}.brain{min-height:auto}}

/* ---------- Equation ---------- */
.equation{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(12px,2.4vw,32px);
    font-size:clamp(2rem,6vw,5.4rem);line-height:1;letter-spacing:-.05em;font-weight:600;text-align:center;
}
.equation .t-logic{font-family:var(--mono);font-weight:500;letter-spacing:-.07em;color:#cfefff}
.equation .t-imag{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--warm)}
.equation .op{
    width:clamp(44px,6vw,76px);height:clamp(44px,6vw,76px);border-radius:999px;display:grid;place-items:center;
    border:1px solid var(--line-2);font-size:.45em;color:var(--muted);font-weight:400;
}
.equation .op.spin{animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.equation-result{
    margin-top:clamp(24px,3vw,40px);text-align:center;
    font-size:clamp(2rem,5.4vw,4.8rem);letter-spacing:-.05em;font-weight:600;line-height:1.02;
}
.equation-note{margin:24px auto 0;max-width:640px;text-align:center;color:var(--muted)}
.equation-note p{color:var(--muted)!important;margin:0}
.equation-note strong{color:var(--text)}

/* ---------- Editorial index (principles + expertise) ---------- */
.index{border-top:1px solid var(--line-2);margin:0;padding:0;list-style:none}
.index li{border-bottom:1px solid var(--line-2)}
.index a,.index .row-i{
    position:relative;display:grid;grid-template-columns:72px 1fr 1.1fr 40px;align-items:center;gap:24px;
    padding:28px 8px;overflow:hidden;color:var(--text);
}
.index a::before{ /* hover sweep */
    content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);opacity:.12;
    transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);
}
.index a:hover::before{transform:scaleY(1)}
.index .n{font-family:var(--mono);font-size:13px;color:var(--dim)}
.index .t{font-size:clamp(1.8rem,4.2vw,3.6rem);font-weight:600;letter-spacing:-.05em;line-height:1;transition:transform .45s var(--ease)}
.index a:hover .t{transform:translateX(12px)}
.index .d{color:var(--muted);font-size:15.5px}
.index .arr{font-size:14px;color:var(--muted);transition:transform .35s var(--ease),color .35s}
.index a:hover .arr{transform:translateX(4px) rotate(-45deg);color:var(--text)}
.index .t em{color:var(--orange)}
@media (max-width:760px){
    .index a,.index .row-i{grid-template-columns:44px 1fr 24px;row-gap:8px}
    .index .d{grid-column:2/3;grid-row:2}
}

/* stacked variant: title over description, for narrow columns */
.index-stack .row-i{grid-template-columns:56px 1fr;row-gap:10px;align-items:baseline}
.index-stack .row-i .d{grid-column:2}
.index-stack .row-i .t{font-size:clamp(1.8rem,3.4vw,2.8rem)}

.split-two{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.split-two .sticky{position:sticky;top:120px}
@media (max-width:900px){.split-two{grid-template-columns:1fr}.split-two .sticky{position:static}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
    .split-imag .blob,.equation .op.spin,.split-logic .word .caret{animation:none}
    .js .manifesto .w{color:var(--text)}
}