/* ===========================================================
   Triveni Power - Nav v3
   Imported as-is from /Users/machintosh/Documents/TPTL:
     header-shared.css (tokens) + header-desktop.html <style>
     + header-mobile.html <style>
   Tokens are SCOPED to .nav, .mnav, .scrim, .sheet so the rest
   of the site keeps its own --paper / --ink / --accent values.
   =========================================================== */

/* ---- Tokens scoped to header components (light) ----
   .mnav (mobile) + .sheet/.scrim/.search keep the light palette so the
   mobile bottom sheet stays white. The desktop .nav + .mega get the dark
   palette below - this is the new default look (per design ref). */
.nav, .mnav, .scrim, .sheet, .search, .mega {
  --ink:#231F20;
  --ink-2:#3a3537;
  --ink-3:#6b6468;
  --ink-4:#9a9296;
  --paper:#F6F4F1;
  --paper-2:#EDEAE4;
  --line:#E6E2DC;
  --line-2:#D8D2CB;
  --orange:#F58220;
  --orange-ink:#C56614;
  --white:#ffffff;
  --paper-rgb: 246,244,241;
  --f-display:"Raleway", ui-sans-serif, system-ui, sans-serif;
  --f-ui:"Inter", ui-sans-serif, system-ui, sans-serif;
}

/* ---- Desktop nav + mobile nav + mega: always dark ---- */
.nav, .mnav, .mega {
  --ink:#F4F0EA;
  --ink-2:#E1DCD5;
  --ink-3:#A7A0A4;
  --ink-4:#7A7378;
  --paper:#0A0809;
  --paper-2:#161315;
  --line:#2A2627;
  --line-2:#3a3537;
  --orange:#F58220;
  --orange-ink:#F7A25C;
  --paper-rgb: 11,10,11;
}

/* ---- Tokens scoped to header components (dark) ---- */
[data-theme="dark"] .nav,
[data-theme="dark"] .mnav,
[data-theme="dark"] .scrim,
[data-theme="dark"] .sheet,
[data-theme="dark"] .search,
[data-theme="dark"] .mega {
  --ink:#F4F0EA;
  --ink-2:#D8D2CB;
  --ink-3:#9a9296;
  --ink-4:#6b6468;
  --paper:#141112;
  --paper-2:#1E1A1B;
  --line:#2A2627;
  --line-2:#3a3537;
  --orange:#F58220;
  --orange-ink:#F7A25C;
  --white:#ffffff;
  --paper-rgb: 20,17,18;
}

/* ---- Light theme - restore the light token set on .nav / .mega
   so the dropdown picks up a white surface + dark text via
   var(--paper) and var(--ink), overriding the always-dark default
   above. Sheet bottom-sheet also opted-in so its dividers/colours
   pick up light values too (was missing - separator lines between
   menu rows looked invisible in light mode). ---- */
[data-theme="light"] .nav,
[data-theme="light"] .mnav,
[data-theme="light"] .mega,
[data-theme="light"] .sheet,
[data-theme="light"] .scrim {
  --ink:#231F20;
  --ink-2:#3a3537;
  --ink-3:#6b6468;
  --ink-4:#9a9296;
  --paper:#FFFFFF;
  --paper-2:#F4F1EC;
  --line:#D8D2CB;
  --line-2:#B8B0A9;
  --orange:#F58220;
  --orange-ink:#C56614;
  --paper-rgb: 255,255,255;
}

/* Belt-and-braces: directly anchor the menu-row divider colour
   in light mode so even if the cascaded --line var gets clobbered
   by another rule the dividers stay visible. */
[data-theme="light"] .sheet__item {
  border-bottom-color: #D8D2CB;
}

[data-theme="light"] .mega {
  background: #FFFFFF;
  border-top-color: rgba(35, 31, 32, 0.10);
  border-bottom-color: rgba(35, 31, 32, 0.10);
  box-shadow: 0 20px 40px rgba(35, 31, 32, 0.10);
}

/* ==========================================================
   DESKTOP HEADER (.nav)
========================================================== */
.nav{
  /* Floats over the hero image as a permanent solid dark panel -
     no hover transitions, always visible, fully opaque. */
  position: fixed; top:0; left:0; right:0; z-index:55;
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
  background: #0A0A0A;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-family: var(--f-display);
}
.nav.is-hidden{ transform: translateY(-100%); }

/* Hide desktop nav below 1024px (tablets incl. iPad portrait use .mnav).
   1024px matches the sheet's desktop breakpoint so the mobile bar pairs
   with the mobile bottom-sheet, and the desktop nav + mega start together. */
@media (max-width: 1023px){
  .nav { display: none; }
}


/* Hide nav links/anchors text decoration to match source defaults */
.nav a, .mnav a, .sheet a { text-decoration: none; color: inherit; }
.nav button, .mnav button, .sheet button {
  font-family: inherit; border: 0; background: none; color: inherit; cursor: pointer;
}
.nav svg, .mnav svg, .sheet svg, .scrim svg { display: block; }

/* Utility bar */
.nav__utility{
  border-bottom:1px solid var(--line);
  font-size: var(--fs-xs);color:var(--ink-3);
  transition: max-height .3s ease, opacity .2s ease;
  max-height:44px;overflow:hidden;
}
.nav.is-scrolled .nav__utility{max-height:0;opacity:0;border-bottom-color:transparent}
.nav__utility-inner{
  max-width:1360px;margin:0 auto;
  padding: 0 clamp(20px, 3vw, 40px);
  height:44px;display:flex;align-items:center;justify-content:flex-end;
}
.util-row{
  display:flex;align-items:center;gap:24px;
  font-size: var(--fs-xs);letter-spacing:.02em;color:var(--ink-3);
}
.util-row a{transition:color .2s}
.util-row a:hover{color:var(--ink)}
.util-sep{display:inline-block;width:1px;height:14px;background:var(--line)}
.nav__utility-right{display:flex;align-items:center;gap:4px}
.nav__utility-right button, .nav__utility-right a{
  height:28px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;
  font-size: var(--fs-xs);letter-spacing:.02em;color:var(--ink-3);border-radius:4px;
  transition: color .2s, background .2s;
}
.nav__utility-right button:hover, .nav__utility-right a:hover{color:var(--ink);background:var(--paper-2)}

