/* Shop dropdown in the header nav (Lane 2). Shared by every template that includes
   partials/nav-links; colours follow the torque palette (torque-home.css / app.css).
   The trigger is a normal link; the panel opens on hover or keyboard focus (focus-within). */
.tt-navdrop{position:relative;display:inline-flex;align-items:center;white-space:nowrap}
.tt-navdrop>a::after{content:"";display:inline-block;margin-left:6px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6}
.tt-navdrop__panel{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);z-index:40;display:none;gap:28px;padding:20px 24px 22px;min-width:max-content;background:#fff;border:1px solid #e2e6ec;border-radius:14px;box-shadow:0 24px 48px -20px rgba(12,19,32,.22),0 2px 6px rgba(12,19,32,.06);text-align:left;font-size:14px;line-height:1.4}
.tt-navdrop__panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.tt-navdrop:hover .tt-navdrop__panel,.tt-navdrop:focus-within .tt-navdrop__panel{display:flex}
.tt-navdrop__col{display:flex;flex-direction:column;gap:6px;min-width:150px}
.tt-navdrop__h{font-family:"Chakra Petch","Rigid Square",system-ui,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7b8494;font-weight:600;margin-bottom:4px;white-space:nowrap}
.tt-navdrop__panel a{display:block;color:#0c1320;white-space:nowrap;text-decoration:none;font-weight:500}
.tt-navdrop__panel a:hover,.tt-navdrop__panel a:focus-visible{color:#1f5bff}
.tt-navdrop__all{color:#1f5bff!important;font-size:13px;margin-top:2px}
@media (prefers-reduced-motion:no-preference){.tt-navdrop__panel{animation:tt-navdrop-in .12s ease-out}}
@keyframes tt-navdrop-in{from{opacity:0;transform:translate(-50%,0)}to{opacity:1;transform:translate(-50%,6px)}}

/* Mobile navigation (Lane 5). Hidden on desktop; the hamburger + call button show at ≤767px.
   The panel is a <details>, so it works with JavaScript off. It is positioned absolutely against the
   sticky <header> (position:fixed would be trapped by the header's backdrop-filter), so headers that
   are not 70px tall set --tt-header-h on the <header>. */
.tt-mnav{display:none;align-items:center;gap:4px;margin-left:auto}
.tt-mnav__call,.tt-mnav__toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border-radius:10px;color:#0c1320;background:transparent;border:0;cursor:pointer;text-decoration:none}
.tt-mnav__call svg{width:22px;height:22px}
.tt-mnav__call{color:#1f5bff}
.tt-mnav__toggle{gap:8px;padding:0 6px;list-style:none;font:inherit;font-size:14px;font-weight:600;-webkit-tap-highlight-color:transparent}
.tt-mnav__toggle::-webkit-details-marker{display:none}
.tt-mnav__toggle::marker{content:""}
.tt-mnav__bars{position:relative;width:22px;height:16px;display:block}
.tt-mnav__bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
.tt-mnav__bars i:nth-child(1){top:0}.tt-mnav__bars i:nth-child(2){top:7px}.tt-mnav__bars i:nth-child(3){top:14px}
.tt-mnav__details[open] .tt-mnav__bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tt-mnav__details[open] .tt-mnav__bars i:nth-child(2){opacity:0}
.tt-mnav__details[open] .tt-mnav__bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.tt-mnav__details{position:static}
.tt-mnav__panel{position:absolute;left:0;right:0;top:100%;height:calc(100dvh - var(--tt-header-h,70px));z-index:60;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;border-top:1px solid #e2e6ec;padding:18px 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:22px;font-size:17px;line-height:1.35}
.tt-mnav__search{display:flex;gap:8px}
.tt-mnav__search input{flex:1;min-width:0;height:46px;padding:0 14px;border:1px solid #cfd6e0;border-radius:10px;background:#f4f6fa;font:inherit;font-size:16px;color:#0c1320}
.tt-mnav__search input:focus{outline:2px solid #1f5bff;outline-offset:2px;background:#fff}
.tt-mnav__search button{width:46px;height:46px;border:0;border-radius:10px;background:#1f5bff;color:#fff;display:grid;place-items:center;cursor:pointer}
.tt-mnav__search button svg{width:20px;height:20px}
.tt-mnav__links{display:flex;flex-direction:column}
.tt-mnav__links a{display:block;padding:12px 0;min-height:44px;font-family:"Chakra Petch","Rigid Square",system-ui,sans-serif;font-size:20px;font-weight:500;color:#0c1320;text-decoration:none;border-bottom:1px solid #eef1f5}
.tt-mnav__links a:last-child{border-bottom:0}
.tt-mnav__shop{display:flex;flex-direction:column;gap:16px;padding-top:4px;border-top:1px solid #e2e6ec}
.tt-mnav__eyebrow{font-family:"Chakra Petch","Rigid Square",system-ui,sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#7b8494;font-weight:600;margin:14px 0 8px}
.tt-mnav__chips{display:flex;flex-wrap:wrap;gap:8px}
.tt-mnav__chips a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:1px solid #e2e6ec;border-radius:9px;background:#f4f6fa;font-size:14.5px;font-weight:500;color:#0c1320;text-decoration:none}
.tt-mnav__chips a.tt-mnav__more{color:#1f5bff;background:#fff}
.tt-mnav__contact{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:1px solid #e2e6ec;margin-top:auto}
.tt-mnav__btn{display:flex;align-items:center;justify-content:center;height:48px;border-radius:10px;background:#1f5bff;color:#fff;font-weight:600;text-decoration:none;box-shadow:0 14px 32px -14px rgba(31,91,255,.45)}
.tt-mnav__mail{color:#515b6b;text-decoration:none;font-size:15px}
.tt-mnav__social{display:flex;gap:16px;font-size:15px}
.tt-mnav__social a{color:#515b6b;text-decoration:none}
.tt-mnav-open,.tt-mnav-open body{overflow:hidden}
@media (max-width:767px){
  .tt-mnav{display:inline-flex}
  .tt-navdrop__panel{display:none!important}
}
@media (min-width:768px){.tt-mnav{display:none}}
@media (prefers-reduced-motion:reduce){.tt-mnav__bars i{transition:none}}

/* Header search on the marketing pages (desktop; the mobile menu has its own field). */
.tt-hsearch{position:relative;display:inline-flex;align-items:center;margin:0}
.tt-hsearch svg{position:absolute;left:11px;width:16px;height:16px;color:#7b8494;pointer-events:none}
.tt-hsearch input{width:160px;height:38px;padding:0 12px 0 34px;border:1px solid #cfd6e0;border-radius:9px;background:#fff;font:inherit;font-size:14px;color:#0c1320;transition:width .15s ease,border-color .15s ease}
.tt-hsearch input::placeholder{color:#7b8494}
.tt-hsearch input:focus{width:220px;outline:2px solid #1f5bff;outline-offset:2px;border-color:#1f5bff}
/* Below 1024px the marketing headers have no room for it; the Shop page and the mobile menu carry search. */
@media (max-width:1023px){.tt-hsearch{display:none}}
@media (prefers-reduced-motion:reduce){.tt-hsearch input{transition:none}}