/* Shared navigation for the integrated site; page components remain unchanged. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
/* Nav morph (Kaan 21 Oct: seamless, no jumps). One scroll driven value --p (0 at the top, 1 after ~72px of scroll,
   smoothstepped in navigation.js) morphs the full width bar into the floating pill: same element, same position model,
   so nothing snaps. The bar is position:fixed, so the page never shifts. */
nav#tq-nav{--p:0;position:fixed;top:calc(10px * var(--p));left:50%;right:auto;transform:translateX(-50%);z-index:100;background:#0b0e15;color:#e7eaf2;border:0;width:calc(100% - var(--p) * max(24px, 100% - 1080px));border-radius:calc(40px * var(--p));box-shadow:0 18px 44px rgba(12,18,32,calc(.35 * var(--p))),0 0 0 calc(1px * var(--p)) rgba(255,255,255,calc(.06 * var(--p)));padding:0;box-sizing:border-box;will-change:width,top,border-radius;transition:width .22s cubic-bezier(.4,0,.2,1),top .22s cubic-bezier(.4,0,.2,1),border-radius .22s cubic-bezier(.4,0,.2,1),box-shadow .22s ease}
nav#tq-nav.tq-pill{} /* state hook only; the look comes from --p */
#tq-nav .tq-nav-inner{max-width:1120px;margin:auto;height:66px;padding:0 24px;display:flex;gap:24px;align-items:center;box-sizing:border-box}
#tq-nav .tq-logo{margin-right:auto;flex-shrink:0;display:flex;align-items:center}
#tq-nav .tq-logo img{height:28px;width:180px;object-fit:contain;object-position:left center}
#tq-nav .tq-links{display:flex;align-items:center;gap:22px}
#tq-nav a{font-family:Inter,sans-serif;font-size:13px;font-weight:600;text-decoration:none;color:#b9c2d4}
#tq-nav a:hover,#tq-nav a[aria-current]{color:white}
#tq-menu{display:none;background:transparent;color:#e7eaf2;border:1px solid #344056;border-radius:50%;height:40px;width:40px;font-size:21px;cursor:pointer}
#tq-nav a:focus-visible,#tq-menu:focus-visible,#tq-footer a:focus-visible{outline:3px solid #8b7cf0;outline-offset:4px}
footer#tq-footer{background:#0b0e15;color:#b9c2d4;padding:36px 24px 90px;font:13px/1.6 Inter,sans-serif}
#tq-footer>div{max-width:1120px;margin:auto;display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between}
#tq-footer a{color:#e7eaf2;text-decoration:none}
#tq-footer .tq-footer-logo{display:flex;align-items:center}#tq-footer .tq-footer-logo img{height:24px;width:auto;display:block}
#tq-footer .tq-footer-links{display:flex;gap:12px 20px;flex-wrap:wrap}
#tq-footer .tq-legal{flex-basis:100%;color:#7c879c;font-size:12px;letter-spacing:.02em}
#tq-footer .tq-legal .nw{white-space:nowrap}
@media(max-width:960px){#tq-nav .tq-nav-inner{gap:12px;padding:0 16px}#tq-nav .tq-logo img{width:154px;height:25px}#tq-menu{display:block;flex:none}#tq-nav .tq-links{display:flex;position:absolute;top:calc(100% + 8px);right:12px;left:12px;padding:14px;background:#0e121b;border:1px solid #344056;border-radius:18px;box-shadow:0 15px 35px #0b0e1544;flex-direction:column;align-items:stretch;gap:4px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .18s ease,transform .22s cubic-bezier(.4,0,.2,1),visibility 0s linear .22s}#tq-nav.tq-open .tq-links{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .18s ease,transform .22s cubic-bezier(.4,0,.2,1),visibility 0s}#tq-nav .tq-links a{display:block;padding:12px}}
@media(max-width:360px){#tq-nav .tq-logo img{width:118px}#tq-nav .tq-nav-inner{gap:8px}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-old(root),::view-transition-new(root){animation:none}nav#tq-nav{transition:none}}

/* Shared icon treatment. Explicit component wrappers only: never charts/logos/SVG globally.
   Keep each component's box dimensions and semantic accent; remove soft fills/halos. */
:is(.sysicon,.hicon,.tile:has(>svg),.fico,.out-card .ic,.pc-card .bead,
    .mnote .ic,.ex-result .rc,.wf-done .wc,.prob .ic,.cs-sel .ic,.proc-card .bead,.wf-node .wf-ic,.ex-head .sic,
    .stab .si,.wtitle .wi,.eng-node .eni,.eco-core .eqi,.eco-card .eci){
  background:transparent!important;
  border:2px solid currentColor!important;
  box-shadow:none!important;
  box-sizing:border-box;
}
:is(.sysicon,.hicon,.tile:has(>svg),.fico,.out-card .ic,.pc-card .bead,
    .mnote .ic,.ex-result .rc,.wf-done .wc,.prob .ic,.cs-sel .ic,.proc-card .bead,.wf-node .wf-ic,.ex-head .sic,
    .stab .si,.wtitle .wi,.eng-node .eni,.eco-core .eqi,.eco-card .eci)>svg{
  stroke-width:2.4!important;
}
.fico{border-radius:8px}
.stab .si{border-radius:6px;opacity:1}
.eco-core .eqi,.eco-card .eci{border-radius:8px}
.hstat:nth-child(1) .hicon{color:var(--steel,#73A3D6)}
.hstat:nth-child(2) .hicon{color:var(--indigo,#8B7CF0)}
.hstat:nth-child(3) .hicon{color:var(--teal,#2FD4B8)}
.ccard.them .tile{color:var(--coral-deep,#BD4D68)}
.ccard.us .tile{color:var(--teal,#2FD4B8)}
.door .tile{color:var(--dc)}
.bcard .tile{color:var(--steel-deep,#3E7CC0)}
.bcard:nth-child(2) .tile{color:var(--indigo-deep,#6F5AE0)}
.wf-node .wf-ic{color:var(--ac,var(--teal,#2FD4B8))}
.eng-node .eni{color:var(--ec,var(--steel,#73A3D6))}
.eco-card .eci{color:var(--ec,var(--ac,var(--teal,#2FD4B8)))}
/* Compact standalone option pictograms use their SVG as the tile. */
.opt>.oi{color:var(--ctrl,#6F5AE0);stroke:currentColor;stroke-width:2.4;border:2px solid currentColor;border-radius:5px;background:transparent}
/* Floating contact controls retain their opaque surface for legibility. */
.fab-chat,.chatfab{border-width:2px}
.fab-chat>svg,.chatfab>svg{stroke-width:2.4}
/* Keyboard and motion hygiene across both canonical and legacy routes. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid #7C5CFF;outline-offset:3px;
}
/* mobile menu: fades and slides in and out (no display switch, so it can animate both ways); page scroll locked while open */
@media(max-width:960px){html.tq-lock,html.tq-lock body{overflow:hidden}}
#tq-menu span{display:inline-block;transition:transform .2s ease}
#tq-menu[aria-expanded="true"] span{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
}

/* Eyebrows: no leading line, smaller, flush left (Kaan, 7 Oct) */
.eyebrow::before,.eye::before,.seceye::before,.slabel::before{display:none!important;content:none!important}
.eyebrow,.eye,.seceye,.slabel{gap:0!important;font-size:10.5px!important;justify-content:flex-start!important;padding-left:0!important}

/* Apply now (was Book a call): floating sticky button bottom right on every page (moved out of the nav, Kaan 7 Oct).
   Same look as the homepage .bookfab it replaces. Chat launchers sit bottom left so they never collide. */
html body a.tq-fab{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:90;display:inline-flex;align-items:center;gap:8px;font:700 14px/1.6 Inter,sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;color:#06130b;background:#00e572;border:1px solid transparent;border-radius:100px;padding:13px 24px;box-shadow:0 8px 18px rgba(0,190,100,.22),0 1px 4px rgba(15,23,42,.08);transition:transform .15s,filter .15s}
html body a.tq-fab:hover{filter:brightness(1.08);transform:translateY(-2px)}
@media(max-width:600px){html body a.tq-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}}
html .tq-chatbot-root .tq-chatbot-launcher{right:auto;left:22px}
@media(max-width:600px){html .tq-chatbot-root .tq-chatbot-launcher{left:16px}}
@media(min-width:601px){html .tq-chatbot-panel{right:auto;left:22px}}
@media(prefers-reduced-motion:reduce){html body a.tq-fab:hover{transform:none}}

/* Desktop spacing rhythm (Kaan 7 Oct: cut the big empty gaps, desktop first).
   One token for every page: section padding drops to 60px at 1024px and up (from 84 to 100).
   Pages read it as padding:var(--tq-sect-y,<their own value>), so mobile and tablet keep their old values.
   --sect-y is the v2 token (about, consulting, your-systems). */
@media(min-width:1024px){
  :root{--tq-sect-y:60px;--sect-y:var(--tq-sect-y);--tq-head-gap:28px;--tq-cta-y:72px}
  .bcta{padding-bottom:64px}
}

/* Never let the page scroll sideways on mobile (Kaan, 8 Oct) */
html,body{overflow-x:clip}