/* Main bar */
.nav__main{
  max-width:1360px;margin:0 auto;
  padding: 0 clamp(20px, 3vw, 40px);
  height:76px;display:flex;align-items:center;gap:40px;
  position: relative;
}
.nav__logo{display:flex;align-items:center;height:46px;flex:none}
.nav__logo svg, .nav__logo img{height:46px;width:auto;color:var(--ink);display:block}

/* Two pre-coloured logo files - show the right one based on theme.
   Class is .logo-img on root pages, .nav__logo-img / .mnav__logo-img
   on inner pages (injected by page-shell.js). The .nav__logo /
   .mnav__logo parent qualifier here is needed so specificity beats
   the .nav__logo img { display:block } rule above.
   Default (dark theme) = white logo. [data-theme="light"] = dark logo. */
.nav__logo .logo-img--on-light,
.nav__logo .nav__logo-img--on-light,
.mnav__logo .logo-img--on-light,
.mnav__logo .mnav__logo-img--on-light { display: none; }

[data-theme="light"] .nav__logo .logo-img--on-dark,
[data-theme="light"] .nav__logo .nav__logo-img--on-dark,
[data-theme="light"] .mnav__logo .logo-img--on-dark,
[data-theme="light"] .mnav__logo .mnav__logo-img--on-dark { display: none; }

[data-theme="light"] .nav__logo .logo-img--on-light,
[data-theme="light"] .nav__logo .nav__logo-img--on-light,
[data-theme="light"] .mnav__logo .logo-img--on-light,
[data-theme="light"] .mnav__logo .mnav__logo-img--on-light { display: block; }
.nav__links{
  position: relative;           /* pill is absolute inside here */
  display:flex;align-items:center;gap:4px;margin-left:12px;
}

/* Glass-pill hover indicator disabled - links rely on the orange color
   change + underline only for hover feedback. */
.nav__pill { display: none !important; }

/* (legacy pill styling kept below in case re-enabled - has no effect
   while .nav__pill is display:none.) */
.nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 40px;
  width: 80px;                  /* real width set by JS on first hover */
  margin-top: -20px;
  border-radius: 10px;

  /* Glass fill on dark nav, with a subtle vertical sheen */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.06) 100%);
  backdrop-filter: blur(10px) saturate(170%);
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),   /* top sheen */
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),        /* lower edge */
    0 6px 22px rgba(0, 0, 0, 0.22);            /* depth shadow */

  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transform-origin: center;
  transform: translateX(0) scale(1);
  will-change: transform, width, opacity;

  /* Expo-out easing: fast start → feather stop = premium corporate feel.
     Width snaps a touch faster than the slide so the pill doesn't appear
     to "stretch" while moving. */
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    width     320ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity   220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Thin orange accent line that fades in beneath the pill - Mastercard's
   signature dual-layer treatment (soft fill + crisp brand accent). */
.nav__pill::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--orange) 20%,
    var(--orange) 80%,
    transparent 100%);
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition:
    opacity 220ms cubic-bezier(0.4, 0, 0.2, 1) 80ms,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1) 60ms;
}

/* Visible state - toggled by JS via .is-visible.
   JS sets the inline `transform` (translateX + scale) so the position can be
   interpolated. The class only handles opacity + the orange accent. */
.nav__pill.is-visible{ opacity: 1; }
.nav__pill.is-visible::after{
  opacity: 0.9;
  transform: scaleX(1);
}

/* On touch-only devices, hover is fake - disable the pill entirely so it
   doesn't get "stuck" after a tap. */
@media (hover: none) {
  .nav__pill { display: none; }
}

.nav__link {
  position: relative;
  z-index: 1;                   /* always above the pill */
  height: 76px; display: flex; align-items: center; gap: 6px;
  padding: 0 16px;
  font-size: var(--fs-s); font-weight: 500; color: var(--ink-2);
  letter-spacing: .01em;
  white-space: nowrap;          /* keep multi-word labels like 'Industry & Applications' on one line */
  transition: color 250ms ease;
}
/* Links sit on a permanent dark glass panel; ink-2 by default,
   bright orange when hovered/focused. */
.nav__link:hover                  { color: var(--orange); }
.nav__link:focus-visible          { color: var(--orange); outline: none; }
.nav__link[aria-expanded="true"]  { color: var(--ink); }

.nav__link .caret {
  width: 10px; height: 10px; opacity: .5;
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav__link[aria-expanded="true"] .caret { transform: rotate(180deg); opacity: 1; }

/* Orange underline - sweeps in left-to-right on hover, focus, and the
   active / open states. Uses the same expo-out curve as the pill. */
.nav__link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px;
  height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-expanded="true"]::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__spacer{flex:1}
.nav__right{display:flex;align-items:center;gap:16px;flex:none}
.icon-btn{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);transition:background .2s, color .2s;
}
.icon-btn:hover{background:var(--paper-2);color:var(--ink)}

/* Desktop hamburger trigger - opens the same .sheet drawer used on mobile.
   Visual: outlined pill matching .icon-btn rhythm, with two short bars +
   "Menu" label. Hover fills with ink. */
