:root{
    --cobalt:#2A47C8;--cobalt-br:#5C7CFF;--sky:#A9BEFF;
    --outer:#E4E8EF;--canvas:#F3F5FA;
    --ink:#0B0F1C;--ink-2:#404656;--ink-mute:#7E8597;--ink-line:rgba(11,15,28,.1);
    --txt:#EDF0F7;--txt-mute:#9AA6C6;--line-d:rgba(255,255,255,.12);
    --darkgrad:linear-gradient(158deg,#14246B 0%,#0B1238 48%,#080C24 100%);
    --dd:'Schibsted Grotesk',system-ui,sans-serif;--bb:'Hanken Grotesk',system-ui,sans-serif;
    --sp:clamp(48px,6.5vw,88px);--gut:clamp(22px,4vw,54px);--inset:12px;--gap:12px;--radius:26px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--bb);background:var(--outer);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;font-size:15px;padding-top:var(--inset)}
  ::selection{background:var(--cobalt-br);color:#fff}
  img{display:block}
  .wrap{max-width:1080px;margin:0 auto;padding:0 var(--gut)}

  /* ---- type hierarchy (clearly differentiated) ---- */
  .kicker{font-family:var(--bb);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
  .kicker.on-dark{color:var(--sky)}
  h1{font-family:var(--dd);font-weight:600;letter-spacing:-.025em;line-height:1.02;color:#fff}
  h2{font-family:var(--dd);font-weight:600;letter-spacing:-.025em;line-height:1.06;color:var(--ink);font-size:clamp(26px,4.1vw,48px)}
  h2.on-dark{color:#fff}
  h2 .g{color:var(--ink-mute);font-weight:500;font-style:italic}
  h2.on-dark .g{color:#8FA0D8;font-weight:500;font-style:italic}
  .lead{font-family:var(--dd);font-weight:500;font-size:clamp(16px,1.9vw,21px);line-height:1.42;color:var(--ink-2);letter-spacing:-.01em}
  .lead.on-dark{color:#C6CEE4}
  .body{font-family:var(--bb);font-size:14px;line-height:1.6;color:var(--ink-mute)}
  .body.on-dark{color:var(--txt-mute)}
  /* emphasis: important words in serif italic (editorial) */
  .hl{font-family:var(--dd);font-style:italic;font-weight:500;color:inherit}
  .step p b,.body b,.report-card p b,.lead b{font-family:var(--dd);font-style:italic;font-weight:600;color:var(--ink);text-decoration:none}

  /* small black topic icon (transparent) */
  .ticon{width:clamp(40px,5vw,54px);height:clamp(40px,5vw,54px);margin-bottom:18px}
  .ticon .ln{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .ticon .soft{fill:none;stroke:var(--ink);opacity:.25;stroke-width:1.5}
  .ticon .fill{fill:var(--ink)}
  .ticon.on-dark .ln{stroke:#fff}.ticon.on-dark .soft{stroke:#fff;opacity:.3}.ticon.on-dark .fill{fill:#fff}
  .sweep{transform-box:view-box;transform-origin:24px 24px;animation:spin 7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .nodp{animation:np 3.6s ease-in-out infinite}@keyframes np{0%,100%{opacity:.5}50%{opacity:1}}
  .tk{animation:tk 4.4s ease-in-out infinite}@keyframes tk{0%{transform:translateX(0)}55%,100%{transform:translateX(28px)}}
  .bargrow{transform-box:fill-box;transform-origin:bottom;animation:bg 3.6s ease-in-out infinite}@keyframes bg{0%{transform:scaleY(.2)}45%,100%{transform:scaleY(1)}}
  /* black, textured, frameless, conceptual icons (120 viewBox) */
  .ticon .draw{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:url(#ink)}
  .ticon .draw-soft{fill:none;stroke:var(--ink);stroke-width:1.7;opacity:.4;stroke-linecap:round;stroke-linejoin:round;filter:url(#ink)}
  .ticon .draw-fill{fill:var(--ink);filter:url(#ink)}
  /* logo-5 style: blurry grainy blue figure (thesis) */
  .figure-fx{position:relative;width:clamp(150px,17vw,200px);aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 26px 56px -34px rgba(20,36,107,.6)}
  .figure-fx::before{content:"";position:absolute;inset:-8%;filter:blur(7px) saturate(1.08);
    background:
      radial-gradient(34px 44px at 50% 33%,#15266c 0%,rgba(21,38,108,.5) 56%,transparent 78%),
      radial-gradient(130px 120px at 50% 104%,#0f1f63 0%,rgba(15,31,99,.45) 52%,transparent 80%),
      linear-gradient(166deg,#d3dbf7 0%,#a8b7f0 52%,#8ea3ea 100%)}
  .figure-fx::after{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;background-size:150px 150px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");animation:grainmove 1.6s steps(3) infinite}
  @keyframes grainmove{0%{background-position:0 0}33%{background-position:-40px 20px}66%{background-position:30px -30px}100%{background-position:0 0}}
  @media(prefers-reduced-motion:reduce){.figure-fx::after{animation:none}}
  .sweep2{transform-box:view-box;transform-origin:60px 60px;animation:spin 7s linear infinite}
  .spin-slow{transform-box:view-box;transform-origin:60px 60px;animation:spin 22s linear infinite}
  .orbit-e{transform-box:view-box;transform-origin:60px 60px}
  .refdot{transform-box:view-box;animation:refmove 2.8s ease-in-out infinite}
  @keyframes refmove{0%{transform:translate(0,0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translate(0,-40px);opacity:0}}
  .tkbig{transform-box:view-box;animation:tkb 4.4s ease-in-out infinite}@keyframes tkb{0%{transform:translateX(0)}55%,100%{transform:translateX(80px)}}
  @media(prefers-reduced-motion:reduce){.sweep,.nodp,.tk,.bargrow,.sweep2,.spin-slow,.refdot,.tkbig{animation:none}}

  .btn{font-family:var(--dd);font-weight:500;font-size:14.5px;letter-spacing:-.006em;border-radius:999px;padding:12px 24px;cursor:pointer;
       display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:1;border:1px solid transparent;
       transition:transform .18s ease,box-shadow .2s ease,background .18s ease,border-color .18s ease}
  .btn-w{background:#fff;color:var(--ink);box-shadow:0 4px 16px -8px rgba(11,15,28,.4)}
  .btn-w:hover{transform:translateY(-1px)}
  .btn-d{background:var(--ink);color:#fff}.btn-d:hover{transform:translateY(-1px);background:#1B2234}
  .btn-b{background:var(--cobalt);color:#fff}.btn-b:hover{transform:translateY(-1px);background:#3457E0}
  .btn-g{background:rgba(255,255,255,.06);color:#fff;border-color:var(--line-d)}.btn-g:hover{background:rgba(255,255,255,.12)}

  /* ---- rounded panels, grouped color regions ---- */
  .panel{position:relative;margin:0 var(--inset) var(--gap);border-radius:var(--radius);overflow:hidden}
  .panel.light{background:var(--canvas);border:1px solid rgba(11,15,28,.05);box-shadow:0 1px 2px rgba(11,15,28,.04),0 26px 50px -40px rgba(11,15,28,.18)}
  .panel.light::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay;background-size:180px 180px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='lp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23lp)'/%3E%3C/svg%3E")}
  .panel.light .inner{position:relative;z-index:1}
  .panel.dark{background:var(--darkgrad);color:#fff}
  /* dark panels with the hero's animated lights bg */
  .nightfx{background:radial-gradient(90% 120% at 50% -8%,rgba(92,124,255,.34),transparent 58%),var(--darkgrad)}
  .nightfx > .inner,.nightfx > .marquee{position:relative;z-index:2}
  .panel .inner{max-width:1080px;margin:0 auto;padding:var(--sp) var(--gut)}
  .seg + .seg{margin-top:var(--sp);padding-top:var(--sp);border-top:1px solid var(--ink-line)}

  /* HERO (dark rounded panel) */
  .hero{position:relative;overflow:hidden;min-height:clamp(580px,88vh,780px);display:flex;flex-direction:column;margin:0 var(--inset) var(--gap);border-radius:var(--radius);
        background:radial-gradient(90% 120% at 50% -8%,rgba(92,124,255,.34),transparent 58%),var(--darkgrad)}
  /* artful background layers */
  .hero-aura{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(42% 46% at 30% 86%,rgba(120,100,230,.28),transparent 62%),radial-gradient(40% 42% at 76% 12%,rgba(110,147,255,.26),transparent 60%);animation:breathe 13s ease-in-out infinite;mix-blend-mode:screen}
  @keyframes breathe{0%,100%{opacity:.5;transform:translate(0,0) scale(1)}50%{opacity:.82;transform:translate(-2%,1.5%) scale(1.08)}}
  /* drifting light blobs (the "lights") */
  .hero-light{position:absolute;z-index:1;pointer-events:none;border-radius:50%;mix-blend-mode:screen;filter:blur(64px);opacity:.78}
  .hero-light.l1{width:48vw;height:48vw;max-width:620px;max-height:620px;left:-10%;top:-16%;background:radial-gradient(circle at 50% 50%,rgba(92,124,255,.72),rgba(60,90,230,.22) 42%,transparent 68%);animation:lite1 17s ease-in-out infinite}
  .hero-light.l2{width:42vw;height:42vw;max-width:560px;max-height:560px;right:-12%;top:18%;background:radial-gradient(circle at 50% 50%,rgba(150,112,255,.6),rgba(110,80,230,.18) 42%,transparent 68%);animation:lite2 21s ease-in-out infinite}
  .hero-light.l3{width:40vw;height:40vw;max-width:520px;max-height:520px;left:34%;bottom:-22%;background:radial-gradient(circle at 50% 50%,rgba(80,176,255,.5),rgba(60,120,230,.16) 45%,transparent 70%);animation:lite3 25s ease-in-out infinite}
  @keyframes lite1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,7%) scale(1.14)}}
  @keyframes lite2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,-6%) scale(1.16)}}
  @keyframes lite3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-8%) scale(1.1)}}
  /* film grain */
  .hero-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-repeat:repeat;background-size:170px 170px;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
  /* hero entrance */
  .hero .anim{opacity:0;animation:heroIn .9s cubic-bezier(.2,.75,.2,1) forwards}
  @keyframes heroIn{from{opacity:0;transform:translateY(20px) scale(.98);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
  @media(prefers-reduced-motion:reduce){.hero-aura,.hero-light{animation:none}.hero .anim{animation:none;opacity:1}}
  nav{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,2.4vw,26px) var(--gut)}
  nav .logo{margin-left:clamp(-16px,-1.2vw,-6px)}
  .logo{font-family:var(--bb);font-weight:700;font-size:clamp(18px,2.2vw,21px);letter-spacing:-.02em;color:#fff;text-decoration:none}
  .logo .s{color:var(--cobalt-br)}
  .nav-links{display:flex;gap:clamp(16px,2.4vw,28px)}
  .nav-links a{font-size:14px;color:var(--txt-mute);text-decoration:none;transition:.2s;white-space:nowrap}
  .nav-links a:hover{color:#fff}
  @media(max-width:900px){.nav-links{display:none}}
  .hero-inner{position:relative;z-index:3;flex-grow:1;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(40px,6vw,72px) 0 clamp(40px,5vw,64px)}
  .hero-content{max-width:780px;display:flex;flex-direction:column;align-items:center}
  .role-link{flex-basis:100%;justify-content:center;margin-top:6px;display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--txt-mute);text-decoration:none;transition:color .2s ease}
  .role-link b{color:#fff;font-weight:500}
  .role-link svg{width:14px;height:14px;transition:transform .2s ease}
  .role-link:hover{color:#fff}.role-link:hover svg{transform:translateX(3px)}
  @media(max-width:620px){.role-link{margin-left:0;margin-top:2px}}
  .hero .kicker{display:inline-flex;align-items:center;gap:14px;font-family:var(--dd);font-style:italic;font-weight:400;font-size:clamp(14px,1.6vw,16px);letter-spacing:0;text-transform:none;color:#C2CDEC;
    background:none;border:none;border-radius:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero .kicker::before{content:"";width:clamp(26px,4vw,42px);height:1px;background:linear-gradient(90deg,transparent,rgba(194,205,236,.7))}
  .hero .kicker::after{content:"";width:clamp(26px,4vw,42px);height:1px;background:linear-gradient(90deg,rgba(194,205,236,.7),transparent)}
  .hero h1{font-size:clamp(42px,7.2vw,82px);max-width:none;margin-top:22px;letter-spacing:-.03em}
  .hero h1 .mut{color:#A6B2DE;font-weight:500;font-style:italic}
  .hero-sub{margin:clamp(20px,2.4vw,28px) auto 0;max-width:44ch;font-size:clamp(16px,1.9vw,20px);line-height:1.55;color:var(--txt)}
  .hero-sub .g{color:var(--txt-mute)}
  .hero-cta{margin-top:clamp(24px,3vw,34px);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;width:100%}
  .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--line-d);padding-top:clamp(20px,2.6vw,30px)}
  .hero-stats .hs{position:relative;padding:0 clamp(16px,2.4vw,32px)}
  .hero-stats .hs:first-child{padding-left:0}
  .hero-stats .hs+.hs{border-left:1px solid var(--line-d)}
  .hero-stats .hs::before{content:"";position:absolute;top:-15px;left:clamp(16px,2.4vw,32px);width:18px;height:2px;background:var(--cobalt-br)}
  .hero-stats .hs:first-child::before{left:0}
  .hero-stats .n{font-family:var(--dd);font-weight:600;font-size:clamp(27px,3.4vw,42px);letter-spacing:-.03em;color:#fff;line-height:1}
  .hero-stats .n .u{color:var(--sky);font-size:.46em;font-weight:500}
  .hero-stats .l{font-size:clamp(11px,1.4vw,12.5px);color:var(--txt-mute);margin-top:9px;letter-spacing:.02em}
  @media(max-width:560px){.hero-stats{grid-template-columns:1fr 1fr;row-gap:clamp(18px,5vw,26px)}
    .hero-stats .hs{padding:0 0 0 16px}
    .hero-stats .hs:nth-child(odd){padding-left:0}
    .hero-stats .hs+.hs{border-left:none}
    .hero-stats .hs:nth-child(even){border-left:1px solid var(--line-d);padding-left:16px}
    .hero-stats .hs::before{top:-13px}
    .hero-stats .hs:nth-child(odd)::before{left:0}.hero-stats .hs:nth-child(even)::before{left:16px}}
  /* stats relocated as a strip atop the dark testimonials band */
  /* small stats, bottom-left of the thesis section */
  .stat-mini{display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,30px);margin-top:clamp(26px,3.4vw,40px)}
  .stat-mini .s{position:relative;padding-left:13px}
  .stat-mini .s::before{content:"";position:absolute;left:0;top:3px;width:2px;height:calc(100% - 6px);background:var(--cobalt);opacity:.65}
  .stat-mini .n{font-family:var(--dd);font-weight:600;font-size:clamp(19px,2.1vw,24px);letter-spacing:-.02em;color:var(--ink);line-height:1}
  .stat-mini .n .u{color:var(--cobalt);font-size:.58em;font-weight:600}
  .stat-mini .l{font-size:11px;color:var(--ink-mute);margin-top:4px;letter-spacing:.01em}
  /* stat band between thesis and why (light) */
  .stat-band{display:grid;grid-template-columns:repeat(4,1fr)}
  .stat-band .hs{position:relative;padding:0 clamp(18px,2.8vw,40px)}
  .stat-band .hs:first-child{padding-left:0}
  .stat-band .hs+.hs{border-left:1px solid var(--ink-line)}
  .stat-band .hs::before{content:"";position:absolute;top:-16px;left:clamp(18px,2.8vw,40px);width:20px;height:2px;background:var(--cobalt)}
  .stat-band .hs:first-child::before{left:0}
  .stat-band .n{font-family:var(--dd);font-weight:600;font-size:clamp(34px,5vw,60px);letter-spacing:-.03em;color:var(--ink);line-height:1}
  .stat-band .n .u{color:var(--cobalt);font-size:.42em;font-weight:500}
  .stat-band .l{font-size:clamp(11.5px,1.4vw,13px);color:var(--ink-mute);margin-top:11px;letter-spacing:.02em}
  @media(max-width:560px){.stat-band{grid-template-columns:1fr 1fr;row-gap:clamp(26px,7vw,36px)}
    .stat-band .hs{padding:0 0 0 18px}
    .stat-band .hs:nth-child(odd){padding-left:0}
    .stat-band .hs+.hs{border-left:none}
    .stat-band .hs:nth-child(even){border-left:1px solid var(--ink-line);padding-left:18px}
    .stat-band .hs:nth-child(odd)::before{left:0}.stat-band .hs:nth-child(even)::before{left:18px}}

  .sec-h{margin-bottom:clamp(26px,3.2vw,40px);max-width:58ch}
  .sec-h .kicker{display:block;margin-bottom:12px}
  .sec-h h2{margin-top:0}

  /* split: copy + small icon header */
  .twocol{display:grid;grid-template-columns:1fr clamp(220px,28vw,340px);gap:clamp(28px,4vw,56px);align-items:start}
  @media(max-width:820px){.twocol{grid-template-columns:1fr;gap:24px}}
  /* icon column: enlarged + centered against the copy */
  .twocol .iconcell{justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
  .iconcell .ticon{width:clamp(132px,16vw,176px);height:auto;margin-bottom:0}
  .iconcell .body{max-width:28ch}
  @media(max-width:820px){.twocol .iconcell{justify-self:start;align-self:start;align-items:flex-start;text-align:left}.iconcell .ticon{width:clamp(108px,30vw,148px)}}

  /* thesis chips */
  .mini-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,2.8vw,30px)}
  .mini{font-family:var(--bb);font-size:15px;color:var(--ink-2);background:#fff;border:1px solid var(--ink-line);border-radius:13px;padding:14px 20px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 1px 2px rgba(11,15,28,.04),0 14px 26px -22px rgba(11,15,28,.2)}
  .mini::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cobalt);flex-shrink:0}
  .mini b{color:var(--ink);font-weight:600}

  /* logos */
  .logos-h{margin-bottom:clamp(22px,2.8vw,32px)}
  .logo-marquee{display:flex;flex-direction:column;gap:12px}
  .lrow{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .ltrack{display:flex;gap:12px;width:max-content;animation:lscroll 42s linear infinite}
  .lrow.rev .ltrack{animation-direction:reverse;animation-duration:50s}
  .lrow:hover .ltrack{animation-play-state:paused}
  .lchip{position:relative;display:flex;align-items:center;justify-content:center;min-width:190px;height:62px;border:1px solid var(--ink-line);border-radius:12px;background:#fff;padding:0 26px;flex-shrink:0}
  .lwordmark{max-height:25px;max-width:140px;width:auto;object-fit:contain;filter:invert(1);opacity:.6;transition:opacity .25s ease,transform .25s ease}
  .lchip:hover .lwordmark{opacity:1;transform:scale(1.04)}
  /* status badge on a client logo (e.g. EXIT, SERIE B) */
  .ltag{position:absolute;top:-8px;right:9px;z-index:2;font-family:var(--bb);font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--cobalt);border-radius:6px;padding:2.5px 6px;line-height:1;white-space:nowrap;box-shadow:0 3px 8px -3px rgba(42,71,200,.55)}
  .ltag.is-exit{background:linear-gradient(135deg,#1F9D63,#138a52);box-shadow:0 3px 8px -3px rgba(19,138,82,.6)}
  .hero .ltag{box-shadow:0 3px 10px -3px rgba(0,0,0,.5)}
  @keyframes lscroll{to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.ltrack{animation:none}}
  /* trusted-by inside the hero (same blue box) */
  .hero-logos{position:relative;z-index:3;width:100%;padding-bottom:clamp(26px,3.4vw,40px)}
  .hl-label{text-align:center;font-family:var(--bb);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);opacity:.85;margin-bottom:clamp(14px,1.8vw,20px)}
  .hero .lchip{background:rgba(255,255,255,.05);border-color:var(--line-d);height:54px;min-width:168px;padding:0 24px}
  .hero .lwordmark{filter:none;opacity:.62}
  .hero .lchip:hover .lwordmark{opacity:1}

  /* why checklist */
  .why-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(34px,5vw,68px);align-items:center;margin-top:clamp(28px,3.4vw,44px)}
  @media(max-width:860px){.why-grid{grid-template-columns:1fr;gap:clamp(28px,5vw,36px)}}
  .why-aside{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.6vw,28px)}
  .why-aside .ticon{width:clamp(120px,15vw,164px);height:auto;margin:0}
  .why-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,44px)}
  .why-item{display:flex;gap:10px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--ink-line)}
  .why-item .ck{color:var(--cobalt);flex-shrink:0;display:inline-flex;margin-top:2px}.why-item .ck svg{width:14px;height:14px}
  .why-item span{font-size:14px;color:var(--ink-2);line-height:1.4}
  .why-quote{margin:0;font-family:var(--dd);font-weight:500;font-size:clamp(20px,2.5vw,30px);line-height:1.22;max-width:20ch;color:var(--ink);letter-spacing:-.02em}
  .why-quote .g{color:var(--cobalt)}
  @media(max-width:560px){.why-list{grid-template-columns:1fr}}
  /* logo-6 treatment: glassy pills over a grainy cobalt aura */
  /* ONE PANEL (thesis+why) — grainy white (top) → blue (bottom) */
  .flow-panel{position:relative;overflow:hidden;border:1px solid rgba(11,15,28,.05);box-shadow:0 1px 2px rgba(11,15,28,.04),0 26px 50px -40px rgba(11,15,28,.2);
    background:linear-gradient(180deg,#f3f5fa 0%,#f1f4fb 46%,#dce4f6 60%,#bccbef 74%,#90a8e8 87%,#6e8ce0 100%)}
  .flow-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;mix-blend-mode:overlay;background-size:180px 180px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E")}
  .flow-panel .inner{position:relative;z-index:1}
  /* same gradient, blue at the BOTTOM (how it works) */
  .panel.flow-up{background:linear-gradient(180deg,#f3f5fa 0%,#f1f4fb 46%,#dce4f6 60%,#bccbef 74%,#90a8e8 87%,#6e8ce0 100%)}
  .flow-panel,.panel.flow-up{position:relative}
  .flow-panel::before,.panel.flow-up::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(120px,16vw,220px);z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(92,124,255,.12),transparent)}
  .why6 #why .sec-h{text-align:center;max-width:none;margin:0 auto clamp(28px,3.4vw,44px)}
  .why6 #why .sec-h .kicker{display:inline-block}
  /* logo-8 gradient cards */
  .why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);max-width:1000px;margin:0 auto}
  @media(max-width:820px){.why-cards{grid-template-columns:1fr;max-width:440px}}
  .wcard{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.16);min-height:clamp(216px,24vw,272px);display:flex;text-align:left;
    box-shadow:0 34px 64px -42px rgba(8,12,40,.7);transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s}
  .wcard:hover{transform:translateY(-5px);box-shadow:0 42px 70px -40px rgba(8,12,40,.75)}
  .wc-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.42;mix-blend-mode:overlay;background-size:140px 140px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E")}
  .wc-body{position:relative;z-index:2;margin-top:auto;padding:clamp(20px,2.4vw,28px)}
  .wcard h3{font-family:var(--dd);font-weight:600;font-size:clamp(18px,2vw,22px);letter-spacing:-.02em;color:#fff;margin-bottom:9px}
  .wcard p{font-family:var(--bb);font-size:14px;line-height:1.52;color:rgba(231,237,251,.82)}
  .wcard p i{font-family:var(--dd);font-style:italic;font-weight:500;color:#fff}
  .wc1{background:radial-gradient(62% 50% at 78% 16%,rgba(180,202,255,.85),transparent 56%),linear-gradient(152deg,#0b1645 0%,#21408d 48%,#5c7cff 100%)}
  .wc2{background:radial-gradient(60% 48% at 22% 14%,rgba(190,212,255,.8),transparent 56%),linear-gradient(152deg,#0a1240 0%,#1d3b86 48%,#7ea0ee 100%)}
  .wc3{background:radial-gradient(64% 52% at 80% 84%,rgba(170,190,255,.7),transparent 56%),linear-gradient(152deg,#0c1442 0%,#2a2f80 48%,#7e8fd8 100%)}
  .why6 .why-quote{margin:clamp(40px,5vw,64px) auto 0;text-align:center;max-width:30ch;color:#14246B}
  .why6 .why-quote .g{color:var(--cobalt);font-style:italic}

  /* testimonials (editorial dark band) */
  .tt-head{text-align:center;margin-bottom:clamp(34px,4.4vw,52px)}
  .tt-head .kicker{display:inline-block;margin-bottom:14px}
  .tt-head h2{font-size:clamp(28px,4.4vw,52px);letter-spacing:-.03em}
  .marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .track{display:flex;gap:18px;width:max-content;padding:6px 0;animation:scrollx 72s linear infinite}
  .marquee:hover .track{animation-play-state:paused}
  .card{width:clamp(300px,80vw,392px);flex-shrink:0;background:rgba(255,255,255,.04);border:1px solid var(--line-d);border-radius:20px;padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .card .mk{font-family:var(--dd);font-weight:600;font-size:64px;color:var(--cobalt-br);line-height:.7;height:30px;opacity:.85}
  .card p{margin-top:14px;font-family:var(--dd);font-weight:400;font-size:clamp(16px,1.6vw,19px);line-height:1.5;letter-spacing:-.01em;color:#E4EAF8;flex-grow:1}
  .card .who{margin-top:24px;padding-top:18px;border-top:1px solid var(--line-d);display:flex;align-items:center;gap:12px}
  .avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--dd);font-weight:600;color:#fff;font-size:13px;flex-shrink:0}
  .av1{background:linear-gradient(135deg,#6E93FF,#2A47C8)}.av2{background:linear-gradient(135deg,#8E6EFF,#3A2AC8)}.av3{background:linear-gradient(135deg,#5CC0FF,#2A6FC8)}.av4{background:linear-gradient(135deg,#6E93FF,#1E2F8E)}.av5{background:linear-gradient(135deg,#A98AFF,#5C2AC8)}.av6{background:linear-gradient(135deg,#5C7CFF,#16205E)}
  .card .nm{font-family:var(--dd);font-weight:600;font-size:15px;color:#fff}
  .card .rl{font-family:var(--dd);font-style:italic;font-size:12.5px;color:var(--txt-mute);margin-top:3px}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.marquee{mask-image:none;-webkit-mask-image:none}}

  /* process steps */
  .steps{border-top:1px solid var(--ink-line);margin-top:clamp(22px,2.8vw,32px)}
  .step{display:grid;grid-template-columns:44px 1fr;gap:clamp(14px,2.4vw,22px);padding:clamp(16px,2.4vw,24px) 0;border-bottom:1px solid var(--ink-line)}
  .step .six{font-family:var(--dd);font-weight:600;font-size:clamp(15px,2vw,19px);color:var(--cobalt);letter-spacing:-.02em}
  .step h3{font-family:var(--dd);font-size:clamp(16px,1.9vw,20px);font-weight:600;line-height:1.14;color:var(--ink)}
  .step p{font-size:13.5px;line-height:1.55;color:var(--ink-mute);margin-top:5px}
  .step p b{color:var(--cobalt);font-weight:600}
  @media(max-width:680px){.step{grid-template-columns:36px 1fr;gap:12px}}
  /* logo 9: grainy blue monolith slabs, covering the steps height */
  #how .twocol{align-items:stretch}
  .howfx{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;min-height:clamp(300px,38vw,440px);overflow:hidden;padding-left:10px}
  .slab{position:relative;border-radius:34px 34px 0 0;overflow:hidden;flex-shrink:0;
    background:linear-gradient(176deg,#334fd6 0%,#5C7CFF 26%,rgba(92,124,255,.55) 58%,rgba(92,124,255,.12) 84%,transparent 96%)}
  .slab::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;background-size:130px 130px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='s9'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s9)'/%3E%3C/svg%3E")}
  .slab.s1{width:clamp(40px,5vw,62px);height:100%}
  .slab.s2{width:clamp(38px,4.6vw,58px);height:86%;margin-left:-12px;background:linear-gradient(176deg,#2a47c8 0%,#4a6cf2 26%,rgba(74,108,242,.5) 58%,rgba(74,108,242,.1) 84%,transparent 96%)}
  .slab.s3{width:clamp(40px,4.8vw,60px);height:94%;margin-left:-12px}
  .slab.s4{width:clamp(34px,4.2vw,52px);height:74%;margin-left:-12px;background:linear-gradient(176deg,#3957da 0%,#6E93FF 26%,rgba(110,147,255,.5) 58%,rgba(110,147,255,.1) 84%,transparent 96%)}
  @media(max-width:820px){.howfx{min-height:240px;align-self:center;margin-top:8px}}

  /* report */
  /* report as a logo-8 gradient card */
  .report-card{position:relative;overflow:hidden;max-width:720px;margin:0 auto;border:1px solid rgba(255,255,255,.16);border-radius:20px;color:#fff;
               display:grid;grid-template-columns:1fr auto;gap:clamp(24px,3vw,44px);align-items:center;padding:clamp(24px,2.8vw,36px);
               background:radial-gradient(58% 80% at 85% 4%,rgba(185,205,255,.7),transparent 56%),linear-gradient(146deg,#0b1645 0%,#21408d 52%,#3a5be0 100%);
               box-shadow:0 30px 56px -42px rgba(8,12,40,.65)}
  .rc-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.42;mix-blend-mode:overlay;background-size:160px 160px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='rg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23rg)'/%3E%3C/svg%3E")}
  .report-card > *{position:relative;z-index:2}
  .report-card > .rc-grain{position:absolute;inset:0;z-index:1}
  .report-card .tag{font-family:var(--bb);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#A9BEFF;font-weight:600}
  .report-card h3{font-family:var(--dd);font-size:clamp(21px,2.5vw,30px);font-weight:600;margin-top:9px;max-width:18ch;letter-spacing:-.02em;color:#fff}
  .report-card h3 .g{color:#A9BEFF;font-style:italic;font-weight:400}
  .report-card p{margin-top:11px;color:rgba(231,237,251,.84);max-width:46ch;font-size:13.5px;line-height:1.5}
  .report-card p i{font-family:var(--dd);font-style:italic;font-weight:500;color:#fff}
  .verticals{display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;margin-top:18px;font-family:var(--bb);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(231,237,251,.76)}
  .verticals span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
  .verticals span::before{content:"";width:4px;height:4px;border-radius:50%;background:rgba(169,190,255,.85);flex-shrink:0}
  .report-card .cta-col{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .report-card .big-stat{font-family:var(--dd);font-weight:600;font-size:clamp(36px,4.2vw,52px);line-height:1;letter-spacing:-.04em;color:#fff}
  .report-card .big-stat .u{color:#A9BEFF;font-size:.4em}
  .report-card .big-lbl{font-size:11.5px;color:#A9BEFF;margin-bottom:5px}
  @media(max-width:680px){.report-card{grid-template-columns:1fr;gap:20px;align-items:start}
    .report-card .cta-col{flex-direction:row;align-items:center;justify-content:space-between;width:100%}}

  /* newsletter */
  .news{max-width:720px;margin:0 auto;text-align:center}
  .news > .kicker{display:block;margin-bottom:12px}
  .news h2{margin-bottom:10px}
  .news .lead{max-width:52ch;margin:0 auto}
  .news-form{margin-top:24px}
  .news-row{display:flex;gap:10px;max-width:480px;margin:0 auto;align-items:stretch}
  .news-row input{flex:1;min-width:0;background:#fff;border:1px solid var(--ink-line);border-radius:12px;padding:13px 16px;color:var(--ink);font-family:var(--bb);font-size:15px;transition:border-color .2s,box-shadow .2s}
  .news-row input::placeholder{color:#9aa1b4}
  .news-row input:hover{border-color:rgba(11,15,28,.22)}
  .news-row input:focus{outline:none;border-color:var(--cobalt-br);box-shadow:0 0 0 3px rgba(92,124,255,.18)}
  .news-row .btn{white-space:nowrap}
  .nl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .news-note{font-family:var(--bb);font-size:12.5px;color:var(--ink-mute);margin-top:13px}
  @media(max-width:520px){.news-row{flex-direction:column}.news-row .btn{width:100%}}

  /* final (dark band) */
  .final{text-align:center;background:radial-gradient(80% 110% at 50% -10%,rgba(92,124,255,.4),transparent 58%),var(--darkgrad);color:#fff}
  .final .kicker{display:inline-block;margin-bottom:13px}
  .final h2{font-size:clamp(28px,4.6vw,58px);color:#fff}
  .final h2 .mut{color:#A6B2DE;font-weight:400;font-style:italic}
  .final .sub{margin-top:13px;color:var(--txt-mute);font-size:clamp(15px,1.7vw,17px)}
  .form{margin:clamp(28px,3.6vw,40px) auto 0;max-width:490px;text-align:left;background:rgba(8,12,32,.5);border:1px solid var(--line-d);border-radius:16px;padding:clamp(22px,3.2vw,30px)}
  .field{margin-bottom:15px}
  .field label{font-family:var(--bb);font-size:12px;font-weight:500;color:var(--txt-mute);display:block;margin-bottom:6px}
  .field label .opt{color:#5e6a92}
  .field input,.field textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line-d);border-radius:10px;padding:11px 14px;color:#fff;font-family:var(--bb);font-size:14px;transition:.2s}
  .field input::placeholder,.field textarea::placeholder{color:#5a6488}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--cobalt-br);box-shadow:0 0 0 3px rgba(92,124,255,.16);background:rgba(255,255,255,.06)}
  .field textarea{resize:vertical;min-height:76px}
  .form .btn{width:100%;margin-top:4px}
  .form-note{margin-top:13px;text-align:center;font-size:12px;color:var(--txt-mute)}
  /* ---- contact: two-column with floating white form card (Pipe-inspired) ---- */
  .final.contact-split{text-align:left}
  .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(380px,40vw,470px));gap:clamp(34px,5vw,76px);align-items:center}
  .contact-copy{max-width:460px}
  .contact-split h2{font-size:clamp(30px,4.4vw,56px)}
  .contact-split .sub{margin-top:14px;max-width:32ch}
  .contact-trust{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
  .contact-trust li{font-family:var(--bb);font-size:12px;font-weight:500;color:var(--sky);letter-spacing:.01em;padding:7px 13px;border:1px solid var(--line-d);border-radius:999px;background:rgba(255,255,255,.04)}
  .form-card{position:relative;background:#fff;border-radius:20px;padding:clamp(22px,2.6vw,30px);box-shadow:0 2px 4px rgba(8,12,40,.16),0 40px 80px -40px rgba(8,12,40,.7);isolation:isolate}
  .form-card::before{content:"";position:absolute;inset:-26px -26px -36px;z-index:-1;border-radius:34px;background:radial-gradient(70% 80% at 72% 8%,rgba(92,124,255,.55),transparent 60%),radial-gradient(62% 72% at 18% 102%,rgba(42,71,200,.5),transparent 62%);filter:blur(16px);opacity:.92}
  .form-card .form{margin:0;max-width:none;background:none;border:0;padding:0}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .field-row .field{margin-bottom:15px}
  .form-card .field label{color:var(--ink-2);font-weight:600}
  .form-card .field label .opt{color:var(--ink-mute);font-weight:400}
  .form-card .field input,.form-card .field textarea,.form-card .field select{width:100%;background:#F6F7FB;border:1px solid var(--ink-line);border-radius:10px;padding:11px 14px;color:var(--ink);font-family:var(--bb);font-size:14px;transition:border-color .2s,box-shadow .2s,background .2s}
  .form-card .field input::placeholder,.form-card .field textarea::placeholder{color:#9aa1b4}
  .form-card .field input:hover,.form-card .field textarea:hover,.form-card .field select:hover{border-color:rgba(11,15,28,.22)}
  .form-card .field input:focus,.form-card .field textarea:focus,.form-card .field select:focus{outline:none;border-color:var(--cobalt-br);box-shadow:0 0 0 3px rgba(92,124,255,.18);background:#fff}
  .form-card .field textarea{resize:vertical;min-height:84px}
  .select-wrap{position:relative}
  .select-wrap select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px}
  .select-wrap select:invalid{color:#9aa1b4}
  .select-wrap::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:1.7px solid var(--ink-mute);border-bottom:1.7px solid var(--ink-mute);transform:translateY(-65%) rotate(45deg);pointer-events:none}
  .form-card .form .btn{width:100%;margin-top:6px}
  .form-card .form-note{margin-top:13px;text-align:center;color:var(--ink-mute)}
  /* ---- public job board ---- */
  #jobs .inner{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
  .jobs-grid{margin-top:clamp(26px,3vw,38px);display:grid;gap:12px}
  .job-card{display:flex;align-items:center;gap:18px;justify-content:space-between;background:#fff;border:1px solid var(--ink-line);border-radius:16px;padding:18px 20px;transition:border-color .2s,box-shadow .2s,transform .2s}
  .job-card:hover{border-color:rgba(11,15,28,.2);box-shadow:0 1px 2px rgba(11,15,28,.04),0 18px 40px -30px rgba(11,15,28,.4);transform:translateY(-1px)}
  .job-main{min-width:0}
  .job-title{font-family:var(--dd);font-weight:600;font-size:clamp(16px,1.7vw,19px);letter-spacing:-.01em;color:var(--ink);margin:0}
  .job-meta{margin-top:5px;font-family:var(--bb);font-size:13px;color:var(--ink-mute);display:flex;flex-wrap:wrap;gap:7px;align-items:center}
  .job-meta .sep{color:var(--ink-line)}
  .job-req{margin:8px 0 0;font-family:var(--bb);font-size:13px;line-height:1.5;color:var(--ink-2);max-width:62ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .job-apply{flex:none;white-space:nowrap}
  .jobs-empty{font-family:var(--bb);color:var(--ink-mute);font-size:14px;padding:8px 2px}
  @media(max-width:620px){.job-card{flex-direction:column;align-items:flex-start;gap:12px}.job-apply{width:100%}}
  /* ---- apply modal ---- */
  .apply-ov{position:fixed;inset:0;z-index:80;background:rgba(8,12,32,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}
  .apply-ov[hidden]{display:none}
  .apply-modal{position:relative;width:100%;max-width:460px;max-height:92vh;overflow:auto;background:#fff;border-radius:20px;padding:clamp(22px,3vw,30px);box-shadow:0 40px 90px -30px rgba(8,12,40,.6)}
  .apply-modal h3{font-family:var(--dd);font-weight:600;font-size:21px;letter-spacing:-.015em;color:var(--ink);margin:0 40px 2px 0;line-height:1.15}
  .apply-modal .apply-sub{font-family:var(--bb);font-size:13px;color:var(--ink-mute);margin:0 0 16px}
  .apply-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border:0;border-radius:8px;background:#F2F4F9;color:var(--ink-2);font-size:18px;cursor:pointer;line-height:1}
  .apply-close:hover{background:#e7eaf2}
  .apply-modal .field{margin-bottom:13px}
  .apply-modal label{display:block;font-family:var(--bb);font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
  .apply-modal label .opt{color:var(--ink-mute);font-weight:400}
  .apply-modal input,.apply-modal textarea{width:100%;background:#F6F7FB;border:1px solid var(--ink-line);border-radius:10px;padding:11px 14px;color:var(--ink);font-family:var(--bb);font-size:14px}
  .apply-modal input:focus,.apply-modal textarea:focus{outline:none;border-color:var(--cobalt-br);box-shadow:0 0 0 3px rgba(92,124,255,.18);background:#fff}
  .apply-modal textarea{resize:vertical;min-height:72px}
  .apply-modal input[type=file]{padding:9px 12px;background:#fff;cursor:pointer}
  .apply-modal .btn{width:100%;margin-top:6px}
  .apply-note{margin-top:11px;text-align:center;font-size:12.5px;color:var(--ink-mute);min-height:1em}
  .apply-note.err{color:#b4242a}
  .apply-note.ok{color:#1f7a4d}
  /* ---- company logos on testimonial cards ---- */
  .card .who{position:relative}
  .qlogo{margin-left:auto;height:19px;max-width:86px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.5;flex-shrink:0;transition:opacity .25s ease}
  .card:hover .qlogo{opacity:.72}
  @media(max-width:860px){
    .contact-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}
    .contact-copy{max-width:none}
    .contact-trust{margin-top:22px}
  }

  footer{padding:clamp(24px,3.4vw,34px) 0;border-top:1px solid var(--ink-line)}
  footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
  footer .logo{font-size:17px;color:var(--ink)}footer .logo .s{color:var(--cobalt)}
  footer .cr,footer a.li{font-size:12px;color:var(--ink-mute);text-decoration:none}footer a.li:hover{color:var(--ink)}

  .rv{opacity:0;transform:translateY(24px) scale(.985);filter:blur(7px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1),filter .8s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none;filter:none}

  /* ---------- DESIGN UPGRADES: motion + micro-interactions ---------- */
  /* scroll progress */
  .progress{display:none}

  /* floating sticky nav (appears on scroll) */
  .floatnav{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-160%);z-index:50;display:flex;align-items:center;gap:clamp(12px,2vw,20px);
            padding:7px 7px 7px 20px;border-radius:999px;background:rgba(12,18,40,.72);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
            border:1px solid rgba(255,255,255,.13);box-shadow:0 14px 44px -18px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
  .floatnav.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
  .fn-logo{font-family:var(--bb);font-weight:700;font-size:15px;letter-spacing:-.02em;color:#fff;text-decoration:none;white-space:nowrap}
  .fn-logo span{color:var(--cobalt-br)}
  .fn-links{display:flex;gap:16px}
  .fn-links a{font-size:13px;color:var(--txt-mute);text-decoration:none;transition:color .2s;white-space:nowrap}
  .fn-links a:hover{color:#fff}
  .fn-cta{font-family:var(--dd);font-weight:500;font-size:13px;color:#fff;background:var(--cobalt);padding:9px 17px;border-radius:999px;text-decoration:none;transition:background .2s,transform .2s;white-space:nowrap}
  .fn-cta:hover{background:#3457E0;transform:translateY(-1px)}
  @media(max-width:620px){.fn-links{display:none}}

  /* button shine sweep on hover */
  .btn{position:relative;overflow:hidden;isolation:isolate}
  .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-130%) skewX(-16deg)}
  .btn:hover::after{animation:btnshine .85s cubic-bezier(.3,.6,.3,1)}
  @keyframes btnshine{to{transform:translateX(130%) skewX(-16deg)}}
  .btn:active{transform:translateY(0) scale(.98)}

  /* animated nav underline */
  .nav-links a{position:relative}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--cobalt-br);transition:width .3s cubic-bezier(.2,.7,.2,1)}
  .nav-links a:hover::after{width:100%}
  .logo{transition:opacity .2s}.logo:hover{opacity:.82}


  /* thesis chips */
  .mini{transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
  .mini:hover{transform:translateY(-2px);border-color:var(--cobalt-br);box-shadow:0 10px 24px -16px rgba(42,71,200,.7)}

  /* why list rows */
  .why-item{transition:padding-left .3s cubic-bezier(.2,.7,.2,1)}
  .why-item span{transition:color .25s}
  .why-item .ck{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .why-item:hover{padding-left:7px}
  .why-item:hover span{color:var(--ink)}
  .why-item:hover .ck{transform:scale(1.18)}

  /* testimonial cards lift */
  .card{transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s,box-shadow .4s}
  .card:hover{transform:translateY(-5px);border-color:rgba(124,156,255,.45);background:rgba(255,255,255,.085);box-shadow:0 22px 46px -26px rgba(0,0,0,.7)}

  /* process steps */
  .step{transition:background .35s ease,box-shadow .35s ease;border-radius:12px}
  .step h3{transition:color .25s}
  .step .six{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .step:hover{background:linear-gradient(90deg,rgba(42,71,200,.06),transparent 80%)}
  .step:hover .six{transform:translateX(3px)}

  /* logo chips */
  .lchip{transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
  .lchip:hover{transform:translateY(-2px);border-color:var(--cobalt-br);box-shadow:0 10px 24px -18px rgba(42,71,200,.6)}

  /* report card */
  .report-card{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
  .report-card:hover{transform:translateY(-3px);box-shadow:0 26px 56px -34px rgba(11,15,28,.4);border-color:rgba(42,71,200,.3)}
  .verticals span{transition:background .25s,color .25s,border-color .25s}
  .verticals span:hover{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}

  /* form fields polish */
  .field input,.field textarea{transition:border-color .2s,box-shadow .2s,background .2s,transform .2s}
  .field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.22)}

  /* hamburger (mobile) */
  .navtog{display:none;position:relative;z-index:6;width:42px;height:42px;border:1px solid var(--line-d);background:rgba(255,255,255,.06);border-radius:11px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:background .2s}
  .navtog:hover{background:rgba(255,255,255,.12)}
  .navtog span{display:block;width:18px;height:1.6px;background:#fff;border-radius:2px;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
  .navtog[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .navtog[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navtog[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
  .navmenu{position:absolute;top:calc(100% + 8px);right:var(--gut);z-index:6;display:flex;flex-direction:column;gap:2px;min-width:200px;padding:10px;
           background:rgba(12,18,40,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.13);border-radius:16px;
           box-shadow:0 20px 50px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.2,.7,.2,1)}
  .navmenu.open{opacity:1;transform:none;pointer-events:auto}
  .navmenu a{padding:11px 14px;border-radius:10px;font-size:14.5px;color:var(--txt);text-decoration:none;transition:background .2s,color .2s}
  .navmenu a:hover{background:rgba(255,255,255,.08)}
  .navmenu a.cta{background:var(--cobalt);color:#fff;margin-top:4px;text-align:center;font-family:var(--dd);font-weight:500}
  .navmenu a.cta:hover{background:#3457E0}
  @media(max-width:900px){.navtog{display:flex}nav>.btn-g{display:none}}

  /* count-up: keep stable width while animating */
  .n .cv,.big-stat .cv{font-variant-numeric:tabular-nums}
  /* offset anchor jumps for the floating nav */
  :target{scroll-margin-top:96px}
  .seg[id],section[id]{scroll-margin-top:96px}
  /* ---- mobile: full-bleed + right-sized hero, real menu, no dead space ---- */
  @media(max-width:600px){
    :root{--inset:0;--gap:0;--radius:0}
    body{padding-top:0}
    .hero,.panel,.careers-panel,.role-panel,.flow-panel,.flow-up{margin-left:0;margin-right:0;border-radius:0}
    /* hero: smaller headline, centered, room to breathe; size to content (no huge vh gaps) */
    .hero{min-height:auto}
    .hero-inner{flex-grow:0;padding:clamp(30px,9vw,46px) 0 clamp(30px,8vw,44px)}
    .hero h1{font-size:clamp(32px,8.4vw,42px);margin-top:14px;line-height:1.06}
    .hero .kicker{margin-bottom:2px}
    .hero-sub{font-size:15.5px;max-width:32ch;margin-top:16px}
    .hero-cta{margin-top:22px}
    .hero-logos{padding-top:10px}
    /* drop the decorative slabs that leave a dead gap before the report card */
    .howfx{display:none}
    /* thesis: balanced layout — equal stacked chips, even 2×2 stats */
    .twocol{gap:clamp(26px,7vw,34px)}
    .mini-grid{flex-direction:column;gap:10px}
    .mini{width:100%}
    .stat-mini{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:clamp(8px,2.4vw,16px);margin-top:clamp(24px,5vw,34px)}
    .stat-mini .s{flex:1 1 0;padding-left:10px}
    .stat-mini .n{font-size:clamp(17px,4.7vw,21px)}
    .stat-mini .l{font-size:10px;margin-top:5px}
    /* iOS doesn't zoom into inputs when their text is >=16px */
    input,textarea,select{font-size:16px !important}
    /* adapt the figure to mobile: centered as a deliberate visual, caption centered below */
    .twocol .iconcell{justify-self:center;align-self:center;align-items:center;text-align:center;gap:18px;margin-top:4px}
    .figure-fx{width:clamp(190px,56vw,230px)}
    .iconcell .body{max-width:34ch}
    /* hamburger opens a full-height drawer from the side */
    .navtog{z-index:8}
    .navmenu{position:fixed;top:0;right:0;left:auto;bottom:0;height:100vh;height:100dvh;width:min(82vw,330px);
      border-radius:0;border:none;border-left:1px solid rgba(255,255,255,.12);
      padding:86px 24px calc(env(safe-area-inset-bottom,0px) + 28px);gap:4px;justify-content:flex-start;overflow-y:auto;
      opacity:1;transform:translateX(105%);transform-origin:right center;
      box-shadow:-24px 0 60px -22px rgba(0,0,0,.55);
      transition:transform .34s cubic-bezier(.2,.75,.2,1)}
    .navmenu.open{transform:translateX(0);box-shadow:-24px 0 60px -22px rgba(0,0,0,.55),0 0 0 100vmax rgba(8,12,32,.5)}
    .navmenu a{padding:15px 16px;font-size:16.5px}
    .navmenu a.cta{margin-top:12px;text-align:center}
  }

  @media(prefers-reduced-motion:reduce){
    .rv{opacity:1;transform:none;filter:none;transition:none}html{scroll-behavior:auto}
    .btn:hover::after{animation:none}
    .floatnav{transition:opacity .3s}
  }

  /* ====================================================================
     EDITORIAL MINIMALISM — capa de rebranding (override)  ·  v2
     Inspirado en Cognition: blanco y negro PURO (cero gris), serif
     editorial (Newsreader), fondo con textura sutil, botones con
     profundidad y forma clásica, y el azul SOLO en líneas finas.
     Todo en este bloque → reversible borrándolo.
     ==================================================================== */
  :root{
    --outer:#FFFFFF; --canvas:#FFFFFF; --paper:#FFFFFF;
    /* B&N puro: sin grises. Jerarquía por tamaño/peso/serif, no por color. */
    --ink:#0A0A0A; --ink-2:#0A0A0A; --ink-mute:#0A0A0A; --ink-line:rgba(10,10,10,.18);
    --txt:#FFFFFF; --txt-mute:#FFFFFF; --line-d:rgba(255,255,255,.26);
    --accent:#2342D6;            /* azul: en líneas + el dibujo de targeted search */
    --blk:#262626;               /* superficies oscuras: charcoal, "no tan negro" */
    --radius:6px;
    --dd:'Newsreader',Georgia,'Times New Roman',serif;  /* titulares serif editorial */
    --sp:clamp(60px,8vw,120px);
  }
  body{font-size:15.5px}
  /* serif editorial en titulares, leads y énfasis */
  h1,h2,h3,.lead,.hero-sub,.report-card h3,.final h2{font-family:var(--dd) !important;letter-spacing:-.02em}
  .hl,h2 .g,h2.on-dark .g,.hero h1 .mut{font-style:italic}
  .kicker{font-family:var(--bb) !important}   /* kickers/labels en sans, chicos */

  /* — FONDO TEXTURIZADO (papel granulado, sutil) detrás de todo — */
  html,body{background:#FFFFFF !important;color:var(--ink)}
  body{position:relative}
  body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.17;mix-blend-mode:multiply;
    background-size:300px 300px;background-repeat:repeat;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  body > *{position:relative;z-index:1}
  /* superficies claras transparentes → la textura del body se ve a través */
  .panel,.hero{margin:0 !important;border-radius:0 !important;box-shadow:none !important}
  .hero,.panel.light,.panel.flow-up,.flow-panel{background:transparent !important}
  .panel.light{border:0 !important;border-top:1px solid var(--ink-line)}
  .panel.light::after,.flow-panel::before,.panel.flow-up::before,.rc-grain,.hero-grain,.hero-aura,.hero-light{display:none !important}
  /* textura también en los bloques negros (grano claro) */
  .panel.dark,.nightfx,.final,.report-card{position:relative}
  .panel.dark::after,.final::after,.report-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.10;mix-blend-mode:screen;
    background-size:300px 300px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E")}
  .panel.dark > *,.final > *,.report-card > *{position:relative;z-index:1}

  /* — HERO: blanco texturizado, titular serif negro grande — */
  .hero{border-bottom:1px solid var(--ink-line);color:var(--ink)}
  .hero h1{color:#0A0A0A !important;font-size:clamp(42px,6.6vw,80px) !important;font-weight:500;letter-spacing:-.025em;line-height:1.02}
  /* hero más compacto: el "trusted by" entra en pantalla al cargar */
  .hero{min-height:clamp(500px,80vh,720px) !important}
  .hero-inner{padding:clamp(18px,3vw,40px) 0 clamp(12px,1.6vw,22px) !important}
  .hero-logos{padding-bottom:clamp(14px,1.8vw,24px) !important}
  .hero h1 .mut{color:#0A0A0A !important;font-style:italic;font-weight:400}
  .hero-sub{color:#0A0A0A !important}
  .hero-sub .g{color:#0A0A0A !important;font-style:italic}
  .hero .kicker,.hero .kicker.on-dark{color:#0A0A0A !important}
  /* azul EN LÍNEAS: las reglas que flanquean el kicker del hero */
  .hero .kicker::before{background:linear-gradient(90deg,transparent,var(--accent)) !important;height:1px}
  .hero .kicker::after{background:linear-gradient(90deg,var(--accent),transparent) !important;height:1px}
  .hero-stats{border-top:1px solid var(--ink-line) !important}
  .hero-stats .hs+.hs{border-left:1px solid var(--ink-line) !important}
  .hero-stats .hs::before{background:var(--accent) !important}   /* tick = línea azul */
  .hero-stats .n{color:#0A0A0A !important}
  .hero-stats .n .u{color:#0A0A0A !important}
  .hero-stats .l{color:#0A0A0A !important}
  .role-link,.role-link b{color:#0A0A0A !important}

  /* — nav del hero sobre blanco — */
  .hero .logo{color:#0A0A0A !important}
  .logo .s,.fn-logo span{color:#0A0A0A !important}            /* el "/" en negro */
  .nav-links a{color:#0A0A0A !important;opacity:.62}
  .nav-links a:hover{opacity:1}
  .nav-links a::after{background:var(--accent) !important}    /* subrayado = línea azul */
  .navtog{background:transparent !important;border-color:var(--ink-line) !important}
  .navtog span{background:#0A0A0A !important}
  .nav-links{border-bottom:1.5px solid #0A0A0A;padding-bottom:6px;padding-top:7.5px}   /* línea negra bajo los botones; padding-top equilibra el centrado vertical */

  /* — logos de clientes: negro pleno, sin chip — */
  .hero .lchip,.lchip{background:transparent !important;border:0 !important;box-shadow:none !important}
  .lwordmark,.hero .lwordmark{filter:grayscale(1) brightness(0) !important;opacity:.9 !important}
  .hero .lchip:hover .lwordmark,.lchip:hover .lwordmark{opacity:1 !important}
  .hl-label{color:#0A0A0A !important}

  /* — bloques NEGROS (testimonios + contacto + report): flat, texto blanco — */
  .panel.dark,.nightfx,.final,.report-card{background:var(--blk) !important}
  .final h2,.final h2 .mut,.contact-split h2,.report-card,.report-card *{color:#FFFFFF !important}
  .report-card .big-stat .u{color:#FFFFFF !important}

  /* — figura decorativa: a B&N, sin sombra/blur de color — */
  .figure-fx{filter:none !important;box-shadow:none !important;border-radius:4px !important}  /* dibujo de targeted search = azul */

  /* — cards "Why" (Fast/Fit/Partner): el azul no va → blanco editorial + textura — */
  .wcard,.wc1,.wc2,.wc3{background:#FFFFFF !important;border:1px solid var(--ink-line) !important;border-radius:8px !important;
    box-shadow:0 1px 2px rgba(10,10,10,.06),0 16px 34px -22px rgba(10,10,10,.22) !important}
  .wcard h3,.wcard p,.wcard p i{color:#0A0A0A !important}
  .wcard:hover{transform:translateY(-4px) !important;box-shadow:0 2px 4px rgba(10,10,10,.08),0 24px 46px -22px rgba(10,10,10,.3) !important}
  .wc-grain{opacity:.5 !important;mix-blend-mode:multiply !important}  /* textura visible sobre blanco */
  .stat-mini .s::before,.stat-band .hs::before{background:var(--accent) !important}  /* ticks = líneas azules */
  .stat-band .n .u,.stat-mini .n .u{color:#0A0A0A !important}
  .stat-band .n,.stat-mini .n,.stat-band .l,.stat-mini .l{color:#0A0A0A !important}

  /* — BOTONES: forma clásica (radio suave) + PROFUNDIDAD (relieve) — */
  .btn{border-radius:7px !important;font-family:var(--bb) !important;font-weight:500;letter-spacing:.005em}
  .btn::after{display:none !important}
  /* primario negro, levantado */
  .btn-b,.btn-d,.btn-w{background:#0A0A0A !important;color:#fff !important;border:1px solid #000 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 1px rgba(10,10,10,.3), 0 4px 10px -3px rgba(10,10,10,.45) !important}
  .btn-b:hover,.btn-d:hover,.btn-w:hover{background:#1b1b1b !important;transform:translateY(-1px) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 3px rgba(10,10,10,.32), 0 8px 18px -4px rgba(10,10,10,.5) !important}
  /* sobre fondo negro, primario blanco levantado */
  .panel.dark .btn-w,.final .btn-w,.report-card .btn-w{background:#fff !important;color:#0A0A0A !important;border:1px solid #fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(0,0,0,.4), 0 8px 20px -6px rgba(0,0,0,.55) !important}
  /* secundario: outline clásico con leve relieve */
  .btn-g{background:#FFFFFF !important;color:#0A0A0A !important;border:1px solid #0A0A0A !important;
    box-shadow:0 1px 1px rgba(10,10,10,.12), 0 3px 8px -4px rgba(10,10,10,.24) !important}
  .btn-g:hover{transform:translateY(-1px) !important;box-shadow:0 2px 3px rgba(10,10,10,.16), 0 6px 14px -5px rgba(10,10,10,.3) !important}
  .panel.dark .btn-g,.final .btn-g{background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.55) !important;box-shadow:none !important}
  .panel.dark .btn-g:hover,.final .btn-g:hover{border-color:#fff !important}

  /* — floating nav: negro sólido, sin blur, con relieve sutil — */
  .floatnav{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:var(--blk) !important;border:1px solid var(--blk) !important;border-radius:8px !important;box-shadow:0 6px 20px -8px rgba(10,10,10,.5) !important}
  .fn-links{border-bottom:1.5px solid #000;padding-bottom:5px}   /* misma línea negra bajo los botones en la barra flotante */
  .fn-cta{background:#fff !important;color:#0A0A0A !important;border-radius:6px !important}
  .fn-cta:hover{background:#e6e6e6 !important;transform:none !important}

  /* — menú móvil: panel negro — */
  .navmenu{background:var(--blk) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;border-radius:8px !important;border:1px solid var(--blk)}
  .navmenu a{color:#FFFFFF !important;border-radius:5px !important}
  .navmenu a.cta{background:#fff !important;color:#0A0A0A !important}

  /* — inputs/cards: forma clásica suave, con leve relieve — */
  .input,.field input,.field textarea,.field select,.news-row input{border-radius:6px !important}
  .mini,.form-card,.chip,.job-row{border-radius:7px !important}
  .mini{box-shadow:0 1px 2px rgba(10,10,10,.08),0 6px 16px -10px rgba(10,10,10,.2) !important;border:1px solid var(--ink-line) !important}
  .form-card{box-shadow:0 2px 8px -4px rgba(10,10,10,.18),0 18px 40px -22px rgba(10,10,10,.3) !important;border:1px solid var(--ink-line)}
  .form-card::before{display:none !important}
  .progress{background:var(--accent) !important}   /* barra de scroll = línea azul */

  /* — azules que NO son líneas (en bloques negros) → blanco puro — */
  .kicker.on-dark{color:#FFFFFF !important}
  h2.on-dark .g,.lead.on-dark,.body.on-dark{color:#FFFFFF !important}
  .contact-trust li{color:#FFFFFF !important;border-color:var(--line-d) !important;background:transparent !important}

  /* ====================================================================
     v3 — FONDO UNIFICADO (off-white editorial, ref. fondo 1/2)
     Una sola superficie en toda la landing: los bloques antes oscuros
     pasan a claro. Sin línea en el header. Cards estilo "cards.jpg".
     ==================================================================== */
  :root{ --paper:#F3F2EE; --outer:#F3F2EE; --canvas:#F3F2EE; }
  html,body{background:#F3F2EE !important}
  /* todas las superficies transparentes → se ve el mismo papel + grano */
  .panel,.hero,.panel.dark,.nightfx,.final,.report-card{background:transparent !important}
  .panel.dark::after,.final::after,.report-card::after{display:none !important}
  .panel{border-top:1px solid var(--ink-line) !important}
  .hero{border-bottom:0 !important}

  /* sin línea bajo los botones del header */
  .nav-links,.fn-links{border-bottom:0 !important;padding-bottom:0 !important}

  /* — secciones antes oscuras → texto negro — */
  .tt-head h2.on-dark,.tt-head h2.on-dark .g,.final h2,.final h2 .mut,.contact-split h2,.final .sub,.kicker.on-dark{color:#0A0A0A !important}
  .kicker.on-dark{opacity:.7}
  /* testimonios: cards claras */
  .card{background:#FBFAF6 !important;border:1px solid var(--ink-line) !important;border-radius:14px !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:0 1px 2px rgba(10,10,10,.05),0 18px 40px -26px rgba(10,10,10,.25) !important}
  .card p,.card .nm{color:#0A0A0A !important}
  .card .rl{color:#0A0A0A !important;opacity:.6}
  .card .mk{color:#0A0A0A !important;opacity:.16}
  .card .who{border-top:1px solid var(--ink-line) !important}
  .qlogo{filter:brightness(0) !important;opacity:.55 !important}
  .card:hover .qlogo{opacity:.8 !important}
  .contact-trust li{color:#0A0A0A !important;border-color:var(--ink-line) !important;background:transparent !important}
  /* report card → tarjeta clara con borde */
  .report-card{border:1px solid var(--ink-line) !important;border-radius:16px !important}
  .report-card,.report-card *{color:#0A0A0A !important}
  .report-card .tag,.report-card h3 .g,.report-card .big-lbl,.report-card .big-stat .u{color:#0A0A0A !important;opacity:.6}
  .report-card .btn-w{background:#0A0A0A !important;color:#fff !important;border-color:#0A0A0A !important}

  /* — header (barra flotante + menú) → claro — */
  .floatnav{background:rgba(243,242,238,.94) !important;border:1px solid var(--ink-line) !important;box-shadow:0 8px 24px -12px rgba(10,10,10,.25) !important}
  .fn-logo{color:#0A0A0A !important}
  .fn-links a{color:#0A0A0A !important;opacity:.62}
  .fn-links a:hover{opacity:1}
  .fn-cta{background:#0A0A0A !important;color:#fff !important}
  .fn-cta:hover{background:#1b1b1b !important}
  .navmenu{background:#F3F2EE !important;border:1px solid var(--ink-line) !important}
  .navmenu a{color:#0A0A0A !important}
  .navmenu a:hover{background:rgba(10,10,10,.06) !important}
  .navmenu a.cta{background:#0A0A0A !important;color:#fff !important}

  /* botones outline sobre secciones ahora claras */
  .final .btn-g,.panel.dark .btn-g{background:#FFFFFF !important;color:#0A0A0A !important;border:1px solid #0A0A0A !important;box-shadow:0 1px 1px rgba(10,10,10,.12),0 3px 8px -4px rgba(10,10,10,.24) !important}
  .final .btn-w,.panel.dark .btn-w{background:#0A0A0A !important;color:#fff !important;border-color:#0A0A0A !important}

  /* — CARDS "CEOs choose us" estilo cards.jpg: clara, número arriba, texto abajo — */
  .why-cards{gap:clamp(16px,1.8vw,24px)}
  .wcard,.wc1,.wc2,.wc3{background:#FBFAF6 !important;border:1px solid var(--ink-line) !important;border-radius:16px !important;min-height:clamp(240px,27vw,310px) !important;
    box-shadow:0 1px 2px rgba(10,10,10,.05),0 18px 40px -26px rgba(10,10,10,.22) !important}
  .wcard:hover{transform:translateY(-4px) !important;box-shadow:0 2px 4px rgba(10,10,10,.08),0 26px 50px -24px rgba(10,10,10,.3) !important}
  .wc-body{padding:clamp(22px,2.4vw,30px) !important}
  .wcard h3{font-family:var(--dd) !important;font-size:clamp(20px,2.2vw,26px) !important;color:#0A0A0A !important;letter-spacing:-.02em}
  .wcard p{color:#0A0A0A !important;opacity:.7}
  .wc-grain{opacity:.4 !important;mix-blend-mode:multiply !important}
  .wcard::after{position:absolute;top:clamp(20px,2.4vw,28px);left:clamp(22px,2.4vw,30px);z-index:2;font-family:var(--dd);font-weight:500;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;color:#0A0A0A;opacity:.22}
  .wc1::after{content:"01"}.wc2::after{content:"02"}.wc3::after{content:"03"}

  /* ====================================================================
     v4 — ajustes finos: header diferenciado, quote en negro, números de
     cards en azul, y formulario en estilo editorial.
     ==================================================================== */
  /* header flotante: blanco con relieve claro → se despega del papel off-white */
  .floatnav{background:#FFFFFF !important;border:1px solid rgba(10,10,10,.16) !important;box-shadow:0 12px 34px -12px rgba(10,10,10,.34) !important}

  /* el quote "We don't throw resumes around…" en NEGRO, no azul */
  .why-quote,.why-quote .g,.why6 .why-quote,.why6 .why-quote .g{color:#0A0A0A !important}
  .why6 .why-quote .g{font-style:italic}

  /* números de las cards CEOs → AZUL */
  .wcard::after{color:var(--accent) !important;opacity:1 !important}

  /* — FORMULARIO editorial: sin caja SaaS, campos underline, labels mono — */
  .form-card{background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important}
  .form-card::before{display:none !important}
  .field label,.form-card .field label{font-family:var(--bb) !important;font-size:10.5px !important;font-weight:600 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:#0A0A0A !important;opacity:.55;margin-bottom:8px !important}
  .form-card .field label .opt{opacity:.6;text-transform:none;letter-spacing:0}
  .form-card .field input,.form-card .field select{background:transparent !important;border:0 !important;border-bottom:1px solid var(--ink-line) !important;border-radius:0 !important;padding:9px 2px !important;color:#0A0A0A !important;font-family:var(--bb) !important;transition:border-color .2s !important}
  .form-card .field input:hover,.form-card .field select:hover{border-bottom-color:rgba(10,10,10,.42) !important;background:transparent !important}
  .form-card .field input:focus,.form-card .field select:focus{outline:none !important;border-bottom:1.5px solid var(--accent) !important;box-shadow:none !important;background:transparent !important}
  .form-card .field textarea{background:transparent !important;border:1px solid var(--ink-line) !important;border-radius:6px !important;padding:10px 12px !important;color:#0A0A0A !important;font-family:var(--bb) !important}
  .form-card .field textarea:focus{outline:none !important;border:1.5px solid var(--accent) !important;box-shadow:none !important}
  .form-card .field input::placeholder,.form-card .field textarea::placeholder{color:#0A0A0A;opacity:.32}
  .select-wrap::after{border-color:#0A0A0A !important;opacity:.6}
  .form-card .form-note{color:#0A0A0A !important;opacity:.55}

  /* ====================================================================
     v5 — GRANO/TEXTURA EN TODAS LAS SECCIONES (no sólo el del medio).
     El grano global "fixed" no cubría parejo; lo aplico por-sección a
     hero + todos los panels + footer, con el mismo ruido y opacidad.
     ==================================================================== */
  body::before{display:none !important}   /* reemplazado por el grano por-sección */
  .hero,.panel,footer{position:relative}
  .hero::after,.panel::after,.panel.light::after,.panel.dark::after,.nightfx::after,.final::after,footer::after{
    content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;pointer-events:none !important;display:block !important;
    opacity:.36 !important;mix-blend-mode:multiply !important;background-size:300px 300px !important;background-repeat:repeat !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='gg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gg)'/%3E%3C/svg%3E") !important}
  .hero > *,.panel > *,footer > *{position:relative;z-index:1}

  /* ====================================================================
     v6 — quote bold · sacar barra superior · sección thesis editorial
     (fuera las "pelotas") · más líneas de fondo (estilo diario) · más
     negros y sombras.
     ==================================================================== */
  /* quote en negrita */
  .why-quote,.why-quote .g,.why6 .why-quote,.why6 .why-quote .g{font-weight:700 !important}

  /* sacar la franja superior (padding del body sin grano) */
  body{padding-top:0 !important}

  /* GRILLA de hairlines de fondo (estilo editorial/diario) — fija detrás de todo */
  body::before{content:"" !important;position:fixed !important;inset:0 !important;z-index:0 !important;pointer-events:none !important;display:block !important;opacity:1 !important;mix-blend-mode:normal !important;
    background-image:repeating-linear-gradient(90deg,rgba(10,10,10,.05) 0 1px,transparent 1px 196px),repeating-linear-gradient(0deg,rgba(10,10,10,.028) 0 1px,transparent 1px 58px) !important;background-size:auto !important}

  /* sección thesis: fuera los orbes azules borrosos → bloque negro editorial con línea azul */
  .figure-fx{background:#0A0A0A !important;border-radius:6px !important;overflow:hidden !important;box-shadow:0 38px 76px -30px rgba(10,10,10,.6),0 10px 24px -12px rgba(10,10,10,.4) !important}
  .figure-fx::before{display:none !important}
  .figure-fx::after{content:"" !important;display:block !important;position:absolute !important;top:auto !important;left:0 !important;right:0 !important;bottom:0 !important;width:auto !important;height:3px !important;
    background:var(--accent) !important;background-image:none !important;opacity:1 !important;mix-blend-mode:normal !important;animation:none !important}

  /* más negros y sombras: profundizo el relieve de cards y header */
  .wcard,.wc1,.wc2,.wc3{box-shadow:0 2px 4px rgba(10,10,10,.09),0 30px 60px -26px rgba(10,10,10,.36) !important}
  .card{box-shadow:0 2px 4px rgba(10,10,10,.09),0 30px 60px -26px rgba(10,10,10,.36) !important}
  .report-card{box-shadow:0 2px 4px rgba(10,10,10,.09),0 32px 64px -26px rgba(10,10,10,.36) !important}
  .floatnav{box-shadow:0 18px 48px -14px rgba(10,10,10,.42) !important}

  /* ====================================================================
     v7 — íconos editoriales (negro, línea) + targeted search visible +
     quote normal con 2ª mitad itálica.
     ==================================================================== */
  /* targeted search: caja clara editorial con la lupa (ya NO bloque negro) */
  .figure-fx{background:#FBFAF6 !important;border:1px solid var(--ink-line) !important;border-radius:8px !important;color:#0A0A0A !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    box-shadow:0 2px 4px rgba(10,10,10,.08),0 26px 52px -24px rgba(10,10,10,.32) !important}
  .figure-fx::before,.figure-fx::after{display:none !important}
  .ed-ic{width:clamp(58px,8vw,84px) !important;height:auto !important;color:#0A0A0A}

  /* íconos conceptuales de las cards (cronómetro / puzzle / anillos) */
  .wc-ic{width:30px;height:30px;color:#0A0A0A;display:block;margin-bottom:14px}

  /* quote: peso normal + segunda mitad en itálica (como los títulos) */
  .why-quote,.why-quote .g,.why6 .why-quote,.why6 .why-quote .g{font-weight:500 !important}
  .why-quote .g,.why6 .why-quote .g{font-style:italic !important}

  /* ====================================================================
     v8 — targeted search vuelve a su figura AZUL (sólo se le sacó lo
     negro) · íconos sólidos · números 01/02/03 más tenues.
     ==================================================================== */
  /* restaurar el figure-fx azul original (orbes borrosos), sin caja negra/clara */
  .figure-fx{background:none !important;border:0 !important;border-radius:8px !important;overflow:hidden !important;display:block !important;
    box-shadow:0 26px 56px -34px rgba(20,36,107,.5) !important;filter:none !important}
  .figure-fx::before{display:block !important}   /* orbes azules */
  .figure-fx::after{display:none !important}     /* sin grano extra */

  /* íconos sólidos (rellenos, negro) — estilo icons.jpg */
  .wc-ic{width:32px;height:32px;color:#0A0A0A;fill:#0A0A0A;display:block;margin-bottom:14px}

  /* números 01/02/03 */
  .wcard::after{color:var(--accent) !important;opacity:.28 !important}

  /* ====================================================================
     v9 — grilla blueprint detrás de cada ícono (inspo icons.jpg) ·
     números un poco más visibles · targeted search con leve filtro.
     ==================================================================== */
  .wc-icwrap{display:flex;align-items:center;justify-content:center;width:62px;height:62px;margin-bottom:16px;
    background-repeat:no-repeat;background-position:center;background-size:contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%239db8e6' stroke-width='0.5' opacity='0.75'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3Ccircle cx='30' cy='30' r='19'/%3E%3Ccircle cx='30' cy='30' r='11'/%3E%3Crect x='9' y='9' width='42' height='42'/%3E%3Cpath d='M3 3 57 57M57 3 3 57M30 2v56M2 30h56'/%3E%3C/g%3E%3C/svg%3E")}
  .wc-ic{width:30px !important;height:30px !important;margin-bottom:0 !important}

  /* números: que se vean un poco más (no tan apagados) */
  .wcard::after{opacity:.5 !important}

  /* targeted search: leve filtro + opacidad para que se integre, no tan saturado */
  .figure-fx{filter:grayscale(.18) saturate(.9) !important;opacity:.85 !important}

  /* ====================================================================
     v10 — íconos de línea (primeros), más chicos y centrados ·
     azul de steps + barras al mismo nivel de opacidad que los números.
     ==================================================================== */
  /* íconos: más chicos, centrados en su grilla, de línea (sin relleno) */
  .wc-icwrap{width:52px !important;height:52px !important;margin-bottom:16px !important}
  .wc-ic{width:23px !important;height:23px !important;fill:none !important;color:#0A0A0A !important;margin-bottom:0 !important;display:block !important}

  /* números 01-04 de los steps: azul al mismo nivel de opacidad que los de las cards */
  .step .six{color:var(--accent) !important;opacity:.5 !important}
  /* el diseño de barras (howfx) al mismo nivel de opacidad */
  .howfx{opacity:.5 !important}

  /* ====================================================================
     v11 — íconos sin fondo (grilla fuera), los tres alineados en la
     misma línea (arriba) · howfx un poco menos apagado.
     ==================================================================== */
  /* sin grilla; ícono fijo arriba-izquierda → los tres en la misma línea */
  .wc-icwrap{background:none !important;position:absolute !important;top:clamp(22px,2.5vw,28px) !important;left:clamp(22px,2.4vw,30px) !important;width:auto !important;height:auto !important;margin:0 !important;display:block !important}
  .wc-ic{width:26px !important;height:26px !important;fill:none !important;color:#0A0A0A !important}
  /* número al lado opuesto (arriba-derecha) para que no choque con el ícono */
  .wcard::after{left:auto !important;right:clamp(22px,2.4vw,30px) !important}
  /* el texto sigue abajo; dejo aire arriba para ícono+número */
  .wc-body{padding-top:clamp(58px,7vw,74px) !important}

  /* how it works: barras un poco más presentes (no tan apagadas) */
  .howfx{opacity:.7 !important}

  /* ====================================================================
     v12 — los "mini" (Fast/Right) con diseño editorial: regla superior,
     palabra en serif itálica, descriptor chico debajo.
     ==================================================================== */
  .mini{display:block !important;background:none !important;border:0 !important;border-top:1.5px solid #0A0A0A !important;border-radius:0 !important;box-shadow:none !important;
    padding:13px 0 0 !important;color:#0A0A0A !important;font-family:var(--bb) !important;font-size:13.5px !important;line-height:1.4 !important;width:100% !important}
  .mini b{display:block !important;font-family:var(--dd) !important;font-weight:500 !important;font-style:italic !important;font-size:clamp(19px,2.2vw,24px) !important;letter-spacing:-.02em !important;margin-bottom:4px !important;color:#0A0A0A !important}

  /* ====================================================================
     v13 — números a la IZQUIERDA (ícono a la derecha) · logo editorial.
     ==================================================================== */
  .wcard::after{left:clamp(22px,2.4vw,30px) !important;right:auto !important}
  .wc-icwrap{left:auto !important;right:clamp(22px,2.4vw,30px) !important}
  .logo,.fn-logo{font-family:'Newsreader',Georgia,serif !important;font-weight:500 !important;letter-spacing:-.01em !important}

  /* v14 — ícono ahora hijo directo de la card: arriba-DERECHA; número arriba-izquierda */
  .wc-icwrap{position:absolute !important;top:clamp(22px,2.5vw,28px) !important;right:clamp(22px,2.4vw,30px) !important;left:auto !important;margin:0 !important;background:none !important;width:auto !important;height:auto !important}
  .wcard::after{left:clamp(22px,2.4vw,30px) !important;right:auto !important}
  .wc-body{padding-top:clamp(54px,6.5vw,70px) !important}

  /* v17 — UNIFICAR Fast/Right + stats (250+/5d/3wk/90%) en UN patrón editorial
     monocromo: grilla de 4 columnas, regla negra arriba de cada item, headline
     serif, label sans. SIN azul. */
  .mini-grid,.stat-mini{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:clamp(16px,2.2vw,34px) !important;margin-top:clamp(26px,3.4vw,42px) !important;border-top:0 !important}
  .mini,.stat-mini .s{border-top:1.5px solid #0A0A0A !important;padding:15px 0 0 !important;background:none !important;box-shadow:none !important;position:static !important}
  .mini{grid-column:span 2 !important;width:auto !important;display:block !important;font-family:var(--bb) !important;font-size:13px !important;color:rgba(10,10,10,.62) !important}
  .mini::before,.stat-mini .s::before{display:none !important}
  .mini b{display:block !important;font-family:var(--dd) !important;font-weight:500 !important;font-style:normal !important;font-size:clamp(19px,2.2vw,25px) !important;letter-spacing:-.02em !important;margin-bottom:5px !important;color:#0A0A0A !important}
  .stat-mini .n{font-family:var(--dd) !important;font-weight:500 !important;color:#0A0A0A !important;font-size:clamp(20px,2.4vw,28px) !important;letter-spacing:-.02em !important;line-height:1 !important}
  .stat-mini .n .u{color:#0A0A0A !important}
  .stat-mini .l{font-family:var(--bb) !important;color:rgba(10,10,10,.62) !important;margin-top:6px !important}
  @media(max-width:560px){.mini-grid,.stat-mini{grid-template-columns:1fr 1fr;row-gap:clamp(20px,5vw,28px)}.mini{grid-column:span 1 !important}}

  /* v20 — floatnav redondeado · ícono en flujo (arriba del título, espaciado,
     agrupado con el texto abajo; el número arriba) · LOGO marca (Wordmark). */
  .floatnav{border-radius:999px !important}
  .wcard::after{left:clamp(22px,2.4vw,30px) !important;right:auto !important;top:clamp(22px,2.4vw,28px) !important}
  /* ícono dentro del bloque de texto (abajo), arriba del título, con aire */
  .wc-icwrap{position:static !important;display:block !important;top:auto !important;left:auto !important;right:auto !important;margin:0 0 clamp(14px,1.8vw,20px) !important;background:none !important;width:auto !important;height:auto !important}
  .wc-body{padding-top:clamp(20px,2.4vw,28px) !important}

  /* LOGO = Wordmark de marca: Inter 700, tracking apretado, slash cobalto */
  .logo,.fn-logo{font-family:'Inter',system-ui,sans-serif !important;font-weight:700 !important;letter-spacing:-0.04em !important;color:#1A1712 !important}
  .logo .s,.fn-logo span{color:#3A5277 !important;font-weight:700 !important}

  /* v21 — FIXES MOBILE.
     (a) menú lateral: el grano puso .hero>* a z-index:1 y atrapó el <nav>
         debajo del hero-inner → el menú quedaba detrás. Subo el nav. */
  .hero nav{z-index:60 !important}
  .navmenu{z-index:70 !important}
  /* (b) thesis: stats 2 columnas en mobile (la media query no ganaba por !important) */
  @media(max-width:560px){
    .mini-grid,.stat-mini{grid-template-columns:1fr 1fr !important;column-gap:clamp(16px,5vw,28px) !important;row-gap:clamp(22px,6vw,30px) !important}
    .mini{grid-column:span 1 !important}
  }
  /* (c) figura targeted search: tamaño razonable y centrada en mobile */
  @media(max-width:820px){
    .figure-fx{width:min(54vw,196px) !important;margin-left:auto !important;margin-right:auto !important}
  }
  /* (d) floatnav con un poco más de aire arriba */
  .floatnav{top:clamp(16px,3.4vw,24px) !important}

  /* v22 — (a) la X de cerrar arriba del menú (la rompí con el z-index) */
  .navtog{z-index:80 !important}
  /* (b) drawer mobile más chico (no gigante) */
  @media(max-width:600px){
    .navmenu{width:min(72vw,288px) !important;padding-top:72px !important}
    .navmenu a{font-size:15.5px !important;padding:12px 14px !important}
  }
  /* (c) botón "Hire Talent" del floatnav con aire respecto al borde redondeado */
  .floatnav{padding:7px 16px 7px 22px !important}
  /* (d) sacar el "/" del logo */
  .logo .s,.fn-logo span{display:none !important}

  /* v23 — en mobile, fuera la figura "targeted search" (al pedo ahí) */
  @media(max-width:820px){ .iconcell{display:none !important} }

  /* v24 — botón "Hire Talent" con contorno ovalado (pill) */
  nav .btn-g,.fn-cta{border-radius:999px !important}

  /* v25 — JOB BOARD embebido como sección de la landing (#jobs), tema paper */
  #jobs .roles-count{font-family:var(--bb);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#0A0A0A;opacity:.55;margin:clamp(22px,3vw,34px) 0 14px}
  #jobs .jobtools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
  #jobs .jobsearch{flex:1 1 240px;max-width:360px;background:#FBFAF6 url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230A0A0A'%20stroke-width='2'%20stroke-linecap='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center;border:1px solid var(--ink-line);border-radius:8px;padding:11px 16px 11px 42px;color:#0A0A0A;font-family:var(--bb);font-size:14px;transition:border-color .2s,box-shadow .2s}
  #jobs .jobsearch::placeholder{color:#0A0A0A;opacity:.4}
  #jobs .jobsearch:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(35,66,214,.12)}
  #jobs .jobchips{display:flex;gap:8px;flex-wrap:wrap}
  #jobs .chip{font-family:var(--bb);font-size:13px;font-weight:500;color:#0A0A0A;background:transparent;border:1px solid var(--ink-line);border-radius:8px;padding:8px 15px;cursor:pointer;transition:color .2s,background .2s,border-color .2s;white-space:nowrap;opacity:.7}
  #jobs .chip:hover{opacity:1}
  #jobs .chip.active{background:#0A0A0A;color:#fff;border-color:#0A0A0A;opacity:1}
  #jobs .joblist{border-top:1px solid var(--ink-line);margin-top:6px}
  #jobs .job-row{display:flex;align-items:center;gap:18px;width:100%;text-align:left;text-decoration:none;border-bottom:1px solid var(--ink-line);padding:clamp(17px,2.3vw,24px) clamp(4px,1.2vw,12px);color:#0A0A0A;transition:background .25s ease,padding-left .25s ease}
  #jobs .job-row:hover{background:rgba(10,10,10,.035);padding-left:clamp(10px,1.8vw,20px)}
  #jobs .jr-title{flex:1 1 auto;min-width:0;font-family:var(--dd);font-weight:500;font-size:clamp(16px,1.9vw,21px);letter-spacing:-.015em;color:#0A0A0A}
  #jobs .jr-loc{flex:0 0 auto;font-size:13.5px;color:#0A0A0A;opacity:.55;text-align:right;white-space:nowrap}
  #jobs .jr-arrow{flex:0 0 auto;color:#0A0A0A;opacity:.45;font-size:22px;line-height:1;transition:transform .25s ease,color .25s ease}
  #jobs .job-row:hover .jr-arrow{transform:translateX(4px);color:var(--accent);opacity:1}
  #jobs .joblist-empty{padding:42px 8px;color:#0A0A0A;opacity:.6;font-size:15px;text-align:center}
  #jobs .joblist .job-row{opacity:0;animation:jobIn .5s cubic-bezier(.2,.7,.2,1) forwards}
  #jobs .joblist.instant .job-row{animation:none;opacity:1}
  #jobs .job-skel{display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--ink-line);padding:clamp(17px,2.3vw,24px) clamp(4px,1.2vw,12px)}
  #jobs .skel-bar{height:15px;border-radius:7px;background:linear-gradient(100deg,rgba(10,10,10,.05) 28%,rgba(10,10,10,.12) 50%,rgba(10,10,10,.05) 72%);background-size:220% 100%;animation:skelShine 1.25s ease-in-out infinite}
  #jobs .skel-title{flex:1 1 auto;max-width:340px}
  #jobs .skel-loc{flex:0 0 auto;width:84px;height:13px}
  @keyframes jobIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes skelShine{from{background-position:180% 0}to{background-position:-40% 0}}
  @media(max-width:520px){#jobs .jr-loc,#jobs .skel-loc{display:none}}