:root{
    --ink:#0E0A1F;
    --ink-2:#161029;
    --ink-3:#1E1636;
    --iris:#5D3FD3;
    --iris-bright:#7A5CF0;
    --lilac:#B7A4F2;
    --bone:#F4F2FB;
    --paper:#FFFFFF;
    --graphite:#241F3B;
    --mist:#6E6788;
    --mist-dk:#9A92B8;
    --line-dk:rgba(183,164,242,.16);
    --line-lt:rgba(36,31,59,.10);
    --display:"Poppins",system-ui,sans-serif;
    --body:"Poppins",system-ui,sans-serif;
    --mono:"Poppins",system-ui,sans-serif;
    --maxw:1180px;
    --pad:clamp(20px,5vw,64px);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    background:var(--ink);
    color:var(--bone);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--iris);color:#fff}
  :focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:2px}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

  .mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;font-weight:700}
  .eyebrow{display:inline-flex;align-items:center;gap:.6em;color:var(--lilac)}
  .eyebrow .chev{width:20px;height:10px;flex:none}

  /* chevron glyph */
  .chev{display:inline-block}
  .chev svg{display:block;width:100%;height:100%}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:60;
    background:rgba(14,10,31,.72);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-dk);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:900;letter-spacing:.04em;font-size:1.05rem;text-transform:uppercase}
  .brand .mark{width:30px;height:30px;flex:none;color:var(--iris-bright)}
  .brand svg.mark{display:block}
  .nav-links{display:flex;align-items:center;gap:30px}

  /* audience switch (Candidates / Companies) - anchored beside the brand so it never shifts */
  .aud-toggle{position:relative;display:inline-flex;align-items:center;background:rgba(183,164,242,.10);
    border:1px solid var(--line-dk);border-radius:4px;padding:3px;margin-left:16px;margin-right:36px;flex:none}
  .aud-opt{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;
    font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.01em;color:var(--mist-dk);
    padding:7px 14px;border-radius:2px;white-space:nowrap;transition:color .25s}
  .aud-opt.active{color:#fff}
  .aud-slider{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:2px;
    background:var(--iris);box-shadow:0 2px 10px -3px var(--iris);transition:transform .3s cubic-bezier(.5,0,.2,1);z-index:0}
  .aud-toggle.is-company .aud-slider{transform:translateX(100%)}
  /* push the nav cluster to the right; the switch keeps a fixed gap on its right */
  .nav-links{margin-left:auto;margin-right:26px}
  .nav .btn-iris.desktop-cta{margin-left:0}

  /* company mode: white top bar (the rest of the site stays dark) */
  html[data-aud="company"] header{
    background:rgba(255,255,255,.94);
    border-bottom-color:rgba(30,20,60,.12);
  }
  html[data-aud="company"] header .brand{color:#15102B}
  html[data-aud="company"] header .nav-links a{color:#3A3357}
  html[data-aud="company"] header .nav-links a:hover{color:#0E0A1F}
  html[data-aud="company"] header .nav-drop-btn{color:#3A3357}
  html[data-aud="company"] header .nav-drop-btn:hover{color:#0E0A1F}
  /* white dropdown panel to match the white bar (dark, readable items) */
  html[data-aud="company"] .nav-drop-menu{background:rgba(255,255,255,.98);border-color:rgba(30,20,60,.12);box-shadow:0 16px 40px rgba(30,20,60,.18)}
  html[data-aud="company"] .nav-drop-menu a{color:#3A3357}
  html[data-aud="company"] .nav-drop-menu a:hover{background:rgba(93,63,211,.12);color:#0E0A1F}
  html[data-aud="company"] .nav-drop-menu a.active{background:rgba(93,63,211,.15);color:#0E0A1F}
  html[data-aud="company"] header .nav-toggle{color:#15102B;border-color:rgba(30,20,60,.2)}
  html[data-aud="company"] .aud-toggle{background:rgba(93,63,211,.08);border-color:rgba(30,20,60,.16)}
  html[data-aud="company"] .aud-opt{color:#5A5475}
  html[data-aud="company"] .aud-opt.active{color:#fff}

  /* smooth dark <-> light cross-fade of the top bar on audience flip */
  header{transition:background-color .5s ease, border-color .5s ease}
  header .brand{transition:color .5s ease}
  header .nav-toggle{transition:color .45s ease, border-color .45s ease}
  header .nav-links a,header .nav-drop-btn{transition:color .45s ease}
  .aud-toggle{transition:background-color .45s ease, border-color .45s ease}
  .aud-opt{transition:color .45s ease}
  .nav-drop-menu{transition:background-color .35s ease, border-color .35s ease}

  /* ---- claw-slash transition (top-left -> bottom-right) ---- */
  .aud-slash{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
  .aud-claw{position:absolute;left:-60vw;top:-80vh;width:42vw;height:230vh;display:flex;gap:34px;
    transform:rotate(32deg);opacity:0;will-change:left,top,opacity}
  .aud-claw i{flex:1;border-radius:999px;
    background:linear-gradient(180deg,transparent 0%,rgba(183,164,242,.0) 12%,rgba(183,164,242,.95) 38%,#fff 50%,rgba(122,92,240,.95) 62%,rgba(183,164,242,0) 88%,transparent 100%);
    box-shadow:0 0 34px 7px rgba(122,92,240,.65)}
  .aud-slash.go .aud-claw{animation:clawSweep .62s cubic-bezier(.45,0,.25,1) forwards}
  @keyframes clawSweep{
    0%{left:-60vw;top:-85vh;opacity:0}
    14%{opacity:1}
    82%{opacity:1}
    100%{left:120vw;top:80vh;opacity:0}
  }
  .nav-links a{font-size:.82rem;font-weight:500;color:var(--mist-dk);transition:color .2s;white-space:nowrap}
  .nav-links a:hover{color:var(--bone)}
  .nav-links > .btn{display:none}
  .btn{
    font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
    font-size:.75rem;padding:12px 20px;border-radius:2px;display:inline-flex;align-items:center;gap:.6em;
    cursor:pointer;border:0;transition:transform .15s ease,background .2s ease,box-shadow .2s ease;white-space:nowrap;
  }
  .btn-iris{background:var(--iris);color:#fff;box-shadow:0 0 0 1px rgba(122,92,240,.35)}
  .btn-iris:hover{background:var(--iris-bright);transform:translateY(-2px);box-shadow:0 10px 30px -10px var(--iris)}
  .btn-ghost{background:transparent;color:var(--bone);border:1px solid var(--line-dk)}
  .btn-ghost:hover{border-color:var(--lilac);color:#fff;transform:translateY(-2px)}
  .btn-dark{background:var(--ink);color:#fff}
  .btn-dark:hover{background:var(--ink-3);transform:translateY(-2px)}
  .nav-toggle{display:none;background:none;border:1px solid var(--line-dk);color:var(--bone);width:42px;height:42px;border-radius:2px;cursor:pointer}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding:clamp(64px,11vw,140px) 0 clamp(72px,12vw,150px)}
  .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .hero h1{
    font-family:var(--display);font-weight:900;text-transform:uppercase;
    font-size:clamp(2.6rem,7vw,5.4rem);line-height:.94;letter-spacing:-.01em;margin:22px 0 0;
  }
  .hero h1 .accent{color:var(--iris)}
  .hero h1 .accent2{-webkit-text-stroke:1.5px var(--lilac);color:transparent}
  .hero p.lead{max-width:46ch;margin-top:24px;font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--mist-dk)}
  .hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
  .badge{
    display:inline-flex;align-items:center;gap:.7em;margin-top:30px;
    font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;
    color:var(--lilac);padding:8px 14px;border:1px solid var(--line-dk);border-radius:999px;background:rgba(93,63,211,.08);
  }
  .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--iris);box-shadow:0 0 0 4px rgba(93,63,211,.2);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

  /* hero chevron structure */
  .hero-art{position:relative;height:100%;min-height:340px;display:grid;place-items:center}
  .lion-stage{position:relative;width:min(100%,430px);aspect-ratio:1/1;display:grid;place-items:center;animation:lionFloat 6s ease-in-out infinite}
  @keyframes lionFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .lion-aura{position:absolute;inset:-6%;border-radius:50%;z-index:0;pointer-events:none;
    background:radial-gradient(circle at 50% 48%,rgba(122,92,240,.55),rgba(93,63,211,.22) 44%,transparent 68%);
    filter:blur(10px);animation:auraPulse 4.2s ease-in-out infinite}
  @keyframes auraPulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
  .lion-mark{position:relative;z-index:1;width:84%;height:auto;display:block;filter:drop-shadow(0 16px 44px rgba(93,63,211,.6))}
  /* shine: a light band swept across the lion silhouette on scroll */
  .lion-shine{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
    width:84%;aspect-ratio:1427/1467;pointer-events:none;overflow:hidden;
    -webkit-mask:url("assets/lionheart-lion.png") center/contain no-repeat;
            mask:url("assets/lionheart-lion.png") center/contain no-repeat}
  .lion-shine .streak{position:absolute;top:-25%;left:0;width:34%;height:150%;
    background:linear-gradient(90deg,transparent,rgba(235,231,255,.92),transparent);
    filter:blur(5px);mix-blend-mode:screen;transform:translateX(var(--shineX,-160%)) rotate(18deg)}
  .hero-glow{position:absolute;z-index:1;width:60vw;height:60vw;max-width:760px;max-height:760px;right:-14vw;top:-12vw;
    background:radial-gradient(circle,rgba(93,63,211,.42),transparent 62%);filter:blur(20px);pointer-events:none}
  .hero-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(var(--line-dk) 1px,transparent 1px);background-size:34px 34px;
    -webkit-mask-image:linear-gradient(to bottom,#000,transparent 75%);mask-image:linear-gradient(to bottom,#000,transparent 75%)}

  /* ---------- section divider ---------- */
  .divider{display:flex;justify-content:center;gap:8px;padding:6px 0}
  .divider .chev{width:26px;height:13px;color:var(--iris);opacity:.5}
  .divider .chev:nth-child(2){opacity:.32}
  .divider .chev:nth-child(3){opacity:.18}

  /* ---------- generic section ---------- */
  section{position:relative}
  .sec-head{max-width:62ch}
  .sec-head h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,4vw,3rem);line-height:1.6;letter-spacing:-.01em;margin-top:14px}
  .sec-head p{color:var(--mist-dk);margin-top:4px;font-size:1.04rem}

  /* ---------- founder quote ---------- */
  .founder{padding:clamp(70px,9vw,120px) 0;background:linear-gradient(180deg,var(--ink),var(--ink-2))}
  .quote{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,44px);align-items:start}
  .quote .bigchev{width:clamp(44px,7vw,84px);color:var(--iris);flex:none}
  .quote blockquote{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3.1vw,2.35rem);line-height:1.18;letter-spacing:-.01em}
  .quote blockquote .hl{color:var(--lilac)}
  .quote .attrib{margin-top:24px;display:flex;align-items:center;gap:14px}
  .quote .attrib .ln{width:40px;height:2px;background:var(--iris)}
  .quote .attrib span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--mist-dk)}
  .quote .attrib b{color:var(--bone);font-weight:700}

  /* ---------- values ---------- */
  .values{padding:clamp(70px,9vw,120px) 0}
  .val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
  .val{padding:28px 24px 30px;border:1px solid var(--line-dk);border-radius:4px;background:linear-gradient(180deg,var(--ink-2),transparent);transition:border-color .25s,transform .25s,background .25s}
  .val:hover{border-color:var(--iris);transform:translateY(-4px);background:linear-gradient(180deg,var(--ink-3),transparent)}
  .val .chev{width:30px;height:16px;color:var(--iris)}
  .val h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.06rem;margin:20px 0 10px}
  .val p{color:var(--mist-dk);font-size:.92rem;line-height:1.55}
  .val .num{font-family:var(--mono);font-size:.66rem;color:var(--mist);letter-spacing:.14em;float:right}

  /* ---------- services ---------- */
  .services{padding:clamp(70px,9vw,120px) 0;background-color:#F4F2FB;background-image:repeating-linear-gradient(135deg,rgba(36,31,59,.045) 0 1px,transparent 1px 24px);color:var(--graphite)}
  .services .sec-head h2{color:var(--graphite)}
  .services .sec-head .eyebrow{color:var(--iris)}
  .services .sec-head p{color:var(--mist)}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:48px;background:var(--line-lt);border:1px solid var(--line-lt);border-radius:6px;overflow:hidden}
  .svc{background:var(--paper);padding:34px 30px 38px;position:relative;transition:background .25s}
  .svc:hover{background:#fff}
  .svc:hover .svc-tag{color:var(--iris)}
  .svc:hover .arrow{transform:translate(4px,-4px);opacity:1}
  .svc .svc-tag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;color:var(--mist);transition:color .25s}
  .svc h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:1.22rem;margin:16px 0 12px;line-height:1.08}
  .svc p{color:#4a4364;font-size:.93rem;line-height:1.58}
  .svc .arrow{position:absolute;top:30px;right:28px;width:18px;height:18px;color:var(--iris);opacity:.35;transition:transform .25s,opacity .25s}
  .svc .soon{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--iris);padding:5px 11px 5px 16px;clip-path:polygon(9px 0,100% 0,100% 100%,9px 100%,0 50%)}

  /* ---------- brand devices (from marketing kit) ---------- */
  /* purple highlight bar behind a keyword */
  .markbar{background:var(--iris);color:#fff;padding:0 .26em;border-radius:2px;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  @media (max-width:520px){.sec-head h2 .markbar{white-space:normal}}
  /* chevron-pointed flag tag (e.g. the LionheartRecruitment.com banner) */
  .flag{display:inline-flex;align-items:center;background:var(--iris);color:#fff;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;font-weight:700;padding:8px 16px 8px 22px;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%)}

  /* ---------- vision ---------- */
  .vision{padding:clamp(80px,11vw,150px) 0;position:relative;overflow:hidden}
  .vision .vchev{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:48vw;max-width:620px;color:var(--ink-2);z-index:0;pointer-events:none}
  .vision .wrap{position:relative;z-index:2}
  .vision .vtext{max-width:30ch;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.16;letter-spacing:-.01em}
  .vision .vtext .hl{color:var(--iris)}
  .vision .vtext .ol{color:var(--lilac)}

  /* ---------- team ---------- */
  .team{padding:clamp(70px,9vw,120px) 0;background:linear-gradient(180deg,var(--ink-2),var(--ink))}
  .team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
  .member{position:relative;border:1px solid rgba(122,92,240,.22);border-radius:16px;padding:30px 28px 28px;
    background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
    box-shadow:0 0 0 1px rgba(93,63,211,.08),0 20px 55px -22px rgba(93,63,211,.6),inset 0 1px 0 rgba(183,164,242,.08);
    transition:border-color .25s,transform .25s,box-shadow .25s}
  .member:hover{border-color:var(--iris-bright);transform:translateY(-6px);
    box-shadow:0 0 0 1px rgba(122,92,240,.55),0 28px 70px -18px rgba(122,92,240,.75),inset 0 1px 0 rgba(183,164,242,.18)}
  .avatar{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:1.5rem;color:#fff;
    background:linear-gradient(135deg,var(--iris),#3a259a);letter-spacing:.02em;position:relative}
  .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
  .avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(122,92,240,.45);box-shadow:0 0 20px -4px rgba(122,92,240,.6);pointer-events:none}
  .member h3{font-family:var(--display);font-weight:800;font-size:1.2rem;margin:20px 0 4px;letter-spacing:.01em}
  .member .role{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;color:var(--lilac)}
  .member p{color:var(--mist-dk);font-size:.9rem;line-height:1.55;margin:16px 0 20px}
  .member .contacts{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line-dk);padding-top:18px}
  .member .contacts a{font-size:.84rem;color:var(--mist-dk);display:inline-flex;align-items:center;gap:9px;transition:color .2s}
  .member .contacts a:hover{color:var(--bone)}
  .member .contacts svg{width:14px;height:14px;flex:none;color:var(--iris)}

  /* ---------- partners ---------- */
  .partners{padding:clamp(70px,9vw,120px) 0;background:linear-gradient(180deg,var(--ink),var(--ink-2))}
  .partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
  .partner{display:flex;flex-direction:column;border:1px solid var(--line-dk);border-radius:8px;overflow:hidden;background:var(--ink-2);transition:border-color .25s,transform .25s}
  .partner:hover{border-color:var(--iris);transform:translateY(-4px)}
  .partner .logo{background:#fff;display:grid;place-items:center;height:132px;padding:13px 18px}
  .partner .logo img{max-width:100%;max-height:106px;object-fit:contain;display:block}
  .partner .pname{font-family:var(--display);font-weight:900;font-size:1.45rem;letter-spacing:.04em;color:var(--graphite)}
  .partner .pbody{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
  .partner .ptag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.6rem;font-weight:700;color:var(--lilac)}
  .partner h3{font-family:var(--display);font-weight:800;font-size:1.12rem;margin:12px 0 8px;letter-spacing:.01em}
  .partner p{color:var(--mist-dk);font-size:.9rem;line-height:1.55}
  .partner .plink{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;font-weight:700;color:var(--lilac);transition:color .2s}
  .partner .plink svg{width:14px;height:14px}
  .partner:hover .plink{color:var(--bone)}

  /* ---------- contact ---------- */
  .contact{padding:clamp(70px,9vw,120px) 0}
  .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:start}
  .contact h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2rem,5vw,3.4rem);line-height:.98;letter-spacing:-.01em;margin-top:14px}
  .contact .ctext{color:var(--mist-dk);margin-top:18px;max-width:34ch}
  .cdirect{margin-top:34px;display:flex;flex-direction:column;gap:14px}
  .cdirect a{display:inline-flex;align-items:center;gap:12px;font-size:.96rem;color:var(--bone)}
  .cdirect a:hover{color:var(--lilac)}
  .cdirect svg{width:18px;height:18px;color:var(--iris);flex:none}

  form{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:8px;padding:clamp(24px,3vw,38px)}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
  .field.full{grid-column:1/-1}
  label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;color:var(--mist-dk)}
  label .req{color:var(--iris)}
  input,select,textarea{
    font-family:var(--body);font-size:.95rem;color:var(--bone);background:var(--ink);
    border:1px solid var(--line-dk);border-radius:4px;padding:12px 13px;transition:border-color .2s,box-shadow .2s;width:100%;
  }
  /* checkboxes and radios must not inherit the full-width text-input sizing */
  input[type=checkbox],input[type=radio]{width:auto;flex:none;min-width:0;padding:0;margin:0;accent-color:var(--iris)}
  input:focus,select:focus,textarea:focus{border-color:var(--iris);box-shadow:0 0 0 3px rgba(93,63,211,.18);outline:none}
  textarea{resize:vertical;min-height:104px}
  select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B7A4F2' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
  form .btn-iris{width:100%;justify-content:center;padding:15px;font-size:.82rem;margin-top:6px}
  .form-note{font-size:.78rem;color:var(--mist);margin-top:14px;text-align:center}
  .form-msg{display:none;font-size:.9rem;margin-top:14px;padding:12px 14px;border-radius:4px;text-align:center}
  .form-msg.ok{display:block;background:rgba(93,63,211,.16);color:var(--lilac);border:1px solid var(--line-dk)}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line-dk);padding:54px 0 40px;background:var(--ink)}
  .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
  .foot .brand{font-size:1rem}
  .foot-tag{color:var(--mist);font-size:.82rem;margin-top:14px;max-width:34ch}
  .foot-right{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
  .foot-right a{color:var(--mist-dk);font-size:.86rem}
  .foot-right a:hover{color:var(--bone)}
  .foot-li{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-dk);border-radius:4px;transition:border-color .2s,background .2s}
  .foot-li:hover{border-color:var(--iris);background:rgba(93,63,211,.12)}
  .foot-li svg{width:18px;height:18px}
  .powered-by-oryx{display:block;margin-top:8px;opacity:.75;transition:opacity .2s}
  .powered-by-oryx:hover{opacity:1}
  .powered-by-oryx img{width:160px;height:auto;display:block;filter:invert(1)}
  .copyright{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-dk);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--mist);font-size:.76rem}

  /* ---------- claw slash (on Submit CV click) ---------- */
  .claw-fx{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden;opacity:0}
  .claw-fx.go{animation:clawShow .55s ease-out forwards}
  @keyframes clawShow{0%,100%{opacity:0}14%,64%{opacity:1}}
  .claw-move{position:absolute;top:50%;left:50%;width:min(80vw,1040px);transform:translate(-180%,-50%) rotate(-4deg)}
  .claw-fx.go .claw-move{animation:clawSweep .55s cubic-bezier(.22,.62,.1,1) forwards}
  @keyframes clawSweep{0%{transform:translate(-180%,-50%) rotate(-4deg)}100%{transform:translate(90%,-50%) rotate(-4deg)}}
  .claw-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 16px rgba(122,92,240,.75)) drop-shadow(0 0 4px rgba(214,205,255,.6))}
  .claw-svg path{fill:#6B4BE6}

  /* ---------- mailto fallback toast (shown only when no mail app opens, e.g. some Macs) ---------- */
  .mailto-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:300;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);background:var(--ink-2);color:var(--bone);border:1px solid rgba(183,164,242,.4);border-radius:14px;padding:12px 14px;font:500 .9rem/1.35 'Poppins',system-ui,sans-serif;box-shadow:0 16px 48px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
  .mailto-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .mailto-toast a{color:var(--lilac);text-decoration:underline}
  .mailto-toast button{flex:none;background:var(--iris);color:#fff;border:0;border-radius:9px;padding:7px 14px;font:600 .82rem 'Poppins',sans-serif;cursor:pointer;transition:background .2s}
  .mailto-toast button:hover{background:var(--iris-bright)}

  /* ---------- responsive ---------- */
  @media (max-width:920px){
    .hero-grid{grid-template-columns:1fr;gap:8px}
    .hero-art{order:-1;min-height:0;max-width:380px}
    .val-grid{grid-template-columns:repeat(2,1fr)}
    .svc-grid{grid-template-columns:repeat(2,1fr)}
    .team-grid{grid-template-columns:1fr;max-width:460px}
    .contact-grid{grid-template-columns:1fr}
    .quote{grid-template-columns:1fr}
    .quote .bigchev{width:54px}
  }
  /* the header is the busiest row on the site (brand + switch + links + toggles + CTA):
     give it a wider container than page copy, and collapse to the menu earlier so the
     bar always fits the screen with air to spare. */
  .wrap.nav{max-width:1360px}
  @media (max-width:1440px){
    .nav-links{gap:22px}
    .aud-toggle{margin-right:22px}
  }
  @media (max-width:1240px){
    .nav-links{position:fixed;inset:72px 0 auto 0;margin-right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ink-2);border-bottom:1px solid var(--line-dk);padding:8px var(--pad) 20px;transform:translateY(-130%);transition:transform .3s ease;z-index:55}
    .nav-links.open{transform:translateY(0)}
    .nav-links a{padding:14px 0;border-bottom:1px solid var(--line-dk);font-size:.95rem}
    .nav-links .btn{margin-top:14px;justify-content:center}
    .nav-links > .btn{display:inline-flex}
    .nav-toggle{display:grid;place-items:center}
    .nav .btn-iris.desktop-cta{display:none}
    .aud-opt{padding:10px 14px}   /* tablet is touch: keep the switch thumb-sized */
    html[data-aud="company"] .nav-links{background:rgba(255,255,255,.97);border-bottom-color:rgba(30,20,60,.12)}
  }
  @media (max-width:860px){
    .val-grid,.svc-grid,.partner-grid{grid-template-columns:1fr}
    .frow{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    /* keep the whole bar inside the wrap padding so the hamburger never
       sits on the screen edge: trim the switch's desktop right-margin and
       shrink the icon buttons. */
    .wrap.nav{gap:6px}
    .aud-toggle{margin-left:8px;margin-right:8px}
    .aud-opt{font-size:.6rem;padding:11px 8px;letter-spacing:0}
    /* thumb-sized text links: contact cards, footer, privacy, data sources */
    .member .contacts a{padding:7px 0}
    footer .foot a,.copyright a{display:inline-block;padding:6px 0}
    .epulse-sources a,.epulse-foot a{display:inline-block;padding:8px 0}
    .epulse-sources ul{grid-template-columns:1fr}
    .theme-toggle{margin-left:6px;width:36px;height:36px}
    .theme-toggle svg{width:17px;height:17px}
    .nav-toggle{width:38px;height:38px}
    .brand{font-size:0;gap:0}
    .brand .mark{width:30px;height:30px}
  }
  @media (max-width:400px){
    .aud-opt{font-size:.56rem;padding:11px 7px}
    .theme-toggle{margin-left:4px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .lion-shine{display:none}
  }


  /* ---------- jobs / featured roles ---------- */
  .jobs{padding:clamp(70px,9vw,120px) 0}
  .jobs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
  .job{display:flex;flex-direction:column;border:1px solid rgba(122,92,240,.22);border-radius:14px;padding:26px 24px 24px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));box-shadow:0 18px 50px -24px rgba(93,63,211,.55);transition:border-color .25s,transform .25s,box-shadow .25s;position:relative;overflow:hidden}
  .job:hover{border-color:var(--iris-bright);transform:translateY(-5px);box-shadow:0 26px 64px -20px rgba(122,92,240,.7)}
  .job .jtag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.6rem;font-weight:700;color:var(--lilac)}
  .job h3{font-family:var(--display);font-weight:800;font-size:1.18rem;line-height:1.18;margin:12px 0 12px;letter-spacing:.01em;max-width:88%}
  .job .jmeta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--mist-dk);font-size:.82rem;margin-bottom:4px}
  .job .jmeta span{display:inline-flex;align-items:center;gap:6px}
  .job .jmeta svg{width:13px;height:13px;color:var(--iris);flex:none}
  .job .jsalary{font-family:var(--display);font-weight:700;color:var(--bone);font-size:.98rem;margin:8px 0 12px}
  .job p{color:var(--mist-dk);font-size:.9rem;line-height:1.55;flex:1}
  .job .japply{margin-top:18px;align-self:flex-start}
  .job .jposted{position:absolute;top:22px;right:20px;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--iris-bright);background:rgba(93,63,211,.14);border:1px solid var(--line-dk);padding:3px 8px;border-radius:999px}
  .jobs-cta{margin-top:40px;display:flex;justify-content:center}
  .jobs-empty{color:var(--mist-dk);margin-top:30px}

  /* ---------- job filter bar ---------- */
  .job-filters{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 30px;margin-top:36px;padding:18px 20px;border:1px solid var(--line-dk);border-radius:14px;background:var(--ink-2)}
  .jf-group{display:flex;flex-direction:column;gap:9px}
  .jf-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.56rem;font-weight:700;color:var(--lilac)}
  .jf-chips{display:flex;flex-wrap:wrap;gap:7px}
  .jf-chip{font:600 .8rem/1 var(--display,'Poppins',sans-serif);cursor:pointer;padding:7px 13px;border-radius:999px;border:1px solid rgba(183,164,242,.25);background:rgba(122,92,240,.08);color:var(--mist-dk);transition:background .18s,border-color .18s,color .18s}
  .jf-chip:hover{border-color:var(--lilac);color:var(--bone)}
  .jf-chip.on{background:var(--iris);border-color:var(--iris);color:#fff}
  .jf-count{margin-left:auto;align-self:flex-end;color:var(--mist-dk);font-size:.8rem;padding-bottom:6px}
  .jf-reset{background:none;border:0;color:var(--lilac);font-weight:600;cursor:pointer;text-decoration:underline;font-size:inherit}
  @media (max-width:640px){ .job-filters{gap:14px} .jf-count{margin-left:0;align-self:flex-start} }

  /* clickable job cards */
  .job[role="button"]{cursor:pointer}
  .job .jmore{margin-top:16px;display:inline-flex;align-items:center;gap:7px;color:var(--lilac);font-weight:600;font-size:.85rem;transition:gap .18s,color .18s}
  .job .jmore svg{width:15px;height:15px}
  .job:hover .jmore{gap:11px;color:var(--bone)}
  .job:focus-visible{outline:2px solid var(--iris-bright);outline-offset:3px}

  /* ---------- job detail modal ---------- */
  body.jm-open{overflow:hidden}
  .job-modal{position:fixed;inset:0;z-index:220;display:none;align-items:flex-start;justify-content:center;padding:clamp(14px,5vh,56px) 15px;overflow-y:auto;background:rgba(7,4,18,.74);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
  .job-modal.on{display:flex}
  .jm-panel{position:relative;width:min(680px,100%);background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid rgba(122,92,240,.32);border-radius:18px;box-shadow:0 40px 110px -30px rgba(0,0,0,.85);padding:30px clamp(22px,4vw,40px) 28px;animation:jm-in .28s cubic-bezier(.3,.7,.2,1)}
  @keyframes jm-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
  .jm-x{position:absolute;top:15px;right:15px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-dk);background:rgba(122,92,240,.14);color:var(--bone);cursor:pointer;display:grid;place-items:center;transition:background .18s,border-color .18s,color .18s}
  .jm-x:hover{background:var(--iris);border-color:var(--iris);color:#fff}
  .jm-x svg{width:18px;height:18px}
  .jm-panel .jtag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.6rem;font-weight:700;color:var(--lilac)}
  .jm-panel h2{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.16;margin:10px 46px 12px 0;letter-spacing:.01em}
  .jm-panel .jmeta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--mist-dk);font-size:.85rem;margin-bottom:6px}
  .jm-panel .jmeta span{display:inline-flex;align-items:center;gap:6px}
  .jm-panel .jmeta svg{width:14px;height:14px;color:var(--iris);flex:none}
  .jm-posted{color:var(--iris-bright)}
  .jm-salary{font-family:var(--display);font-weight:700;color:var(--bone);font-size:1.05rem;margin:8px 0 2px}
  .jm-body{margin-top:18px;border-top:1px solid var(--line-dk);padding-top:18px}
  .jm-blurb{color:var(--mist-dk);font-size:.95rem;line-height:1.65;margin:0 0 6px}
  .jm-body h4{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--lilac);margin:20px 0 9px}
  .jm-body ul{margin:0;padding-left:20px}
  .jm-body li{color:var(--mist-dk);font-size:.9rem;line-height:1.5;margin-bottom:6px}
  .jm-foot{margin-top:24px;display:flex;gap:14px 18px;align-items:center;flex-wrap:wrap}
  .jm-foot .jm-note{color:var(--mist-dk);font-size:.78rem}

  /* jobs page hero */
  .page-hero{padding:clamp(70px,10vw,130px) 0 clamp(10px,3vw,30px);position:relative;overflow:hidden}
  .page-title{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.3;letter-spacing:-.01em;margin-top:14px}
  .page-hero .lead{max-width:56ch;margin-top:18px;color:var(--mist-dk);font-size:clamp(1.02rem,1.6vw,1.18rem)}
  .nav-links a.active{color:var(--bone)}

  /* --- discipline page components --- */
  .disc-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  .disc-intro-left p{font:400 1rem/1.75 'Poppins',sans-serif;color:var(--mist-dk);margin-bottom:18px}
  .disc-intro-right{}
  .disc-roles{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  .disc-roles li{display:flex;align-items:center;gap:10px;font:.92rem 'Poppins',sans-serif;color:var(--mist-dk)}
  .disc-roles li::before{content:'';display:block;width:20px;height:20px;border-radius:50%;flex:none;background:rgba(93,63,211,.2) url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10 L8 14 L16 6' stroke='%23B7A4F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover}
  .disc-cta-card{background:linear-gradient(135deg,var(--ink-2),var(--ink-3));border:1px solid var(--line-dk);border-radius:20px;padding:48px;text-align:center}
  .disc-cta-card h2{font:800 1.8rem 'Poppins',sans-serif;color:var(--bone);margin-bottom:14px}
  .disc-cta-card p{font:.95rem 'Poppins',sans-serif;color:var(--mist);max-width:52ch;margin:0 auto 28px}
  .disc-cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
  .calc-desc{color:var(--mist-dk);font:.94rem 'Poppins',sans-serif;max-width:62ch;margin-bottom:24px;line-height:1.65}
  @media(max-width:920px){.disc-intro{grid-template-columns:1fr}}

  /* --- hiring timeline gantt chart --- */
  .tl-chart{margin:22px 0 6px}
  .tl-axis{position:relative;height:16px;margin-left:160px;margin-bottom:12px;border-bottom:1px solid var(--line-dk)}
  .tl-axis span{position:absolute;top:0;transform:translateX(-50%);font:600 .66rem 'Poppins',sans-serif;color:var(--mist)}
  .tl-row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px;margin-bottom:9px}
  .tl-row-label{font:600 .76rem 'Poppins',sans-serif;color:var(--mist-dk);text-align:right;line-height:1.25}
  .tl-track{position:relative;height:26px;background:rgba(183,164,242,.07);border-radius:6px;overflow:hidden}
  .tl-bar{position:absolute;top:3px;height:20px;border-radius:5px;display:flex;align-items:center;padding:0 9px;
    font:700 .66rem 'Poppins',sans-serif;color:#fff;white-space:nowrap;box-shadow:0 2px 10px -3px rgba(93,63,211,.55);
    background:linear-gradient(90deg,var(--iris),var(--iris-bright));transition:left .55s ease,width .55s ease}
  .tl-bar.tl-buffer{background:linear-gradient(90deg,rgba(122,92,240,.45),rgba(183,164,242,.4));color:var(--bone)}
  @media(max-width:640px){
    .tl-axis{margin-left:0}
    .tl-row{grid-template-columns:1fr;gap:3px;margin-bottom:14px}
    .tl-row-label{text-align:left}
  }

  /* --- offer-competitiveness meter --- */
  .verdict{font:800 1.2rem 'Poppins',sans-serif;margin-bottom:6px}
  .verdict.below{color:#E58AA2}
  .verdict.mid{color:#E3C06A}
  .verdict.good{color:#6FD79B}
  .meter{position:relative;height:14px;border-radius:99px;margin:22px 0 0;
    background:linear-gradient(90deg,#B85C73 0%,#D8A53F 50%,#4FAE78 100%)}
  .meter-mark{position:absolute;top:-6px;width:5px;height:26px;border-radius:3px;background:#fff;
    box-shadow:0 0 0 2px var(--ink-2),0 2px 10px rgba(0,0,0,.55);transition:left .55s ease}
  .meter-scale{display:flex;justify-content:space-between;margin-top:8px;
    font:700 .72rem 'Poppins',sans-serif;color:var(--mist)}
  .meter-scale span:nth-child(2){color:var(--mist-dk)}

  /* --- calculation breakdown (cost of vacancy) --- */
  .calc-steps{margin-top:20px;border:1px solid var(--line-dk);border-radius:12px;overflow:hidden;background:rgba(183,164,242,.04)}
  .calc-steps-title{font:700 .72rem 'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--lilac);padding:12px 16px 0}
  .calc-step{display:flex;justify-content:space-between;gap:18px;padding:10px 16px;border-top:1px solid var(--line-dk);
    font:.84rem 'Poppins',sans-serif;color:var(--mist-dk);flex-wrap:wrap}
  .calc-step:first-of-type{border-top:0}
  .calc-step > span:first-child{color:var(--mist);font-weight:600;flex:none}
  .calc-step > span:last-child{text-align:right;flex:1;min-width:200px;font-variant-numeric:tabular-nums}
  .calc-step strong{color:var(--bone);font-weight:700}
  .calc-xlink{margin-top:16px}
  .btn-sm{font-size:.68rem;padding:9px 14px}

  /* --- role-brief wizard --- */
  .wizard{max-width:780px;margin:0 auto}
  .wizard-progress{margin-bottom:40px}
  .wizard-steps{display:flex;justify-content:space-between;position:relative;margin-bottom:8px}
  .wizard-steps::before{content:'';position:absolute;top:18px;left:18px;right:18px;height:2px;background:rgba(183,164,242,.18);z-index:0}
  .wiz-step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1;flex:1}
  .wiz-dot{width:36px;height:36px;border-radius:50%;border:2px solid rgba(183,164,242,.3);background:var(--ink-2);display:flex;align-items:center;justify-content:center;font:700 .78rem 'Poppins',sans-serif;color:var(--mist);transition:all .25s}
  .wiz-step.done .wiz-dot{background:var(--iris);border-color:var(--iris);color:#fff}
  .wiz-step.active .wiz-dot{background:var(--iris-bright);border-color:var(--iris-bright);color:#fff;box-shadow:0 0 0 4px rgba(122,92,240,.2)}
  .wiz-label{font:.72rem 'Poppins',sans-serif;font-weight:600;color:var(--mist);text-align:center;white-space:nowrap}
  .wiz-step.active .wiz-label,.wiz-step.done .wiz-label{color:var(--lilac)}
  .wiz-bar{height:3px;background:rgba(183,164,242,.12);border-radius:99px;overflow:hidden;margin-top:4px}
  .wiz-bar-fill{height:100%;background:linear-gradient(90deg,var(--iris),var(--iris-bright));border-radius:99px;transition:width .4s ease}
  .wizard-panel{display:none}
  .wizard-panel.active{display:block}
  .wizard-panel h2{font:800 1.6rem 'Poppins',sans-serif;color:var(--bone);margin-bottom:8px}
  .wizard-panel .step-desc{color:var(--mist-dk);font:.92rem 'Poppins',sans-serif;margin-bottom:28px;line-height:1.6}
  .wizard-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:32px;padding-top:24px;border-top:1px solid rgba(183,164,242,.1)}
  .wizard-nav .btn-ghost{margin-right:auto}
  .review-section{background:var(--ink-2);border:1px solid rgba(183,164,242,.12);border-radius:14px;padding:20px 24px;margin-bottom:16px}
  .review-section h4{font:700 .82rem 'Poppins',sans-serif;color:var(--lilac);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
  .review-row{display:flex;gap:8px;margin-bottom:8px;font:.87rem 'Poppins',sans-serif}
  .review-label{color:var(--mist);min-width:150px;flex:none}
  .review-val{color:var(--bone);flex:1;white-space:pre-wrap}
  .wiz-required{color:var(--iris-bright);margin-left:2px}
  @media(max-width:640px){.wiz-label{display:none}.wizard-steps::before{top:18px}}

  /* --- disciplines dropdown --- */
  .nav-dropdown{position:relative;display:inline-flex;align-items:center}
  .nav-drop-btn{background:transparent;border:0;color:var(--mist-dk);font:500 .82rem 'Poppins',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0;white-space:nowrap;transition:color .2s}
  .nav-drop-btn:hover,.nav-dropdown.open .nav-drop-btn{color:var(--bone)}
  .nav-drop-btn svg{width:10px;height:10px;transition:transform .2s;flex:none}
  .nav-dropdown.open .nav-drop-btn svg{transform:rotate(180deg)}
  .nav-drop-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--ink-2);border:1px solid var(--line-dk);border-radius:12px;padding:8px;min-width:220px;display:none;flex-direction:column;gap:2px;z-index:60;box-shadow:0 16px 40px rgba(0,0,0,.5)}
  .nav-dropdown.open .nav-drop-menu{display:flex}
  .nav-drop-menu a{color:#D7D1ED;font:500 .88rem 'Poppins',sans-serif;padding:10px 14px;border-radius:8px;transition:background .15s,color .15s}
  .nav-drop-menu a:hover{background:rgba(122,92,240,.28);color:#fff}
  .nav-drop-menu a.active{background:rgba(122,92,240,.24);color:#fff}

  @media(max-width:860px){
    .nav-dropdown{flex-direction:column;align-items:stretch;width:100%}
    .nav-drop-btn{padding:14px 0;border-bottom:1px solid var(--line-dk);font-size:.95rem;width:100%;justify-content:space-between}
    .nav-drop-menu{position:static;transform:none;border:0;border-radius:0;background:var(--ink-3);padding:0 0 0 16px;box-shadow:none;border-bottom:1px solid var(--line-dk)}
    .nav-drop-menu a{border-radius:0;border-bottom:1px solid var(--line-dk);font-size:.92rem}
  }
  @media (max-width:920px){.job-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:860px){.job-grid{grid-template-columns:1fr}}

  /* ============================================================
     NEW PAGES - tools, for-firms, insights, discipline pages
     ============================================================ */

  /* --- tool tabs --- */
  .tool-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}
  .tool-tab{background:transparent;border:1px solid var(--line-dk);color:var(--mist-dk);padding:10px 22px;border-radius:8px;font:600 .85rem 'Poppins',sans-serif;cursor:pointer;transition:all .2s}
  .tool-tab:hover{border-color:var(--iris);color:var(--bone)}
  .tool-tab.active{background:var(--iris);border-color:var(--iris);color:#fff}
  .tool-panel{display:none}.tool-panel.active{display:block}
  .tool-desc{color:var(--mist-dk);font-size:.95rem;max-width:60ch;margin-bottom:28px;line-height:1.65}

  /* --- calculator card --- */
  .calc{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:18px;padding:36px}
  .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .calc-field{display:flex;flex-direction:column;gap:8px}
  .calc-field label{font:600 .76rem 'Poppins',sans-serif;color:var(--mist-dk);letter-spacing:.07em;text-transform:uppercase}
  .calc-field select,.calc-field input[type=number]{background:var(--ink-3);border:1px solid var(--line-dk);color:var(--bone);padding:13px 16px;border-radius:9px;font:500 .92rem 'Poppins',sans-serif;-webkit-appearance:none;appearance:none;width:100%}
  .calc-field select:focus,.calc-field input:focus{outline:none;border-color:var(--iris-bright)}
  .calc-field.full{grid-column:1/-1}
  .calc-btn{margin-top:24px}
  .calc-result{background:linear-gradient(135deg,rgba(93,63,211,.2),rgba(93,63,211,.08));border:1px solid rgba(122,92,240,.38);border-radius:16px;padding:32px;margin-top:28px;display:none}
  .calc-result.show{display:block}
  .calc-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .calc-metric{text-align:center}
  .calc-metric-value{font:800 1.9rem 'Poppins',sans-serif;color:var(--lilac)}
  .calc-metric-label{font:.76rem 'Poppins',sans-serif;color:var(--mist);margin-top:5px;line-height:1.4}
  .calc-note{font:.78rem 'Poppins',sans-serif;color:var(--mist);margin-top:20px;padding-top:16px;border-top:1px solid var(--line-dk);line-height:1.6}

  /* --- for-firms form --- */
  .firm-form{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:18px;padding:40px}
  .firm-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .firm-field{display:flex;flex-direction:column;gap:8px}
  .firm-field.full{grid-column:1/-1}
  .firm-field label{font:600 .76rem 'Poppins',sans-serif;color:var(--mist-dk);letter-spacing:.07em;text-transform:uppercase}
  .firm-field input,.firm-field select,.firm-field textarea{background:var(--ink-3);border:1px solid var(--line-dk);color:var(--bone);padding:13px 16px;border-radius:9px;font:500 .92rem 'Poppins',sans-serif;width:100%}
  .firm-field input:focus,.firm-field select:focus,.firm-field textarea:focus{outline:none;border-color:var(--iris-bright)}
  .firm-field textarea{min-height:110px;resize:vertical}
  .firm-field input::placeholder,.firm-field textarea::placeholder{color:var(--mist)}
  .firm-divider{grid-column:1/-1;border:0;border-top:1px solid var(--line-dk);margin:8px 0}
  .firm-section-title{font:700 1rem 'Poppins',sans-serif;color:var(--lilac);margin:4px 0 -4px;grid-column:1/-1}
  /* disciplines-of-interest checkboxes: the whole row is the tap target */
  .company-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;margin-top:10px}
  .company-check{display:flex;align-items:center;gap:11px;padding:10px 4px;border-radius:8px;cursor:pointer;font:500 .9rem 'Poppins',sans-serif;color:var(--mist-dk)}
  .company-check:hover{background:rgba(93,63,211,.08);color:var(--bone)}
  .company-check input[type=checkbox]{width:18px;height:18px;cursor:pointer}
  @media(max-width:560px){.company-check-grid{grid-template-columns:1fr}}
  .firm-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;grid-column:1/-1;margin-top:4px}
  .firm-check{display:flex;align-items:center;gap:10px;font:.88rem 'Poppins',sans-serif;cursor:pointer;color:var(--mist-dk)}
  .firm-check input[type=checkbox]{accent-color:var(--iris);width:16px;height:16px;flex:none}
  .firm-field.error input,.firm-field.error select,.firm-field.error textarea{border-color:#e2536b;box-shadow:0 0 0 3px rgba(226,83,107,.18)}
  .firm-field.error label{color:#e2536b}
  .wiz-error{display:none;margin-top:18px;padding:.85rem 1.1rem;border-radius:9px;background:rgba(226,83,107,.1);border:1px solid rgba(226,83,107,.4);color:#f2a9b5;font:500 .88rem 'Poppins',sans-serif}
  .wiz-error.show{display:block}
  .value-props{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:60px}
  .value-prop{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:16px;padding:28px}
  .value-prop-icon{width:40px;height:40px;background:rgba(93,63,211,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--lilac)}
  .value-prop-icon svg{width:20px;height:20px}
  .value-prop h3{font:700 1rem 'Poppins',sans-serif;color:var(--bone);margin-bottom:10px}
  .value-prop p{font:.87rem 'Poppins',sans-serif;color:var(--mist);line-height:1.65}

  /* --- insights page --- */
  .report-box{background:var(--ink-2);border:1px solid rgba(122,92,240,.4);border-radius:20px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:80px}
  .report-box h2{font:800 2rem 'Poppins',sans-serif;color:var(--bone);margin:12px 0 14px}
  .report-box-meta{color:var(--mist);font:.9rem 'Poppins',sans-serif;line-height:1.65}
  .report-box-tags{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 0}
  .report-tag{font:600 .7rem 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--lilac);background:rgba(93,63,211,.18);border:1px solid rgba(93,63,211,.3);padding:4px 12px;border-radius:999px}
  .report-form{display:flex;flex-direction:column;gap:14px}
  .report-form input{background:var(--ink-3);border:1px solid var(--line-dk);color:var(--bone);padding:14px 18px;border-radius:10px;font:.92rem 'Poppins',sans-serif;width:100%}
  .report-form input::placeholder{color:var(--mist)}
  .report-form input:focus{outline:none;border-color:var(--iris-bright)}
  .report-form-note{font:.74rem 'Poppins',sans-serif;color:var(--mist)}
  .case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .case-card{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:16px;padding:32px;transition:border-color .3s,transform .3s;display:flex;flex-direction:column}
  .case-card:hover{border-color:rgba(122,92,240,.5);transform:translateY(-4px)}
  .case-card-tag{font:700 .68rem 'Poppins',sans-serif;color:var(--iris-bright);letter-spacing:.12em;text-transform:uppercase}
  .case-card-title{font:700 1.15rem 'Poppins',sans-serif;color:var(--bone);margin:10px 0 12px}
  .case-card-desc{font:.87rem 'Poppins',sans-serif;color:var(--mist);line-height:1.7;flex:1}
  .case-stat-row{display:flex;gap:28px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-dk)}
  .case-stat{display:flex;flex-direction:column;gap:3px}
  .case-stat-val{font:800 1.6rem 'Poppins',sans-serif;color:var(--lilac)}
  .case-stat-label{font:.72rem 'Poppins',sans-serif;color:var(--mist)}
  .insights-cta{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:16px;padding:40px;text-align:center;margin-top:60px}

  /* --- discipline pages --- */
  .disc-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-bottom:72px}
  .disc-intro p{font:400 1.02rem/1.75 'Poppins',sans-serif;color:var(--mist-dk)}
  .disc-intro ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  .disc-intro ul li{display:flex;align-items:center;gap:12px;font:.92rem 'Poppins',sans-serif;color:var(--mist-dk)}
  .disc-intro ul li::before{content:'';display:block;width:20px;height:20px;border-radius:50%;background:rgba(93,63,211,.2);flex:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10 L8 14 L16 6' stroke='%23B7A4F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:cover}
  .stat-strip{margin-bottom:72px}
  .stat-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .stat-card{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:14px;padding:24px 20px;text-align:center}
  .stat-card-val{font:800 2rem 'Poppins',sans-serif;color:var(--lilac)}
  .stat-card-label{font:.75rem 'Poppins',sans-serif;color:var(--mist);margin-top:6px;line-height:1.4}
  .bench-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:72px}
  .bench-card{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:14px;padding:24px}
  .bench-level{font:700 .78rem 'Poppins',sans-serif;color:var(--lilac);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
  .bench-range{font:800 1.3rem 'Poppins',sans-serif;color:var(--bone)}
  .bench-exp{font:.76rem 'Poppins',sans-serif;color:var(--mist);margin-top:5px}
  .bench-note{font:.74rem 'Poppins',sans-serif;color:var(--mist);margin-top:4px}

  /* --- responsive new pages --- */
  @media(max-width:920px){
    .calc-grid{grid-template-columns:1fr}
    .calc-result-grid{grid-template-columns:repeat(2,1fr)}
    .firm-grid{grid-template-columns:1fr}
    .firm-check-grid{grid-template-columns:repeat(2,1fr)}
    .value-props{grid-template-columns:1fr}
    .report-box{grid-template-columns:1fr;gap:32px}
    .case-grid{grid-template-columns:1fr}
    .disc-intro{grid-template-columns:1fr}
    .stat-strip .wrap{grid-template-columns:repeat(3,1fr)}
    .bench-grid{grid-template-columns:1fr}
  }
  @media(max-width:560px){
    .firm-form{padding:24px 18px}
    .firm-check-grid{grid-template-columns:1fr}
    .firm-check{min-width:0}
    .firm-check span{overflow-wrap:anywhere}
    .calc{padding:24px 12px}
  }

  /* ---- legal / privacy page ---- */
  .legal-body{color:var(--mist-dk);font-size:1rem;line-height:1.8}
  .legal-updated{color:var(--mist);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:26px}
  .legal-body h2{font-family:var(--display);font-weight:800;color:var(--bone);font-size:1.32rem;margin:36px 0 12px}
  .legal-body p{margin-bottom:14px;max-width:70ch}
  .legal-body ul{margin:0 0 18px 22px}
  .legal-body li{margin-bottom:9px;max-width:68ch}
  .legal-body a{color:var(--lilac);text-decoration:underline;text-underline-offset:2px}
  .legal-body a:hover{color:var(--bone)}
  .legal-body strong{color:var(--bone)}

  /* ---- FAQ accordion (answer-engine optimised) ---- */
  .faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .faq-item{border:1px solid var(--line-dk);border-radius:12px;background:rgba(183,164,242,.04);overflow:hidden}
  .faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font:700 1.02rem 'Poppins',sans-serif;color:var(--bone);display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:'+';color:var(--lilac);font-weight:700;font-size:1.4rem;line-height:1;flex:none}
  .faq-item[open] summary{color:var(--lilac)}
  .faq-item[open] summary::after{content:'\2212'}
  .faq-a{padding:0 22px 20px;color:var(--mist-dk);font-size:.95rem;line-height:1.7}
  .faq-a p{margin:0;max-width:72ch}
  .faq-a a{color:var(--lilac);text-decoration:underline;text-underline-offset:2px}
  .faq-a a:hover{color:var(--bone)}

  /* ---- "people also ask" auto-refreshed list ---- */
  .paq{max-width:820px;margin:0 auto;list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .paq li{border:1px solid var(--line-dk);border-radius:10px;background:rgba(183,164,242,.04);padding:12px 16px;color:var(--mist-dk);font:.9rem 'Poppins',sans-serif}
  @media(max-width:640px){.paq{grid-template-columns:1fr}}

  /* ---- ENGIntel market pulse (partner-branded window) ---- */
  .epulse-wrap{padding:clamp(28px,5vw,64px) 0}
  .epulse{max-width:100%;margin:0 auto;background:#081220;border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;font-family:'Poppins',sans-serif}
  .epulse-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 26px;border-bottom:1px solid rgba(255,255,255,.06)}
  .epulse-brand{display:flex;align-items:center;gap:13px}
  .epulse-brand img{height:38px;width:auto;display:block}
  .epulse-wm{display:flex;flex-direction:column;line-height:1.05}
  .epulse-wm b{font-size:22px;font-weight:700;letter-spacing:-.01em;color:#F4F6FA}
  .epulse-wm b span{color:#18C2FF}
  .epulse-wm small{font-size:9px;font-weight:500;letter-spacing:.17em;color:#5C7385;margin-top:3px}
  .epulse-tag{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#18C2FF;white-space:nowrap}
  .epulse-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:22px 26px 8px}
  .epulse-chip{display:flex;flex-direction:column;background:#0B1726;border:.8px solid rgba(255,255,255,.07);border-radius:13px;padding:15px 16px}
  .epulse-chip .l{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#18C2FF;margin-bottom:7px}
  .epulse-chip .v{font-size:25px;font-weight:700;white-space:nowrap}
  .epulse-sum{padding:16px 26px 6px;margin:0;font-size:15.5px;line-height:1.6;color:#AEBCC8;max-width:92ch}
  .epulse-feed{padding:10px 26px 6px;display:grid;grid-template-columns:1fr 1fr;gap:11px 30px}
  .epulse-feed .row{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:#8593A1}
  .epulse-feed .row i{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px}
  .epulse-feed .row b{color:#EAF0F6;font-weight:500}
  .epulse-sources{margin:8px 26px 2px;border-top:1px solid rgba(255,255,255,.06)}
  .epulse-sources summary{cursor:pointer;list-style:none;padding:12px 0;font-size:11.5px;font-weight:500;letter-spacing:.03em;color:#18C2FF;display:inline-flex;align-items:center;gap:7px}
  .epulse-sources summary::-webkit-details-marker{display:none}
  .epulse-sources summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
  .epulse-sources[open] summary::after{transform:rotate(-135deg);margin-top:2px}
  .epulse-sources ul{margin:0 0 14px;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px 30px}
  .epulse-sources li{font-size:12px;color:#8593A1;line-height:1.45}
  .epulse-sources a{color:#9DABB8;text-decoration:underline;text-underline-offset:2px}
  .epulse-sources a:hover{color:#18C2FF}
  .epulse-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 26px;background:#060D17;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:#5C7385}
  .epulse-link{font-weight:700;color:#18C2FF;text-decoration:none}
  .epulse-link:hover{text-decoration:underline}
  @media(max-width:680px){
    .epulse-metrics{grid-template-columns:repeat(2,1fr)}
    .epulse-feed{grid-template-columns:1fr;gap:10px}
    .epulse-sources ul{grid-template-columns:1fr}
  }

/* ===== Team chart builder (Tools) ===== */
.tc-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.tc-tgroup{display:flex;gap:6px;align-items:center}
.tc-tgroup.tc-grow{margin-right:auto}
.tc-ico{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--line-dk);background:var(--ink-2);color:var(--bone);cursor:pointer;font-size:17px;line-height:1}
.tc-ico:hover{border-color:var(--iris-bright)}
.tc-ico:disabled{opacity:.35;cursor:default}
.tc-stage{position:relative}
body.tc-fs-lock{overflow:hidden}
.tc-fs-btn{position:absolute;top:10px;right:10px;z-index:7;display:inline-flex;align-items:center;gap:6px;background:rgba(122,92,240,.92);border:1px solid var(--lilac);color:var(--bone);border-radius:9px;padding:8px 10px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.tc-fs-btn:hover{background:#6E50E6}
.tc-fs-btn i{font-size:17px}
.tc-fs-lbl{display:none;font:700 12.5px var(--display)}
#tc-editor.tc-fs{position:fixed;inset:0;z-index:1200;background:var(--ink-2);display:flex;flex-direction:column;padding:12px 14px 14px;gap:9px}
#tc-editor.tc-fs .tc-toolbar{margin-bottom:0}
#tc-editor.tc-fs .tc-stage{flex:1;min-height:0}
#tc-editor.tc-fs #tc-canvas{height:100%}
#tc-editor.tc-fs .tc-legend{margin:4px 2px 0}
#tc-editor.tc-fs .tc-fs-btn{top:12px;right:14px;padding:9px 14px}
#tc-editor.tc-fs .tc-fs-lbl{display:inline}
@media(max-width:560px){#tc-editor.tc-fs{padding:8px 9px 10px;gap:8px}}
#tc-canvas{position:relative;height:520px;overflow:hidden;border-radius:12px;border:1px solid var(--line-dk);background-color:#120D26}
#tc-layer{position:absolute;top:0;left:0;width:4000px;height:3000px;transform-origin:0 0;background-image:linear-gradient(rgba(183,164,242,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(183,164,242,.10) 1px,transparent 1px),linear-gradient(rgba(183,164,242,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(183,164,242,.20) 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px}
#tc-svg{position:absolute;top:0;left:0;width:4000px;height:3000px;overflow:visible;pointer-events:none}
.tc-box{position:absolute;display:flex;align-items:center;gap:9px;background:var(--ink-3);border:1px solid var(--line-dk);border-radius:9px;padding:8px 12px;box-sizing:border-box;cursor:grab;box-shadow:0 4px 14px rgba(0,0,0,.3);user-select:none}
.tc-box.root{border-color:var(--iris-bright);background:rgba(93,63,211,.34)}
.tc-box.sel{box-shadow:0 0 0 2px rgba(24,194,255,.55),0 6px 18px rgba(0,0,0,.4)}
.tc-box.drag{cursor:grabbing;opacity:.92}
.tc-av{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:none;align-items:center;justify-content:center;font:700 11px var(--display);color:#0E0A1F;background:var(--lilac)}
.tc-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center}
.tc-role{font:600 13px var(--display);color:var(--bone);outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-role:focus,.tc-name:focus{white-space:normal;overflow:visible}
.tc-name{font:500 11px var(--display);color:var(--mist-dk);outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-name:empty:before{content:'+ name';opacity:.5}
.tc-badge{position:absolute;top:-7px;left:-7px;width:14px;height:14px;border-radius:50%;border:2px solid #120D26;display:none}
.tc-box.has-status .tc-badge{display:block}
.tc-box.st-open{animation:tcpulse 1.7s infinite}
@keyframes tcpulse{0%,100%{box-shadow:0 0 0 0 rgba(232,163,23,.45)}50%{box-shadow:0 0 0 7px rgba(232,163,23,0)}}
.tc-rz{position:absolute;right:-4px;bottom:-4px;width:13px;height:13px;border-radius:3px;background:#18C2FF;border:2px solid #120D26;cursor:nwse-resize;display:none}
.tc-box.sel .tc-rz{display:block}
.tc-port{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:var(--iris-bright);border:2px solid #120D26;cursor:crosshair;display:none}
.tc-box.sel .tc-port,.tc-box:hover .tc-port{display:block}
#tc-marquee{position:absolute;border:1px solid var(--iris-bright);background:rgba(122,92,240,.14);display:none;pointer-events:none;z-index:5;border-radius:3px}
#tc-marquee.team{border:2px dashed var(--lilac);background:rgba(122,92,240,.16);border-radius:10px}
#tc-canvas.teamdraw{cursor:crosshair;touch-action:none}
#tc-canvas.teamdraw .tc-box,#tc-canvas.teamdraw .tc-group,#tc-canvas.teamdraw .tc-h,#tc-canvas.teamdraw .tc-add-rel,#tc-canvas.teamdraw .tc-ge,#tc-canvas.teamdraw .tc-group-head,#tc-canvas.teamdraw .tc-port{pointer-events:none!important}
#tc-canvas.teamdraw::before{content:'Drag a box around the roles to group them into a team';position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:8;background:rgba(122,92,240,.96);color:var(--bone);font:700 12px var(--display);padding:8px 14px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.45);pointer-events:none;white-space:nowrap;max-width:92%;text-align:center}
.tc-menu{position:absolute;display:none;z-index:60;background:#241B40;border:1px solid var(--line-dk);border-radius:9px;padding:6px;min-width:172px;box-shadow:0 12px 32px rgba(0,0,0,.55)}
.tc-menu .row{display:flex;gap:6px;padding:4px 6px 8px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:4px;flex-wrap:wrap}
.tc-sw,.tc-st{width:19px;height:19px;border-radius:50%;cursor:pointer;padding:0}
.tc-sw{border:1px solid rgba(255,255,255,.25)}
.tc-st{border:0}
.tc-sw:hover,.tc-st:hover{transform:scale(1.14)}
.tc-menu button.item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;color:#F4F2FB;font:600 12.5px var(--display);padding:8px 10px;border-radius:5px;cursor:pointer}
.tc-menu button.item:hover{background:rgba(183,164,242,.15)}
.tc-menu button.danger{color:#ff8f8f}
.tc-menu button.danger:hover{background:rgba(229,72,77,.16)}
.tc-menu .ti{font-size:15px;width:16px;text-align:center}
.tc-legend{display:flex;flex-wrap:wrap;gap:14px;margin:12px 2px 0}
.tc-legend span{display:inline-flex;align-items:center;gap:7px;font:600 11.5px var(--display);color:var(--mist-dk)}
.tc-legend i{width:11px;height:11px;border-radius:50%}
/* Hiring timeline - video-editor style (separate section under the planner) */
.tc-hire{margin-top:26px;border:1px solid var(--line-dk);border-radius:16px;padding:18px 18px 15px;background:var(--ink-2)}
.tc-hire-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.tc-hire-title{font:700 15px var(--display);color:var(--bone);display:inline-flex;align-items:center;gap:8px}
.tc-hire-title i{color:var(--lilac);font-size:19px}
.tc-hire-sub{font:500 12px var(--display);color:var(--mist-dk)}
.tc-hire-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.tc-tl-zoom{display:inline-flex;align-items:center;gap:4px;background:var(--ink);border:1px solid var(--line-dk);border-radius:9px;padding:3px 5px}
.tc-tl-zb{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--lilac);cursor:pointer;border-radius:6px;font-size:15px;padding:0}
.tc-tl-zb:hover{background:rgba(122,92,240,.18)}
.tc-tl-zlabel{font:700 11px var(--display);color:var(--mist-dk);min-width:58px;text-align:center;letter-spacing:.02em}
.tc-hire-summary{font:500 13px var(--display);color:var(--lilac);margin:8px 0 14px;line-height:1.5}
.tc-hire-summary:empty{display:none}
.tc-hire-summary strong{color:var(--bone);font-weight:700}
.tc-hire-cost{display:inline-block;margin-top:4px;color:var(--mist-dk)}
.tc-hire-cost strong{color:var(--iris-bright)}
.tc-tl-lrow b .tc-tl-cost,.tc-tl-tname b .tc-tl-cost{color:var(--iris-bright);font-weight:700}
.tc-tl-tname b .tc-tl-cost{font-size:10.5px}
.tc-hire-empty{font:500 13px var(--display);color:var(--mist-dk);padding:30px 22px;text-align:center;line-height:1.6}
.tc-hire-empty b{color:var(--bone)}
.tc-tl{display:flex;border:1px solid var(--line-dk);border-radius:12px;overflow:hidden;background:var(--ink);--rh:30px;--th:46px;--ch:32px;--hw:10px}
.tc-tl-labels{width:174px;flex:0 0 174px;border-right:1px solid var(--line-dk);background:var(--ink-2);position:relative;z-index:3}
.tc-tl-lhead{height:var(--rh);border-bottom:1px solid var(--line-dk)}
.tc-tl-lrow{height:var(--th);display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid rgba(183,164,242,.06);box-sizing:border-box}
.tc-tl-lrow i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.tc-tl-lrow span{flex:1;font:600 12px var(--display);color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-tl-lrow b{font:700 11px var(--display);color:var(--mist-dk)}
.tc-tl-scroll{flex:1;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.tc-tl-scroll::-webkit-scrollbar{height:10px}
.tc-tl-scroll::-webkit-scrollbar-track{background:transparent}
.tc-tl-scroll::-webkit-scrollbar-thumb{background:rgba(183,164,242,.22);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
.tc-tl-inner{position:relative;min-width:100%}
.tc-tl-ruler{position:absolute;top:0;left:0;right:0;height:var(--rh);border-bottom:1px solid var(--line-dk)}
.tc-tl-tick{position:absolute;top:calc((var(--rh) - 12px)/2);font:700 10px var(--display);color:var(--mist);white-space:nowrap;padding-left:5px}
.tc-tl-tracks{position:absolute;left:0;width:100%}
.tc-tl-gl{position:absolute;top:0;height:100%;width:1px;background:rgba(183,164,242,.05)}
.tc-tl-gl.major{background:rgba(183,164,242,.12)}
.tc-tl-track{position:absolute;left:0;right:0;height:var(--th);border-bottom:1px solid rgba(183,164,242,.045)}
.tc-tl-clip{position:absolute;top:calc((var(--th) - var(--ch))/2);height:var(--ch);display:flex;align-items:stretch;border-radius:7px;overflow:hidden;cursor:grab;box-shadow:0 2px 9px rgba(0,0,0,.4);min-width:22px;user-select:none;touch-action:none}
.tc-tl-clip:hover{box-shadow:0 0 0 1.5px rgba(244,242,251,.45),0 2px 9px rgba(0,0,0,.4)}
.tc-tl-clip:active{cursor:grabbing}
.tc-tl-seg{height:100%;border-right:1px solid rgba(14,10,31,.22)}
.tc-tl-seg:last-child{border-right:none}
.tc-tl-clip-name{position:absolute;left:calc(var(--hw) + 2px);top:50%;transform:translateY(-50%);font:800 11px var(--display);color:#11091f;white-space:nowrap;pointer-events:none;text-shadow:0 1px 1px rgba(255,255,255,.22);max-width:calc(100% - var(--hw)*2 - 4px);overflow:hidden;text-overflow:ellipsis}
.tc-tl-tname{display:none}
.tc-tl-h{position:absolute;top:0;height:100%;width:var(--hw);cursor:ew-resize;z-index:4;display:flex;align-items:center;justify-content:center;touch-action:none}
.tc-tl-h::after{content:'';width:2px;height:44%;border-radius:1px;background:transparent}
.tc-tl-hl{left:0}.tc-tl-hr{right:0}
.tc-tl-h:hover{background:rgba(255,255,255,.28)}
.tc-tl-h:hover::after{background:rgba(17,9,31,.55)}
.tc-tl-playhead{position:absolute;top:0;width:2px;background:#FF4D6D;z-index:5;pointer-events:none}
.tc-tl-playhead::before{content:'TODAY';position:absolute;top:0;left:0;font:800 8px var(--display);color:#fff;background:#FF4D6D;padding:2px 4px;border-radius:0 0 3px 0;letter-spacing:.06em}
.tc-hire-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.tc-hire-hint{font:500 11.5px var(--display);color:var(--mist-dk);display:inline-flex;align-items:center;gap:6px}
.tc-hire-hint i{font-size:14px;color:var(--lilac)}
.tc-tl-dl{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tc-dl-lbl{font:700 10.5px var(--display);color:var(--mist-dk);text-transform:uppercase;letter-spacing:.05em;align-self:center}
.tc-hire-foot .tc-export-menu{top:auto;bottom:calc(100% + 6px);right:0}
.tc-hire-foot #tc-register{margin-left:2px}
@media(max-width:580px){
  .tc-hire{padding:15px 13px 14px;border-radius:14px}
  .tc-hire-sub{display:none}
  .tc-hire-actions{width:100%;justify-content:space-between;gap:6px}
  .tc-tl-zoom{padding:4px 6px;gap:6px}
  .tc-tl-zb{width:34px;height:34px;font-size:18px;border-radius:7px}
  .tc-tl-zlabel{min-width:50px;font-size:11.5px}
  .tc-tl-labels{display:none}
  .tc-tl-tname{display:flex;position:sticky;left:6px;align-items:center;gap:6px;width:max-content;max-width:78vw;margin:5px 0 0;padding:3px 10px 3px 8px;background:rgba(20,16,40,.9);border:1px solid var(--line-dk);border-radius:7px;font:700 12px var(--display);color:var(--bone);z-index:6;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tc-tl-tname i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
  .tc-tl-tname b{color:var(--mist-dk);font-size:10.5px;flex:0 0 auto}
  .tc-tl-clip{top:auto;bottom:8px}
  .tc-tl-clip-name{display:none}
  .tc-tl-h{background:rgba(17,9,31,.15)}
  .tc-tl-h::after{background:rgba(17,9,31,.5)}
  .tc-tl-hl{border-right:1px solid rgba(17,9,31,.16)}
  .tc-tl-hr{border-left:1px solid rgba(17,9,31,.16)}
  .tc-tl-clip-name{font-size:11px}
  .tc-tl-scroll::-webkit-scrollbar{height:7px}
  .tc-hire-foot{flex-direction:column;align-items:stretch;gap:10px}
  .tc-hire-hint{order:2;justify-content:center;text-align:center;font-size:11px}
  .tc-tl-dl{margin-left:0;width:100%;gap:7px}
  .tc-dl-lbl{flex-basis:100%;text-align:center;margin-bottom:1px}
  .tc-tl-dl .btn-sm:not(#tc-register){flex:1 1 0;justify-content:center;padding-left:6px;padding-right:6px}
  .tc-tl-dl .tc-export-wrap{flex:1 1 0}
  .tc-tl-dl .tc-export-wrap .btn{width:100%;justify-content:center}
  .tc-tl-dl #tc-register{flex:1 1 100%;justify-content:center;padding:12px;font-size:14px}
}
.tc-export-wrap{position:relative}
.tc-export-menu{position:absolute;right:0;top:calc(100% + 6px);background:#241B40;border:1px solid var(--line-dk);border-radius:9px;padding:6px;min-width:188px;box-shadow:0 12px 32px rgba(0,0,0,.55);display:none;z-index:40}
.tc-export-menu.open{display:block}
.tc-export-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;color:var(--bone);font:600 12.5px var(--display);padding:9px 10px;border-radius:5px;cursor:pointer}
.tc-export-menu button:hover{background:rgba(183,164,242,.15)}
.tc-export-menu .ti{font-size:16px;width:18px;text-align:center}
#tc-canvas.cap .tc-rz,#tc-canvas.cap .tc-port,#tc-canvas.cap .tc-badge{display:none}
#tc-canvas.cap .tc-box.sel{box-shadow:0 4px 14px rgba(0,0,0,.3)}
@media(max-width:560px){#tc-canvas{height:440px}.tc-tgroup.tc-grow{margin-right:0}}
/* ===== Workforce planner: touch, menu labels, light mode ===== */
.tc-box,.tc-rz,.tc-port{touch-action:none}
/* The context menu panel is hardcoded dark (#241B40) in BOTH themes, so its text
   must be hardcoded light too. Using var(--bone)/var(--mist-dk) made it near-black
   on dark in light mode. Do not swap these back to theme variables. */
.tc-mlabel{font:700 9.5px var(--display);letter-spacing:.09em;text-transform:uppercase;color:#B7A4F2;padding:5px 8px 3px}
.tc-mdiv{height:1px;background:rgba(255,255,255,.14);margin:5px 4px}
.tc-menu,.tc-menu button.item,.tc-menu .item,html[data-theme="light"] .tc-menu button.item{color:#F4F2FB}
.tc-menu button.danger,html[data-theme="light"] .tc-menu button.danger{color:#ff8f8f}
html[data-theme="light"] .tc-mlabel{color:#B7A4F2}
html[data-theme="light"] .tc-menu{background:#241B40;border-color:rgba(255,255,255,.16)}
html[data-theme="light"] .tc-mdiv{background:rgba(255,255,255,.14)}
html[data-theme="light"] .tc-menu button.item:hover{background:rgba(183,164,242,.22)}
html[data-theme="light"] .tc-menu button.danger{color:#ff8f8f}
.tc-dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto;box-sizing:border-box}
#tc-canvas.tc-light{background-color:#F4F2FB}
#tc-canvas.tc-light #tc-layer{background-image:linear-gradient(rgba(36,31,59,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(36,31,59,.07) 1px,transparent 1px),linear-gradient(rgba(36,31,59,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(36,31,59,.16) 1px,transparent 1px)}
#tc-canvas.tc-light .tc-box{background:#FFFFFF;border-color:rgba(36,31,59,.18);box-shadow:0 2px 10px rgba(36,31,59,.12)}
#tc-canvas.tc-light .tc-box.root{background:rgba(93,63,211,.12);border-color:var(--iris)}
#tc-canvas.tc-light .tc-role{color:#0E0A1F}
#tc-canvas.tc-light .tc-name{color:#6E6788}
#tc-canvas.tc-light .tc-badge,#tc-canvas.tc-light .tc-rz,#tc-canvas.tc-light .tc-port{border-color:#F4F2FB}
@media(max-width:560px){.tc-toolbar{gap:5px;justify-content:flex-start;margin-bottom:12px}.tc-menu{min-width:150px}.tc-export-menu{min-width:170px}
  .tc-toolbar .tc-tgroup{display:contents}
  .tc-toolbar .tc-blabel{display:none}
  .tc-toolbar .btn-sm{padding:0;width:32px;height:32px;justify-content:center;gap:0;font-size:0}
  .tc-toolbar .btn-sm .tc-bicon,.tc-toolbar .btn-sm i{font-size:15px}
  .tc-toolbar #tc-export{width:auto;padding:0 8px;gap:3px;font-size:0}
  .tc-toolbar #tc-export i{font-size:15px}
  .tc-toolbar #tc-register{width:auto;padding:0 9px;font-size:10.5px;font-weight:700}
  .tc-toolbar .tc-ico{width:32px;height:32px}
}
/* Status shown as a labelled pill on the box (overrides the dot) */
.tc-badge{top:-9px;left:10px;width:auto;height:auto;border-radius:5px;padding:1px 7px;font:700 9px var(--display);line-height:1.6;letter-spacing:.04em;text-transform:uppercase;color:#0E0A1F;white-space:nowrap}
/* All boxes look the same (white in light / dark card in dark) - no special root tint */
.tc-box.root{background:var(--ink-3);border-color:var(--line-dk)}
#tc-canvas.tc-light .tc-box.root{background:#FFFFFF;border-color:rgba(36,31,59,.18)}
/* Anchor box content to the top-left so it stays put when the box is resized */
.tc-box{align-items:flex-start}
.tc-tx{justify-content:flex-start}
/* ===== Workforce planner: 8 resize anchors, centred text, company form ===== */
.tc-h{position:absolute;width:10px;height:10px;background:#18C2FF;border:2px solid #120D26;border-radius:2px;display:none;z-index:4}
.tc-box.sel .tc-h{display:block}
.tc-h-nw{top:-5px;left:-5px;cursor:nwse-resize}
.tc-h-n{top:-5px;left:50%;transform:translateX(-50%);cursor:ns-resize}
.tc-h-ne{top:-5px;right:-5px;cursor:nesw-resize}
.tc-h-e{top:50%;right:-5px;transform:translateY(-50%);cursor:ew-resize}
.tc-h-se{bottom:-5px;right:-5px;cursor:nwse-resize}
.tc-h-s{bottom:-5px;left:50%;transform:translateX(-50%);cursor:ns-resize}
.tc-h-sw{bottom:-5px;left:-5px;cursor:nesw-resize}
.tc-h-w{top:50%;left:-5px;transform:translateY(-50%);cursor:ew-resize}
#tc-canvas.tc-light .tc-h{border-color:#F4F2FB}
#tc-canvas.cap .tc-h{display:none}
#tc-canvas.cap .tc-box.has-status .tc-badge{display:block}
.tc-box.sel .tc-port{display:none}
.tc-box:hover:not(.sel) .tc-port{display:block}
.tc-role,.tc-name{text-align:center}
.tc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 16px}
.tc-meta label{display:flex;flex-direction:column;gap:5px;font:600 10px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--mist-dk)}
.tc-meta input{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:6px;color:var(--bone);font:500 13px var(--display);padding:9px 11px;text-transform:none;letter-spacing:0}
.tc-meta input:focus{outline:none;border-color:var(--iris-bright)}
.tc-meta input::placeholder{color:var(--mist)}
/* ===== Workforce planner: teams, word-wrap, line select, team form ===== */
#tc-svg{z-index:2}
.tc-box{z-index:3}
.tc-role,.tc-name{white-space:normal;overflow-wrap:normal;word-break:normal;text-overflow:clip}
.tc-tx{overflow:hidden}
.tc-box.measuring{white-space:nowrap}
.tc-box.measuring .tc-role,.tc-box.measuring .tc-name{white-space:nowrap}
.tc-box.measuring .tc-tx{overflow:visible}
.tc-hit{cursor:pointer}
.tc-group{position:absolute;border:2px solid;border-radius:12px;box-sizing:border-box;z-index:1;cursor:grab}
.tc-group.sel{box-shadow:0 0 0 2px rgba(24,194,255,.55)}
.tc-group-head{position:absolute;top:0;left:0;display:inline-flex;align-items:center;height:24px;max-width:calc(100% - 4px);padding:0 11px;border-radius:10px 0 10px 0;font:700 11px var(--display);letter-spacing:.04em;color:#0E0A1F;white-space:nowrap}
.tc-group-name{outline:none;overflow:hidden;text-overflow:ellipsis}
#tc-canvas.cap .tc-group{cursor:default}
.tc-teamform{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:80;background:#241B40;border:1px solid var(--line-dk);border-radius:12px;padding:16px;width:300px;max-width:92%;box-shadow:0 18px 48px rgba(0,0,0,.6)}
.tc-tf-title{font:700 13px var(--display);color:var(--bone);margin-bottom:10px}
.tc-tf-name{width:100%;box-sizing:border-box;background:var(--ink-2);border:1px solid var(--line-dk);border-radius:7px;color:var(--bone);font:500 16px var(--display);padding:10px 12px;margin-bottom:12px}
.tc-tf-name:focus{outline:none;border-color:var(--iris-bright)}
.tc-tf-sw{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tc-tf-sw .tc-sw{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.tc-tf-sw .tc-sw.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.tc-tf-row{display:flex;justify-content:flex-end;gap:8px}
.tc-tf-row button{border:0;border-radius:6px;cursor:pointer;font:700 12px var(--display);padding:9px 14px}
.tc-tf-cancel{background:var(--ink-2)!important;color:var(--bone)!important;border:1px solid var(--line-dk)!important}
.tc-tf-create{background:var(--iris);color:#fff}
/* Team-frame resize handles + line endpoint handles */
.tc-group.sel .tc-h{display:block}
.tc-end{position:absolute;width:14px;height:14px;border-radius:50%;background:#18C2FF;border:2px solid #120D26;transform:translate(-50%,-50%);cursor:grab;z-index:6;display:none;touch-action:none}
#tc-canvas.tc-light .tc-end{border-color:#F4F2FB}
#tc-canvas.cap .tc-end{display:none}
/* Team frame: only border + header interactive (interior clicks pass through to lines) */
.tc-group{pointer-events:none}
.tc-group-head,.tc-h,.tc-ge,.tc-end{pointer-events:auto}
.tc-ge{position:absolute;cursor:grab}
.tc-ge-t{top:-7px;left:0;right:0;height:14px}
.tc-ge-b{bottom:-7px;left:0;right:0;height:14px}
.tc-ge-l{left:-7px;top:0;bottom:0;width:14px}
.tc-ge-r{right:-7px;top:0;bottom:0;width:14px}
/* Selected-line endpoints: larger, ringed, obviously grabbable */
.tc-end{width:16px;height:16px;border:2px solid #fff;box-shadow:0 0 7px rgba(24,194,255,.85)}
@media(max-width:560px){.tc-end{width:24px;height:24px}}
/* Add-line (connect) mode */
#tc-canvas.linkmode{cursor:crosshair}
#tc-canvas.linkmode .tc-box{cursor:crosshair}
#tc-canvas.linkmode .tc-box .tc-h{display:block;background:#18C2FF;box-shadow:0 0 6px rgba(24,194,255,.7);cursor:crosshair}
#tc-canvas.linkmode .tc-box:hover{box-shadow:0 0 0 2px #18C2FF,0 0 16px rgba(24,194,255,.6)}
#tc-canvas.linkmode .tc-add-rel{display:none!important}
.tc-box.linksrc{box-shadow:0 0 0 2px #18C2FF,0 0 14px rgba(24,194,255,.6)}
#tc-line.on{background:var(--iris);color:#fff;border-color:var(--iris)}
/* Make connector hit-areas clickable (SVG container is pointer-events:none) */
.tc-hit{pointer-events:stroke;cursor:pointer}
/* Team-size dropdown matches the other meta fields */
.tc-meta select{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:6px;color:var(--bone);font:500 13px var(--display);padding:9px 11px;text-transform:none;letter-spacing:0;cursor:pointer}
.tc-meta select:focus{outline:none;border-color:var(--iris-bright)}
.tc-bicon{flex:0 0 auto}
/* How-to-use guide */
.tc-guide{margin:0 0 16px;border:1px solid var(--line-dk);border-radius:10px;background:var(--ink-2);overflow:hidden}
.tc-guide>summary{cursor:pointer;list-style:none;padding:13px 16px;font:700 13px var(--display);color:var(--bone);display:flex;align-items:center;gap:9px}
.tc-guide>summary::-webkit-details-marker{display:none}
.tc-guide>summary:after{content:'\25be';margin-left:auto;color:var(--mist-dk);transition:transform .2s}
.tc-guide[open]>summary:after{transform:rotate(180deg)}
.tc-guide-body{padding:2px 18px 16px;border-top:1px solid var(--line-dk)}
.tc-gp h4{font:700 13px var(--display);color:var(--lilac);margin:14px 0 8px}
.tc-gp ul{margin:0;padding-left:18px;color:var(--mist-dk);font:400 13px/1.65 var(--display)}
.tc-gp li{margin-bottom:5px}
.tc-gp b{color:var(--bone);font-weight:600}
.tc-guide-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-dk)}
.tc-guide-nav button{background:var(--ink-3);border:1px solid var(--line-dk);color:var(--bone);border-radius:6px;font:700 12px var(--display);padding:8px 14px;cursor:pointer}
.tc-guide-nav button:disabled{opacity:.4;cursor:default}
.tc-guide-nav span{font:600 12px var(--display);color:var(--mist-dk)}
/* Line-endpoint snap targets: show all boxes as targets, highlight the one under the cursor */
#tc-canvas.linking .tc-box::after{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:var(--iris-bright);box-shadow:0 0 5px rgba(122,92,240,.85);pointer-events:none}
.tc-box.snaptarget{box-shadow:0 0 0 3px #18C2FF,0 0 16px rgba(24,194,255,.75)!important}
.tc-group.snaptarget{box-shadow:0 0 0 3px #18C2FF!important}
/* Line bend node (on the turn) - square to distinguish from round endpoint nodes */
.tc-bend{border-radius:3px;background:#fff;border:2px solid #18C2FF;box-shadow:0 0 6px rgba(24,194,255,.7);cursor:ns-resize}
/* Click-to-grow "+" buttons (appear on hover) */
.tc-add-rel{position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink-2);background:var(--iris);color:#fff;font:600 14px/1 var(--display);cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.35)}
#tc-canvas.tc-light .tc-add-rel{border-color:#F4F2FB}
.tc-box:hover:not(.sel):not(.edit) .tc-add-rel{display:flex}
.tc-ar-s{bottom:-11px;left:50%;transform:translateX(-50%)}
.tc-ar-e{right:-11px;top:50%;transform:translateY(-50%)}
.tc-add-rel:hover{background:var(--iris-bright)}
/* the old hover connect dot is replaced by "+" (new) and Add line (existing) */
.tc-port{display:none!important}
/* Floating mini-toolbar over the selected box */
.tc-mini{position:absolute;align-items:center;gap:2px;background:#241B40;border:1px solid var(--line-dk);border-radius:9px;padding:4px 5px;box-shadow:0 8px 24px rgba(0,0,0,.55);z-index:9;transform-origin:bottom center;white-space:nowrap}
.tc-mi{width:24px;height:24px;border:0;background:none;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--bone);font-size:14px;padding:0}
.tc-mi:hover{background:rgba(183,164,242,.16)}
.tc-mi.danger{color:#ff8f8f}
.tc-mi .tc-dot{width:15px;height:15px;border-radius:50%;box-sizing:border-box}
.tc-mi-sep{width:1px;height:18px;background:var(--line-dk);margin:0 4px}
#tc-canvas.cap .tc-mini,#tc-canvas.cap .tc-add-rel{display:none!important}
/* Labelled status in the mini-toolbar (so you see what each colour means) */
.tc-mi-st{flex-direction:column;gap:3px;width:auto;min-width:36px;height:auto;padding:4px 6px}
.tc-mi-lbl{font:700 8px var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--mist-dk);line-height:1}
.tc-mi-st:hover .tc-mi-lbl{color:var(--bone)}
.tc-mini{display:none!important}
/* Interactive tour */
.tc-tour-start{display:inline-flex;align-items:center;gap:7px;margin:12px 0 2px;background:rgba(122,92,240,.15);border:1px solid var(--lilac);color:var(--bone);border-radius:10px;padding:9px 15px;font:700 13px var(--display);cursor:pointer}
.tc-tour-start:hover{background:rgba(122,92,240,.26)}
.tc-tour-start i{color:var(--lilac);font-size:16px}
.tc-tour{position:fixed;inset:0;z-index:3000;pointer-events:auto}
.tc-tour-hole{position:fixed;border-radius:11px;box-shadow:0 0 0 9999px rgba(8,5,18,.74);border:2px solid var(--lilac);pointer-events:none;transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease}
.tc-tour-pop{position:fixed;z-index:3001;width:min(330px,calc(100vw - 24px));background:var(--ink-2);border:1px solid var(--lilac);border-radius:14px;padding:16px 16px 14px;box-shadow:0 16px 46px rgba(0,0,0,.6);pointer-events:auto}
.tc-tour-title{font:700 15.5px var(--display);color:var(--bone);margin-bottom:7px}
.tc-tour-text{font:500 13px var(--display);color:var(--mist-dk);line-height:1.55;margin-bottom:15px}
.tc-tour-nav{display:flex;align-items:center;gap:8px}
.tc-tour-sp{flex:1}
.tc-tour-count{font:700 11px var(--display);color:var(--mist)}
.tc-tour-nav button{border:0;border-radius:8px;cursor:pointer;font:700 12.5px var(--display);padding:9px 15px}
.tc-tour-skip{background:transparent!important;color:var(--mist-dk)!important;padding:9px 4px!important}
.tc-tour-back{background:var(--ink)!important;color:var(--bone)!important;border:1px solid var(--line-dk)!important}
.tc-tour-next{background:var(--iris);color:#fff}
/* Quick-edit box form */
.tc-quick{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;background:rgba(8,5,18,.55);padding:6vh 12px;overflow:auto}
.tc-quick-card{width:100%;max-width:440px;background:var(--ink-2);border:1px solid var(--line-dk);border-radius:16px;padding:18px 18px 22px;box-shadow:0 12px 44px rgba(0,0,0,.5);max-height:86vh;overflow:auto}
.tc-quick-h{display:flex;align-items:center;justify-content:space-between;font:700 16px var(--display);color:var(--bone);margin-bottom:14px}
.tc-quick-x{background:none;border:0;color:var(--mist-dk);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.tc-quick-f{display:block;font:600 11px var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--mist-dk);margin-bottom:13px}
.tc-quick-f input,.tc-quick-f select{display:block;width:100%;margin-top:6px;background:var(--ink);border:1px solid var(--line-dk);border-radius:10px;padding:12px 13px;color:var(--bone);font:500 16px var(--display);box-sizing:border-box;text-transform:none;letter-spacing:0}
.tc-quick-f input:focus,.tc-quick-f select:focus{outline:none;border-color:var(--lilac)}
.tc-quick-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.tc-q-del{background:none;border:0;color:#E5484D;font:600 13px var(--display);cursor:pointer;padding:8px 4px}
.tc-q-done{padding:12px 26px;font-size:15px}
@media(min-width:561px){.tc-quick{align-items:center;padding:24px}}
/* lines show a grab cursor (click to select, drag to move the bend) */
.tc-hit{cursor:grab}

  /* ============================================================
     LIGHT MODE
     Toggled with data-theme="light" on <html> (see jobs.js).
     The rest of the site flips to a light palette by re-pointing the
     core surface/text tokens; the top bar keeps its own dark tokens so
     the audience switch still owns the bar's look.
     ============================================================ */
  /* theme flips instantly: transitioning a var()-driven background can leave
     body painting the old colour, so no transition on the page surface. */
  html[data-theme="light"]{
    --ink:#F4F1FB;        /* page background */
    --ink-2:#EBE6F8;      /* raised panels / gradients */
    --ink-3:#E1DAF3;      /* deeper panels */
    --bone:#1A1533;       /* primary text */
    --mist:#5E5880;       /* muted text */
    --mist-dk:#4C4668;    /* secondary text */
    --lilac:#6A4CD6;      /* accent text, darkened for light bg */
    --line-dk:rgba(30,20,60,.14);
    color-scheme:light;
  }
  /* keep the top bar dark in light mode: re-assert dark tokens AND keep the bar
     opaque so the light page behind it doesn't wash the text out. */
  html[data-theme="light"] header{
    background:rgba(16,11,34,.97);
    --bone:#F7F5FE;
    --mist:#9A8FC0;
    --mist-dk:#C3BAE0;
    --lilac:#C4B4F5;
    --line-dk:rgba(183,164,242,.22);
  }
  html[data-theme="light"] header .nav-links a{color:#C8BFE6}
  html[data-theme="light"] header .nav-links a:hover,html[data-theme="light"] header .nav-drop-btn{color:#F7F5FE}
  /* Light mode keeps the top bar DARK for both audiences. Company mode otherwise
     paints a WHITE bar with dark text; layered under light mode the two background
     rules tie, so the bar can render dark while the company brand text stays dark
     (unreadable). Pin company+light to a dark bar with light text via an explicit
     [data-theme][data-aud] selector that outranks the company rules. */
  html[data-theme="light"] header .brand{color:var(--bone)}
  html[data-theme="light"][data-aud="company"] header{background:rgba(16,11,34,.97);border-bottom-color:rgba(183,164,242,.22)}
  html[data-theme="light"][data-aud="company"] header .brand{color:#F7F5FE}
  html[data-theme="light"][data-aud="company"] header .nav-toggle{color:#C3BAE0;border-color:rgba(183,164,242,.22)}
  html[data-theme="light"][data-aud="company"] header .aud-toggle{background:rgba(183,164,242,.10);border-color:rgba(183,164,242,.22)}
  html[data-theme="light"][data-aud="company"] header .aud-opt{color:#C8BFE6}
  html[data-theme="light"][data-aud="company"] header .aud-opt.active{color:#fff}
  /* section contrast tweaks so light-on-light still reads */
  html[data-theme="light"] .services{background-color:#E7E1F5}
  html[data-theme="light"] .svc{background:#fff;box-shadow:0 1px 0 rgba(30,20,60,.04)}
  html[data-theme="light"] .svc:hover{background:#FBFAFE}
  html[data-theme="light"] .svc p{color:#4a4364}
  html[data-theme="light"] .val{background:linear-gradient(180deg,#fff,rgba(255,255,255,.4));box-shadow:0 1px 3px rgba(30,20,60,.05)}
  html[data-theme="light"] .val:hover{background:linear-gradient(180deg,#fff,rgba(240,236,251,.6))}
  html[data-theme="light"] .member{background:linear-gradient(180deg,#ffffff,#F4F1FB);box-shadow:0 1px 3px rgba(30,20,60,.06),0 18px 44px -26px rgba(93,63,211,.35)}
  html[data-theme="light"] .badge,html[data-theme="light"] .btn-ghost{border-color:rgba(93,63,211,.28)}
  html[data-theme="light"] .btn-ghost{color:var(--iris)}
  html[data-theme="light"] .btn-ghost:hover{color:#fff;background:var(--iris);border-color:var(--iris)}
  /* softer glows so purple radials don't smear on a light page. NB the opacity of
     both is animated (lh-breathe / auraPulse), so capping opacity is ignored —
     we soften the gradient COLOUR instead, which the animation can't override. */
  html[data-theme="light"] .hero-glow{background:radial-gradient(circle,rgba(93,63,211,.12),transparent 62%)}
  html[data-theme="light"] .lion-aura{background:radial-gradient(circle at 50% 48%,rgba(122,92,240,.2),rgba(93,63,211,.07) 44%,transparent 68%)}
  /* form controls / cards in the calculators + tools on a light page */
  html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#fff;color:var(--bone)}
  html[data-theme="light"] .calc-result,html[data-theme="light"] .calc-metric{background:#fff}

  /* theme toggle button in the top bar (sits on the dark/white bar) */
  /* The theme toggle + the primary CTA read as ONE segmented button: the toggle is
     the icon half (rounded on its outer/left edge, square + borderless on the seam),
     the CTA is the text half (square seam, rounded outer/right). Matched height so
     they line up. On mobile the CTA is hidden, so the toggle reverts to a standalone
     rounded button (see the max-width:1024px block). */
  .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
    margin-left:14px;margin-right:0;background:rgba(183,164,242,.10);border:1px solid var(--line-dk);border-right:0;
    border-radius:6px 0 0 6px;color:var(--bone);cursor:pointer;transition:color .25s,background .25s,border-color .25s}
  .theme-toggle + a.btn-iris{margin-left:0;height:44px;border-radius:0 6px 6px 0}
  /* Both halves wear the CTA's purple in EVERY mode (candidate / company / light /
     dark) so the segmented button reads as one solid button, with a faint inner
     divider. Desktop only (:has counts the hidden CTA on mobile, so scope by width);
     on mobile the toggle is standalone and keeps its per-mode look + the reset below. */
  @media (min-width:1025px){
    /* html[data-aud] prefix so this out-ranks html[data-aud="company"] .theme-toggle
       even where :has() adds little specificity - wins in every audience/theme. */
    html[data-aud] .theme-toggle:has(+ a.btn-iris){background:var(--iris);border:0;color:#fff;
      box-shadow:inset -1px 0 0 rgba(255,255,255,.2)}
    html[data-aud] .theme-toggle:has(+ a.btn-iris) svg{color:#fff}
    .theme-toggle + a.btn-iris{box-shadow:none}
  }
  /* collapsed nav: the CTA is hidden, so the toggle reverts to a standalone rounded button.
     Placed after the base rule so it wins (media queries add no specificity). */
  @media (max-width:1180px){
    .theme-toggle{border-right:1px solid var(--line-dk);border-radius:6px}
  }
  .theme-toggle:hover{border-color:var(--lilac);color:#fff}
  .theme-toggle svg{width:19px;height:19px;display:block}
  .theme-toggle .ico-sun{display:none}
  html[data-theme="light"] .theme-toggle .ico-sun{display:block}
  html[data-theme="light"] .theme-toggle .ico-moon{display:none}
  html[data-aud="company"] .theme-toggle{background:rgba(93,63,211,.08);border-color:rgba(30,20,60,.16);color:#15102B}
  html[data-aud="company"] .theme-toggle:hover{color:#fff;background:var(--iris);border-color:var(--iris)}
  /* Segmented toggle + CTA hover as ONE button: hovering EITHER half brightens BOTH
     to the CTA's hover colour, kept flat (no lift) so the joined seam doesn't split.
     :has() gives enough specificity to override the per-mode toggle-hover rules. */
  html[data-aud] .theme-toggle:has(+ a.btn-iris):hover,
  html[data-aud] .theme-toggle:has(+ a.btn-iris:hover){background:var(--iris-bright);border-color:var(--iris-bright);color:#fff}
  .theme-toggle:hover + a.btn-iris,
  .theme-toggle + a.btn-iris:hover{background:var(--iris-bright);transform:none;box-shadow:none}
  /* ---------- brand: lion mark + Poppins wordmark (2026-07-12) ----------
     The PNG lockup's baked-in wordmark wasn't Poppins; the brand text is now
     real text so it always renders in the site font. ---------- */
  .brand{gap:10px}
  .brand-lion{height:32px;width:auto;display:block;flex:none}
  .brand-word{font-family:var(--display);font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1}
  .foot .brand-lion{height:30px}
  @media(max-width:860px){ .brand-lion{height:27px} .foot .brand-lion{height:26px} }
  /* legacy image-lockup rules (markup removed; kept harmless for cached HTML) */
  .brand-logo{height:30px;width:auto;display:block}
  .brand-logo-onLight{display:none}

  /* ==========================================================================
     Mobile mega-polish (2026-07-12) — forms, tap targets, type, spacing.
     Appended last so it wins on equal specificity. Recruitment pages.
     ========================================================================== */
  @media (max-width:600px){
    /* Prevent iOS zoom-on-focus: real form fields render at >=16px */
    form input, form select, form textarea,
    .company-field input, .company-field select, .company-field textarea,
    .frow input, .frow select, .frow textarea,
    .field input, .field select, .field textarea{ font-size:16px }
    /* Stack every multi-column form / two-up row */
    .frow, .company-grid{ grid-template-columns:1fr !important }
    /* Comfortable tap targets */
    .nav-toggle{ width:44px; height:44px }
    a.btn, button.btn{ min-height:46px; display:inline-flex; align-items:center; justify-content:center }
    .nav-links a{ padding:9px 0 }
    /* Keep long headings from overflowing / getting huge on small phones */
    .page-title{ font-size:clamp(1.8rem,7.2vw,2.5rem) }
    h1, h2, .page-title, .hero-copy h1{ overflow-wrap:break-word }
    /* Hamburger can never be shrunk or pushed off-screen */
    .nav-toggle{ flex:none }
    .nav{ gap:10px }
    /* Sticky-safe guard: a stray wide element can't shove the page sideways
       (internal scrollers like .cmp-scroll keep their own overflow) */
    body{ overflow-x:clip }
    img, svg, video, table, pre{ max-width:100% }
    /* …but never squish the fixed-height brand logo: keep its aspect ratio
       and stop the header flex row from compressing it */
    .brand{ flex:none; min-width:0 }
    .brand-logo{ max-width:none; width:auto; flex:none }
  }
  @media (max-width:360px){
    header .brand{ font-size:.92rem }
    .brand-logo{ height:23px }
    .wrap{ padding-left:16px; padding-right:16px }
  }

  /* ==========================================================================
     EXTRA GLOW & MOTION (2026-07-12) — recruitment site.
     Brand rule: NO lightning here (IQ-only). This layer is glow, shimmer and
     smooth motion — fade/hover-driven, never strobing. All idle motion is a
     slow breathe; everything gated on prefers-reduced-motion.
     ========================================================================== */

  /* --- iris buttons: shimmer sweep + glow bloom on hover --- */
  .btn-iris{position:relative;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease}
  .btn-iris::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
  .btn-iris:hover{box-shadow:0 0 22px -4px var(--iris-bright,#7A5CF0),0 6px 26px -8px var(--iris,#5D3FD3);transform:translateY(-1px)}
  .btn-iris:hover::after{left:130%}
  .btn-ghost{transition:box-shadow .35s ease,border-color .3s ease,transform .25s ease}
  .btn-ghost:hover{box-shadow:0 0 18px -6px rgba(122,92,240,.65);transform:translateY(-1px)}

  /* --- cards: lift + iris edge glow on hover --- */
  .val,.svc,.job,.value-prop,.bench-card,.member,.partner,.faq-item{
    transition:transform .3s ease,box-shadow .35s ease,border-color .3s ease}
  .val:hover,.svc:hover,.job:hover,.value-prop:hover,.bench-card:hover,.member:hover,.partner:hover{
    transform:translateY(-4px);
    box-shadow:0 0 0 1px rgba(122,92,240,.45),0 14px 42px -14px rgba(122,92,240,.5)}

  /* --- hero aura: slow breathing glow (gentle fade, not a flash) --- */
  @keyframes lh-breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
  .hero-glow{animation:lh-breathe 8s ease-in-out infinite}
  .lion-aura{animation:lh-breathe 7s ease-in-out infinite}

  /* --- markbar: underline glow wash on section-heading hover --- */
  .markbar{transition:text-shadow .35s ease}
  h1:hover .markbar,h2:hover .markbar{text-shadow:0 0 22px rgba(122,92,240,.55)}

  /* --- eyebrow chevron: soft glow --- */
  .eyebrow .chev svg{filter:drop-shadow(0 0 4px rgba(122,92,240,.0));transition:filter .4s ease}
  .eyebrow:hover .chev svg{filter:drop-shadow(0 0 6px rgba(122,92,240,.8))}

  /* --- scroll reveal: sections/cards fade-rise in as they enter view --- */
  .lh-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .lh-reveal.in{opacity:1;transform:none}

  @media (prefers-reduced-motion:reduce){
    .btn-iris::after{display:none}
    .hero-glow,.lion-aura{animation:none}
    .lh-reveal{opacity:1;transform:none;transition:none}
    .val:hover,.svc:hover,.job:hover,.value-prop:hover,.bench-card:hover,.member:hover,.partner:hover{transform:none}
  }

  /* mobile header: theme toggle + hamburger grouped together on the right
     (space-between was stranding the theme button mid-bar) */
  @media(max-width:860px){
    header .theme-toggle{margin-left:auto;margin-right:10px}
  }

  /* ==========================================================================
     Mobile 4-button header + corner tools menu + menu contrast (2026-07-12)
     Loaded by every page (recruitment + IQ) — single source for both.
     ========================================================================== */

  /* --- menu contrast: explicit colors in BOTH themes (was pale-on-white) --- */
  .nav-drop-menu{background:#171227;border-color:rgba(183,164,242,.25)}
  .nav-drop-menu a{color:#D9D3EE}
  .nav-drop-menu a:hover{color:#fff;background:rgba(93,63,211,.4)}
  .nav-drop-menu a.active{color:#fff;background:rgba(93,63,211,.5)}
  html[data-theme="light"] .nav-drop-menu{background:#fff;border-color:rgba(30,20,60,.14);box-shadow:0 16px 40px rgba(30,20,60,.18)}
  html[data-theme="light"] .nav-drop-menu a{color:#332B52}
  html[data-theme="light"] .nav-drop-menu a:hover,
  html[data-theme="light"] .nav-drop-menu a.active{color:#14102B;background:rgba(93,63,211,.14)}

  /* --- square header buttons (mobile only) --- */
  .lh-sqbtn{display:none}
  @media (max-width:860px){
    .lh-sqbtn{display:grid;place-items:center;width:44px;height:44px;flex:none;cursor:pointer;
      border:1px solid var(--line-dk,rgba(183,164,242,.3));border-radius:8px;background:none;
      color:var(--bone,#EDE9FA);text-decoration:none;font-family:var(--display,'Poppins',sans-serif)}
    .lh-home{margin-left:auto;margin-right:10px}
    header .theme-toggle{margin-left:0;margin-right:10px;width:44px;height:44px;border-radius:8px}
    .nav-toggle{margin-right:10px;border-radius:8px}
    .lh-iqbtn{background:var(--iris,#5D3FD3);border-color:var(--iris,#5D3FD3);color:#fff;
      font-weight:800;font-size:.82rem;letter-spacing:.03em}
    /* mobile dropdown-style nav overlay: readable in both themes */
    .nav-links{background:#161029}
    .nav-links a{color:#D9D3EE}
    html[data-theme="light"] .nav-links{background:#fff;border-bottom-color:rgba(30,20,60,.12)}
    html[data-theme="light"] .nav-links a{color:#332B52}
    html[data-theme="light"] .nav-links a:hover{color:#14102B}
  }

  /* --- corner tools menu: veil + bloom-from-top-right pop (Insta-style) --- */
  .lh-wheel-veil{position:fixed;inset:0;background:rgba(10,7,22,.74);backdrop-filter:blur(6px);
    z-index:990;opacity:0;transition:opacity .3s ease}
  .lh-wheel-veil.on{opacity:1}
  .lh-wheel-pop{position:fixed;top:72px;right:10px;width:min(86vw,360px);aspect-ratio:1;z-index:991;
    transform-origin:92% 0%;transform:scale(.12);opacity:0;
    transition:transform .42s cubic-bezier(.2,.8,.25,1.12),opacity .32s ease}
  .lh-wheel-pop.on{transform:none;opacity:1}
  .lh-wheel-x{position:fixed;top:14px;right:14px;z-index:992;width:44px;height:44px;border-radius:50%;
    background:#0E0A1F;color:#fff;border:1px solid rgba(183,164,242,.45);font-size:22px;line-height:1;
    display:grid;place-items:center;cursor:pointer}

  /* --- wheel core (subset of iq.css so the overlay works on recruitment pages) --- */
  .iq-wheel{position:relative;width:100%;aspect-ratio:1;user-select:none;filter:drop-shadow(0 24px 60px rgba(93,63,211,.34))}
  .iq-wheel-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .iq-wheel .wedge{fill:#171227;stroke:#0E0A1F;stroke-width:2.5;transition:fill .18s ease,filter .18s ease;cursor:pointer}
  .iq-wheel .wedge.alt{fill:#1E1636}
  .iq-wheel a{outline:none;cursor:pointer}
  .iq-wheel a:hover .wedge,.iq-wheel a.active .wedge{fill:#5D3FD3}
  .iq-wheel a:focus-visible .wedge{fill:#5D3FD3;stroke:#B7A4F2;stroke-width:3.5}
  .iq-wheel-ico{position:absolute;transform:translate(-50%,-50%);pointer-events:none;text-align:center;
    color:#B7A4F2;transition:color .18s ease,transform .18s ease;z-index:2}
  .iq-wheel-ico i{font-size:clamp(18px,5vw,24px);line-height:1;display:block}
  .iq-wheel-lbl{display:block;margin-top:3px;font-family:var(--display,'Poppins',sans-serif);font-weight:600;
    font-size:clamp(8px,2.2vw,10px);line-height:1;color:#C9C0E6;white-space:nowrap;text-align:center}
  .iq-wheel-ico.active{color:#fff;transform:translate(-50%,-50%) scale(1.12)}
  .iq-wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:47%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,#241A44,#120D26 72%);
    border:1px solid rgba(183,164,242,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:9%;pointer-events:none;z-index:3;box-shadow:inset 0 0 24px rgba(0,0,0,.5)}
  .iq-wheel-hub .mark{width:26px;height:26px;color:#7A5CF0;margin-bottom:6px;flex:none}
  .iq-wheel-hub .hub-title{font-family:var(--display,'Poppins',sans-serif);font-weight:700;font-size:.9rem;line-height:1.12;color:#F4F2FB}
  .iq-wheel-hub .hub-sub{font-size:.64rem;color:#9A92B8;margin-top:4px;line-height:1.3}
  .sc-wheel-arc{fill:none;stroke:#B7A4F2;stroke-width:2.4;stroke-linecap:round;
    filter:drop-shadow(0 0 6px #7A5CF0);opacity:0;transition:opacity .28s ease}
  .sc-wheel-arc.show{opacity:.85}

  /* corner-wheel refinement: the mobile tools menu is a QUARTER fan anchored
     flush to the top-right corner, blooming out of it (2026-07-12) */
  .lh-wheel-pop{top:0;right:0;width:min(94vw,400px);border-radius:0;transform-origin:100% 0%;
    background:radial-gradient(circle at 100% 0%, rgba(93,63,211,.55), rgba(93,63,211,.12) 55%, transparent 76%)}
  .lh-wheel-pop .iq-wheel{filter:drop-shadow(0 18px 44px rgba(0,0,0,.55))}
  .lh-wheel-x{top:10px;right:10px;background:var(--iris,#5D3FD3);border-color:var(--iris,#5D3FD3)}

  /* ==========================================================================
     Corner wheel v2 (2026-07-12): lit-from-corner wedges, circular icon chips,
     staggered bloom entrance, pulsing origin. Plus tighter 4-button bar.
     ========================================================================== */

  /* wedges lit from the corner (gradients defined in the overlay svg defs) */
  .iq-wheel .wedge.q{fill:url(#lhqg);stroke:rgba(122,92,240,.4);stroke-width:1.4}
  .iq-wheel .wedge.q.alt{fill:url(#lhqga)}
  .iq-wheel a:hover .wedge.q,.iq-wheel a.active .wedge.q{
    fill:url(#lhqgh);filter:drop-shadow(0 0 16px rgba(122,92,240,.95))}

  /* staggered bloom: each wedge scales out of the corner in sequence */
  .iq-wheel-svg a.qa{transform-box:view-box;transform-origin:400px 0;
    animation:lhq-in .5s cubic-bezier(.2,.8,.25,1.14) both}
  @keyframes lhq-in{from{transform:scale(.15);opacity:0}to{transform:none;opacity:1}}

  /* circular icon chips arrayed along the arcs (Insta-style) */
  .iq-wheel-ico.q{animation:lhq-pop .42s cubic-bezier(.2,.8,.3,1.35) both}
  @keyframes lhq-pop{from{transform:translate(-50%,-50%) scale(0);opacity:0}
                     to{transform:translate(-50%,-50%) scale(1);opacity:1}}
  .iq-wheel-ico.q i{width:48px;height:48px;display:grid;place-items:center;margin:0 auto;
    border-radius:50%;font-size:22px;color:#fff;
    background:radial-gradient(circle at 32% 28%, #8B6BFF, #5D3FD3 60%, #45309C);
    border:1px solid rgba(200,182,255,.6);
    box-shadow:0 0 18px -3px rgba(122,92,240,.85), inset 0 1px 8px rgba(255,255,255,.22)}
  .iq-wheel-ico.q.qi i{width:40px;height:40px;font-size:18px}
  .iq-wheel-ico.q .iq-wheel-lbl{margin-top:5px;color:#EFEAFD;font-size:9.5px;font-weight:700;
    text-shadow:0 1px 8px rgba(0,0,0,.8)}
  .iq-wheel-ico.q.active i{box-shadow:0 0 26px 2px rgba(139,107,255,1), inset 0 1px 8px rgba(255,255,255,.3);
    transform:scale(1.08)}

  /* origin X breathes light, like the fan is powered from it */
  .lh-wheel-x{animation:lhx-glow 3.2s ease-in-out infinite}
  @keyframes lhx-glow{0%,100%{box-shadow:0 0 10px -2px rgba(122,92,240,.7)}
                      50%{box-shadow:0 0 26px 3px rgba(139,107,255,.95)}}

  /* brighter corner light behind the fan */
  .lh-wheel-pop{background:
    radial-gradient(circle at 100% 0%, rgba(139,107,255,.6), rgba(93,63,211,.18) 50%, transparent 74%)}

  @media (prefers-reduced-motion:reduce){
    .iq-wheel-svg a.qa,.iq-wheel-ico.q,.lh-wheel-x{animation:none}
  }

  /* --- tighter 4-button bar: fits down to 320px --- */
  @media (max-width:860px){
    .lh-sqbtn{width:40px;height:40px}
    header .theme-toggle{width:40px;height:40px;margin-right:6px}
    .nav-toggle{width:40px;height:40px;margin-right:6px}
    .lh-home{margin-right:6px}
    .lh-iqbtn{font-size:.78rem}
    .wrap.nav{padding-left:14px;padding-right:14px}
  }
  @media (max-width:380px){
    .brand-lion{height:24px}
    .brand-word{font-size:.85rem;letter-spacing:.02em}
    .lh-sqbtn,header .theme-toggle,.nav-toggle{width:38px;height:38px}
  }

  /* corner-fan readout: one clean label in the fan's empty corner instead of
     8 cramped chip labels (2026-07-12) */
  .iq-q-readout{position:absolute;left:3%;bottom:5%;max-width:52%;text-align:left;pointer-events:none;
    animation:lhq-pop2 .5s ease .45s both}
  @keyframes lhq-pop2{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .iq-q-readout .hub-title{display:block;font-family:var(--display,'Poppins',sans-serif);font-weight:800;
    font-size:1.02rem;line-height:1.15;color:#F4F2FB;text-shadow:0 0 18px rgba(122,92,240,.65)}
  .iq-q-readout .hub-sub{display:block;font-size:.7rem;color:#A99FD0;margin-top:4px;line-height:1.35}
  @media (prefers-reduced-motion:reduce){ .iq-q-readout{animation:none} }

  /* corner-fan robustness (2026-07-12 UX pass): notch-safe close button,
     landscape/short-screen size guard */
  .lh-wheel-pop{width:min(94vw, 400px, 86vh)}
  .lh-wheel-x{top:max(10px, env(safe-area-inset-top, 10px));right:max(10px, env(safe-area-inset-right, 10px))}

  /* fan v3 (2026-07-12): circles only — wedge panels invisible (kept as big
     tap targets), rows pulled closer, translucent chips */
  .iq-wheel .wedge.q{fill:rgba(122,92,240,0);stroke:none}
  .iq-wheel .wedge.q.alt{fill:rgba(122,92,240,0)}
  .iq-wheel a:hover .wedge.q,.iq-wheel a.active .wedge.q{
    fill:rgba(122,92,240,.14);filter:none}
  .iq-wheel-ico.q{opacity:.85}
  .iq-wheel-ico.q.active{opacity:1}
  .iq-wheel-ico.q i{background:radial-gradient(circle at 32% 28%, rgba(139,107,255,.92), rgba(93,63,211,.88) 60%, rgba(69,48,156,.85));
    box-shadow:0 0 16px -4px rgba(122,92,240,.8), inset 0 1px 8px rgba(255,255,255,.2)}
  .iq-wheel-ico.q.active i{box-shadow:0 0 26px 0 rgba(139,107,255,1), inset 0 1px 8px rgba(255,255,255,.3)}

  /* ==========================================================================
     PETAL FAN (2026-07-12) — the live mobile tools menu. Technique after
     CodeFronts "Petal Fan" (MIT): petals stack on the corner origin, then
     rotate(a) -> push out -> counter-rotate springs them into the arc.
     ========================================================================== */
  .lh-petal-i{position:absolute;top:32px;right:32px;z-index:4;width:56px;height:56px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    border-radius:50%;text-decoration:none;color:#fff;
    background:radial-gradient(circle at 32% 28%, #8B6BFF, #5D3FD3 62%);
    border:1px solid rgba(210,196,255,.65);
    box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 18px -4px rgba(122,92,240,.9);
    opacity:0;
    transform:translate(50%,-50%) rotate(0deg) translateY(0) rotate(0deg);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease}
  .lh-petal-i i{font-size:21px;line-height:1}
  .lh-petal-lbl{font-size:8.5px;font-weight:700;line-height:1;letter-spacing:.01em;color:#EFEAFD}
  .lh-petal-open .lh-petal-i{opacity:1;
    transform:translate(50%,-50%) rotate(var(--a)) translateY(176px) rotate(calc(var(--a) * -1))}
  .lh-petal-i:hover,.lh-petal-i:focus-visible{
    box-shadow:0 0 26px 2px rgba(139,107,255,1), inset 0 1px 8px rgba(255,255,255,.28)}
  /* readout sits low-left, clear of the petals */
  .lh-wheel-pop .iq-q-readout{left:4%;bottom:8%}
  @media (max-width:360px){
    .lh-petal-open .lh-petal-i{transform:translate(50%,-50%) rotate(var(--a)) translateY(156px) rotate(calc(var(--a) * -1))}
  }
  @media (prefers-reduced-motion:reduce){
    .lh-petal-i{transition:none}
  }

  /* ==========================================================================
     FAB + bottom-bloom fan (2026-07-12): the tools launcher moves from the
     header to a floating bottom-right FAB (thumb zone, Path/Insta pattern);
     petals bloom UP-LEFT out of it. Header back to 3 buttons. Mobile nav
     drops the tool links (the FAB owns tools; hamburger owns pages).
     ========================================================================== */
  .lh-fab{display:none}
  @media (max-width:860px){
    .lh-fab{position:fixed;right:max(16px, env(safe-area-inset-right, 16px));
      bottom:max(16px, env(safe-area-inset-bottom, 16px));z-index:80;
      width:60px;height:60px;border-radius:50%;border:1px solid rgba(210,196,255,.6);
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
      background:radial-gradient(circle at 32% 28%, #8B6BFF, #5D3FD3 62%);color:#fff;cursor:pointer;
      box-shadow:0 10px 28px rgba(0,0,0,.5), 0 0 22px -4px rgba(122,92,240,.95);
      animation:lh-fab-pulse 3.4s ease-in-out infinite}
    .lh-fab-iq{font-family:var(--display,'Poppins',sans-serif);font-weight:800;font-size:1rem;line-height:1}
    .lh-fab-lbl{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
    @keyframes lh-fab-pulse{0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.5), 0 0 18px -6px rgba(122,92,240,.8)}
      50%{box-shadow:0 10px 28px rgba(0,0,0,.5), 0 0 30px 0 rgba(139,107,255,.95)}}
    /* hamburger owns PAGES only — tool links hide on mobile (FAB owns tools) */
    .nav-links a.lh-nav-tool{display:none}
  }
  /* overlay re-anchored to the bottom-right (overrides the top-right rules) */
  .lh-wheel-pop{top:auto;bottom:0;right:0;transform-origin:100% 100%;
    background:radial-gradient(circle at 100% 100%, rgba(139,107,255,.6), rgba(93,63,211,.18) 50%, transparent 74%)}
  .lh-wheel-x{top:auto;bottom:max(16px, env(safe-area-inset-bottom, 16px));
    right:max(16px, env(safe-area-inset-right, 16px));width:60px;height:60px}
  .lh-petal-i{top:auto;bottom:34px;transform:translate(50%,50%) rotate(0deg) translateY(0) rotate(0deg)}
  .lh-petal-open .lh-petal-i{transform:translate(50%,50%) rotate(var(--a)) translateY(-176px) rotate(calc(var(--a) * -1))}
  .lh-wheel-pop .iq-q-readout{bottom:auto;top:8%;left:6%}
  @media (max-width:360px){
    .lh-petal-open .lh-petal-i{transform:translate(50%,50%) rotate(var(--a)) translateY(-156px) rotate(calc(var(--a) * -1))}
  }
  @media (prefers-reduced-motion:reduce){ .lh-fab{animation:none} }

  /* petals slightly clear (glassy) + FAB shows just "IQ" (2026-07-12) */
  .lh-petal-i{
    background:radial-gradient(circle at 32% 28%, rgba(139,107,255,.72), rgba(93,63,211,.66) 62%);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border-color:rgba(210,196,255,.5)}
  .lh-petal-i:hover,.lh-petal-i:focus-visible{
    background:radial-gradient(circle at 32% 28%, rgba(139,107,255,.95), rgba(93,63,211,.9) 62%)}
  .lh-fab-iq{font-size:1.2rem}

  /* Dan's pick (2026-07-12): B3 neon-ring bubble (extra clear) + O55 glass petals + T1 labels */
  @media (max-width:860px){
    .lh-fab{
      background:rgba(93,63,211,.05);
      backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
      border:2px solid #8B6BFF;color:#C9B8FF;
      text-shadow:0 0 8px rgba(183,164,242,.9);
      box-shadow:0 0 18px rgba(139,107,255,.8), inset 0 0 12px rgba(139,107,255,.3);
      animation:lh-fab-neon 3.4s ease-in-out infinite}
    @keyframes lh-fab-neon{
      0%,100%{box-shadow:0 0 14px rgba(139,107,255,.65), inset 0 0 10px rgba(139,107,255,.25)}
      50%{box-shadow:0 0 28px rgba(139,107,255,1), inset 0 0 16px rgba(139,107,255,.45)}}
  }
  .lh-petal-i{
    background:radial-gradient(circle at 32% 28%, rgba(139,107,255,.55), rgba(93,63,211,.5) 62%);
    backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
    border-color:rgba(210,196,255,.45)}
  @media (prefers-reduced-motion:reduce){ .lh-fab{animation:none} }

  /* ==========================================================================
     MAJOR RULE (Dan, 2026-07-12): nothing on mobile may run off the screen.
     Root cause of the candidates-page clip: buttons don't wrap long text.
     ========================================================================== */
  @media (max-width:860px){
    .btn, a.btn, button.btn{white-space:normal;max-width:100%;text-align:center;height:auto}
    /* petals: icons only (readout names the tool) */
    .lh-petal-lbl{display:none}
    .lh-petal-i i{font-size:23px}
  }

  /* MAJOR RULE addendum (2026-07-12): highlighted headline spans must wrap on
     mobile — the IQ home h1 markbar ran off-screen. */
  @media (max-width:860px){
    .markbar{white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  }

  /* ==========================================================================
     Fan side pills (T3) + lightning "IQ" on the bubble (2026-07-12).
     Pills sit INWARD (left of each petal) so they always stay on-screen.
     ========================================================================== */
  .lh-petal-i{overflow:visible}
  .lh-petal-pill{position:absolute;right:calc(100% + 9px);top:50%;transform:translateY(-50%);
    white-space:nowrap;pointer-events:none;
    background:rgba(16,12,34,.94);border:1px solid rgba(139,107,255,.5);color:#E7E1FA;
    font-family:var(--display,'Poppins',sans-serif);font-size:10px;font-weight:700;letter-spacing:.02em;
    padding:5px 10px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.45);
    opacity:0;transition:opacity .25s ease}
  .lh-petal-open .lh-petal-i .lh-petal-pill{opacity:1;transition-delay:.4s}
  @media (max-width:360px){ .lh-petal-pill{font-size:9px;padding:4px 8px} }

  /* lightning IQ: neon outline, italic, electric glow (per Dan's reference) */
  .lh-fab-iq{
    font-style:italic;font-weight:900;font-size:1.25rem;letter-spacing:.01em;
    transform:skewX(-8deg);
    color:transparent;
    -webkit-text-stroke:1.4px #C48BFF;
    text-shadow:0 0 6px rgba(139,107,255,.95), 0 0 14px rgba(122,92,240,.8), 0 0 26px rgba(93,63,211,.6)}
  @supports not (-webkit-text-stroke:1px #fff){
    .lh-fab-iq{color:#D9BFFF}
  }

  /* the real lightning IQ mark in the bubble (Dan's asset, bg keyed out) */
  .lh-fab-iq-img{width:44px;height:auto;display:block;pointer-events:none;
    filter:drop-shadow(0 0 6px rgba(139,107,255,.7))}

  /* desktop nav sanity (2026-07-13): the bar was jamming into the brand.
     Home is hamburger-only (the logo is Home on desktop); tighten gaps at
     mid widths so the nav never collapses its auto left margin. */
  @media (min-width:861px){
    .lh-nav-home{display:none}
  }
  @media (min-width:861px) and (max-width:1280px){
    .nav-links{gap:16px;margin-right:16px}
    .nav-links a{font-size:.9rem}
  }

  /* ==========================================================================
     FAB on ALL screen sizes (2026-07-13) — was mobile-only; Dan couldn't see
     it on PC. Appended last so it overrides the media-gated rules above.
     ========================================================================== */
  .lh-fab{display:flex;position:fixed;z-index:80;
    right:max(16px, env(safe-area-inset-right, 16px));
    bottom:max(16px, env(safe-area-inset-bottom, 16px));
    width:60px;height:60px;border-radius:50%;flex-direction:column;align-items:center;justify-content:center;
    cursor:pointer;
    background:rgba(93,63,211,.05);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    border:2px solid #8B6BFF;color:#C9B8FF;
    box-shadow:0 0 18px rgba(139,107,255,.8), inset 0 0 12px rgba(139,107,255,.3);
    animation:lh-fab-neon2 3.4s ease-in-out infinite}
  @keyframes lh-fab-neon2{
    0%,100%{box-shadow:0 0 14px rgba(139,107,255,.65), inset 0 0 10px rgba(139,107,255,.25)}
    50%{box-shadow:0 0 28px rgba(139,107,255,1), inset 0 0 16px rgba(139,107,255,.45)}}
  @media (prefers-reduced-motion:reduce){ .lh-fab{animation:none} }

  /* pills ABOVE their petal (not beside) so they never cover a neighbour's icon
     (Dan, 2026-07-13). Centered over the petal; clamped so they stay on-screen. */
  .lh-petal-pill{
    right:auto;top:auto;
    left:50%;bottom:calc(100% + 8px);
    transform:translateX(-50%);
    max-width:96px;text-align:center;overflow:hidden;text-overflow:ellipsis}

  /* FAB holds the Lionheart lion (Dan, 2026-07-13). Masked so it takes a solid
     theme colour: white in dark mode, iris in light mode — legible on both. */
  .lh-fab-lion{display:block;width:34px;height:34px;pointer-events:none;
    -webkit-mask:url(/assets/lionheart-lion.png) center/contain no-repeat;
    mask:url(/assets/lionheart-lion.png) center/contain no-repeat;
    background:#fff;filter:drop-shadow(0 0 7px rgba(139,107,255,.95))}
  html[data-theme="light"] .lh-fab-lion{background:var(--iris,#5D3FD3);
    filter:drop-shadow(0 0 5px rgba(93,63,211,.45))}

  /* ==========================================================================
     Header fit + logo protection (2026-07-14, Dan)
     The 9-item nav was cramming the logo below ~1300px (zero gap, logo touched
     by the links). Rules below guarantee the brand can never be squished or
     touched, tighten the link spacing responsively, and hand off to the
     hamburger (max-width:1240px, set above) while the bar still has air.
     Scoped to >=1241px so the stacked mobile menu keeps its own gap:0 column. */
  header .nav .brand{flex:none;gap:clamp(7px,1.4vw,10px)}
  /* wordmark shows consistently at every width (it fits even at 320px), instead
     of the old dead-band where it hid at 361-560px but reappeared at <=360px */
  header .nav .brand .brand-word{white-space:nowrap;font-size:clamp(.9rem,3.2vw,1.05rem)}
  @media (min-width:1241px){
    header .nav{gap:0}
    /* hard minimum gap between logo and first link, on top of the auto push */
    header .nav .brand{margin-right:clamp(22px,2.4vw,44px)}
    header .nav .nav-links{margin-left:auto;margin-right:18px;gap:clamp(13px,1.05vw,22px)}
    header .nav .nav-links a,
    header .nav .nav-links .nav-drop-btn{font-size:.8rem}
  }