.nav__menu-btn{
  height:40px;padding: 0 16px 0 14px;
  border-radius:999px;
  border:1px solid var(--line, rgba(0,0,0,0.12));
  background: transparent; color: var(--ink, #231F20);
  display:inline-flex;align-items:center;gap:10px;
  font-family: var(--f-display);
  font-size: var(--fs-xs);font-weight:500;letter-spacing:.01em;
  cursor:pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.nav__menu-btn:hover{
  background: var(--ink, #231F20);
  color: var(--paper, #fff);
  border-color: var(--ink, #231F20);
}
.nav__menu-btn:focus-visible{
  outline: 2px solid var(--orange, #F58220);
  outline-offset: 2px;
}
/* Standard 3-line hamburger so it reads as a menu icon. The markup has
   two <i> bars; the third line is drawn with ::after (a flex item), so
   no need to edit the nav markup across all shared-chrome pages. */
.nav__menu-btn-bars{ display:flex; flex-direction:column; justify-content:center; gap:3px; width:18px; }
.nav__menu-btn-bars i,
.nav__menu-btn-bars::after{
  content:"";
  display:block; width:100%; height:2px; background: currentColor; border-radius:2px;
}
.cta{
  height:44px;padding:0 20px;
  background: var(--ink);color: var(--paper);
  border-radius:999px;
  display:inline-flex;align-items:center;gap:10px;
  font-size: var(--fs-xs);font-weight:400;letter-spacing:.01em;
  transition: background .2s, color .2s, transform .2s;
  position:relative;
}
.cta:hover{background: var(--orange); color:#fff}
.cta:active{transform:translateY(1px)}
.cta .dlicon{width:14px;height:14px;position:relative;z-index:2}

/* Shimmer CTA - outlined orange variant.
   Idle state: transparent fill with a 1.5px orange ring + orange text.
   Hover: fills with the original orange gradient + white text + glow,
   so the button still feels "primary" on action. The internal __bg
   radial highlights only fade in once hovered (kept hidden when idle
   to keep the outline crisp). */
.shimmer-cta{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  color: var(--orange, #F58220) !important;
  border: 1.5px solid var(--orange, #F58220);
  box-shadow: none;
  transition:
    transform .35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow .35s ease,
    background .25s,
    color .2s,
    border-color .2s;
}
.shimmer-cta:hover{
  background: linear-gradient(180deg, var(--accent) 0%, #C56614 100%);
  color: #fff !important;
  border-color: var(--accent);
  /* Subtle lift + slight scale = premium tactile feel */
  transform: translateY(-1px) scale(1.025);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -1px 0 rgba(0,0,0,.15) inset,
    0 14px 32px -6px rgba(245,130,32,.75),
    0 0 22px rgba(245,130,32,.45),                  /* soft outer orange glow */
    0 4px 10px -1px rgba(0,0,0,.3);
}
.shimmer-cta__label{ position: relative; z-index: 2; }
.shimmer-cta__bg{
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,200,140,.55) 0%, rgba(255,200,140,0) 45%),
    radial-gradient(120% 120% at 80% 100%, rgba(255,120,30,.35) 0%, rgba(255,120,30,0) 50%);
  opacity: 0;                  /* hidden in outline state */
  transition: opacity .25s;
  pointer-events: none;
}
.shimmer-cta:hover .shimmer-cta__bg{ opacity: .9; }
/* Shine sweep removed - keep the element hidden so the existing markup
   (<span class="shimmer-cta__shine">) doesn't render anything. */
.shimmer-cta__shine{ display: none; }

/* =========================================================
   PILL THEME TOGGLE
   Light mode : gray pill · dark thumb RIGHT · sun LEFT
   Dark mode  : dark pill · white thumb LEFT · moon+stars RIGHT
   ========================================================= */
.nav .theme-toggle,
.mnav .theme-toggle,
.mnav__actions .theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 56px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: #CECECE;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.18);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
[data-theme="dark"] .nav .theme-toggle,
[data-theme="dark"] .mnav .theme-toggle,
[data-theme="dark"] .mnav__actions .theme-toggle {
  background: #1C1C1C;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.08);
}

/* Sliding thumb */
.theme-toggle__thumb {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  top: 3px;
  left: 31px;               /* light mode: thumb on RIGHT (56-22-3=31) */
  background: #1C1C1C;
  box-shadow: 0 1px 5px rgba(0,0,0,0.40);
  transition: left 0.32s cubic-bezier(.2,.8,.2,1), background 0.3s ease;
  z-index: 2;
}
[data-theme="dark"] .theme-toggle__thumb {
  left: 3px;                /* dark mode: thumb on LEFT */
  background: #FFFFFF;
}

/* Sun icon - fixed LEFT, visible in light mode */
.theme-toggle .t-sun {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: #2a2a2a;
  opacity: 1;
  transition: opacity 0.2s ease;
  z-index: 1;
}
[data-theme="dark"] .theme-toggle .t-sun { opacity: 0; }

/* Moon+stars icon - fixed RIGHT, visible in dark mode */
.theme-toggle .t-moon {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}
[data-theme="dark"] .theme-toggle .t-moon { opacity: 1; }

/* ── Nav Backdrop - dark scrim, only appears on mega-menu hover ── */
.nav-backdrop {
  display: none;            /* completely out of render tree by default */
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
/* Step 1: render it (display:block), opacity still 0 */
.nav-backdrop.is-ready {
  display: block;
}
/* Step 2 (next frame): fade in */
.nav-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================
   MEGA MENU
========================================================== */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background: var(--paper);
  color: var(--ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow: 0 20px 40px rgba(35,31,32,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;   /* above the backdrop (z:45) */
}
.mega.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.mega__inner{
  max-width:1360px;margin:0 auto;
  padding: 36px clamp(20px, 3vw, 40px) 40px;
  display:grid;grid-template-columns: repeat(4, 1fr) 1.2fr;gap:36px;
  /* Locked baseline so Products / Solutions / Company panels match
     in height regardless of how many link rows each one has.
     Products keeps to this height by laying its Category sub-
     sections out in a 2-col internal grid (see .mega--products
     .mega__section--type rules below). */
  min-height: 440px;
}
.mega--products .mega__inner{
  /* 3-col, featured FIRST: Featured card + Category (2-col internal) +
     Design Type. Category gets ~2x because it carries 14 items
     across 3 sub-sections laid out in 2 internal columns. */
  grid-template-columns: 1fr 2fr 0.9fr;
  gap: 28px;
}

/* Category column - lays its h4 across the top, then 2 internal
   columns with HIGH SPEED in col 1 (taller, 7 items) and NICHE SLOW
   SPEED + SPECIAL GEAR SYSTEM stacked in col 2 (4 + 3 items). This
   keeps the panel height in line with the Industry and Company megas. */
.mega--products .mega__section--type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: clamp(20px, 2vw, 32px);
  row-gap: 4px;
}
.mega--products .mega__section--type > h4 {
  grid-column: 1 / -1;
  grid-row: 1;
  /* The inner grid stretches to fill its outer .mega__inner row
     (min-height: 440px), and its row tracks pick up the extra
     height - which made the h4 taller than its plain-block twin
     in the Design Type column. align-self: start pins the h4
     to its content height so its border-bottom line aligns with
     the Design Type h4's border-bottom line. */
  align-self: start;
}
.mega--products .mega__sub:nth-of-type(1) { /* HIGH SPEED */
  grid-column: 1;
  grid-row: 2 / span 2;
}
.mega--products .mega__sub:nth-of-type(2) { /* NICHE SLOW SPEED */
  grid-column: 2;
  grid-row: 2;
}
.mega--products .mega__sub:nth-of-type(3) { /* SPECIAL GEAR SYSTEM */
  grid-column: 2;
  grid-row: 3;
}
.mega--products .mega__sub { margin-top: 0; }
.mega--products .mega__section--type .mega__sub:nth-of-type(3) {
  margin-top: 14px;
}
.mega--products .mega__sub-title {
  font-family: var(--f-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}
[data-theme="light"] .mega--products .mega__sub-title {
  color: rgba(35, 31, 32, 0.58);
}
/* Solutions: feature card + single link col (matches Products,
   featured FIRST). */
.mega[data-mega-panel="solutions"] .mega__inner{
  grid-template-columns: 1fr 1.6fr;
  gap:32px;
}
/* Industry (9 entries) and Company (8 entries) lists are laid out
   in 2 columns inside their single .mega__col so neither panel
   towers over the others. */
.mega[data-mega-panel="solutions"] .mega__col ul,
.mega[data-mega-panel="about"] .mega__col ul{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 2px;
}
/* About: feature card + single link col (matches Products,
   featured FIRST). */
.mega[data-mega-panel="about"] .mega__inner{
  grid-template-columns: 1fr 1.6fr;
  gap:32px;
}

/* Solutions / About mega: hero-image featured card with dark overlay */
.mega[data-mega-panel="solutions"] .mega__feature,
.mega[data-mega-panel="about"] .mega__feature{
  min-height: 220px;
  padding: 24px;
  position: relative;
}
.mega[data-mega-panel="solutions"] .mega__feature{
  background:
    linear-gradient(180deg, rgba(10,8,9,0.82) 0%, rgba(10,8,9,0.78) 100%),
    url("../assets/process-industries.webp") center / cover no-repeat,
    var(--ink);
}
.mega[data-mega-panel="about"] .mega__feature{
  background:
    linear-gradient(180deg, rgba(10,8,9,0.82) 0%, rgba(10,8,9,0.78) 100%),
    url("../assets/about-company-hero.webp") center / cover no-repeat,
    var(--ink);
}
.mega[data-mega-panel="solutions"] .mega__feature::after,
.mega[data-mega-panel="about"] .mega__feature::after{ display:none; }
/* Company featured card: the 50-year mark is shown LARGE in place of
   the text heading. Hide the h5, reserve space, and lay the logo into
   that space (left-aligned, below the ABOUT tag). Ratio 91.7:40.8.
   The base .mega__feature::after sets inset:0, so the unused edges are
   reset to auto here. */
.mega[data-mega-panel="about"] .mega__feature h5 { display:none; }
.mega[data-mega-panel="about"] .mega__feature p  { margin-top:104px; }
.mega[data-mega-panel="about"] .mega__feature::after{
  display:block;
  content:"";
  position:absolute;
  inset:50px auto auto 24px;   /* top right bottom left */
  width:200px;
  height:89px;
  background:url("../assets/tptl-50-years.svg") no-repeat left center / contain;
  pointer-events:none;
  z-index:2;
}
.mega[data-mega-panel="solutions"] .mega__feature .tag,
.mega[data-mega-panel="about"] .mega__feature .tag{
  font-size: 12px;
}
.mega[data-mega-panel="solutions"] .mega__feature h5,
.mega[data-mega-panel="about"] .mega__feature h5{
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  margin: 6px 0 6px;
  color: #FFFFFF;
  max-width: 20ch;
}
.mega[data-mega-panel="solutions"] .mega__feature p,
.mega[data-mega-panel="about"] .mega__feature p{
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  max-width: 38ch;
}
.mega[data-mega-panel="solutions"] .mega__feature .ft-link,
.mega[data-mega-panel="about"] .mega__feature .ft-link{
  font-size: 13px;
  font-weight: 600;
  padding-top: 14px;
  color: #FFFFFF;
}
/* Single column - matches Solutions / Company. */
.mega--products .mega__section ul{
  grid-template-columns: 1fr;
}
.mega__section h4{
  font-family:var(--f-display);font-size: var(--fs-xs);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.mega__section ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;grid-template-columns:1fr}
.mega__section li a{
  display:block;padding:3px 10px 3px 0;margin: 0 -10px 0 0;
  font-family:var(--f-display);font-size: var(--fs-s);font-weight:700;color:var(--ink-2);
  border-radius:6px;
  transition: color .15s, transform .2s;
  position:relative;
  letter-spacing:-.005em;
}
/* Right-side arrow indicator instead of the old orange dash on the
   left. Default invisible; on hover it fades in and slides right.
   The row also picks up a soft background tint and the text colour
   firms up. */
.mega__section li a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-left:10px;
}
.mega__section li a::after{
  content:"→";
  font-family:inherit;font-size: var(--fs-s);font-weight:500;
  line-height:1;
  color: currentColor;
  opacity:0;
  transform: translateX(-6px);
  transition: opacity .22s ease, transform .22s ease;
  flex-shrink:0;
}
.mega__section li a:hover{
  color:var(--ink);
  background: rgba(245, 130, 32, 0.06);
}
.mega__section li a:hover::after{
  opacity:1;
  transform: translateX(0);
}
.mega__col h4{
  font-family:var(--f-display);font-size: var(--fs-xs);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.mega__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mega__col li a{
  display:block;padding:8px 10px 8px 0;margin: 0 -10px 0 0;
  font-family:var(--f-display);font-size: var(--fs-s);font-weight:700;color:var(--ink-2);
  border-radius:6px;
  transition: color .15s, transform .2s, background .15s;
  position:relative;
  letter-spacing:-.005em;
}
.mega__col li a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-left:10px;
}
.mega__col li a::after{
  content:"→";
  font-family:inherit;font-size: var(--fs-s);font-weight:500;
  line-height:1;
  color: currentColor;
  opacity:0;
  transform: translateX(-6px);
  transition: opacity .22s ease, transform .22s ease;
  flex-shrink:0;
}
.mega__col li a:hover{
  color:var(--ink);
  background: rgba(245, 130, 32, 0.06);
}
.mega__col li a:hover::after{
  opacity:1;
  transform: translateX(0);
}
.mega__col li small{display:block;color:var(--ink-4);font-size: var(--fs-xs);margin-top:2px;letter-spacing:.01em}

.mega__feature{
  background: var(--ink);color:#fff;
  border-radius: 8px;overflow:hidden;
  padding: 24px;
  display:flex;flex-direction:column;gap:10px;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(245,130,32,.22), transparent 50%),
    linear-gradient(180deg, #2c2728 0%, #231F20 100%);
  min-height: 220px;
  position:relative;overflow:hidden;
}
.mega__feature::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 14px);
}
.mega__feature .tag{
  font-size: var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--orange);
  font-weight:500;
}
.mega__feature h5{
  font-family:var(--f-display);font-weight:400;font-size: var(--fs-m);line-height:1.2;
  margin:6px 0 4px;letter-spacing:-.01em;
}
.mega__feature p{margin:0;font-size: var(--fs-xs);line-height:1.55;color:#c9c3c0}
.mega__feature .ft-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size: var(--fs-xs);color:#fff;font-weight:500;
  padding-top:14px;
}
.mega__feature .ft-link svg{transition:transform .2s}
.mega__feature:hover .ft-link svg{transform:translateX(4px)}

/* Products mega: featured card with the products-page hero image.
   Heavy dark overlay so the orange + white type reads cleanly. */
.mega--products .mega__feature{
  min-height: 220px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(10,8,9,0.82) 0%, rgba(10,8,9,0.78) 100%),
    url("../assets/products-hero.webp") center / cover no-repeat,
    var(--ink);
  position: relative;
}
.mega--products .mega__feature::after{ display:none; }
.mega--products .mega__feature .tag{
  font-size: 12px;
}
.mega--products .mega__feature h5{
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  margin: 6px 0 6px;
  color: #FFFFFF;
  max-width: 20ch;
}
.mega--products .mega__feature p{
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  max-width: 38ch;
}
.mega--products .mega__feature .ft-link{
  font-size: 13px;
  font-weight: 600;
  padding-top: 14px;
  color: #FFFFFF;
}

/* ==========================================================
   FULL-SCREEN SEARCH TAKEOVER
   Inspired by JioHotstar/Hotstar: dark glass cover, big input,
   removable recent-searches chips, poster-style filterable grid.
   Markup is rendered by js/search.js on first open.
   ========================================================== */
.search{
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.search.is-open{ visibility: visible; opacity: 1; pointer-events: auto; }
.search__overlay{
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 10, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}
.search__shell{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
}

/* Sticky head: input + close button */
.search__head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 4vw, 80px);
  background: rgba(8, 7, 10, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.search__field{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  transition: border-color .2s ease, background .2s ease;
}
.search__field:focus-within{
  border-color: rgba(245, 130, 32, 0.55);
  background: rgba(255, 255, 255, 0.08);
}
.search__field-icon{
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.search__input{
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-m);
  color: #FFFFFF;
  letter-spacing: -.005em;
  outline: none;
}
.search__input::placeholder{ color: rgba(255, 255, 255, 0.45); }
.search__close{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.search__close:hover{
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
  transform: scale(1.04);
}

/* Scrollable body. Extra top padding gives the topmost row of
   poster cards room to absorb the .search__card:hover scale-up
   without clipping against the .search__head bottom edge. */
.search__body{
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(40px, 4vw, 56px) clamp(20px, 4vw, 80px) clamp(40px, 5vw, 64px);
}

/* Recent searches row */
.search__recent{
  padding-bottom: clamp(16px, 2vw, 22px);
  margin-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.search__recent-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.search__chip{
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease;
}
.search__chip:hover{
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
}
.search__chip-text{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 8px 14px;
  font-family: var(--f-display);
  font-size: var(--fs-s);
  color: #FFFFFF;
  text-decoration: none;
}
.search__chip-clock{ color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.search__chip-x{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color .2s ease;
}
.search__chip-x:hover{ color: #FFFFFF; }

/* Flat poster grid - single continuous row of cards, no section
   headers. Cards are direct children of #searchGrid via the
   .search__grid--flat modifier. */
.search__grid--flat{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
.search__card{
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;          /* poster shape */
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #14111A;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  outline: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform .22s ease, box-shadow .22s ease, outline-color .22s ease;
}
.search__card[hidden]{ display: none; }
.search__card:hover{
  /* Netflix-style scale up: card grows and lifts above its
     neighbours via z-index so the reveal overlay below can show
     name + keyword tagline + CTA inside the expanded card.
     transform-origin is biased downward so the topmost row
     mostly grows down rather than up into the search header. */
  transform: scale(1.22);
  transform-origin: center 65%;
  z-index: 10;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.62);
  outline-color: rgba(245, 130, 32, 0.7);
}
/* Bottom-up gradient scrim so the overlaid title reads against
   any photo. */
.search__card::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  background: linear-gradient(180deg,
    rgba(8, 7, 10, 0) 0%,
    rgba(8, 7, 10, 0.35) 45%,
    rgba(8, 7, 10, 0.88) 100%);
  pointer-events: none;
  z-index: 1;
}
.search__card-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.search__card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s ease;
}
.search__card:hover .search__card-media img{ transform: scale(1.05); }
.search__card-name{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(12px, 1.6vw, 18px) clamp(12px, 1.4vw, 16px);
  font-family: var(--f-display);
  /* Was var(--fs-l) (24px) which clipped longer names like
     'Manufacturing Excellence' and 'Petrochemical & Refinery'
     on ~165px-wide cards. Fluid clamp keeps short names readable
     while letting longer ones fit inside the card padding. */
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.005em;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  /* Hard guard against any name still overflowing the card width */
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: opacity 180ms ease;
}
/* Fade the resting name out once the hover overlay fades in. */
.search__card:hover .search__card-name { opacity: 0; }

/* Hover-reveal overlay: name + keyword tagline + Explore CTA.
   Sits on top of the poster image, hidden by default, fades in
   with the scale-up. */
.search__card-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: clamp(12px, 1.6vw, 18px);
  background: linear-gradient(180deg,
    rgba(8, 7, 10, 0) 0%,
    rgba(8, 7, 10, 0.55) 45%,
    rgba(8, 7, 10, 0.95) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease 30ms;
}
.search__card:hover .search__card-hover {
  opacity: 1;
  pointer-events: auto;
}
.search__card-hover-name {
  font-family: var(--f-display);
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 700;
  line-height: 1.18;
  color: #FFFFFF;
  letter-spacing: -.005em;
}
.search__card-hover-aliases {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
  /* Trim to a single line - aliases are short keyword tags */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search__card-hover-cta {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #F58220);
  margin-top: 4px;
}
.search__card-hover-cta span { display: inline-block; margin-left: 2px; }

.search__empty{
  font-family: var(--f-display);
  font-size: var(--fs-m);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: clamp(40px, 8vw, 80px) 0;
}

/* Light-mode override - the overlay stays dark because it sits
   over rich photography either way; just tighten the head's tint. */
[data-theme="light"] .search__overlay{
  background: rgba(35, 31, 32, 0.85);
}

/* Mobile tightening */
@media (max-width: 600px){
  .search__grid--flat{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .search__head{ padding: 14px 16px; }
  .search__body{ padding: 32px 16px 40px; }
  .search__field{ height: 48px; padding: 0 14px; border-radius: 12px; }
  .search__close{ width: 40px; height: 40px; }
}

/* ==========================================================
   MOBILE HEADER (.mnav)
========================================================== */
.mnav{
  position: sticky; top:0; z-index:50;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display);
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), background .2s, border-color .2s;
  border-bottom: 1px solid transparent;
}
.mnav.is-scrolled{
  background: var(--paper);
  border-bottom-color: var(--line);
}
.mnav.is-hidden{ transform: translateY(-100%); }

/* Hide mobile nav at 1024px and up (desktop uses .nav) */
@media (min-width: 1024px){
  .mnav { display: none; }
}

.mnav__utility{
  height:34px;display:flex;align-items:center;justify-content:space-between;
  padding: 0 20px;
  border-bottom:1px solid var(--line);
  font-size: var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  max-height:34px;overflow:hidden;
  transition: max-height .25s ease, border-color .2s, opacity .2s;
}
.mnav.is-scrolled .mnav__utility{max-height:0;opacity:0;border-bottom-color:transparent}
.mnav__utility .tag{color:var(--orange);font-weight:600}
.mnav__utility span.sep{opacity:.35;margin:0 8px}

.mnav__main{
  height:62px;
  padding: 0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.mnav__logo{display:flex;align-items:center;height:36px}
.mnav__logo img,
.mnav__logo svg{height:34px;width:auto;color:var(--ink);display:block}

/* (mobile theme-swap rules consolidated into the nav block above) */
.mnav__actions{display:flex;align-items:center;gap:6px}

/* Vertical separator between search icon and theme toggle.
   The search button is a 40×40 circle with the icon inset by
   ~11px, while the theme toggle pill has very little internal
   padding at its edge. Equal CSS gap therefore reads as more
   space on the search side. Compensating with a small negative
   left margin / positive right margin so the *visual* gap on
   each side of the line matches. */
.nav__sep{
  display:inline-block;
  width:1px;height:20px;
  background: var(--ink-3, rgba(0,0,0,0.18));
  opacity:.55;
  margin: 0 4px 0 -4px;
  flex-shrink:0;
}
.mnav__icon{
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);
}
.mnav__icon:active{background:var(--paper-2)}
.mnav__menu{
  margin-left:4px;
  height:40px;padding: 0 14px 0 12px;
  border-radius:999px;
  background: var(--ink);color: var(--paper);
  display:inline-flex;align-items:center;gap:8px;
  font-size: var(--fs-xs);font-weight:500;letter-spacing:.01em;
  transition: background .25s, color .25s;
}
.mnav__menu .bars{display:flex;flex-direction:column;gap:3px;width:14px}
.mnav__menu .bars i{display:block;height:1.5px;background: var(--paper);border-radius:2px;transition: background .25s}
.mnav__menu .bars i:nth-child(2){width:10px;margin-left:auto}

/* Icon-only hamburger variant (mobile) - no "Menu" label, three even
   bars, transparent pill so it reads as a tap-target without a chip. */
.mnav__menu--icon{
  width:42px;height:42px;padding:0;
  background: transparent;color: var(--ink-2);
  justify-content:center;
  border-radius:50%;
}
.mnav__menu--icon .bars{width:18px;gap:4px}
.mnav__menu--icon .bars i{background: currentColor;}
.mnav__menu--icon .bars i:nth-child(2){width:100%;margin-left:0}
.mnav__menu--icon:active{background: var(--paper-2);}

/* ==========================================================
   MOBILE SEARCH (inline below main)
========================================================== */
.msearch{
  max-height:0;overflow:hidden;
  transition: max-height .25s ease, border-color .2s;
  border-bottom: 1px solid transparent;
}
.msearch.is-open{
  max-height:70px;border-bottom-color:var(--line);
}
.msearch__inner{
  padding: 12px 16px;
  display:flex;align-items:center;gap:10px;
  background: var(--paper-2);
}
.msearch__inner svg{color:var(--ink-3);flex:none}
.msearch__inner input{
  flex:1;border:0;background:transparent;outline:none;
  font-family:var(--f-display);font-size: var(--fs-s);color:var(--ink);
}
.msearch__inner input::placeholder{color:var(--ink-4)}
.msearch__close{
  font-size: var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding:6px 4px;
}

/* ==========================================================
   BOTTOM SHEET
========================================================== */
.scrim{
  position:fixed;inset:0;
  background: rgba(35,31,32,.48);
  backdrop-filter: blur(2px);
  opacity:0;visibility:hidden;
  transition: opacity .22s ease, visibility .22s;
  z-index: 80;
}
.scrim.is-open{opacity:1;visibility:visible}

.sheet{
  position: fixed;left:0;right:0;bottom:0;
  z-index: 81;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display);
  border-top-left-radius: 22px;border-top-right-radius: 22px;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.2,.85,.2,1);
  height: 88vh;             /* explicit height so absolutely-positioned panels resolve % heights */
  max-height: 88vh;
  display:flex;flex-direction:column;
  box-shadow: 0 -20px 60px rgba(35,31,32,.25);
  overflow:hidden;
  touch-action: pan-y;
}
.sheet.is-open{transform: translateY(0)}
.sheet__handle{
  display:flex;justify-content:center;padding:10px 0 6px;flex:none;
}
.sheet__handle i{width:44px;height:4px;background:var(--line-2);border-radius:999px;display:block}

/* =========================================================
   DESKTOP - Side drawer instead of bottom sheet
   The mobile bottom-sheet pattern looks awkward at full
   1440px width, so on >=1024px the sheet becomes a fixed
   right-anchored drawer (440px wide, full height) that
   slides in from the right edge.
   ========================================================= */
@media (min-width: 1024px) {
  .sheet{
    /* Reset bottom-sheet positioning, attach to right edge top→bottom */
    top: 0; right: 0; left: auto; bottom: 0;
    width: min(440px, 90vw);
    height: 100vh;
    max-height: 100vh;
    /* Round only the inner edge */
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    /* Slide in from the right */
    transform: translateX(100%);
    box-shadow: -24px 0 60px rgba(35, 31, 32, .22);
    touch-action: auto;
  }
  .sheet.is-open{ transform: translateX(0); }

  /* The mobile drag handle is irrelevant on desktop - hide it. */
  .sheet__handle{ display: none; }

  /* Slightly more breathing room in the head on desktop */
  .sheet__head{ padding: 18px 22px 14px; }
  .sheet__title{ text-align: left; padding-left: 4px; }

  /* Footer CTA padding for desktop spacing */
  .sheet__foot{ padding: 18px 22px calc(20px + env(safe-area-inset-bottom)); }

  /* The Primary section (Products / Solutions / Aftermarket) is already
     in the desktop main nav - hide it in the drawer so users only see the
     "extras" (Company + Connect) here. Mobile keeps it. */
  #rootPanel > .sheet__section:first-child { display: none; }

  /* With the Primary group gone, the hairline divider between sections
     would sit at the very top of the panel - drop it. */
  #rootPanel .sheet__section + .sheet__section { border-top: 0; }

  /* =========================================================
     Mega-menu style for the remaining items
     (matches .mega__col h4 + .mega__col li a)
     ========================================================= */
  #rootPanel .sheet__section-label{
    font-family: var(--f-display);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 22px 26px 12px;
    margin: 0;
    border-bottom: 1px solid var(--line);
  }

  #rootPanel .sheet__list--compact{ padding: 10px 0; }

  #rootPanel .sheet__item--sm{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 26px;
    border-bottom: 0;
    font-family: var(--f-display);
    font-size: var(--fs-m);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink-2);
    background: transparent;
    transition: color .15s, background .15s;
  }
  /* Right-side arrow indicator - mirrors the .mega__col li a::after
     micro-interaction. Default invisible; on hover it fades in and
     slides right, the row picks up a soft warm tint, text colour
     firms up. No more left-side orange dash. */
  #rootPanel .sheet__item--sm::after{
    content: "→";
    font-family: inherit;
    font-size: var(--fs-s);
    font-weight: 500;
    line-height: 1;
    color: currentColor;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .22s ease, transform .22s ease;
    flex-shrink: 0;
  }
  #rootPanel .sheet__item--sm:hover{
    color: var(--ink);
    background: rgba(245, 130, 32, 0.06);
  }
  #rootPanel .sheet__item--sm:hover::after{
    opacity: 1;
    transform: translateX(0);
  }

  /* Drop the diagonal arrow chevron on each row - mega items don't have one */
  #rootPanel .sheet__item--sm .chev.arrow{ display: none; }
}

.sheet__head{
  display:flex;align-items:center;justify-content:space-between;
  padding: 4px 16px 14px;border-bottom:1px solid var(--line);flex:none;
}
.sheet__back{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);
  opacity:0;pointer-events:none;transition:opacity .2s;
  margin-left:-8px;
}
.sheet.is-drilled .sheet__back{opacity:1;pointer-events:auto}
.sheet__title{
  font-family:var(--f-display);font-weight:400;font-size: var(--fs-m);letter-spacing:-.005em;color:var(--ink);
  flex:1;text-align:center;
}
.sheet__close{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);
  margin-right:-8px;
}
.sheet__close:active{background:var(--paper-2)}

/* sliding panel stage */
.sheet__stage{
  flex:1;min-height:0;position:relative;overflow:hidden;
}
/* Panels are positioned absolutely inside the (relative) stage so that
   their height is anchored to the stage instead of expanding to fit
   the tallest panel's content. Without this, the root panel's content
   (~830px) inflates the wrapper past the stage's 525px and the inner
   overflow:auto on .sheet__panel never engages - sub-panels get clipped
   by the foot CTA bar with no way to scroll. */
.sheet__panels{
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 200%;
  display: flex;
  transform: translateX(0);
  transition: transform .32s cubic-bezier(.2,.85,.2,1);
}
.sheet.is-drilled .sheet__panels{transform: translateX(-50%)}

.sheet__panel{
  width:50%;flex:none;height:100%;
  overflow-y:auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ROOT panel list */
.sheet__list{list-style:none;margin:0;padding:8px 0}
.sheet .sheet__item,
.sheet button.sheet__item {
  display:flex;align-items:center;justify-content:space-between;
  padding: 16px 20px;
  /* Specificity bump (.sheet .sheet__item = 0,2,0) so this beats
     the .sheet button reset above (.sheet button = 0,1,1) which
     was wiping border-bottom on <button class='sheet__item'> rows
     - that left no divider between Products / Industry & Apps /
     Company because those rows are buttons. */
  border-bottom: 1px solid var(--line);
  font-family:var(--f-display);font-weight:500;font-size: var(--fs-m);letter-spacing:-.01em;
  color:var(--ink);
  transition: background .15s;
  width:100%;text-align:left;
}
.sheet__item:active{background:var(--paper-2)}
.sheet__item small{
  display: none;
}
.sheet__item .chev{color:var(--ink-4);flex:none;margin-left:16px}
.sheet__item .row-text{display:flex;flex-direction:column;min-width:0}

/* Sub-panel content */
.sub__intro{
  padding: 18px 20px 12px;
  border-bottom:1px solid var(--line);
  background: var(--paper-2);
}
.sub__intro h4{
  font-family:var(--f-display);font-weight:400;font-size: var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);margin:0 0 6px;
}
.sub__intro p{margin:0;font-size: var(--fs-xs);color:var(--ink-2);line-height:1.5}

/* Featured CTA at the top of products/about/solutions sub-panels - mirrors
   desktop mega-menu .mega__feature card so mobile users still get a clear
   path to the overview page (Explore all products, Read our story, etc). */
.sub__feature{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: rgba(245, 130, 32, 0.08);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease;
}
.sub__feature:active,
.sub__feature:hover{ background: rgba(245, 130, 32, 0.14); }
.sub__feature-tag{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}
.sub__feature-title{
  flex: 1;
  font-size: var(--fs-m);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.sub__feature svg{ color: var(--orange); flex-shrink: 0; }

.sub__group{padding: 14px 0 8px;border-bottom:1px solid var(--line)}
.sub__group:last-child{border-bottom:0}
.sub__group h5{
  margin: 0 0 4px;padding: 0 20px;
  font-family:var(--f-display);font-weight:400;font-size: var(--fs-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.sub__link{
  display:flex;align-items:center;justify-content:space-between;
  padding: 12px 20px;
  font-size: var(--fs-s);color:var(--ink-2);font-weight:500;
  transition: background .15s ease, color .15s ease;
  width:100%;text-align:left;border-bottom:1px solid transparent;
}
.sub__link:hover{
  color: var(--ink);
  background: rgba(245, 130, 32, 0.06);
}
.sub__link:active{background:var(--paper-2)}
.sub__link small{
  display:block;font-size: var(--fs-xs);color:var(--ink-3);font-weight:400;margin-top:2px;letter-spacing:.005em;
}
/* Diagonal chev is the leaf affordance - default subtle, fades in
   fully on hover so it matches the mega-menu micro-interaction. */
.sub__link .chev{
  color:var(--ink-4);flex:none;margin-left:16px;opacity:0;
  transform: translateX(-4px);
  transition: opacity .22s ease, transform .22s ease, color .22s ease;
}
.sub__link:hover .chev{
  opacity:1;
  transform: translateX(0);
  color: var(--orange);
}
.sub__link .row-text{display:flex;flex-direction:column;min-width:0}

/* Sheet foot CTA */
.sheet__foot{
  flex:none;padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background: var(--paper);
  display:flex;flex-direction:column;gap:10px;
}
.sheet__cta{
  height:50px;border-radius:999px;
  background: var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size: var(--fs-m);font-weight:600;letter-spacing:.02em;
  width:100%;
}
.sheet__cta:active{background: var(--orange-ink)}
.sheet__ut{
  display:flex;align-items:center;justify-content:space-between;
  font-size: var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding: 2px 6px;
}
.sheet__ut a{color:var(--ink-2)}

/* Sheet sections (grouped nav) */
.sheet__section{padding: 6px 0 10px}
.sheet__section + .sheet__section{border-top:6px solid var(--paper-2)}
.sheet__section-label{
  font-family:var(--f-display);font-size: var(--fs-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  padding: 16px 20px 8px;
}
.sheet__list--compact{padding: 0}
.sheet__item--leaf{text-decoration:none}
.sheet__item--sm{
  font-family:var(--f-display);font-weight:500;font-size: var(--fs-m);
  padding: 14px 20px;letter-spacing:-.005em;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);width:100%;text-align:left;
}
.sheet__item .chev.arrow{color:var(--ink-4)}

/* Small-laptop compaction (768-1339). The desktop nav stays
   visible but gaps, paddings and the Brochure pill all tighten
   so the full row fits within the viewport - was overflowing
   the right edge on common 1280-1336 laptop widths because the
   nav internal width needed ~1333px (logo + 5 long links + 4
   utility buttons + Brochure). Placed at the END of the file so
   the cascade order wins over the base .nav__main / .nav__links
   rules above. */
@media (min-width: 768px) and (max-width: 1599px) {
  .nav__main { gap: 14px; padding: 0 clamp(12px, 1.2vw, 20px); }
  .nav__links { gap: 0; margin-left: 28px; }
  .nav__link { padding-left: 8px; padding-right: 8px; }
  .nav__right { gap: 12px; }
  .cta { padding: 0 12px; height: 40px; gap: 8px; }
  .shimmer-cta { padding: 0 14px; }
}
/* Tighter still on the lower half of the small-laptop range -
   needed once the desktop nav grew to 6 top-level items
   (Products / Industry / Aftermarket / Built to print /
   Defence / Company) plus the Brochure pill. */
@media (min-width: 768px) and (max-width: 1199px) {
  .nav__main { gap: 6px; padding: 0 8px; }
  .nav__links { margin-left: 16px; }
  .nav__link { padding-left: 4px; padding-right: 4px; }
  .nav__link .caret { margin-left: 1px; width: 10px; }
  .nav__right { gap: 12px; }
  .nav__sep { display: none; }
  .cta { padding: 0 10px; gap: 6px; }
  .shimmer-cta { padding: 0 12px; }
  /* Hide the "Menu" label - the bars icon alone carries the
     affordance and saves ~55 px so the Brochure pill stays
     uncropped. */
  .nav__menu-btn-label { display: none; }
  .nav__menu-btn { padding: 0 8px; }
  /* On the very tightest sliver of the small-laptop range we
     also collapse the Brochure pill to icon-only - keeps the
     CTA visible but stops it cropping at ~1024 px viewports. */
  .shimmer-cta .shimmer-cta__label { display: none; }
  .shimmer-cta { padding: 0 10px; gap: 0; }
  /* Drop the Brochures download button from the desktop nav bar in the
     cramped tablet range (incl. iPad landscape ~1024px). It stays on
     phones (mnav) and on real desktops (>=1200px). Scoped to .nav__right
     so page CTAs elsewhere are untouched. */
  .nav__right .cta { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav, .mnav, .sheet, .scrim, .mega, .search,
  .nav *, .mnav *, .sheet *, .mega *, .search * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Investors lives in the desktop nav bar directly, so hide its
   duplicate row in the bottom-sheet Connect section when the sheet
   is opened from the desktop Menu button. Phones/tablets (no desktop
   nav links) keep the row. */
@media (min-width: 1024px) {
  .sheet__li--investors { display: none; }
}

/* ===========================================================
   Brochure popover (triggered by any [data-brochure] CTA;
   logic in nav.js). Appended to <body>, positioned via JS.
   =========================================================== */
.brochure-pop {
  position: fixed;
  z-index: 100000;
  min-width: 240px;
  padding: 6px;
  border-radius: 12px;
  background: #14110F;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.brochure-pop.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.brochure-pop__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'Raleway', sans-serif;
  font-size: var(--fs-s, 13px);
  font-weight: 500;
  transition: background 160ms ease, color 160ms ease;
}
.brochure-pop__item + .brochure-pop__item { margin-top: 2px; }
.brochure-pop__item:hover {
  background: rgba(245, 130, 32, 0.16);
  color: #FFFFFF;
}
.brochure-pop__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent, #F58220);
}
.brochure-pop__icon svg { width: 16px; height: 16px; display: block; }

/* Light theme */
[data-theme="light"] .brochure-pop {
  background: #FFFFFF;
  border-color: rgba(35, 31, 32, 0.14);
  box-shadow: 0 18px 50px rgba(35, 31, 32, 0.18);
}
[data-theme="light"] .brochure-pop__item { color: var(--ink, #231F20); }
[data-theme="light"] .brochure-pop__item:hover { background: rgba(245, 130, 32, 0.12); }