/*
Theme Name: Indiott
Theme URI: https://indiott.com
Description: Indiott child theme. The Industrial IoT Specialists. Industrial-clean design system: graphite, paper, signal orange, IBM Plex.
Author: Indiott
Template: kadence
Version: 1.0.0
Text Domain: indiott
*/

/* ============ TOKENS ============ */
:root {
  --ink: #232458;          /* brand navy (from the logo) — primary dark surface + body ink */
  --ink-deep: #16173a;     /* deeper navy — ops hero / instrument backdrops */
  --ink-soft: #2a2e34;
  --paper: #f7f8f9;
  --card: #ffffff;
  --signal: #ee6124;       /* brand orange (from the logo) — vivid accent: fills, borders, dots */
  --signal-press: #b8431a; /* darkened brand orange — orange TEXT/icon on light, WCAG AA (5.5:1) */
  --stock: #16a34a;
  --steel-100: #e9ecef;
  --steel-300: #c6ccd2;
  --steel-500: #7c8590;
  --steel-700: #3e444b;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  --r: 2px;
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --shadow-1: 0 1px 2px rgba(26, 29, 33, 0.06);
}

/* ============ BASE ============ */
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .site-title {
  font-family: var(--font-sans);
  color: var(--ink);
  letter-spacing: -0.02em;
}
h1 { font-weight: 700; line-height: 1.05; }
h2 { font-weight: 700; line-height: 1.15; }
h3, h4 { font-weight: 600; }
p { max-width: 70ch; }
a { color: var(--ink); text-decoration-color: var(--steel-300); }
a:hover { color: var(--signal-press); }
::selection { background: var(--signal); color: var(--ink); }

.ind-mono, .price, .woocommerce-Price-amount, .sku {
  font-family: var(--font-mono) !important;
  font-weight: 500;
}

/* ============ BUTTONS ============ */
.ind-btn, .button, .single_add_to_cart_button, .wp-block-button__link,
body .wp-site-blocks .button {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r);
  padding: 14px 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
  text-decoration: none;
}
.ind-btn--primary, .single_add_to_cart_button,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--signal);
  color: var(--ink);
  border: 1.5px solid var(--signal);
}
.ind-btn--primary:hover, .single_add_to_cart_button:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ind-btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.ind-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.ind-btn--ghost-inverse {
  background: transparent;
  color: var(--paper);
  border: 1.5px solid var(--paper);
}
.ind-btn--ghost-inverse:hover { background: var(--paper); color: var(--ink); }

/* ============ BADGES ============ */
.ind-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--steel-300);
  color: var(--steel-700);
  padding: 4px 8px;
  border-radius: 0;
  white-space: nowrap;
}
.ind-badge--stock { border-color: var(--stock); color: var(--stock); }
.ind-badge--cert { border-color: var(--steel-700); }
.ind-badge--signal { border-color: var(--signal); color: var(--signal-press); }

/* ============ HOMEPAGE ============ */
.ind-home { margin: 0; }
.ind-home section { padding: 64px 0; }
.ind-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* hero (light: paper base, graphite ink, console as dark instrument) */
.ind-hero {
  background: var(--paper);
  color: var(--ink);
  padding: 96px 0 0 !important;
}
.ind-hero__kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-press);
  margin: 0 0 20px;
}
.ind-hero h1 {
  color: var(--ink);
  font-size: clamp(40px, 6vw, 64px);
  margin: 0 0 18px;
  max-width: 17ch;
}
.ind-hero__sub {
  color: var(--steel-700);
  font-size: 18px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 44px;
}
.ind-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--steel-700);
  border: 1px solid var(--steel-700);
  margin-top: 24px;
}
.ind-door {
  background: var(--ink);
  padding: 36px 32px 40px;
  text-decoration: none;
  display: block;
  transition: background 0.2s var(--ease);
}
.ind-door:hover { background: var(--ink-soft); }
.ind-door__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-500);
  display: block;
  margin-bottom: 10px;
}
.ind-door__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--paper);
  display: block;
  margin-bottom: 8px;
}
.ind-door__hint { color: var(--steel-300); font-size: 15px; display: block; margin-bottom: 18px; }
.ind-door__arrow { color: var(--signal-press); font-family: var(--font-mono); font-size: 18px; }
.ind-door:hover .ind-door__arrow { color: var(--paper); }

/* trust strip */
.ind-trust {
  background: var(--ink);
  border-top: 1px solid var(--steel-700);
  padding: 22px 0 !important;
}
.ind-trust ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}
.ind-trust li {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--steel-300);
  padding: 4px 20px;
  border-left: 1px solid var(--steel-700);
}
.ind-trust li:first-child { border-left: 0; padding-left: 0; }
.ind-trust strong { color: var(--paper); font-weight: 500; }

/* trusted-by logo strip */
.ind-trustedby { background: var(--paper); padding: 52px 0 !important; border-bottom: 1px solid var(--steel-100); text-align: center; overflow: hidden; }
.ind-trustedby__label { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-700); text-align: center; margin: 0 auto 30px; }
/* infinite logo carousel */
.ind-trustedby__marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ind-trustedby__track { display: flex; align-items: center; width: max-content; will-change: transform; animation: indTrustedMarquee 40s linear infinite; }
.ind-trustedby__marquee:hover .ind-trustedby__track { animation-play-state: paused; }
.ind-trustedby__track img { height: clamp(38px, 3.6vw, 50px); width: auto; max-width: 170px; object-fit: contain; flex: none; margin: 0 clamp(32px, 4vw, 60px);
  filter: grayscale(0.35) contrast(1.05); opacity: 0.92; transition: filter 0.25s var(--ease), opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.ind-trustedby__track img:hover { filter: grayscale(0) contrast(1); opacity: 1; transform: translateY(-2px); }
@keyframes indTrustedMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) { .ind-trustedby__track img { height: 32px; margin: 0 24px; } .ind-trustedby__label { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .ind-trustedby__track { animation: none; } .ind-trustedby__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } }

/* live telemetry ticker */
.ind-ticker { background: var(--ink); border-top: 1px solid var(--steel-700); overflow: hidden; padding: 0 !important; }
.ind-ticker__track { display: flex; width: max-content; white-space: nowrap; animation: indTicker 52s linear infinite; }
.ind-ticker:hover .ind-ticker__track { animation-play-state: paused; }
.ind-tick { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--steel-300); padding: 11px 26px; border-right: 1px solid var(--steel-700); }
.ind-tick::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--stock); flex: none; }
.ind-tick b { color: var(--steel-100); font-weight: 500; }
.ind-tick--alarm::before { background: var(--signal); }
.ind-tick--info::before { background: #60a5fa; }
@keyframes indTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ind-ticker__track { animation: none; } }

/* polish: animated nav underline + tactile button press */
@media (min-width: 769px) {
  .indiott .header-navigation .menu > .menu-item > a:not([href*="/quote"]) { position: relative; }
  .indiott .header-navigation .menu > .menu-item > a:not([href*="/quote"])::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
    background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease);
  }
  .indiott .header-navigation .menu > .menu-item > a:not([href*="/quote"]):hover::after { transform: scaleX(1); }
}
.ind-btn:active, .button:active, .single_add_to_cart_button:active, .wp-block-button__link:active { transform: translateY(1px); }

/* ============ OUR-OWN-ENGINEERING SHOWCASE ============ */
.ind-built { background: var(--paper); position: relative; overflow: hidden; }
/* animated background: two soft orange glows drifting + a slow-moving grid wash,
   behind the content. Subtle, light-section appropriate. */
.ind-built::before { content: ''; position: absolute; inset: -6%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 46% at 12% 22%, rgba(238, 97, 36,0.10), transparent 70%),
    radial-gradient(40% 48% at 88% 78%, rgba(238, 97, 36,0.08), transparent 72%);
  animation: indBuiltDrift 16s ease-in-out infinite alternate; }
@keyframes indBuiltDrift { from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); } to { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); } }
.ind-built .ind-container { position: relative; z-index: 1; }
.ind-built__head { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 56px; align-items: end; margin-bottom: 40px; }
.ind-built__head h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 6px 0 0; }
.ind-built .ind-kicker { color: #c2410c; font-weight: 600; font-size: 12.5px; }
.ind-built__intro { color: var(--steel-700); font-size: 16px; line-height: 1.6; margin: 0; }
@media (prefers-reduced-motion: reduce) { .ind-built::before { animation: none; } }
.ind-built__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: stretch; }
.ind-built__stage { position: relative; align-self: start; min-width: 0; width: 100%; aspect-ratio: 4 / 3; background: var(--card); border: 1px solid var(--steel-100); border-radius: 14px; overflow: hidden; background-image: linear-gradient(var(--steel-100) 1px, transparent 1px), linear-gradient(90deg, var(--steel-100) 1px, transparent 1px); background-size: 34px 34px; }
.ind-built__shot { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.5s var(--ease); }
.ind-built__shot.is-active { opacity: 1; }
/* cutout shots: fill the stage box and let object-fit contain handle any aspect.
   (percentage max-height doesn't resolve against the absolute shot, so tall
   cutouts like the dust monitor overflowed and got clipped — this avoids that.) */
.ind-built__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7% 9%; filter: drop-shadow(0 20px 34px rgba(26,29,33,0.16)); }
/* photo-mode: real environmental shots fill the stage edge-to-edge (no float/shadow) */
.ind-built__shot--photo { padding: 0; }
.ind-built__shot--photo img { object-fit: cover; padding: 0; border-radius: 14px; filter: none; }
.ind-built__art { width: 54%; max-width: 320px; color: var(--steel-700); }
.ind-built__svg { width: 100%; height: auto; }
.ind-built__svg .im-on { stroke: var(--signal); }
.ind-built__dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 7px; }
.ind-built__dot { position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 100px; background: var(--steel-300); cursor: pointer; transition: width 0.25s var(--ease), background 0.2s var(--ease); }
.ind-built__dot::before { content: ''; position: absolute; inset: -9px; } /* 25px hit area (WCAG 2.2 target size) */
.ind-built__dot:hover { background: var(--steel-500); }
.ind-built__dot.is-active { width: 18px; background: var(--signal); }
.ind-built__panel { display: flex; flex-direction: column; }
.ind-built__list { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--steel-100); padding-bottom: 14px; margin-bottom: 20px; }
.ind-built__tab { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; transition: background 0.2s var(--ease), opacity 0.2s var(--ease); position: relative; }
.ind-built__tab-n { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); }
.ind-built__tab-name { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.ind-built__tab:hover { background: var(--card); }
.ind-built__list:hover .ind-built__tab:not(:hover) { opacity: 0.5; }
.ind-built__tab[aria-selected="true"] { background: var(--card); opacity: 1 !important; }
.ind-built__tab[aria-selected="true"]::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--signal); }
.ind-built__tab[aria-selected="true"] .ind-built__tab-n { color: var(--signal-press); }
.ind-built__from { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #c2410c; margin: 0 0 12px; }
.ind-built__desc { font-size: 15.5px; line-height: 1.6; color: var(--steel-700); margin: 0 0 18px; max-width: 52ch; }
.ind-built__chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; margin-bottom: 22px; }
.ind-built__view { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: 0 0 20px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #c2410c; text-decoration: none; border-bottom: 1px solid var(--signal); padding-bottom: 2px; }
.ind-built__view:hover { color: var(--signal-press); }
.ind-built__view span { transition: transform 0.2s var(--ease); }
.ind-built__view:hover span { transform: translateX(3px); }
.ind-built__live { margin-top: auto; background: #14171b; border: 1px solid #2c323a; border-radius: 8px; }
@media (max-width: 980px) {
  .ind-built__head { grid-template-columns: 1fr; gap: 12px; }
  .ind-built__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* section headers */
.ind-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.ind-sec-head h2 { font-size: clamp(28px, 3.4vw, 36px); margin: 0; }
.ind-sec-head .ind-sec-link {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--steel-700);
  text-decoration: none;
  border-bottom: 1px solid var(--steel-300);
  white-space: nowrap;
}
.ind-sec-head .ind-sec-link:hover { color: var(--signal-press); border-color: var(--signal); }
.ind-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin: 0 0 10px;
  /* override the global p{max-width:70ch}: otherwise the kicker box is narrower
     than its (centred) head and left-anchored, so a centred head reads left-of-centre.
     Full width + inherited text-align centres it correctly; left heads are unaffected. */
  max-width: none;
}

/* stack diagram band */
.ind-stack { background: var(--ink); }
.ind-stack .ind-kicker { color: var(--signal-press); }
.ind-stack h2 { color: var(--paper); }
.ind-stack p.ind-stack__intro { color: var(--steel-300); font-size: 17px; max-width: 60ch; }
.ind-stack__svgwrap { margin-top: 40px; }
.ind-stack__svgwrap svg { width: 100%; height: auto; display: block; }

/* category tiles */
.ind-cats { background: var(--paper); }
.ind-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--steel-100);
  border: 1px solid var(--steel-100);
}
.ind-cat {
  background: var(--card);
  padding: 24px 22px 26px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.18s var(--ease);
  position: relative;
}
.ind-cat:hover { background: var(--paper); }
.ind-cat__name { font-size: 17px; font-weight: 600; color: var(--ink); }
.ind-cat__count { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); }
.ind-cat::after {
  content: '→';
  position: absolute;
  right: 20px;
  top: 24px;
  color: var(--steel-300);
  font-family: var(--font-mono);
  transition: color 0.18s var(--ease), transform 0.18s var(--ease);
}
.ind-cat:hover::after { color: var(--signal-press); transform: translateX(3px); }

/* solutions band: interactive industry cards, asymmetric (flagship featured) */
.ind-solutions { background: var(--paper); border-top: 1px solid var(--steel-100); }
.ind-solgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 14px; }
.ind-solcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 188px;
  background: var(--card);
  border: 1px solid var(--steel-100);
  border-radius: 10px;
  padding: 22px 22px 18px;
  text-decoration: none;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.ind-solcard:hover { border-color: var(--steel-300); transform: translateY(-4px); box-shadow: 0 24px 42px -26px rgba(26,29,33,0.34); }
.ind-solcard::before { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.ind-solcard:hover::before { transform: scaleX(1); }
.ind-solcard__top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ind-solcard__ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid var(--steel-100); border-radius: 9px; background: var(--paper); color: var(--steel-700); transition: color 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease); }
.ind-solcard:hover .ind-solcard__ico { color: var(--signal-press); border-color: var(--signal); background: var(--card); }
.ind-solcard__svg { width: 24px; height: 24px; }
.ind-solcard__svg .im-flow { stroke-dasharray: 120; stroke-dashoffset: 0; }
.ind-solcard:hover .ind-solcard__svg .im-flow { animation: imFlow 1s var(--ease); }
@keyframes imFlow { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
.ind-solcard__sector { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-500); }
.ind-solcard__title { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 7px; }
.ind-solcard__line { font-size: 14px; color: var(--steel-700); line-height: 1.5; }
.ind-solcard__proof { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--steel-700); margin-top: 16px; }
.ind-solcard__proof-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--stock); flex: none; box-shadow: 0 0 0 3px rgba(22,163,74,0.12); }
.ind-solcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.ind-solcard__layers { display: flex; flex-wrap: wrap; gap: 5px; }
.ind-solcard__layers i { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; font-style: normal; color: var(--steel-500); border: 1px solid var(--steel-100); border-radius: 3px; padding: 3px 6px; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.ind-solcard:hover .ind-solcard__layers i { border-color: var(--steel-300); color: var(--steel-700); }
.ind-solcard__go { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--signal-press); white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.ind-solcard:hover .ind-solcard__go { opacity: 1; transform: none; }
.ind-solcard__arrow { transition: transform 0.22s var(--ease); }
.ind-solcard:hover .ind-solcard__arrow { transform: translateX(3px); }
/* flagship feature card spans 2x2 */
/* photo industry cards: relevant image header + sector chip, text on a light body */
.ind-solcard--photo { padding: 0; }
.ind-solcard__media { position: relative; height: 152px; flex: none; background-size: cover; background-position: center; background-color: var(--ink); }
.ind-solcard__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,23,30,0.30) 0%, rgba(20,23,30,0) 40%, rgba(20,23,30,0.32) 100%); }
.ind-solcard:hover .ind-solcard__media { }
.ind-solcard--photo .ind-solcard__sector { position: absolute; z-index: 1; top: 12px; left: 12px; margin: 0; color: #fff; background: rgba(20,23,30,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 5px 9px; border-radius: 5px; }
.ind-solcard__brand { position: absolute; z-index: 1; bottom: 12px; right: 12px; display: inline-flex; align-items: center; background: #fff; border-radius: 7px; padding: 7px 11px; box-shadow: 0 4px 16px rgba(0,0,0,0.22); }
.ind-solcard__brand img { height: 20px; width: auto; display: block; }
.ind-solcard__body { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 18px; }

.ind-solcard--feature { grid-column: span 2; grid-row: span 2; padding: 30px; background-color: var(--card); background-image: linear-gradient(var(--steel-100) 1px, transparent 1px), linear-gradient(90deg, var(--steel-100) 1px, transparent 1px); background-size: 34px 34px; }
.ind-solcard--feature.ind-solcard--photo { padding: 0; background-image: none; }
.ind-solcard--feature .ind-solcard__media { height: 280px; }
.ind-solcard--feature .ind-solcard__body { padding: 26px 30px 28px; }
.ind-solcard--feature > * { position: relative; }
.ind-solcard--feature .ind-solcard__ico { width: 50px; height: 50px; }
.ind-solcard--feature .ind-solcard__svg { width: 28px; height: 28px; }
.ind-solcard--feature .ind-solcard__title { font-size: 27px; max-width: 18ch; }
.ind-solcard--feature .ind-solcard__line { font-size: 15.5px; max-width: 48ch; }
@media (hover: none) { .ind-solcard__go { opacity: 1; transform: none; } }
@media (max-width: 1020px) {
  .ind-solgrid { grid-template-columns: repeat(2, 1fr); }
  .ind-solcard--feature { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 640px) {
  .ind-solgrid { grid-template-columns: 1fr; }
  .ind-solcard--feature { grid-column: auto; }
  .ind-solcard--feature .ind-solcard__title { font-size: 23px; }
}

/* services strip */
.ind-services { background: var(--paper); }
.ind-services ol {
  list-style: none; counter-reset: svc; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
}
.ind-services li { counter-increment: svc; }
.ind-services li::before {
  content: counter(svc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--signal-press);
  display: block;
  margin-bottom: 10px;
}
.ind-services h3 { font-size: 16.5px; margin: 0 0 6px; }
.ind-services p { font-size: 14px; color: var(--steel-700); margin: 0; line-height: 1.5; }

/* insights */
.ind-insights { background: var(--card); border-top: 1px solid var(--steel-100); }
.ind-insights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ind-post { text-decoration: none; display: block; }
.ind-post__img { aspect-ratio: 3/2; object-fit: cover; width: 100%; display: block; background: var(--steel-100); margin-bottom: 14px; }
.ind-post__date { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); display: block; margin-bottom: 6px; }
.ind-post__title { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.35; display: block; }
.ind-post:hover .ind-post__title { color: var(--signal-press); }

/* capture band */
.ind-capture { background: var(--ink); }
.ind-capture h2 { color: var(--paper); font-size: clamp(26px, 3vw, 34px); margin: 0 0 8px; }
.ind-capture p { color: var(--steel-300); margin: 0 0 24px; }
.ind-capture__form { display: flex; gap: 12px; max-width: 520px; }
.ind-capture__form input[type=email] {
  flex: 1;
  background: var(--ink-soft);
  border: 1px solid var(--steel-700);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 13px 16px;
  border-radius: var(--r);
}
.ind-capture__form input[type=email]::placeholder { color: var(--steel-500); }

/* ============ WOOCOMMERCE: SHOP/CATEGORY GRID ============ */
.woocommerce ul.products li.product {
  background: var(--card);
  border: 1px solid var(--steel-100);
  border-radius: 0;
  padding: 18px 18px 20px;
  transition: border-color 0.18s var(--ease);
}
.woocommerce ul.products li.product:hover { border-color: var(--steel-500); box-shadow: none; }
.woocommerce ul.products li.product img { transition: transform 0.25s var(--ease); }
.woocommerce ul.products li.product:hover img { transform: scale(1.02); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
}
.woocommerce ul.products li.product .price { color: var(--ink); font-size: 15px; }
.woocommerce ul.products li.product .price .ind-exvat { font-size: 11px; color: var(--steel-500); margin-left: 4px; }
.ind-loop-sku { font-family: var(--font-mono); font-size: 11.5px; color: var(--steel-500); display: block; margin-top: 2px; }
.ind-request-price { font-family: var(--font-mono); font-size: 13px; color: var(--steel-700); }
/* Fix: Kadence reveals the add-to-cart in an absolutely-positioned .product-action-wrap
   on hover, which lands on top of the price/Request-a-price. Pin it in normal flow. */
.woocommerce ul.products li.product .product-action-wrap {
  position: static !important; opacity: 1 !important; transform: none !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  width: auto !important; margin-top: 12px;
}
.woocommerce ul.products li.product .price { margin-bottom: 2px; }

/* ============ WOOCOMMERCE: PDP ============ */
.single-product div.product .product_title { font-size: clamp(26px, 3vw, 34px); font-weight: 700; }
.ind-pdp-sku {
  font-family: var(--font-mono); font-size: 13px; color: var(--steel-500);
  letter-spacing: 0.04em; display: block; margin-bottom: 8px; text-transform: uppercase;
}
.ind-pdp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
/* PDP: five-layer stack position indicator (restrained, commerce-safe) */
.ind-pdp-layer { margin: 18px 0 6px; }
.ind-pdp-layer__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--steel-500); display: block; margin-bottom: 8px; }
.ind-pdp-layer__bar { display: flex; gap: 4px; }
.ind-pdp-layer__seg { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; color: var(--steel-500); background: var(--paper); border: 1px solid var(--steel-100); border-radius: 3px; padding: 7px 3px; transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease); }
.ind-pdp-layer__seg.is-on { color: var(--paper); background: var(--signal-press); border-color: var(--signal-press); font-weight: 600; } /* darker fill so light label hits AA */
a.ind-pdp-layer__seg { text-decoration: none; }
a.ind-pdp-layer__seg:not(.is-on):hover { border-color: var(--steel-500); color: var(--ink); background: var(--card); }

/* ============ QUOTE LIST (BOM tray) ============ */
.ind-loop-quote { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--signal-press); background: transparent; border: 1px solid var(--steel-300); border-radius: var(--r); padding: 6px 12px; cursor: pointer; transition: border-color 0.15s var(--ease), color 0.15s var(--ease); }
.ind-loop-quote:hover { border-color: var(--signal); color: var(--ink); }
.ind-qtray-btn { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: none; align-items: center; gap: 9px; background: var(--signal); color: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; border: 0; border-radius: 100px; padding: 12px 18px; cursor: pointer; box-shadow: 0 14px 34px -12px rgba(238, 97, 36,0.55); transition: transform 0.18s var(--ease); }
.ind-qtray-btn.is-shown { display: inline-flex; }
.ind-qtray-btn.is-bumped { transform: scale(1.09); }
.ind-qtray-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.ind-qtray-count { background: var(--ink); color: var(--paper); border-radius: 100px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; padding: 0 6px; }
/* z-index sits above the mobile buy bar (999) and the Jetpack cookie banner (50001)
   so the tray + its "Request pricing" button are never covered when open. */
.ind-qtray { position: fixed; inset: 0; z-index: 60000; background: rgba(26,29,33,0.42); opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease); }
.ind-qtray.is-open { opacity: 1; visibility: visible; }
.ind-qtray__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: var(--card); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s var(--ease); box-shadow: -24px 0 60px -24px rgba(26,29,33,0.45); }
.ind-qtray.is-open .ind-qtray__panel { transform: none; }
.ind-qtray__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--steel-100); font-weight: 700; font-size: 16px; }
.ind-qtray__close { background: 0; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--steel-500); }
.ind-qtray__close:hover { color: var(--ink); }
.ind-qtray__items { flex: 1; overflow-y: auto; padding: 10px 14px; }
.ind-qtray__empty { color: var(--steel-500); font-size: 14px; padding: 28px 16px; text-align: center; line-height: 1.5; }
.ind-qitem { display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--steel-100); }
.ind-qitem__img { width: 46px; height: 46px; background: var(--paper); border-radius: 6px; overflow: hidden; }
.ind-qitem__img img { width: 100%; height: 100%; object-fit: contain; }
.ind-qitem__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ind-qitem__name { font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3; }
.ind-qitem__name:hover { color: var(--signal-press); }
.ind-qitem__sku { font-family: var(--font-mono); font-size: 11px; color: var(--steel-500); }
.ind-qitem__qty { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 13px; }
.ind-qitem__qty button { width: 22px; height: 22px; border: 1px solid var(--steel-300); background: var(--paper); border-radius: 4px; cursor: pointer; line-height: 1; color: var(--ink); }
.ind-qitem__qty button:hover { border-color: var(--signal); }
.ind-qitem__rm { background: 0; border: 0; color: var(--steel-500); font-size: 18px; cursor: pointer; line-height: 1; }
.ind-qitem__rm:hover { color: var(--signal-press); }
.ind-qtray__foot { padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--steel-100); }
.ind-qtray__send { width: 100%; text-align: center; }
.ind-qtray__foot .ind-quote-promise { margin: 12px 0 0; text-align: center; }

/* ============ SITE SEARCH ============ */
.ind-nav-search { display: flex; align-items: center; }
.ind-search-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; padding: 8px; border-radius: 50%; transition: color 0.15s var(--ease), background 0.15s var(--ease); }
.ind-search-toggle:hover { color: var(--signal-press); background: var(--paper); }
/* nav cart */
.ind-nav-cart { display: flex; align-items: center; }
.ind-cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); padding: 8px; border-radius: 50%; transition: color 0.15s var(--ease), background 0.15s var(--ease); }
.ind-cart-link:hover { color: var(--signal-press); background: var(--paper); }
.ind-cart-count { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 1; color: #fff; background: var(--signal); border-radius: 100px; opacity: 0; transform: scale(0.5); transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); pointer-events: none; }
.ind-cart-count.is-filled { opacity: 1; transform: none; }

/* Drawer variants of the two icon controls. On the bar they are circular 34px hit areas;
   inside the drawer Kadence renders menu links as full-width blocks, so `border-radius:
   50%` on a 760px-wide row painted an ellipse straight across the panel, and the
   absolutely positioned cart count landed at the far right edge instead of on its icon.
   The search control is a <button>, so it never picked up the drawer's light link colour
   and sat at 1.37:1 against the #090c10 panel — effectively invisible. Plain rows, in the
   drawer's own text colour. */
.mobile-navigation .ind-cart-link,
.mobile-navigation .ind-search-toggle { border-radius: 0; padding: 16px 14px; margin-left: -14px; }
.mobile-navigation .ind-cart-link { display: inline-flex; width: max-content; margin-right: auto; justify-content: flex-start; }
.mobile-navigation .ind-search-toggle { color: var(--paper, #f7fafc); gap: 8px; justify-content: flex-start; }
/* Matches the drawer's own nav rows (IBM Plex Sans 14/400) so the label reads as one of
   the menu items rather than as a control bolted on top of the list. */
.mobile-navigation .ind-search-toggle__label { font-family: var(--font-sans, 'IBM Plex Sans', sans-serif); font-size: 14px; font-weight: 400; line-height: 1; }
.mobile-navigation .ind-cart-link:hover,
.mobile-navigation .ind-search-toggle:hover { background: transparent; color: var(--signal, #ee6124); }
/* z-index must beat Kadence's mobile drawer — on mobile the search toggle lives
   inside that drawer, so the overlay has to sit ABOVE the open drawer, not behind it. */
.ind-search { position: fixed; inset: 0; z-index: 100000; background: rgba(26,29,33,0.5); opacity: 0; visibility: hidden; transition: opacity 0.22s var(--ease); }
.ind-search.is-open { opacity: 1; visibility: visible; }
.ind-search__form { position: absolute; top: 0; left: 0; right: 0; background: var(--card); display: flex; align-items: center; gap: 14px; padding: 22px clamp(20px, 6vw, 64px); transform: translateY(-100%); transition: transform 0.3s var(--ease); box-shadow: 0 22px 54px -22px rgba(26,29,33,0.42); }
.ind-search.is-open .ind-search__form { transform: none; }
.ind-search__icon { color: var(--steel-500); flex: none; }
.ind-search__input { flex: 1; min-width: 0; border: 0; border-bottom: 2px solid var(--steel-300); background: transparent; font-family: var(--font-sans); font-size: clamp(18px, 2.4vw, 26px); padding: 8px 2px; color: var(--ink); outline: none; transition: border-color 0.18s var(--ease); }
.ind-search__input::placeholder { color: var(--steel-500); }
.ind-search__input:focus { border-color: var(--signal); }
.ind-search__submit { flex: none; background: var(--signal); color: var(--ink); border: 0; border-radius: var(--r); padding: 13px 22px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; cursor: pointer; transition: background 0.16s var(--ease), color 0.16s var(--ease); }
.ind-search__submit:hover { background: var(--ink); color: var(--paper); }
.ind-search__close { flex: none; background: 0; border: 0; font-size: 30px; line-height: 1; color: var(--steel-500); cursor: pointer; }
.ind-search__close:hover { color: var(--ink); }
@media (max-width: 600px) { .ind-search__submit { display: none; } }
.single-product p.price { font-size: 26px; color: var(--ink); }
.single-product p.price .ind-exvat { font-size: 13px; color: var(--steel-500); font-family: var(--font-sans); }
.ind-vat-note { font-size: 13px; color: var(--steel-500); margin-top: 2px; }
.ind-quote-btn { margin-left: 10px; }
.ind-keyspecs { margin: 22px 0; border-top: 1px solid var(--steel-100); }
.ind-keyspecs div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--steel-100); }
.ind-keyspecs dt { font-size: 13.5px; color: var(--steel-700); font-weight: 400; }
.ind-keyspecs dd { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); margin: 0; text-align: right; }
.ind-quote-promise { font-family: var(--font-mono); font-size: 12.5px; color: var(--steel-700); margin-top: 14px; }
.ind-quote-promise b { color: var(--stock); }
.ind-ship-note { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12.5px; color: var(--steel-700); margin-top: 8px; }
.ind-ship-note svg { color: var(--signal); flex: none; }

/* spec table */
.woocommerce table.shop_attributes { border-top: 1px solid var(--steel-100); }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td {
  border-bottom: 1px solid var(--steel-100); background: transparent !important;
  font-style: normal; padding: 10px 12px 10px 0;
}
.woocommerce table.shop_attributes th { color: var(--steel-700); font-weight: 400; width: 38%; }
.woocommerce table.shop_attributes td { font-family: var(--font-mono); font-size: 14px; }

/* sticky mobile buy bar */
.ind-buybar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  background: var(--card); border-top: 1px solid var(--steel-300);
  padding: 10px 16px; display: none; gap: 12px; align-items: center;
}
.ind-buybar__price { font-family: var(--font-mono); font-weight: 600; font-size: 16px; }
.ind-buybar .ind-btn { flex: 1; text-align: center; padding: 12px 10px; }

/* The consent banner (#gsa-cb, from the giamborghini-spy-agent plugin) is fixed at the
   bottom with z-index 99999. Keep it from covering bottom-of-page content: (1) lift the
   quote-tray "Request pricing" button above it, and (2) reserve body room so the last
   shop-grid row / footer clears it. --gsa-cb-h is the measured banner height (main.js);
   the fixed fallbacks cover the pre-JS / no-JS moment. All clear when the banner is gone. */
@supports selector(:has(*)) {
  body:has(#gsa-cb) .ind-qtray__foot { padding-bottom: calc(18px + var(--gsa-cb-h, 84px) + env(safe-area-inset-bottom, 0px)); }
  body:has(#gsa-cb) { padding-bottom: var(--gsa-cb-h, 96px); }
  @media (max-width: 640px) {
    body:has(#gsa-cb) .ind-qtray__foot { padding-bottom: calc(18px + var(--gsa-cb-h, 124px) + env(safe-area-inset-bottom, 0px)); }
    body:has(#gsa-cb) { padding-bottom: var(--gsa-cb-h, 140px); }
  }
}

/* ============ HEADER / FOOTER POLISH ============ */
.site-header { background: var(--card); border-bottom: 1px solid var(--steel-100); }
/* Navbar content contained to 70% of the viewport, centred (Kadence boxes it to the
   content width by default). Scoped to the header so page/footer keep their max-width. */
/* The nav's intrinsic width is ~1058px (it is nowrap) plus a ~200px logo column, so a
   flat 70% bar stops being wide enough below about 1790px. The nav sits in a grid `1fr`
   track whose default min-width:auto cannot shrink past that intrinsic width, so the
   overflow did not compress — it escaped the bar and then the viewport (246px off-screen
   at 1040px, and every item at a 0px gap from 1025 to 1800). Hold the bar at the width it
   was designed against (1920 x 70% = 1344px) whenever 70% falls short, and keep a 20px
   gutter so it never touches the screen edge. */
.indiott .site-header .site-container { max-width: min(calc(100% - 40px), max(70%, 1344px)); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
/* Below ~1260px even a full-width bar is narrower than the nav wants, so shed weight
   instead of overflowing: drop the decorative trading-hours pill, tighten the logo/nav
   column gap and step the link type down. Each selector matches the specificity of the
   rule it overrides — `ul.menu > li.menu-item` sets display:flex, Kadence sets the link
   size — so none of this needs !important. */
@media (min-width: 1021px) and (max-width: 1259px) {
  .indiott .site-header-main-section-right .header-navigation ul.menu > li.menu-item.ind-nav-hours { display: none; }
  .indiott .site-main-header-inner-wrap { column-gap: 24px; }
  .indiott .site-header-item .header-navigation .menu > .menu-item > a { font-size: clamp(14px, 1.2vw, 15px); }
}
@media (max-width: 768px) { .indiott .site-header .site-container { max-width: 100%; padding-left: 18px; padding-right: 18px; } }

/* Brand wordmark (inline SVG injected into Kadence's logo slot) */
.site-branding .brand { display: inline-flex; align-items: center; line-height: 0; }
.site-branding .ind-logo { display: block; width: auto; height: 34px; }
@media (max-width: 768px) { .site-branding .ind-logo { height: 30px; } }

/* Full-width navbar: logo pinned left, the menu stretches across the whole bar and
   distributes its items edge-to-edge, at any viewport width. */
@media (min-width: 769px) {
  .indiott .site-main-header-inner-wrap {
    display: grid;
    grid-template-columns: auto 1fr;   /* logo | nav fills the rest */
    align-items: center;
    column-gap: clamp(24px, 4vw, 64px);
  }
  .indiott .site-main-header-inner-wrap .site-header-main-section-left { justify-self: start; }
  /* Force the whole right-section chain to fill, or Kadence keeps the nav content-width
     and flush-right (the "all on the right" cluster). */
  .indiott .site-main-header-inner-wrap .site-header-main-section-right { justify-self: stretch; justify-content: stretch; }
  .indiott .site-header-main-section-right .site-header-item-main-navigation { flex: 1 1 auto; width: 100%; }
  .indiott .site-header-main-section-right .header-navigation,
  .indiott .site-header-main-section-right .primary-menu-container { width: 100%; }
  .indiott .site-header-main-section-right .header-navigation ul.menu {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;   /* spread items to fill the available width */
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}
#colophon, .site-footer { background: var(--ink); color: var(--steel-300); }
.site-footer a { color: var(--steel-300); }
.site-footer a:hover { color: var(--paper); }

/* ============ SOLUTIONS MEGA-MENU ============ */
.ind-megamenu { display: none; }
@media (min-width: 769px) {
  /* Top-level items fill the full bar height so there is no dead space below a link
     that would break the hover before the cursor reaches the panel. */
  .indiott .site-header-main-section-right .header-navigation ul.menu > li.menu-item {
    align-self: stretch; display: flex; align-items: center;
  }
  /* Anchor to the centred menu (static li) so this matches the Products/Brands mega:
     identical width, position and centring under the navbar. */
  .indiott .main-navigation li.menu-item:has(> .ind-megamenu) { position: static; }
  .indiott .main-navigation li.menu-item:has(> .ind-megamenu) > ul.sub-menu { display: none !important; }
  .ind-megamenu {
    /* ul.menu above sets white-space:nowrap so the top-level bar never breaks. That
       inherits into this panel, so a column narrower than its text painted OVER its
       neighbour instead of wrapping. Reset it here, same as the Products/Brands mega
       does on its own links. */
    white-space: normal;
    display: grid; grid-template-columns: minmax(0, 1fr) 312px;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 220;   /* attached to the bar, full width */
    width: auto; max-width: none;
    background: var(--card); border: 1px solid var(--steel-100); border-radius: 16px;
    box-shadow: 0 28px 64px -26px rgba(26,29,33,0.34), 0 6px 20px -10px rgba(26,29,33,0.14);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  /* tiny transparent bridge for sub-pixel rounding between the bar and the panel */
  .ind-megamenu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 10px; background: transparent; }
  .indiott .main-navigation li.menu-item:hover > .ind-megamenu,
  .indiott .main-navigation li.menu-item:focus-within > .ind-megamenu,
  .indiott .main-navigation li.menu-item.ind-nav-open > .ind-megamenu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  /* Flex column so a short menu sits centred against the feature card instead of
     leaving the void under it. */
  .ind-megamenu__inner { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: 22px 22px 18px; min-width: 0; }
  /* Band 1: one rail per sector group, all top-aligned, so no group's length can
     push an empty gap under a shorter neighbour. --mm-cols is set by PHP. */
  .ind-megamenu__band { display: grid; grid-template-columns: repeat(var(--mm-cols, 6), minmax(0, 1fr)); grid-template-rows: auto auto; gap: 18px 20px; align-items: start; }
  /* Subgrid keeps every list starting on the same baseline even when a heading
     wraps to two lines. Browsers without it just fall back to today's behaviour. */
  .ind-megamenu__band > .ind-megamenu__col { grid-row: span 2; align-self: stretch; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .ind-megamenu__rule { height: 1px; background: var(--steel-100); margin: 20px 0 18px; }
  /* Band 2: the asset-level list runs wide and prints in sub-columns; the in-house
     line keeps its own rail behind a hairline. */
  .ind-megamenu__band--split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 0 22px; }
  .ind-megamenu__band--split > .ind-megamenu__col { grid-row: auto; display: block; }
  .ind-megamenu__band--split.has-inhouse { grid-template-columns: minmax(0, 3fr) 1px minmax(0, 1fr); }
  .ind-megamenu__vrule { grid-row: auto; align-self: stretch; background: var(--steel-100); }
  .ind-megamenu__col--wide ul { columns: 165px; column-gap: 20px; }
  .ind-megamenu__col--wide li { break-inside: avoid; }
  /* JS injects the same feature carousel as Products into the right column */
  .ind-megamenu > .ind-mega__feature { grid-column: 2; grid-row: 1; align-self: stretch; padding: 22px 22px 18px 6px; list-style: none; margin: 0; }
  .ind-megamenu > .ind-mega__feature span { white-space: normal; }
  .ind-megamenu__head { display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); margin-bottom: 9px; }
  .ind-megamenu__head small { display: inline-block; white-space: nowrap; font-family: var(--font-sans); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--steel-500); margin-left: 8px; }
  .ind-megamenu__col ul { list-style: none; margin: 0; padding: 0; }
  .ind-megamenu__col a { display: block; font-size: 13.5px; line-height: 1.3; color: var(--steel-700); text-decoration: none; padding: 5px 8px; margin: 0 -8px; border-radius: 6px; transition: background 0.14s var(--ease), color 0.14s var(--ease); }
  .ind-megamenu__col a:hover { background: var(--paper); color: var(--signal-press); }
  .ind-megamenu__foot { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 22px; border-top: 1px solid var(--steel-100); background: var(--paper); border-radius: 0 0 16px 16px; }
  .ind-megamenu__bespoke { font-size: 12px; color: var(--steel-500); line-height: 1.4; }
  .ind-megamenu__all { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--signal-press); text-decoration: none; white-space: nowrap; }
  .ind-megamenu__all:hover { color: var(--signal); }
  /* Two width steps. --mm-cols-2 and --mm-cols-3 are ceil(n / rows), so the band
     folds into full rows instead of leaving orphan cells beside the last group. */
  /* Band width is the bar minus the 312px feature rail and 46px of border/padding. The
     bar is now held at 1344px until the viewport drops under ~1384px and is vw-40 below
     that, so the band is 986px down to 1384px and vw-398 under it. Six rails need
     6x140 + 5x20 = 940px, which holds down to a 1338px viewport; three need 460px, which
     holds everywhere the desktop nav exists. (Before the bar was widened this had to fold
     at 1870px, or the rails were crushed to 98px against 146px of heading.) */
  @media (max-width: 1337px) {
    .ind-megamenu__band { grid-template-columns: repeat(var(--mm-cols-2, 3), minmax(0, 1fr)); }
  }
  /* Below this the feature rail gives up width too, before links start wrapping. */
  @media (max-width: 1184px) {
    .ind-megamenu { grid-template-columns: minmax(0, 1fr) 248px; }
    .ind-megamenu__band { grid-template-columns: repeat(var(--mm-cols-3, 2), minmax(0, 1fr)); }
    .ind-megamenu__band--split.has-inhouse { grid-template-columns: minmax(0, 2fr) 1px minmax(0, 1fr); }
  }
}

/* blog answer block */
.ind-answer {
  background: var(--card); border: 1px solid var(--steel-300);
  padding: 20px 24px; margin: 0 0 28px; font-size: 17px; line-height: 1.55;
}
.ind-answer::before {
  content: 'In short';
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--signal-press); display: block; margin-bottom: 8px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1020px) {
  .ind-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .ind-solutions__grid { grid-template-columns: repeat(2, 1fr); }
  .ind-services ol { grid-template-columns: repeat(2, 1fr); }
  .ind-insights__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .ind-home section { padding: 48px 0; }
  .ind-hero { padding-top: 64px !important; }
  .ind-doors { grid-template-columns: 1fr; }
  .ind-trust ul { flex-direction: column; gap: 8px; }
  .ind-trust li { border-left: 0; padding: 2px 0; }
  .ind-solutions__grid, .ind-insights__grid, .ind-services ol { grid-template-columns: 1fr; }
  .ind-buybar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============ SOLUTION TEMPLATE ============ */
.ind-solution section { padding: 64px 0; }
/* hero: light, two-column with content-specific console (matches homepage) */
.ind-sol-hero { position: relative; background: var(--paper); color: var(--ink); overflow: hidden; padding: 84px 0 64px !important; }
.ind-sol-hero .ind-kicker { color: var(--signal-press); }
.ind-sol-hero__inner { position: relative; z-index: 2; }
.ind-sol-hero--console .ind-sol-hero__inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 52px; align-items: center; }
.ind-sol-hero h1 { color: var(--ink); font-size: clamp(32px, 4.6vw, 50px); max-width: 17ch; margin: 0 0 20px; }
/* Lede carries the benefit slogan that used to be the H1 — larger and darker than the
   problem paragraph beneath it, so the hero still opens on the line it was written for. */
.ind-sol-hero__lede { color: var(--ink); font-size: 21px; line-height: 1.45; font-weight: 500; max-width: 46ch; margin: 0 0 14px; }
.ind-sol-hero__problem { color: var(--steel-700); font-size: 17.5px; line-height: 1.6; max-width: 56ch; margin: 0 0 28px; }
.ind-sol-hero__ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0; }
.ind-sol-hero__ctas .ind-quote-promise { color: var(--steel-700); margin: 0; }
.ind-sol-hero__ctas .ind-quote-promise b { color: var(--stock); }
.ind-sol-hero__copy .ind-hero__chips { margin-top: 26px; }
@media (max-width: 980px) { .ind-sol-hero--console .ind-sol-hero__inner { grid-template-columns: 1fr; gap: 36px; } }
/* bespoke per-solution dashboard panel (self-styled in inc/dashboards/<slug>.php) */
.ind-dash { width: 100%; max-width: 600px; margin-left: auto; font-family: var(--font-mono); box-shadow: 0 40px 80px -44px rgba(10,12,16,0.55); border-radius: 14px; }
@media (max-width: 980px) { .ind-dash { max-width: 100%; } }
/* control-room backdrop behind dashboard heroes */
.ind-sol-hero--dash::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 78% 30%, rgba(238, 97, 36,0.06), transparent 60%),
  repeating-linear-gradient(0deg, transparent 0 38px, rgba(26,29,33,0.025) 38px 39px),
  repeating-linear-gradient(90deg, transparent 0 38px, rgba(26,29,33,0.025) 38px 39px); }

/* "which layers light up" tower (dark band) */
.ind-soltower { position: relative; margin-top: 34px; display: flex; flex-direction: column; gap: 6px; max-width: 780px; }
.ind-soltower__thread { position: absolute; left: 21.5px; top: 26px; bottom: 26px; width: 2px; background: #2a2f37; z-index: 0; }
.ind-soltower__pulse { position: absolute; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 9px 1px rgba(238, 97, 36,0.85); animation: stackPulse 3.6s var(--ease) infinite; }
.ind-soltower__pulse:nth-child(2) { animation-delay: 1.8s; }
.ind-soltower__layer { position: relative; z-index: 1; display: grid; grid-template-columns: 24px 22px 1fr; align-items: center; column-gap: 13px; padding: 14px 18px 14px 46px; border: 1px solid transparent; border-radius: 9px; transition: opacity 0.22s var(--ease); }
.ind-soltower__node { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; border-radius: 50%; background: #15181d; border: 2px solid #3a424d; }
.ind-soltower__num { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); }
.ind-soltower__glyph { color: var(--steel-500); display: grid; place-items: center; }
.ind-soltower__glyph svg { width: 20px; height: 20px; }
.ind-soltower__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ind-soltower__name { font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.08em; color: var(--steel-300); }
.ind-soltower__role { font-size: 13.5px; color: var(--steel-500); line-height: 1.45; max-width: 72ch; }
.ind-soltower__layer.is-on { background: #20262e; border-color: #2f3640; }
.ind-soltower__layer.is-on .ind-soltower__node { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(238, 97, 36,0.16), 0 0 12px rgba(238, 97, 36,0.6); }
.ind-soltower__layer.is-on .ind-soltower__name { color: var(--paper); }
.ind-soltower__layer.is-on .ind-soltower__glyph { color: var(--signal); }
.ind-soltower__layer.is-on .ind-soltower__num { color: var(--signal); }
.ind-soltower__layer.is-on .ind-soltower__role { color: var(--steel-300); }
.ind-soltower__layer.is-off { opacity: 0.45; }
.ind-soltower__layer.is-off .ind-soltower__role { font-style: italic; color: var(--steel-700); }

.ind-outcomes { background: var(--steel-100); padding: 58px 0 !important; border-top: 1px solid var(--steel-300); border-bottom: 1px solid var(--steel-300); }
.ind-outcomes .ind-kicker { color: var(--signal-press); margin: 0 0 22px; }
.ind-outcomes__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.ind-outcomes__grid li { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: start; padding: 18px 0; border-top: 1px solid var(--steel-300); }
.ind-outcomes__idx { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--signal-press); padding-top: 3px; }
.ind-outcomes__grid p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink); max-width: 46ch; }
@media (max-width: 760px) { .ind-outcomes__grid { grid-template-columns: 1fr; column-gap: 0; } }

.ind-stack--solution { padding: 64px 0 !important; }
.ind-layerroles { margin-top: 32px; border-top: 1px solid var(--steel-700); }
.ind-layerrole { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--steel-700); align-items: baseline; }
.ind-layerrole__name { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; color: var(--signal); }
.ind-layerrole__role { color: var(--steel-300); font-size: 16px; line-height: 1.5; max-width: 64ch; }

.ind-sol-products { background: var(--paper); }
.ind-sol-brands { margin: 18px 0 0; font-size: 14px; color: var(--steel-500); }
.ind-sol-brands a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--steel-200); }
.ind-sol-brands a:hover { border-bottom-color: currentColor; }
.ind-sol-brands span { color: var(--steel-200); margin: 0 2px; }
.ind-prodgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--steel-100); border: 1px solid var(--steel-100); }
.ind-prodtile { background: var(--card); padding: 18px 18px 22px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; transition: background 0.18s var(--ease); }
.ind-prodtile:hover { background: var(--paper); }
.ind-prodtile__img { display: block; aspect-ratio: 1; overflow: hidden; }
.ind-prodtile__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.25s var(--ease); }
.ind-prodtile:hover .ind-prodtile__img img { transform: scale(1.03); }
.ind-prodtile__name { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ind-prodtile__price { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); margin-top: auto; }
.ind-prodtile__price .ind-exvat { color: var(--steel-500); font-size: 11px; }
.ind-prodtile__stock { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1f7a4d; }
.ind-prodtile__stock i { width: 6px; height: 6px; border-radius: 50%; background: #1f7a4d; }

.ind-sol-facts { background: var(--ink); }
.ind-sol-facts__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.ind-sol-facts h3 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-mono); font-weight: 500; color: var(--steel-300); margin: 0 0 8px; }
.ind-compliance { list-style: none; margin: 0; padding: 0; }
.ind-compliance li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid #2a2f37; }
.ind-compliance li:first-child { border-top: 0; }
.ind-compliance__ico { width: 18px; height: 18px; color: var(--signal); margin-top: 2px; flex: none; }
.ind-compliance__std { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--paper); }
.ind-compliance__txt { font-size: 15px; line-height: 1.55; color: var(--steel-300); }
.ind-cost { position: relative; font-size: 15.5px; line-height: 1.65; color: var(--steel-300); max-width: 56ch; margin-top: 16px; border: 1px solid #2a2f37; background: #15181d; padding: 22px 22px 20px; }
.ind-cost p { margin: 0; }
.ind-cost::before { content: 'INDICATIVE'; position: absolute; top: -8px; left: 18px; background: var(--ink); padding: 0 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--signal); }
@media (max-width: 760px) { .ind-sol-facts__cols { grid-template-columns: 1fr; gap: 36px; } }

.ind-sol-faq { background: var(--paper); }
.ind-sol-faq h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 28px; }
.ind-faq { border-bottom: 1px solid var(--steel-300); }
.ind-faq summary { cursor: pointer; padding: 20px 0; font-size: 18px; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.ind-faq summary::-webkit-details-marker { display: none; }
.ind-faq summary::after { content: '+'; font-family: var(--font-mono); color: var(--signal-press); font-size: 22px; line-height: 1; }
.ind-faq[open] summary::after { content: '−'; }
.ind-faq p { margin: 0 0 22px; font-size: 16px; line-height: 1.65; color: var(--steel-700); max-width: 68ch; }

/* Guard: if any WP emoji slips through, never let it balloon inside a dashboard/solution */
img.emoji, .ind-dash img.emoji, .ind-solution img.emoji { width: 1em !important; height: 1em !important; display: inline-block; margin: 0 .05em; vertical-align: -0.1em; }

/* ===== Per-sector background texture (makes the 24 solution pages read as distinct families) ===== */
.ind-band-tex { position: relative; overflow: hidden; }
.ind-band-tex > .ind-container { position: relative; z-index: 1; }
.ind-band-tex::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--sector-bg, none); background-size: var(--sector-size, auto); }
@media (prefers-reduced-motion: no-preference) { .ind-band-tex::before { transition: none; } }

/* line colour per band context: dark on the light outcomes band, light on the graphite bands */
.ind-solution .ind-outcomes { --tex: rgba(62,68,75,0.11); --tex2: rgba(224,94,4,0.20); }
.ind-solution .ind-stack, .ind-solution .ind-sol-facts { --tex: rgba(255,255,255,0.055); --tex2: rgba(238, 97, 36,0.22); }

/* the seven motifs */
.ind-solution[data-sector="water"]     { --sector-bg: repeating-linear-gradient(0deg, var(--tex) 0 1px, transparent 1px 22px); }
.ind-solution[data-sector="buildings"] { --sector-bg: linear-gradient(var(--tex) 1px, transparent 1px), linear-gradient(90deg, var(--tex) 1px, transparent 1px); --sector-size: 38px 38px, 38px 38px; }
.ind-solution[data-sector="industry"]  { --sector-bg: repeating-linear-gradient(90deg, var(--tex) 0 1px, transparent 1px 32px), radial-gradient(var(--tex2) 1.5px, transparent 1.7px); --sector-size: auto, 96px 96px; }
.ind-solution[data-sector="transport"] { --sector-bg: repeating-linear-gradient(135deg, var(--tex) 0 2px, transparent 2px 15px); }
.ind-solution[data-sector="spaces"]    { --sector-bg: radial-gradient(var(--tex) 1.4px, transparent 1.6px); --sector-size: 24px 24px; }
.ind-solution[data-sector="remote"]    { --sector-bg: radial-gradient(var(--tex) 1.6px, transparent 1.8px), radial-gradient(var(--tex2) 2px, transparent 2.2px); --sector-size: 58px 58px, 168px 150px; }
.ind-solution[data-sector="built"]     { --sector-bg: repeating-linear-gradient(45deg, var(--tex) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, var(--tex) 0 1px, transparent 1px 12px); }

/* ============ SOLUTIONS HUB ============ */
.ind-solhub-hero { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); padding: 80px 0 56px !important; }
.ind-solhub-hero .ind-container { position: relative; z-index: 2; }
.ind-solhub-hero .ind-kicker { color: var(--signal-press); }
.ind-solhub-hero h1 { color: var(--ink); font-size: clamp(34px, 5vw, 56px); max-width: 16ch; margin: 0 0 16px; }
.ind-solhub-hero p { color: var(--steel-700); font-size: 18px; max-width: 64ch; line-height: 1.6; }
.ind-solhub-grid-wrap { padding: 48px 0 72px; }
/* Sector groups on the hub: a labelled cluster + count above each grid. */
.ind-solhub-group { margin: 0 0 44px; }
.ind-solhub-group:last-child { margin-bottom: 0; }
.ind-solhub-group__title { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-700); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--steel-100); }
.ind-solhub-group__n { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--signal-press); letter-spacing: 0; }
.ind-solhub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--steel-100); border: 1px solid var(--steel-100); }
.ind-solhub-card { background: var(--card); padding: 28px 26px 30px; text-decoration: none; display: flex; flex-direction: column; transition: background 0.18s var(--ease); position: relative; min-height: 200px; }
.ind-solhub-card:hover { background: var(--paper); }
.ind-solhub-card__sector { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-500); margin-bottom: 14px; }
.ind-solhub-card__title { font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 10px; }
.ind-solhub-card__line { font-size: 14.5px; color: var(--steel-700); line-height: 1.5; }
.ind-solhub-card__arrow { margin-top: auto; padding-top: 18px; color: var(--signal-press); font-family: var(--font-mono); }
.ind-solhub-card:hover .ind-solhub-card__title { color: var(--signal-press); }

/* ============ BRANDS ============ */
/* hero range panel (instrument-styled, honest stats + real product thumbs) */
.ind-brand__tagline { font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 14px; max-width: 40ch; }
.ind-brandpanel .ind-statcard__val { color: var(--signal); }
.ind-brandpanel__thumbs { display: flex; gap: 1px; background: #23272d; border-top: 1px solid #23272d; }
.ind-brandpanel__thumb { flex: 1; background: #fff; aspect-ratio: 1; display: block; overflow: hidden; }
.ind-brandpanel__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.ind-brandpanel__note { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-top: 1px solid #23272d; font-family: var(--font-mono); font-size: 12px; color: var(--steel-300); }
.ind-brandpanel__note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); flex: none; }

/* brands hub grid */
.ind-brandgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ind-brandcard { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 204px; background: var(--card); border: 1px solid var(--steel-100); border-radius: 10px; padding: 24px; text-decoration: none; transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.ind-brandcard:hover { border-color: var(--steel-300); transform: translateY(-4px); box-shadow: 0 24px 42px -26px rgba(26,29,33,0.34); }
.ind-brandcard::before { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.ind-brandcard:hover::before { transform: scaleX(1); }
.ind-brandcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ind-brandcard__name { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.ind-brandcard__meta { font-family: var(--font-mono); font-size: 11px; color: var(--steel-500); white-space: nowrap; }
.ind-brandcard__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-press); margin-bottom: 10px; }
.ind-brandcard__tagline { font-size: 15px; color: var(--steel-700); line-height: 1.5; }
.ind-brandcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.ind-brandcard__layers { display: flex; flex-wrap: wrap; gap: 5px; }
.ind-brandcard__layers i { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; font-style: normal; color: var(--steel-500); border: 1px solid var(--steel-100); border-radius: 3px; padding: 3px 6px; }
.ind-brandcard__go { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--signal-press); white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.ind-brandcard:hover .ind-brandcard__go { opacity: 1; transform: none; }
@media (hover: none) { .ind-brandcard__go { opacity: 1; transform: none; } }
@media (max-width: 980px) { .ind-brandgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ind-brandgrid { grid-template-columns: 1fr; } }

/* sister-company badge */
.ind-brand__sister { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal-press); background: var(--card); border: 1px solid var(--steel-300); border-radius: 100px; padding: 6px 14px; margin: 0 0 14px; }
.ind-brand__sister-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(238, 97, 36,0.14); }

/* brand product showcase (sister / AquaIoT range) */
.ind-rangegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ind-rangecard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--steel-100); border-radius: 12px; overflow: hidden; }
.ind-rangecard__img { display: block; aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden; }
.ind-rangecard__img img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.ind-rangecard__name { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; padding: 18px 20px 0; }
.ind-rangecard__blurb { font-size: 14px; color: var(--steel-700); line-height: 1.55; padding: 8px 20px 22px; }

/* photo-mode: real photography instead of white-background cutouts */
.ind-rangecard__img--photo img { object-fit: cover; padding: 0; }
.ind-brandpanel--photo .ind-brandpanel__thumb img { object-fit: cover; padding: 0; }
.ind-rangegrid:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }

/* brand story: alternating photo + narrative rows */
.ind-brandstory { background: var(--paper); }
.ind-brandstory .ind-container { display: flex; flex-direction: column; gap: 56px; }
.ind-brandstory__row { display: grid; grid-template-columns: 1.08fr 1fr; gap: 48px; align-items: center; }
.ind-brandstory__row--flip .ind-brandstory__media { order: 2; }
.ind-brandstory__media { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 30px 60px -34px rgba(26,29,33,0.45); }
.ind-brandstory__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.ind-brandstory__row:hover .ind-brandstory__media img { transform: scale(1.03); }
.ind-brandstory__n { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--signal-press); border: 1px solid var(--steel-300); border-radius: 6px; padding: 4px 9px; margin-bottom: 16px; }
.ind-brandstory__copy h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.015em; margin: 0 0 14px; }
.ind-brandstory__copy p { font-size: 16px; line-height: 1.65; color: var(--steel-700); margin: 0; max-width: 56ch; }
@media (max-width: 860px) {
  .ind-brandstory__row { grid-template-columns: 1fr; gap: 22px; }
  .ind-brandstory__row--flip .ind-brandstory__media { order: 0; }
  .ind-rangegrid:has(> :nth-child(4)) { grid-template-columns: 1fr; }
}

/* brand solutions chips */
.ind-brand-solutions { background: var(--card); border-top: 1px solid var(--steel-100); }
.ind-brand-solutions__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ind-brand-solutions__chips span { font-size: 14.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--steel-300); border-radius: 100px; padding: 9px 18px; transition: border-color 0.18s var(--ease), color 0.18s var(--ease); }
.ind-brand-solutions__chips span:hover { border-color: var(--signal); color: var(--signal-press); }
@media (max-width: 860px) { .ind-rangegrid { grid-template-columns: 1fr; } }

/* ============ QUOTE FORM ============ */
.ind-quote-page { max-width: 720px; margin: 0 auto; padding: 64px 24px 80px; }
.ind-quote-page h1 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 12px; }
.ind-quote-page > p.lead { font-size: 18px; color: var(--steel-700); max-width: 60ch; margin: 0 0 36px; }
.indq-form { background: var(--card); border: 1px solid var(--steel-300); padding: 32px; }
.indq-product { background: var(--paper); border: 1px solid var(--steel-100); padding: 14px 16px; margin: 0 0 24px; font-size: 15px; }
.indq-product__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--steel-500); }
.indq-product code { font-family: var(--font-mono); font-size: 13px; color: var(--signal-press); }
.indq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.indq-form label { display: block; font-size: 13px; font-weight: 600; color: var(--steel-700); }
.indq-form input, .indq-form textarea { width: 100%; margin-top: 7px; padding: 12px 14px; border: 1px solid var(--steel-300); border-radius: var(--r); font-family: var(--font-sans); font-size: 15px; background: var(--paper); }
.indq-form input:focus, .indq-form textarea:focus { outline: none; border-color: var(--signal); }
.indq-msg { display: block; margin-bottom: 22px; }
.indq-hp { position: absolute; left: -9999px; }
.indq-form button { width: 100%; }
.indq-ok { background: var(--card); border: 1px solid var(--stock); padding: 36px; text-align: center; }
.indq-ok h2 { color: var(--stock); margin: 0 0 8px; }

/* ============ HEADER NAV DROPDOWNS ============ */
.indiott .site-header-item .header-navigation .menu > .menu-item > a { font-weight: 600; }
.indiott .header-navigation .sub-menu { border-top: 2px solid var(--signal); box-shadow: var(--shadow-1); }
.ind-headcta a { background: var(--signal); color: var(--ink) !important; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 18px !important; border-radius: var(--r); }
.ind-headcta a:hover { background: var(--ink); color: var(--paper) !important; }

/* ============ MEGA MENU (desktop dropdowns) ============ */
@media (min-width: 769px) {
  /* Anchor every dropdown to the PAGE-centred header wrap, not the menu (the menu sits
     right of the logo, so menu-centred panels drift right). The whole chain between the
     menu and the wrap is forced static so the wrap is the positioning context. */
  .indiott .site-main-header-inner-wrap { position: relative; }
  .indiott .site-header-main-section-right,
  .indiott .site-header-main-section-right .site-header-item-main-navigation,
  .indiott .site-header-main-section-right .header-navigation,
  .indiott .site-header-main-section-right .primary-menu-container,
  .indiott .site-header-main-section-right .header-navigation ul.menu,
  .indiott .site-header-main-section-right .header-navigation .menu > .menu-item-has-children { position: static; }

  /* The dropdown <ul> becomes a floating mega panel: heading + two link columns + feature card */
  .indiott .site-header-main-section-right .header-navigation .menu > .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: translateY(6px);
    width: auto;
    max-width: none;     /* span the full navbar container */
    background: var(--card);
    border: 1px solid var(--steel-100) !important;
    border-radius: 16px;
    box-shadow: 0 28px 64px -26px rgba(26,29,33,0.34), 0 6px 20px -10px rgba(26,29,33,0.14);
    padding: 26px 28px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr minmax(244px, 290px);
    align-content: start;
    gap: 3px 30px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    z-index: 120;
  }
  /* invisible bridge so the cursor can cross the gap from item to panel without closing */
  .indiott .site-header-main-section-right .header-navigation .menu > .menu-item-has-children > .sub-menu::before {
    content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 10px; background: transparent;
  }
  .indiott .site-header-main-section-right .header-navigation .menu > .menu-item-has-children:hover > .sub-menu,
  .indiott .site-header-main-section-right .header-navigation .menu > .menu-item-has-children:focus-within > .sub-menu,
  .indiott .site-header-main-section-right .header-navigation .menu > .menu-item-has-children.ind-mega-open > .sub-menu,
  .indiott .site-header-main-section-right .header-navigation .menu > .menu-item-has-children.ind-nav-open > .sub-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
  }

  /* section heading (injected) */
  .indiott .header-navigation .sub-menu .ind-mega__head {
    grid-column: 1 / 3; grid-row: 1;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink); padding: 2px 0 12px; margin: 0 0 6px; border-bottom: 1px solid var(--steel-100);
    list-style: none;
  }

  /* link items flow into the two left columns */
  .indiott .site-header-main-section-right .header-navigation .menu > .menu-item-has-children > .sub-menu > li.menu-item {
    margin: 0; width: auto; border: 0 !important;
  }
  .indiott .header-navigation .sub-menu li.menu-item > a {
    display: block; padding: 11px 12px; border-radius: 8px;
    font-size: 15.5px; font-weight: 500; color: var(--ink); white-space: normal; line-height: 1.3;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
  }
  .indiott .header-navigation .sub-menu li.menu-item > a:hover { background: var(--paper); color: var(--signal-press); }
  .indiott .header-navigation .sub-menu li.menu-item > a::after { display: none; } /* kill any Kadence caret */

  /* feature card: graphite instrument promo in the right column, full height */
  .indiott .header-navigation .sub-menu .ind-mega__feature { grid-column: 3; grid-row: 1 / span 50; margin: 0; width: auto; list-style: none; }
  .indiott .header-navigation .sub-menu .ind-mega__feature span { white-space: normal; }
  .ind-mega__feat-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--ink); border-radius: 12px; padding: 18px; overflow: hidden; }
  /* cursor-aware orange spotlight */
  .ind-mega__feat-card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 12px; opacity: 0; transition: opacity 0.25s var(--ease); background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0), rgba(238, 97, 36,0.16), transparent 70%); }
  .ind-mega__feat-card:hover::before { opacity: 1; }
  /* transparent overlay link, retargeted per active slide; sits under the content (which is click-through) */
  .ind-mega__feat-link { position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
  /* per-slide carousel media tile */
  .ind-mega__feat-media { position: relative; z-index: 2; pointer-events: none; display: block; height: 118px; background: #fff; border-radius: 8px; overflow: hidden; flex: none; margin-bottom: 16px; }
  .ind-mega__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; opacity: 0; transition: opacity 0.4s var(--ease); }
  .ind-mega__slide.is-active { opacity: 1; }
  .ind-mega__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; pointer-events: auto; }
  .ind-mega__dot { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 100px; background: var(--steel-300); cursor: pointer; transition: width 0.25s var(--ease), background 0.2s var(--ease); }
  .ind-mega__dot::before { content: ''; position: absolute; inset: -9px; } /* 24px hit area */
  .ind-mega__dot:hover { background: var(--steel-500); }
  .ind-mega__dot.is-active { width: 16px; background: var(--signal); }
  .ind-mega__dot:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  .ind-mega__feat-body { position: relative; z-index: 2; pointer-events: none; display: flex; flex-direction: column; flex: 1; padding: 0; }
  .ind-mega__feat-title { transition: opacity 0.3s var(--ease); }
  .ind-mega__feat-card::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6;
    background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(120% 90% at 90% 100%, #000, transparent 72%);
    mask-image: radial-gradient(120% 90% at 90% 100%, #000, transparent 72%);
  }
  .ind-mega__feat-eyebrow { position: relative; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-press); margin-bottom: 12px; }
  .ind-mega__feat-title { position: relative; font-size: 19px; font-weight: 700; color: var(--paper); line-height: 1.24; letter-spacing: -0.01em; margin-bottom: 8px; }
  .ind-mega__feat-text { position: relative; font-size: 13px; color: var(--steel-300); line-height: 1.5; }
  .ind-mega__feat-cta { position: relative; margin-top: auto; padding-top: 18px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--paper); display: inline-flex; align-items: center; gap: 7px; }
  .ind-mega__feat-cta i { color: var(--signal-press); font-style: normal; transition: transform 0.2s var(--ease); }
  .ind-mega__feat-card:hover .ind-mega__feat-cta i { transform: translateX(4px); }

  /* "Get a quote" nav item becomes an orange pill */
  .indiott .site-header-main-section-right .header-navigation .menu > .menu-item > a[href*="/quote"] {
    background: var(--signal); color: var(--ink) !important; border-radius: 100px;
    padding: 9px 18px !important; font-family: var(--font-mono); font-size: 12.5px;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
    transition: background 0.16s var(--ease), color 0.16s var(--ease);
  }
  .indiott .site-header-main-section-right .header-navigation .menu > .menu-item > a[href*="/quote"]:hover {
    background: var(--ink); color: var(--paper) !important;
  }
}
/* mega carousel: hold the first image when motion is reduced */
@media (prefers-reduced-motion: reduce) {
  .ind-mega__feat-media img { animation-name: none !important; opacity: 0; }
  .ind-mega__feat-media img:first-child { opacity: 1; }
}

@media (max-width: 1020px) {
  .ind-prodgrid { grid-template-columns: repeat(2, 1fr); }
  .ind-solhub-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-sol-facts__cols { grid-template-columns: 1fr; gap: 36px; }
  .ind-outcomes ul { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ind-prodgrid, .ind-solhub-grid { grid-template-columns: 1fr; }
  .ind-layerrole { grid-template-columns: 1fr; gap: 4px; }
  .indq-grid { grid-template-columns: 1fr; }
}

/* ============ CODED FOOTER ============ */
.ind-footer { background: var(--ink); color: var(--steel-300); padding: 64px 0 32px; margin-top: 0; }
.ind-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--steel-700); }
.ind-footer__logo { display: inline-block; line-height: 0; margin-bottom: 16px; }
.ind-footer__logo .ind-logo { display: block; width: auto; height: 30px; }
.ind-footer__brand p { color: var(--steel-300); font-size: 14.5px; line-height: 1.6; max-width: 38ch; margin: 0 0 12px; }
.ind-footer__promise { font-family: var(--font-mono); font-size: 12.5px; color: var(--signal) !important; }
.ind-footer__col h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel-500); margin: 0 0 16px; font-weight: 500; }
.ind-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ind-footer__col li { margin-bottom: 10px; }
.ind-footer__col a { color: var(--steel-300); text-decoration: none; font-size: 14.5px; transition: color 0.15s var(--ease); }
.ind-footer__col a:hover { color: var(--paper); }
.ind-footer__certs { display: flex; flex-wrap: wrap; gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--steel-700); }
.ind-footer__certs .ind-badge { border-color: var(--steel-700); color: var(--steel-500); }
.ind-footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); }
.ind-footer__legal a { color: var(--steel-500); text-decoration: none; }
.ind-footer__legal a:hover { color: var(--paper); }
.ind-footer__contact { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; font-style: normal; font-size: 14px; line-height: 1.55; color: var(--steel-300); }
.ind-footer__contact a { color: var(--steel-300); text-decoration: none; transition: color 0.15s var(--ease); }
.ind-footer__contact a:hover { color: var(--paper); }
.ind-footer__phone { font-family: var(--font-mono); font-size: 17px; letter-spacing: 0.01em; color: var(--paper) !important; }
.ind-footer__phone:hover { color: var(--signal) !important; }
.ind-footer__entity { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--steel-500); max-width: 88ch; }
@media (max-width: 900px) {
  .ind-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .ind-footer__top { grid-template-columns: 1fr; }
  .ind-footer__legal { flex-direction: column; }
}

/* ============ PDP: solutions matrix chips ============ */
.ind-pdp-solutions { margin: 22px 0; padding-top: 18px; border-top: 1px solid var(--steel-100); }
.ind-pdp-solutions__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--steel-500); display: block; margin-bottom: 12px; }
.ind-pdp-solutions__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ind-solchip { font-size: 13.5px; color: var(--ink); text-decoration: none; border: 1px solid var(--steel-300); padding: 7px 13px; border-radius: var(--r); transition: border-color 0.15s var(--ease), color 0.15s var(--ease); }
.ind-solchip:hover { border-color: var(--signal); color: var(--signal-press); }

/* ============================================================
   MOTION SYSTEM: scroll reveals (pure CSS, content visible by default)
   No JS dependency: if scroll-driven animation is unsupported, content simply shows.
   ============================================================ */
@keyframes indReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes indRevealFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] { animation: indReveal both; animation-timeline: view(); animation-range: entry 2% cover 20%; }
    [data-reveal="fade"] { animation-name: indRevealFade; }
    .ind-cats__grid[data-reveal] > *,
    .ind-solutions__grid[data-reveal] > *,
    .ind-insights__grid[data-reveal] > *,
    .ind-prodgrid[data-reveal] > *,
    .ind-solhub-grid[data-reveal] > * { animation: indReveal both; animation-timeline: view(); animation-range: entry 0% cover 16%; }
  }
}

/* ============================================================
   HERO: two-column with live console
   ============================================================ */
.ind-hero { overflow: hidden; }
.ind-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding-bottom: 80px; }
.ind-hero__copy { max-width: 600px; }
.ind-hero h1 { max-width: 14ch; }
.ind-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 980px) {
  .ind-hero__inner { grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
  .ind-console { order: 2; }
}

/* ---------- console panel ---------- */
.ind-console {
  background: linear-gradient(180deg, #181b20 0%, #14171b 100%);
  border: 1px solid #2c323a;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  position: relative;
  overflow: hidden;
}
.ind-console::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 0%, transparent 96%, rgba(238, 97, 36,0.03) 100%);
  background-size: 100% 4px;
}
.ind-console__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #23272d; font-size: 11px; letter-spacing: 0.06em; }
.ind-console__live { display: inline-flex; align-items: center; gap: 7px; color: var(--stock); font-weight: 500; }
.ind-console__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--stock); box-shadow: 0 0 0 0 rgba(22,163,74,0.5); animation: indPulse 2s infinite; }
@keyframes indPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5);} 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0);} 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0);} }
.ind-console__id { color: var(--steel-500); }
.ind-console__clock { margin-left: auto; color: var(--steel-300); font-variant-numeric: tabular-nums; }

.ind-console__metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #23272d; }
.ind-metric { padding: 16px; border-left: 1px solid #23272d; }
.ind-metric:first-child { border-left: 0; }
.ind-metric__val { display: block; font-size: 24px; font-weight: 600; color: var(--paper); font-variant-numeric: tabular-nums; line-height: 1; }
.ind-metric__label { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-500); margin-top: 7px; }

.ind-console__graph { padding: 8px 10px 0; }
.ind-netgraph { width: 100%; height: auto; display: block; }
.ng-link { fill: none; stroke: #313842; stroke-width: 1.4; }
.ng-link--trunk { stroke: #3a424d; }
.ng-link--sat { stroke: #3a424d; stroke-dasharray: 3 4; }
.ng-pkt { fill: var(--signal); filter: drop-shadow(0 0 3px rgba(238, 97, 36,0.8)); }
.ng-pkt--trunk { fill: var(--stock); filter: drop-shadow(0 0 3px rgba(22,163,74,0.8)); }
.ng-pkt--sat { fill: #60a5fa; filter: drop-shadow(0 0 3px rgba(96,165,250,0.8)); }
.ng-dot { fill: #f7f8f9; }
.ng-sensor .ng-dot { animation: ngBlink 3s infinite; }
.ng-sensor:nth-child(odd) .ng-dot { animation-delay: 1.2s; }
@keyframes ngBlink { 0%,100% { fill: #c6ccd2; } 50% { fill: var(--signal); } }
.ng-ring { fill: none; stroke: var(--signal); stroke-width: 1.5; opacity: 0.7; }
.ng-gateway .ng-ring { transform-origin: 250px 115px; animation: ngRing 2.4s ease-out infinite; }
@keyframes ngRing { 0% { transform: scale(0.7); opacity: 0.8; } 100% { transform: scale(1.25); opacity: 0; } }
.ng-chip { fill: #1f242b; stroke: #4a525d; stroke-width: 1.2; }
.ng-chip--gw { fill: #241a12; stroke: var(--signal); }
.ng-chip--srv { fill: #1f242b; stroke: #4a525d; }
.ng-srv-line { stroke: var(--stock); stroke-width: 1.4; }
.ng-panel { stroke: #60a5fa; stroke-width: 1.6; }
.ng-label { font: 500 8.5px var(--font-mono); fill: var(--steel-500); letter-spacing: 0.1em; }
.ng-label--sat { fill: #60a5fa; }

.ind-console__readouts { display: grid; grid-template-columns: 0.9fr 0.9fr 1.2fr; gap: 0; border-top: 1px solid #23272d; }
.ind-readout { padding: 12px 16px; border-left: 1px solid #23272d; display: flex; flex-direction: column; gap: 8px; }
.ind-readout:first-child { border-left: 0; }
.ind-readout__k { font-size: 9.5px; letter-spacing: 0.1em; color: var(--steel-500); }
.ind-readout__v { font-size: 17px; color: var(--paper); font-variant-numeric: tabular-nums; }
.ind-readout--bar { justify-content: flex-end; }
.ind-readout__track { height: 22px; background: #1f242b; border: 1px solid #2c323a; border-radius: 2px; display: flex; align-items: flex-end; overflow: hidden; }
.ind-readout__fill { width: 100%; background: linear-gradient(180deg, var(--signal), #c2410c); transition: height 1.4s cubic-bezier(0.165,0.84,0.44,1); height: 50%; }
.ind-spark { width: 100%; height: 24px; }
.ind-spark__line { fill: none; stroke: var(--stock); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: all 0.6s linear; }

.ind-console__alert { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid #23272d; font-size: 11.5px; color: var(--steel-300); letter-spacing: 0.02em; }
.ind-console__alert-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stock); flex: none; transition: background 0.3s; }
.ind-console__alert[data-state="alarm"] { color: #fed7aa; }
.ind-console__alert[data-state="alarm"] .ind-console__alert-dot { background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: indPulse 1s infinite; }
.ind-console__alert[data-state="info"] .ind-console__alert-dot { background: #60a5fa; }

/* ============================================================
   INTERACTIVE STACK: hover focus
   ============================================================ */
.ind-stack__svgwrap [data-layer] { cursor: default; transition: opacity 0.3s var(--ease); }
.ind-stack__svgwrap [data-layer].dim { opacity: 0.35; }

/* gentle float on packets handled by SVG. Trust strip counters tabular */
.ind-trust strong { font-variant-numeric: tabular-nums; }

/* ---------- doors band (relocated below hero) ---------- */
.ind-doors-band { background: var(--paper); padding: 56px 0; }
.ind-doors-band .ind-doors { box-shadow: 0 20px 50px -30px rgba(26,29,33,0.35); }

/* ---------- interactive stack layer hover ---------- */
.sl-layer { cursor: pointer; transition: opacity 0.3s var(--ease); }
.sl-layer .sl-band { transition: fill 0.25s var(--ease), stroke 0.25s var(--ease); }
.sl-layer:hover .sl-band { fill: #20252c; stroke: var(--signal); }
.sl-layer:hover .sl-name { fill: var(--signal); }
.sl-layer.dim { opacity: 0.4; }

/* ============================================================
   HOMEPAGE: light hero, dark instrument console, interactive stack
   ============================================================ */

/* ---------- hero: paper base, blueprint grid, warm glow ---------- */
.ind-hero { position: relative; background: var(--paper); overflow: hidden; padding-top: 88px; }
.ind-hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--steel-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel-100) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(125% 88% at 50% -8%, #000 38%, transparent 80%);
  mask-image: radial-gradient(125% 88% at 50% -8%, #000 38%, transparent 80%);
  opacity: 0.85;
}
.ind-hero::after { content: ''; position: absolute; right: -6%; top: -34%; width: 56%; height: 92%; background: radial-gradient(circle, rgba(238, 97, 36,0.08), transparent 62%); pointer-events: none; z-index: 0; }
.ind-hero__inner { position: relative; z-index: 2; }

.ind-hero__pill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-700); background: var(--card); border: 1px solid var(--steel-300); border-radius: 100px; padding: 7px 15px 7px 13px; margin-bottom: 22px; box-shadow: var(--shadow-1); }
.ind-hero__pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stock); box-shadow: 0 0 0 0 rgba(22,163,74,0.45); animation: indPulse 2.4s infinite; }
.ind-hero__accent { color: var(--signal-press); }
.ind-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.ind-hero__chips span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel-700); background: var(--card); border: 1px solid var(--steel-300); border-radius: 3px; padding: 5px 10px; }

/* ---------- console: solid dark instrument on the light page ---------- */
.ind-console {
  background: #15181d;
  border: 1px solid #272c33;
  border-radius: 12px;
  box-shadow: 0 34px 64px -30px rgba(26,29,33,0.5), 0 4px 14px -6px rgba(26,29,33,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.ind-console::before { display: none; }
.ind-console__bar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #23272d; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }
.ind-console__live { display: inline-flex; align-items: center; gap: 7px; color: #34d399; font-weight: 500; }
.ind-console__pulse { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,0.5); animation: indPulse 2s infinite; }
@keyframes indPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5);} 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0);} 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0);} }
.ind-console__id { color: var(--steel-500); }
.ind-console__clock { margin-left: auto; color: var(--steel-300); font-variant-numeric: tabular-nums; }

.ind-console__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #23272d; }
.ind-statcard { background: #181c21; padding: 15px 16px 16px; }
.ind-statcard__label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--steel-500); margin-bottom: 8px; }
.ind-statcard__val { display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--signal); line-height: 1; font-variant-numeric: tabular-nums; }
.ind-statcard__val--blue { color: #60a5fa; } .ind-statcard__val--green { color: #34d399; }
.ind-statcard__bar { display: block; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-top: 12px; overflow: hidden; }
.ind-statcard__bar i { display: block; height: 100%; background: var(--signal); border-radius: 2px; }
.ind-statcard__bar--blue i { background: #60a5fa; } .ind-statcard__bar--green i { background: #34d399; }

.ind-console__chart { padding: 14px 18px 6px; border-top: 1px solid #23272d; }
.ind-console__chart-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-500); margin-bottom: 8px; }
.ind-console__chart-peak { color: var(--signal); }
.ind-areachart { width: 100%; height: 70px; display: block; }
.ind-areachart__line { fill: none; stroke: var(--signal); stroke-width: 1.6; vector-effect: non-scaling-stroke; }

.ind-console__feed { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.ind-feeditem { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px 9px 28px; background: #181c21; border: 1px solid #23272d; border-radius: 5px; }
.ind-feeditem::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--steel-500); }
.ind-feeditem__main { font-size: 12.5px; color: var(--steel-300); }
.ind-feeditem__main b { color: var(--paper); font-weight: 600; }
.ind-feeditem__meta { font-family: var(--font-mono); font-size: 10px; color: var(--steel-500); white-space: nowrap; }
.ind-feeditem--alarm::before { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.ind-feeditem--alarm .ind-feeditem__main b { color: #fdba74; }
.ind-feeditem--ok::before { background: #34d399; }
.ind-feeditem--info::before { background: #60a5fa; }

/* ---------- process band ---------- */
.ind-process { background: var(--paper); padding: 80px 0; }
.ind-process h2 { font-size: clamp(28px, 3.4vw, 38px); max-width: 18ch; margin: 8px 0 44px; }
.ind-process__row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 12px; }
.ind-process__step { padding: 26px 24px; border: 1px solid var(--steel-100); border-radius: 8px; background: var(--card); border-top: 3px solid var(--steel-300); }
.ind-process__step--a { border-top-color: #ef4444; } .ind-process__step--b { border-top-color: var(--signal); } .ind-process__step--c { border-top-color: #16a34a; }
.ind-process__tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 12px; }
.ind-process__step--a .ind-process__tag { color: #ef4444; } .ind-process__step--b .ind-process__tag { color: var(--signal-press); } .ind-process__step--c .ind-process__tag { color: #16a34a; }
.ind-process__step h3 { font-size: 19px; margin: 0 0 10px; }
.ind-process__step p { font-size: 14.5px; line-height: 1.55; color: var(--steel-700); margin: 0; }
.ind-process__arrow { align-self: center; color: var(--steel-300); font-family: var(--font-mono); font-size: 22px; }

/* ---------- stack section header ---------- */
.ind-stack__head { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 56px; align-items: end; }
.ind-stack__head h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 6px 0 0; }
.ind-stack p.ind-stack__intro { margin: 0; }

/* ---------- interactive five-layer signal tower ---------- */
.ind-stack--explorer { padding-bottom: 84px; }
.ind-stackx { margin-top: 44px; }
.ind-stackx__radio { position: absolute; opacity: 0; pointer-events: none; }
.ind-stackx__inner { display: grid; grid-template-columns: minmax(300px, 384px) 1fr; gap: 44px; align-items: start; }

/* left: the clickable tower */
.ind-stackx__tower { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ind-stackx__thread { position: absolute; left: 21.5px; top: 24px; bottom: 24px; width: 2px; background: #2a2f37; z-index: 0; }
.ind-stackx__pulse { position: absolute; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 9px 1px rgba(238, 97, 36,0.85); animation: stackPulse 3.6s var(--ease) infinite; }
.ind-stackx__pulse:nth-child(2) { animation-delay: 1.8s; }
@keyframes stackPulse { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.ind-stackx__layer { position: relative; z-index: 1; display: grid; grid-template-columns: 24px 22px 1fr; align-items: center; column-gap: 13px; padding: 15px 16px 15px 46px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; transition: background 0.22s var(--ease), border-color 0.22s var(--ease); }
.ind-stackx__node { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; border-radius: 50%; background: #15181d; border: 2px solid #3a424d; transition: border-color 0.22s var(--ease), background 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.ind-stackx__num { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); font-variant-numeric: tabular-nums; }
.ind-stackx__glyph { color: var(--steel-500); display: grid; place-items: center; transition: color 0.22s var(--ease); }
.ind-stackx__glyph svg { width: 20px; height: 20px; }
.ind-stackx__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ind-stackx__name { font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.08em; color: var(--steel-300); transition: color 0.22s var(--ease); }
.ind-stackx__role { font-size: 12.5px; color: var(--steel-500); line-height: 1.35; }
.ind-stackx__layer:hover { background: #1c2128; }
.ind-stackx__layer:hover .ind-stackx__name { color: var(--paper); }
.ind-stackx__layer:hover .ind-stackx__glyph { color: var(--steel-300); }
.ind-stackx__layer:hover .ind-stackx__node { border-color: var(--steel-500); }
/* keyboard focus: hidden radios are focusable, native arrow keys select a layer */
#lay-sense:focus-visible   ~ .ind-stackx__inner label[for="lay-sense"],
#lay-connect:focus-visible ~ .ind-stackx__inner label[for="lay-connect"],
#lay-secure:focus-visible  ~ .ind-stackx__inner label[for="lay-secure"],
#lay-control:focus-visible ~ .ind-stackx__inner label[for="lay-control"],
#lay-manage:focus-visible  ~ .ind-stackx__inner label[for="lay-manage"] { outline: 2px solid var(--signal); outline-offset: 2px; }

/* active layer (radio:checked) */
#lay-sense:checked   ~ .ind-stackx__inner label[for="lay-sense"],
#lay-connect:checked ~ .ind-stackx__inner label[for="lay-connect"],
#lay-secure:checked  ~ .ind-stackx__inner label[for="lay-secure"],
#lay-control:checked ~ .ind-stackx__inner label[for="lay-control"],
#lay-manage:checked  ~ .ind-stackx__inner label[for="lay-manage"] { background: #20262e; border-color: #2f3640; }
#lay-sense:checked   ~ .ind-stackx__inner label[for="lay-sense"] .ind-stackx__node,
#lay-connect:checked ~ .ind-stackx__inner label[for="lay-connect"] .ind-stackx__node,
#lay-secure:checked  ~ .ind-stackx__inner label[for="lay-secure"] .ind-stackx__node,
#lay-control:checked ~ .ind-stackx__inner label[for="lay-control"] .ind-stackx__node,
#lay-manage:checked  ~ .ind-stackx__inner label[for="lay-manage"] .ind-stackx__node { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(238, 97, 36,0.16), 0 0 12px rgba(238, 97, 36,0.6); }
#lay-sense:checked   ~ .ind-stackx__inner label[for="lay-sense"] .ind-stackx__name,
#lay-connect:checked ~ .ind-stackx__inner label[for="lay-connect"] .ind-stackx__name,
#lay-secure:checked  ~ .ind-stackx__inner label[for="lay-secure"] .ind-stackx__name,
#lay-control:checked ~ .ind-stackx__inner label[for="lay-control"] .ind-stackx__name,
#lay-manage:checked  ~ .ind-stackx__inner label[for="lay-manage"] .ind-stackx__name { color: var(--paper); }
#lay-sense:checked   ~ .ind-stackx__inner label[for="lay-sense"] .ind-stackx__glyph,
#lay-connect:checked ~ .ind-stackx__inner label[for="lay-connect"] .ind-stackx__glyph,
#lay-secure:checked  ~ .ind-stackx__inner label[for="lay-secure"] .ind-stackx__glyph,
#lay-control:checked ~ .ind-stackx__inner label[for="lay-control"] .ind-stackx__glyph,
#lay-manage:checked  ~ .ind-stackx__inner label[for="lay-manage"] .ind-stackx__glyph { color: var(--signal); }
#lay-sense:checked   ~ .ind-stackx__inner label[for="lay-sense"] .ind-stackx__num,
#lay-connect:checked ~ .ind-stackx__inner label[for="lay-connect"] .ind-stackx__num,
#lay-secure:checked  ~ .ind-stackx__inner label[for="lay-secure"] .ind-stackx__num,
#lay-control:checked ~ .ind-stackx__inner label[for="lay-control"] .ind-stackx__num,
#lay-manage:checked  ~ .ind-stackx__inner label[for="lay-manage"] .ind-stackx__num { color: var(--signal); }

/* right: per-layer panel */
.ind-stackx__panel { display: none; }
#lay-sense:checked   ~ .ind-stackx__inner .ind-stackx__panel[data-layer="sense"],
#lay-connect:checked ~ .ind-stackx__inner .ind-stackx__panel[data-layer="connect"],
#lay-secure:checked  ~ .ind-stackx__inner .ind-stackx__panel[data-layer="secure"],
#lay-control:checked ~ .ind-stackx__inner .ind-stackx__panel[data-layer="control"],
#lay-manage:checked  ~ .ind-stackx__inner .ind-stackx__panel[data-layer="manage"] { display: block; animation: stackFade 0.42s var(--ease); }
@keyframes stackFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ind-stackx__panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 28px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid #23272d; }
.ind-stackx__desc { font-size: 15.5px; line-height: 1.6; color: var(--steel-300); max-width: 58ch; margin: 0; }
.ind-stackx__browse { font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--signal-press); text-decoration: none; white-space: nowrap; }
.ind-stackx__browse:hover { color: var(--paper); }
.ind-stackx__products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ind-xcard { display: flex; flex-direction: column; background: #181c21; border: 1px solid #23272d; border-radius: 8px; overflow: hidden; text-decoration: none; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.ind-xcard:hover { border-color: #3a424d; transform: translateY(-3px); box-shadow: 0 18px 32px -20px rgba(0,0,0,0.65); }
.ind-xcard__img { display: block; aspect-ratio: 1; background: #fff; overflow: hidden; }
.ind-xcard__img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.ind-xcard__body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ind-xcard__sku { font-family: var(--font-mono); font-size: 10px; color: var(--steel-500); letter-spacing: 0.03em; }
.ind-xcard__name { font-size: 13px; font-weight: 600; color: var(--paper); line-height: 1.32; flex: 1; }
.ind-xcard__price { font-family: var(--font-mono); font-size: 12.5px; color: var(--steel-300); margin-top: 6px; }
.ind-xcard__price .ind-exvat { font-size: 9.5px; color: var(--steel-500); }
.ind-xcard__price .ind-request-price { color: var(--signal-press); font-size: 12px; }

@media (max-width: 980px) {
  .ind-stack__head { grid-template-columns: 1fr; gap: 12px; }
  .ind-stackx__inner { grid-template-columns: 1fr; gap: 30px; }
  .ind-stackx__products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ind-stackx__panel-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- catalogue cards with imagery ---------- */
.ind-cat { padding: 0; overflow: hidden; }
.ind-cat__img { display: block; aspect-ratio: 16/11; background: var(--paper); overflow: hidden; }
.ind-cat__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 14px; transition: transform 0.3s var(--ease); }
.ind-cat:hover .ind-cat__img img { transform: scale(1.05); }
.ind-cat__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.ind-cat::after { top: auto; bottom: 22px; }
/* our own in-house products, inserted into the catalogue grid */
#built { scroll-margin-top: 96px; }
.ind-cat--own .ind-cat__count { color: var(--signal-press); }
.ind-cat--own .ind-cat__img { display: grid; place-items: center; }
.ind-cat--own .ind-built__svg { width: 56%; max-width: 140px; height: auto; color: var(--steel-500); }
.ind-cat--own .ind-built__svg .im-on { stroke: var(--signal); }
.ind-cat--photo .ind-cat__img img { object-fit: cover; mix-blend-mode: normal; padding: 0; }
/* dust monitor uses a pre-cropped landscape card image — just fill the card, centred */
.ind-cat--dust-monitor .ind-cat__img img { object-fit: cover; object-position: center; mix-blend-mode: normal; padding: 0; }

/* ---------- catalogue carousel (auto-scroll + arrow controls) ---------- */
.ind-cats__carousel { position: relative; margin-top: 6px; }
.ind-cats__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ind-cats__viewport::-webkit-scrollbar { display: none; }
.ind-cats__track { display: flex; width: max-content; }
.ind-cats__track .ind-cat { flex: 0 0 clamp(212px, 21vw, 252px); width: clamp(212px, 21vw, 252px); margin-right: 16px;
  border: 1px solid var(--steel-100); border-radius: 5px; background: var(--card); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.ind-cats__track .ind-cat:hover { background: var(--card); border-color: var(--steel-300); transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(26,29,33,0.3); }
/* prev/next arrows */
.ind-cats__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--steel-300); background: var(--card); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(26,29,33,0.3);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease); }
.ind-cats__nav svg { width: 20px; height: 20px; }
.ind-cats__nav:hover { border-color: var(--signal); color: var(--signal-press); transform: translateY(-50%) scale(1.07); }
.ind-cats__nav:active { transform: translateY(-50%) scale(0.95); }
.ind-cats__nav--prev { left: clamp(6px, 2.5vw, 34px); }
.ind-cats__nav--next { right: clamp(6px, 2.5vw, 34px); }
@media (max-width: 600px) { .ind-cats__nav { width: 38px; height: 38px; } }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .ind-process__row { grid-template-columns: 1fr; gap: 14px; }
  .ind-process__arrow { transform: rotate(90deg); justify-self: center; }
  .ind-exp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ind-console__cards { grid-template-columns: 1fr 1fr; }
  .ind-exp-grid { grid-template-columns: 1fr 1fr; }
  .ind-exp-panel__intro { flex-direction: column; gap: 10px; }
}

/* ============================================================
   COMPANY PAGES: About, Services, Contact, Legal
   ============================================================ */
.ind-company { background: var(--paper); }
.ind-company > section { padding: 72px 0; }
.ind-company > .ind-cpage-hero { position: relative; padding: 92px 0 60px; overflow: hidden; }
.ind-cpage-hero .ind-hero__grid { z-index: 0; }
.ind-cpage-hero::after { content: ''; position: absolute; right: -8%; top: -40%; width: 54%; height: 96%; background: radial-gradient(circle, rgba(238, 97, 36,0.07), transparent 62%); pointer-events: none; z-index: 0; }
.ind-cpage-hero__inner { position: relative; z-index: 2; max-width: 820px; }
.ind-cpage-hero h1 { font-size: clamp(34px, 5vw, 54px); margin: 12px 0 20px; max-width: 18ch; }
.ind-cpage-hero__intro { font-size: 18.5px; line-height: 1.62; color: var(--steel-700); max-width: 62ch; margin: 0 0 28px; }
.ind-cpage-hero__ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0; }

.ind-sec-head--c { max-width: 720px; margin-bottom: 38px; }
.ind-sec-title { font-size: clamp(26px, 3.2vw, 36px); margin: 6px 0 10px; }
.ind-sec-lede { font-size: 17px; color: var(--steel-700); max-width: 64ch; margin: 0; line-height: 1.6; }

/* stat row */
.ind-statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--steel-100); border: 1px solid var(--steel-100); border-radius: 10px; overflow: hidden; }
.ind-statrow__cell { background: var(--card); padding: 30px 28px; }
.ind-statrow__val { font-family: var(--font-mono); font-size: clamp(30px, 4vw, 44px); font-weight: 600; color: var(--signal-press); line-height: 1; font-variant-numeric: tabular-nums; }
.ind-statrow__label { display: block; font-size: 14.5px; color: var(--steel-700); margin-top: 12px; line-height: 1.45; }

/* story two-col */
.ind-story { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.ind-story p { font-size: 16px; line-height: 1.72; color: var(--steel-700); margin: 0 0 16px; max-width: none; }
.ind-story p:last-child { margin-bottom: 0; }

/* pillars (principles) */
.ind-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ind-pillar { background: var(--card); border: 1px solid var(--steel-100); border-radius: 10px; padding: 26px 26px 28px; box-shadow: var(--shadow-1); }
.ind-pillar__n { font-family: var(--font-mono); font-size: 11.5px; color: var(--signal-press); letter-spacing: 0.12em; }
.ind-pillar h3 { font-size: 18.5px; margin: 13px 0 9px; }
.ind-pillar p { font-size: 15px; color: var(--steel-700); line-height: 1.56; margin: 0; }

/* services grid */
.ind-svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ind-svc { background: var(--card); border: 1px solid var(--steel-100); border-top: 3px solid var(--signal); border-radius: 10px; padding: 26px; box-shadow: var(--shadow-1); }
.ind-svc h3 { font-size: 18px; margin: 0 0 11px; }
.ind-svc p { font-size: 14.5px; color: var(--steel-700); line-height: 1.56; margin: 0; }

/* standards */
.ind-stdrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ind-stdrow .ind-badge { font-size: 12px; padding: 7px 12px; }

/* contact methods */
.ind-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ind-method { background: var(--card); border: 1px solid var(--steel-100); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-1); }
.ind-method h3 { font-size: 17px; margin: 0; }
.ind-method p { font-size: 14.5px; color: var(--steel-700); line-height: 1.56; margin: 0; }
.ind-method__link { color: var(--signal-press) !important; font-family: var(--font-mono); font-size: 13px; margin-top: auto; }

/* legal prose */
.ind-prose { max-width: 768px; }
.ind-prose h2 { font-size: 22px; margin: 40px 0 12px; }
.ind-prose h2:first-child { margin-top: 0; }
.ind-prose h3 { font-size: 17px; margin: 24px 0 8px; }
.ind-prose p { font-size: 15.5px; line-height: 1.72; color: var(--steel-700); margin: 0 0 14px; max-width: none; }
.ind-prose ul, .ind-prose ol { margin: 0 0 16px; padding-left: 22px; }
.ind-prose li { font-size: 15.5px; line-height: 1.66; color: var(--steel-700); margin-bottom: 7px; }
.ind-prose a { color: var(--signal-press); }
.ind-prose strong { color: var(--ink); font-weight: 600; }
.ind-legal-meta { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .ind-statrow, .ind-svcgrid, .ind-methods, .ind-pillars, .ind-story { grid-template-columns: 1fr; }
}

/* ---------- capability brand: "engineered to brief" builds ---------- */
.ind-brand-builds { background: var(--paper); }
.ind-brand-builds__lede { margin: 0 0 30px; }
.ind-buildgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ind-buildcard { background: var(--card); border: 1px solid var(--steel-100); border-radius: 12px; padding: 24px 24px 26px; box-shadow: var(--shadow-1); }
.ind-buildcard__n { font-family: var(--font-mono); font-size: 11.5px; color: var(--signal-press); letter-spacing: 0.12em; }
.ind-buildcard h3 { font-size: 18px; margin: 12px 0 9px; }
.ind-buildcard p { font-size: 14.5px; color: var(--steel-700); line-height: 1.56; margin: 0; }
@media (max-width: 860px) { .ind-buildgrid { grid-template-columns: 1fr; } }

/* ============ BUILT PRODUCT PAGE ============ */
.ind-bp section { padding: 64px 0; }
.ind-bp-hero { position: relative; background: var(--paper); overflow: hidden; padding-top: 80px; }
.ind-bp-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 52px; align-items: center; }
.ind-bp-hero__from { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--signal-press); margin: 0 0 14px; }
.ind-bp-hero h1 { font-size: clamp(30px, 4vw, 46px); margin: 0 0 14px; line-height: 1.08; }
.ind-bp-hero__lede { font-size: 17px; line-height: 1.6; color: var(--steel-700); max-width: 52ch; margin: 0 0 24px; }
.ind-bp-hero__ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 22px; }
.ind-bp-stage { position: relative; aspect-ratio: 4 / 3; background: var(--card); border: 1px solid var(--steel-100); border-radius: 14px; overflow: hidden; display: grid; place-items: center; background-image: linear-gradient(var(--steel-100) 1px, transparent 1px), linear-gradient(90deg, var(--steel-100) 1px, transparent 1px); background-size: 34px 34px; }
.ind-bp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8% 10%; filter: drop-shadow(0 22px 36px rgba(26,29,33,0.18)); }
.ind-bp-stage--photo img { object-fit: cover; padding: 0; filter: none; }
.ind-bp-stage--art { color: var(--steel-700); }
.ind-bp-stage--art .ind-built__svg { width: 56%; max-width: 300px; height: auto; }
.ind-bp-stage--art .im-on { stroke: var(--signal); }

.ind-bp-features { background: var(--paper); border-top: 1px solid var(--steel-100); }
.ind-bp-feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--steel-100); border: 1px solid var(--steel-100); border-radius: 12px; overflow: hidden; }
.ind-bp-feat__item { background: var(--card); padding: 28px 28px 30px; }
.ind-bp-feat__n { font-family: var(--font-mono); font-size: 12px; color: var(--signal-press); }
.ind-bp-feat__item h3 { font-size: 18px; margin: 10px 0 8px; color: var(--ink); }
.ind-bp-feat__item p { font-size: 14.5px; line-height: 1.6; color: var(--steel-700); margin: 0; }

.ind-bp-spec { background: var(--paper); }
.ind-bp-spec__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; border-top: 1px solid var(--steel-100); }
.ind-bp-spec__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--steel-100); }
.ind-bp-spec__k { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--steel-500); }
.ind-bp-spec__v { font-size: 14.5px; color: var(--ink); font-weight: 600; text-align: right; }
.ind-bp-live { margin-top: 30px; background: #14171b; border: 1px solid #2c323a; border-radius: 8px; max-width: 540px; }

@media (max-width: 860px) {
  .ind-bp-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .ind-bp-feat { grid-template-columns: 1fr; }
  .ind-bp-spec__grid { grid-template-columns: 1fr; gap: 0; }
}

/* ============ SHOP FACETED FILTER BAR ============ */
.ind-shopfilter { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 26px; padding: 18px 0 20px; border-top: 1px solid var(--steel-100); border-bottom: 1px solid var(--steel-100); flex-wrap: wrap; }
.ind-shopfilter__rows { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.ind-shopfilter__group { display: flex; align-items: flex-start; gap: 14px; }
.ind-shopfilter__label { flex: none; width: 74px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--steel-500); padding-top: 8px; }
.ind-shopfilter__pills { display: flex; flex-wrap: wrap; gap: 7px; }
.ind-shopfilter__pill { font-size: 13px; line-height: 1; color: var(--steel-700); text-decoration: none; border: 1px solid var(--steel-300); border-radius: 100px; padding: 7px 13px; transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease); white-space: nowrap; }
.ind-shopfilter__pill:hover { border-color: var(--steel-500); color: var(--ink); }
.ind-shopfilter__pill.is-active { background: var(--signal-press); border-color: var(--signal-press); color: #fff; font-weight: 600; } /* darker fill so white label hits AA (5.5:1) */
.ind-shopfilter__clear { flex: none; align-self: center; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--signal-press); text-decoration: none; white-space: nowrap; }
.ind-shopfilter__clear:hover { color: var(--signal); }
@media (max-width: 600px) {
  .ind-shopfilter__group { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ind-shopfilter__label { width: auto; padding-top: 0; }
}

/* Brand-page product-type filter (client-side; mirrors the shop pill language) */
.ind-brandfilter { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; flex-wrap: wrap; }
.ind-brandfilter__label { flex: none; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--steel-500); }
.ind-brandfilter__pills { display: flex; flex-wrap: wrap; gap: 7px; }
.ind-brandfilter__pill { font-size: 13px; line-height: 1; color: var(--steel-700); background: transparent; border: 1px solid var(--steel-300); border-radius: 100px; padding: 7px 13px; cursor: pointer; transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease); white-space: nowrap; }
.ind-brandfilter__pill:hover { border-color: var(--steel-500); color: var(--ink); }
.ind-brandfilter__pill.is-active { background: var(--signal-press); border-color: var(--signal-press); color: #fff; font-weight: 600; }
.ind-brandfilter__n { font-family: var(--font-mono); font-size: 11px; opacity: 0.6; margin-left: 3px; }
.ind-brandfilter__pill.is-active .ind-brandfilter__n { opacity: 0.85; }
.ind-prodtile.is-filtered-out { display: none; }

/* Brand-page category sections — one keyword-bearing heading + archive link per
   real product category, replacing the single flat "range" grid. */
.ind-brand-cats .ind-sec-lede { margin-bottom: 20px; }
.ind-brand-cats__jump { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 8px; padding-bottom: 26px; border-bottom: 1px solid var(--steel-300); }
.ind-brand-cats__jump a { font-size: 13px; line-height: 1; color: var(--steel-700); text-decoration: none; border: 1px solid var(--steel-300); border-radius: 100px; padding: 7px 13px; white-space: nowrap; transition: border-color 0.16s var(--ease), color 0.16s var(--ease); }
.ind-brand-cats__jump a:hover { border-color: var(--steel-500); color: var(--ink); }
.ind-brand-cat { padding-top: 46px; scroll-margin-top: 90px; }
.ind-sec-head--sub { margin-bottom: 6px; }
.ind-sec-head--sub h2 { font-size: clamp(21px, 2.2vw, 26px); }
.ind-brand-cat__meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--steel-500); margin: 0 0 22px; }
.ind-brand-cat__meta .amount, .ind-brand-cat__meta bdi { color: var(--ink); }
@media (max-width: 600px) { .ind-brand-cat { padding-top: 34px; } }

/* ===================================================================
   OPERATIONS HERO — graphite-drenched, animated SCADA-mimic substrate
   Overrides the older light-paper hero (later equal/greater specificity).
   =================================================================== */
.ind-hero--ops { background: var(--ink-deep); color: var(--paper); padding-top: clamp(80px, 9vw, 116px); padding-bottom: 0; }
.ind-hero--ops::after { display: none; } /* kill the old light-hero glow */
.ind-hero--ops .ind-hero__inner { position: relative; z-index: 2; padding-bottom: clamp(56px, 7vw, 92px); align-items: center; }
.ind-hero--ops .ind-hero__copy { max-width: 620px; }
.ind-hero--ops h1 { color: var(--paper); font-size: clamp(38px, 5.2vw, 66px); line-height: 1.0; letter-spacing: -0.03em; max-width: 15ch; margin: 0 0 22px; }
.ind-hero--ops .ind-hero__accent { color: var(--signal); }

/* rotating headline: both phrases share one grid cell (no layout shift), crossfade in place */
.ind-hero__rotate { display: grid; }
.ind-hero__phrase { grid-area: 1 / 1; opacity: 0; transform: translateY(0.32em); transition: opacity .55s ease, transform .7s cubic-bezier(.22,.7,.24,1); will-change: opacity, transform; }
.ind-hero__phrase.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ind-hero__phrase { transition: none; }
  .ind-hero__phrase:not(.is-active) { display: none; }
}
.ind-hero--ops .ind-hero__sub { color: var(--steel-300); font-size: 18px; line-height: 1.6; max-width: 54ch; }
.ind-hero--ops .ind-hero__pill { color: var(--steel-300); background: rgba(255,255,255,0.04); border-color: #2c323a; box-shadow: none; }
.ind-hero--ops .ind-hero__pill-dot { background: var(--stock); }
.ind-hero--ops .ind-hero__chips span { color: var(--steel-300); background: rgba(255,255,255,0.03); border-color: #2c323a; }
.ind-hero--ops .ind-btn--ghost { border-color: #3a424d; color: var(--paper); background: transparent; }
.ind-hero--ops .ind-btn--ghost:hover { border-color: var(--signal); color: var(--signal); }

/* substrate layers */
.ind-herobg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ind-herobg__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.6px); background-size: 30px 30px; }
.ind-herobg__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ind-herobg__trace { stroke: rgba(255,255,255,0.07); stroke-width: 1.2; }
.ind-herobg__flow { stroke: rgba(238, 97, 36,0.5); stroke-width: 1.5; stroke-dasharray: 6 220; stroke-linecap: round; animation: indHeroFlow 7s linear infinite; }
.ind-herobg__nodes circle { fill: #14181d; stroke: rgba(255,255,255,0.2); stroke-width: 1.2; }
.ind-herobg__pkt { filter: drop-shadow(0 0 5px rgba(238, 97, 36,0.85)); }
.ind-herobg__bloom { position: absolute; right: -10%; top: -34%; width: 62%; height: 116%; background: radial-gradient(circle, rgba(238, 97, 36,0.16), transparent 60%); }
.ind-herobg__scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.18) 3px 4px); mix-blend-mode: overlay; opacity: 0.5; }
/* fade the substrate behind the left copy so headline stays legible */
.ind-herobg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink-deep) 4%, rgba(22, 23, 58,0.74) 34%, rgba(22, 23, 58,0.16) 62%, transparent 100%); }
@keyframes indHeroFlow { to { stroke-dashoffset: -1356; } }
@media (prefers-reduced-motion: reduce) { .ind-herobg__flow { animation: none; } .ind-herobg__pkt { display: none; } }
/* light variant of the operations substrate (dark traces on paper) */
.ind-herobg--light .ind-herobg__dots { background-image: radial-gradient(rgba(62,68,75,0.07) 1px, transparent 1.6px); }
.ind-herobg--light .ind-herobg__trace { stroke: rgba(62,68,75,0.12); }
.ind-herobg--light .ind-herobg__flow { stroke: rgba(238, 97, 36,0.55); }
.ind-herobg--light .ind-herobg__nodes circle { fill: #ffffff; stroke: rgba(62,68,75,0.28); }
.ind-herobg--light .ind-herobg__bloom { background: radial-gradient(circle, rgba(238, 97, 36,0.10), transparent 62%); }
.ind-herobg--light .ind-herobg__scan { display: none; }
.ind-herobg--light::after { background: linear-gradient(180deg, var(--paper) 0%, transparent 18%, transparent 82%, var(--paper) 100%); }

/* ===== Smart sticky header: hide on scroll down, reveal on scroll up ===== */
#masthead { position: sticky; top: 0; z-index: 100; transition: transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.3s ease; will-change: transform; }
#masthead.ind-nav--hidden { transform: translateY(-100%); }
#masthead.ind-nav--stuck { box-shadow: 0 8px 24px -16px rgba(26,29,33,0.45); }
@media (prefers-reduced-motion: reduce) { #masthead { transition: none; } #masthead.ind-nav--hidden { transform: none; } }
@media (max-width: 980px) {
  .ind-herobg::after { background: linear-gradient(0deg, var(--ink-deep) 6%, rgba(22, 23, 58,0.5) 40%, rgba(22, 23, 58,0.2) 100%); }
}

/* ===== "Indiott difference" rebuilt as a bold dark band (kills the top-stripe cards) ===== */
.ind-process--ops { background: var(--ink-deep); color: var(--paper); position: relative; overflow: hidden; }
.ind-process--ops::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 80px);
  background-size: 30px 30px, auto; opacity: 0.7; }
.ind-process--ops .ind-container { position: relative; z-index: 1; }
.ind-process--ops .ind-kicker { color: var(--signal); }
.ind-process--ops h2 { color: var(--paper); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -0.02em; max-width: 20ch; }
.ind-process--ops .ind-process__step { background: rgba(255,255,255,0.025); border: 1px solid #2a2f37; border-top: 1px solid #2a2f37; border-radius: 10px; }
.ind-process--ops .ind-process__step h3 { color: var(--paper); }
.ind-process--ops .ind-process__step p { color: var(--steel-300); }
.ind-process--ops .ind-process__tag { display: inline-flex; align-items: center; gap: 9px; }
.ind-process--ops .ind-process__tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255,255,255,0.06); flex: none; }
.ind-process--ops .ind-process__step--a .ind-process__tag { color: #ef4444; }
.ind-process--ops .ind-process__step--b .ind-process__tag { color: var(--signal); }
.ind-process--ops .ind-process__step--c .ind-process__tag { color: var(--stock); }
.ind-process--ops .ind-process__arrow { color: var(--signal); align-self: center; }
/* morphing-text headline: whole-word crossfade in a fixed-size grid slot.
   No per-char textContent mutation, so the line never reflows — kills the page
   jump + lag the old typewriter version caused. */
.ind-morph { display: inline-flex; align-items: center; color: var(--signal); font-weight: 700; white-space: nowrap; vertical-align: baseline; }
.ind-morph__slot { display: inline-grid; }
.ind-morph__w { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(0.34em); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); will-change: opacity, transform; }
.ind-morph__w.is-on { opacity: 1; transform: none; }
/* cursor reserved on every word (transparent) so the slot width never changes;
   only the active word shows the orange blink, hugging its text. */
.ind-morph__w::after { content: ''; display: inline-block; width: 0.07em; height: 0.82em; margin-left: 0.12em; vertical-align: -0.04em; background: transparent; }
.ind-morph__w.is-on::after { background: var(--signal); animation: indMorphBlink 1.05s steps(1) infinite; }
@keyframes indMorphBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ind-morph__w { transition: none; } .ind-morph__w.is-on::after { animation: none; } }

/* ===== faint blueprint substrate on the light content bands (depth, "more backgrounds") ===== */
.ind-built, .ind-solutions, .ind-cats, .ind-services, .ind-insights {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(62,68,75,0.05) 1px, transparent 1.4px);
  background-size: 26px 26px;
}

/* ---------- PDP related-links block (internal-link hub) ---------- */
.ind-related { border-top: 1px solid var(--steel-100); padding: 30px 0 8px; margin-top: 28px; }
.ind-related .ind-kicker { margin: 0 0 14px; }
.ind-related__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ind-related__chips .ind-chip {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border: 1px solid var(--steel-300); border-radius: 999px;
  font-size: 13.5px; font-weight: 500; line-height: 1; color: var(--ink-soft);
  text-decoration: none; background: var(--paper);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ind-related__chips .ind-chip:hover {
  border-color: var(--signal); color: var(--signal-press); background: #fff;
}

/* ---------- Stack explorer · MANAGE layer dashboards (no CTA, display only) ---------- */
.ind-stackx__dash { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ind-xdash { margin: 0; }
.ind-xdash__frame {
  display: block; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--steel-300);
  box-shadow: 0 1px 2px rgba(15,18,22,0.06), 0 10px 30px -18px rgba(15,18,22,0.45);
  background: #0a0f12;
}
.ind-xdash__frame img { display: block; width: 100%; height: auto; aspect-ratio: 680 / 426; }
.ind-xdash figcaption {
  margin-top: 10px; font-size: 13px; color: var(--steel-700);
  display: flex; align-items: baseline; gap: 8px;
}
.ind-xdash figcaption b { color: var(--ink); font-weight: 600; }
.ind-xdash figcaption span { color: var(--steel-500); font-size: 12px; }
@media (max-width: 720px) { .ind-stackx__dash { grid-template-columns: 1fr; } }

/* ---------- Contact page Fluent Form ---------- */
.ind-contactform { padding: 8px 0 8px; }
.ind-formwrap { max-width: 680px; margin: 26px auto 0; }
.ind-formwrap .fluentform .ff-el-input--label label { font-weight: 600; color: var(--ink); }
.ind-formwrap .fluentform input[type=text], .ind-formwrap .fluentform input[type=email],
.ind-formwrap .fluentform textarea, .ind-formwrap .fluentform select {
  border-radius: 8px; border: 1px solid var(--steel-300); padding: 12px 14px; font-size: 15px;
}
.ind-formwrap .fluentform .ff-btn-submit {
  background: var(--signal); border: 0; border-radius: 8px; padding: 13px 26px;
  font-weight: 600; color: #fff; cursor: pointer;
}
.ind-formwrap .fluentform .ff-btn-submit:hover { background: var(--signal-press); }

/* ============ Contact page · animated hero + form card ============ */
.ind-contact-hero { padding-bottom: clamp(52px, 6vw, 90px); }
.ind-contact-hero .ind-hero__inner { align-items: start; padding-bottom: 0; grid-template-columns: 1fr 0.92fr; }
.ind-contact-hero .ind-hero__copy { padding-top: 10px; }

/* left-column contact points */
.ind-contact-points { list-style: none; margin: 26px 0 24px; padding: 0; display: grid; gap: 13px; }
.ind-contact-points li { display: flex; align-items: center; gap: 11px; color: var(--steel-300); font-size: 15px; }
.ind-contact-points a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.28); }
.ind-contact-points a:hover { color: var(--signal); border-color: var(--signal); }
.ind-cp__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; box-shadow: 0 0 0 4px rgba(238,97,36,0.16); }
.ind-cp__dot--ok { background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,0.16); }
.ind-cp__dot--info { background: #5b9dff; box-shadow: 0 0 0 4px rgba(91,157,255,0.16); }

/* the form card */
.ind-contact-card {
  background: var(--paper); border: 1px solid rgba(255,255,255,0.10); border-radius: 18px;
  padding: 26px 26px 22px; box-shadow: 0 30px 70px -28px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.04) inset;
}
.ind-contact-card__head { margin-bottom: 18px; }
.ind-contact-card__live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--steel-500); }
.ind-contact-card__live span { width: 7px; height: 7px; border-radius: 50%; background: #34d399; position: relative; }
.ind-contact-card__live span::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #34d399; opacity: .5; animation: indPulse 2.2s ease-out infinite; }
.ind-contact-card h2 { font-size: 23px; margin: 8px 0 0; color: var(--ink); letter-spacing: -0.01em; }

/* form fields inside the card */
.ind-contact-card .ind-formwrap { max-width: none; margin: 0; }
.ind-contact-card .fluentform .ff-el-group { margin-bottom: 14px; }
.ind-contact-card .fluentform .ff-el-input--label label { font-weight: 600; color: var(--ink); font-size: 13.5px; margin-bottom: 5px; }
.ind-contact-card .fluentform input[type=text],
.ind-contact-card .fluentform input[type=email],
.ind-contact-card .fluentform textarea {
  width: 100%; border-radius: 9px; border: 1px solid var(--steel-300); background: #fff;
  padding: 11px 13px; font-size: 15px; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.ind-contact-card .fluentform input:focus,
.ind-contact-card .fluentform textarea:focus {
  outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(238,97,36,0.14);
}
.ind-contact-card .fluentform textarea { min-height: 110px; resize: vertical; }
.ind-contact-card .fluentform .ff-btn-submit {
  width: 100%; background: var(--signal); border: 0; border-radius: 10px; padding: 14px 24px;
  font-size: 15.5px; font-weight: 700; color: #fff; cursor: pointer; margin-top: 4px;
  transition: background .15s, transform .05s;
}
.ind-contact-card .fluentform .ff-btn-submit:hover { background: var(--signal-press); }
.ind-contact-card .fluentform .ff-btn-submit:active { transform: translateY(1px); }
.ind-contact-card .ff-message-success { color: var(--ink); font-size: 15px; }

/* methods band under the hero */
.ind-contact-band { padding: clamp(40px, 5vw, 64px) 0; background: var(--paper); }

@media (max-width: 860px) {
  .ind-contact-hero .ind-hero__inner { grid-template-columns: 1fr; }
  .ind-contact-card { padding: 22px 18px 18px; }
}

/* ============================================================
   THE LIVE STACK — flagship interactive five-layer section
   (replaces .ind-soltower on solution pages). Graphite instrument
   panel on the navy .ind-stack band; an animated signal packet
   rides the bus through all five layers. All text in DOM (SEO).
   ============================================================ */
.ind-stack--live { padding: 66px 0 74px !important; }
.ind-lstack__head { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 20px 48px; align-items: end; margin-bottom: 30px; }
.ind-lstack__head h2 { color: var(--paper); font-size: clamp(26px, 3.4vw, 40px); margin: 6px 0 0; }
.ind-lstack__head .ind-kicker { color: var(--signal); }
.ind-lstack__lede { color: var(--steel-300); font-size: 16px; line-height: 1.6; margin: 0; max-width: 52ch; }
.ind-lstack__lede b { color: var(--paper); font-weight: 600; }

.ind-lstack { position: relative; border: 1px solid #2a2f3a; border-radius: 5px; background:
    radial-gradient(120% 80% at 50% -10%, rgba(238,97,36,0.07), transparent 60%), #12141b;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04); overflow: hidden; }

/* signal ticker */
.ind-lstack__signal { display: flex; align-items: center; gap: 11px; padding: 13px 20px; border-bottom: 1px solid #22262f;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.11em; color: var(--steel-500);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 5px); }
.ind-lstack__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(238,97,36,0.6); animation: lsRec 1.7s var(--ease) infinite; flex: none; }
.ind-lstack__sigtxt b { color: var(--paper); }
.ind-lstack__sigtxt i { color: var(--steel-500); font-style: normal; }
.ind-lstack__livechip { margin-left: auto; color: var(--signal); border: 1px solid rgba(238,97,36,0.5); border-radius: 2px; padding: 3px 7px; font-size: 10px; letter-spacing: 0.16em; }

/* spine + bus + packet */
.ind-lstack__spine { position: relative; }
.ind-lstack__bus { position: absolute; left: 30px; top: 8px; bottom: 8px; width: 2px; background: #262b36; z-index: 1; }
.ind-lstack__bus::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--signal), transparent); background-size: 100% 46%; background-repeat: no-repeat; animation: lsCurrent 3.4s linear infinite; opacity: 0.85; }
.ind-lstack__packet { position: absolute; left: 31px; top: 40px; transform: translate(-50%, -50%); z-index: 4; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(238,97,36,0.18), 0 0 16px 3px rgba(238,97,36,0.75); transition: top 0.66s var(--ease); }
.ind-lstack__packet span { display: none; }

/* station rows */
.ind-lstack__station { position: relative; border-top: 1px solid #20242e; z-index: 2; transition: background 0.3s var(--ease); }
.ind-lstack__station:first-child { border-top: 0; }
.ind-lstack__station.is-active { background: linear-gradient(90deg, rgba(238,97,36,0.06), transparent 70%); }
.ind-lstack__rowh { margin: 0; }
.ind-lstack__row { width: 100%; display: grid; grid-template-columns: 26px 26px 1fr auto 18px; align-items: center; column-gap: 15px;
  padding: 18px 22px 18px 56px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; color: inherit; }
.ind-lstack__node { position: absolute; left: 24px; top: 31px; width: 14px; height: 14px; border-radius: 50%; background: #161a22; border: 2px solid #3a424f; z-index: 3; transition: all 0.3s var(--ease); }
.ind-lstack__station.is-active .ind-lstack__node { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(238,97,36,0.16), 0 0 14px rgba(238,97,36,0.7); }
.ind-lstack__num { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); transition: color 0.25s; }
.ind-lstack__glyph { color: var(--steel-500); display: grid; place-items: center; transition: color 0.25s; }
.ind-lstack__glyph svg { width: 21px; height: 21px; }
.ind-lstack__label { font-family: var(--font-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.09em; color: var(--steel-300); transition: color 0.25s; }
.ind-lstack__mini { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); white-space: nowrap; }
.ind-lstack__mini b { color: var(--steel-300); font-weight: 600; }
.ind-lstack__mini i { font-style: normal; margin-left: 3px; opacity: 0.7; }
.ind-lstack__chev { position: relative; width: 14px; height: 14px; }
.ind-lstack__chev::before, .ind-lstack__chev::after { content: ''; position: absolute; background: var(--steel-500); transition: transform 0.3s var(--ease), background 0.25s; }
.ind-lstack__chev::before { left: 0; right: 0; top: 6px; height: 2px; }
.ind-lstack__chev::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.ind-lstack__station.is-active .ind-lstack__chev::after { transform: scaleY(0); }
.ind-lstack__station.is-active .ind-lstack__num,
.ind-lstack__station.is-active .ind-lstack__glyph { color: var(--signal); }
.ind-lstack__station.is-active .ind-lstack__label { color: var(--paper); }
.ind-lstack__row:hover .ind-lstack__label { color: var(--paper); }
.ind-lstack__chev::before, .ind-lstack__chev::after { }
.ind-lstack__station.is-active .ind-lstack__chev::before, .ind-lstack__station.is-active .ind-lstack__chev::after { background: var(--signal); }

/* disclosure panel (grid-rows height animation; content stays in DOM) */
.ind-lstack__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease); }
.ind-lstack__station.is-active .ind-lstack__panel { grid-template-rows: 1fr; }
.ind-lstack__panelin { overflow: hidden; min-height: 0; padding: 0 22px 0 56px; }
.ind-lstack__station.is-active .ind-lstack__panelin { padding-bottom: 22px; }
.ind-lstack__role { color: var(--steel-300); font-size: 14.5px; line-height: 1.6; margin: 0 0 13px; max-width: 74ch; }
.ind-lstack__kit { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.ind-lstack__chip { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--steel-300); border: 1px solid #313845; border-radius: 2px; padding: 5px 9px; background: rgba(255,255,255,0.025); }
.ind-lstack__gauge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ind-lstack__gval b { font-family: var(--font-mono); font-size: 25px; font-weight: 600; color: var(--signal); line-height: 1; }
.ind-lstack__gval i { font-family: var(--font-mono); font-style: normal; font-size: 13px; color: var(--steel-500); }
.ind-lstack__glabel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--steel-500); }
.ind-lstack__bar { flex: 1 1 120px; min-width: 90px; max-width: 260px; height: 4px; border-radius: 3px; background: #242a34; overflow: hidden; }
.ind-lstack__bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--signal), #ffb27a); transition: width 0.9s var(--ease) 0.1s; }
.ind-lstack__station.is-active .ind-lstack__bar span { width: var(--bar, 70%); }
.ind-lstack__handoff { margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--steel-500); }
.ind-lstack__handoff b { color: var(--steel-300); font-weight: 500; }
.ind-lstack__handoff .ind-lstack__nextname { color: var(--signal); }
.ind-lstack__handoff em { color: var(--signal); font-style: normal; }
.ind-lstack__handoff--end b, .ind-lstack__handoff--end { color: var(--stock); }

/* footer map + CTA */
.ind-lstack__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid #22262f; background: rgba(0,0,0,0.22); }
.ind-lstack__map { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ind-lstack__mapnode { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--steel-500); background: none; border: 0; cursor: pointer; padding: 4px 2px; transition: color 0.25s; }
.ind-lstack__mapnode:hover { color: var(--steel-300); }
.ind-lstack__mapnode.is-active { color: var(--signal); text-shadow: 0 0 12px rgba(238,97,36,0.5); }
.ind-lstack__map em { color: #3a424f; font-style: normal; font-size: 11px; }
.ind-lstack__cta { flex: none; }

@keyframes lsRec { 0%,100% { box-shadow: 0 0 0 0 rgba(238,97,36,0.55); opacity: 1; } 50% { box-shadow: 0 0 0 5px rgba(238,97,36,0); opacity: 0.5; } }
@keyframes lsCurrent { 0% { background-position: 0 -60%; } 100% { background-position: 0 160%; } }

@media (max-width: 760px) {
  .ind-lstack__head { grid-template-columns: 1fr; gap: 12px; }
  .ind-lstack__row { grid-template-columns: 22px 22px 1fr 16px; column-gap: 11px; padding: 15px 16px 15px 50px; }
  .ind-lstack__mini { display: none; }
  .ind-lstack__bus { left: 26px; }
  .ind-lstack__node { left: 20px; }
  .ind-lstack__packet { left: 27px; }
  .ind-lstack__packet span { display: none; }
  .ind-lstack__panelin { padding-left: 50px; padding-right: 16px; }
  .ind-lstack__label { font-size: 14px; }
  .ind-lstack__foot { padding: 14px 16px; }
  .ind-lstack__cta { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ind-lstack__bus::after, .ind-lstack__rec { animation: none; }
  .ind-lstack__packet { transition: none; }
}

/* ============================================================
   RICH SOLUTION SECTIONS — animated field bg, stat band,
   before/after difference toggle, rollout stepper, why band.
   ============================================================ */
.ind-fieldbg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }

/* animated field lives behind the hero copy/dashboard */
.ind-sol-hero { isolation: isolate; }
.ind-sol-hero .ind-fieldbg { z-index: 1; opacity: 0.14; }
.ind-sol-hero__inner { position: relative; z-index: 3; }

/* ---- impact stat band ---- */
.ind-solstats { position: relative; overflow: hidden; background:
    radial-gradient(120% 120% at 80% -20%, rgba(238,97,36,0.10), transparent 55%), var(--ink-deep);
  padding: 52px 0; isolation: isolate; }
.ind-solstats .ind-fieldbg { z-index: 0; opacity: 0.2; }
.ind-solstats__in { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px 34px; }
.ind-solstats__item { position: relative; padding-left: 20px; }
.ind-solstats__item::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: linear-gradient(var(--signal), rgba(238,97,36,0.2)); }
.ind-solstats__val { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); }
.ind-solstats__val b { font-size: clamp(38px, 5vw, 58px); font-weight: 600; color: var(--paper); line-height: 1; letter-spacing: -0.02em; }
.ind-solstats__val i { font-style: normal; font-size: 15px; color: var(--signal); text-transform: uppercase; letter-spacing: 0.08em; }
.ind-solstats__label { display: block; margin-top: 10px; color: var(--steel-300); font-size: 14px; line-height: 1.45; max-width: 26ch; }
/* Currency prefix — sits on the baseline with the figure, at the suffix's weight. */
.ind-solstats__val em { font-style: normal; font-size: clamp(22px, 3vw, 32px); font-weight: 600; color: var(--paper); line-height: 1; }
.ind-solstats__val em + b { margin-left: -2px; }
/* Provenance. Every number in this band is now either authored with a source or computed from
   the live catalogue, so each one can say where it came from. */
.ind-solstats__src { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--steel-500); max-width: 26ch; }

/* --------------------------------------------------------------------------
 * Solution spec table — see inc/solution-spec-table.php.
 * Structure and the mobile scroller come from indiott-compare.css, which this
 * page now enqueues; only the solution-specific layer lives here.
 * ----------------------------------------------------------------------- */
.ind-soltbl__ladder { margin: 34px 0 14px; font-size: 17.5px; line-height: 1.55; color: var(--ink); max-width: 68ch; }
.ind-soltbl__prov { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--steel-500); }
.ind-soltbl__wrap { margin: 0 0 8px; }
/* The wrap is the horizontal scroller: a wide table must scroll inside its own box,
   never push the page sideways. Belt and braces over .iott-cmp__tablewrap in case the
   mu-plugin stylesheet is unavailable. */
.ind-soltbl__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ind-soltbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ind-soltbl caption { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-500); padding: 0 0 10px; }
.ind-soltbl th, .ind-soltbl td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--steel-100); vertical-align: top; }
.ind-soltbl thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-500); font-weight: 600; white-space: nowrap; }
.ind-soltbl tbody th { font-weight: 600; color: var(--ink); min-width: 15rem; }
.ind-soltbl tbody th a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--steel-300); }
.ind-soltbl tbody th a:hover { color: var(--signal-press); border-bottom-color: var(--signal); }
.ind-soltbl__sku { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--steel-500); font-weight: 400; }
.ind-soltbl td { color: var(--steel-700); }
.ind-soltbl tbody tr:last-child th, .ind-soltbl tbody tr:last-child td { border-bottom: 0; }
.ind-soltbl--comp tbody th { min-width: 11rem; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; }
@media (max-width: 640px) {
  .ind-soltbl { font-size: 13.5px; }
  .ind-soltbl tbody th { min-width: 11rem; }
  .ind-soltbl__ladder { font-size: 16px; }
}

/* ---- before / after difference ---- */
.ind-diff { padding: 74px 0; }
.ind-diff__head { text-align: center; margin-bottom: 34px; }
.ind-diff__head h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 6px 0 24px; }
.ind-diff__toggle { position: relative; display: inline-flex; background: var(--steel-100); border: 1px solid var(--steel-300); border-radius: 100px; padding: 4px; }
.ind-diff__tab { position: relative; z-index: 2; border: 0; background: none; cursor: pointer; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--steel-700); padding: 11px 22px; border-radius: 100px; transition: color 0.25s var(--ease); }
.ind-diff__tab.is-active { color: var(--ink); }
.ind-diff__slider { position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--card); border-radius: 100px; box-shadow: var(--shadow-1); transition: transform 0.34s var(--ease); }
.ind-diff__toggle.is-1 .ind-diff__slider { transform: translateX(100%); }
.ind-diff__toggle.is-1 .ind-diff__slider { background: var(--signal); }
.ind-diff__stage { display: grid; max-width: 900px; margin: 0 auto; }
.ind-diff__panel { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); pointer-events: none; }
.ind-diff__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ind-diff__state { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #b8431a; background: rgba(184,67,26,0.08); border: 1px solid rgba(184,67,26,0.25); border-radius: 3px; padding: 5px 11px; margin-bottom: 18px; }
.ind-diff__state--on { color: var(--stock); background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.28); }
.ind-diff__lead { font-size: 18px; line-height: 1.65; color: var(--steel-700); max-width: 74ch; }
.ind-diff__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; }
.ind-diff__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.ind-diff__list svg { width: 21px; height: 21px; color: var(--stock); flex: none; margin-top: 1px; }
@media (max-width: 680px) { .ind-diff__list { grid-template-columns: 1fr; } }

/* ---- rollout stepper ---- */
.ind-roll { position: relative; overflow: hidden; background:
    radial-gradient(100% 100% at 10% 0%, rgba(238,97,36,0.08), transparent 50%), var(--ink); padding: 74px 0; isolation: isolate; }
.ind-roll .ind-fieldbg { z-index: 0; opacity: 0.18; }
.ind-roll__in { position: relative; z-index: 2; }
.ind-roll__head { max-width: 640px; margin-bottom: 34px; }
.ind-roll__head .ind-kicker { color: var(--signal); }
.ind-roll__head h2 { color: var(--paper); font-size: clamp(26px, 3.4vw, 38px); margin: 6px 0 14px; }
.ind-roll__lede { color: var(--steel-300); font-size: 16px; line-height: 1.6; margin: 0; }
.ind-roll__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
.ind-roll__rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ind-roll__step { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: rgba(255,255,255,0.03); border: 1px solid #2a2f3a; border-left: 3px solid #2a2f3a; border-radius: 4px; padding: 16px 18px; cursor: pointer; text-align: left; transition: all 0.25s var(--ease); }
.ind-roll__step:hover { background: rgba(255,255,255,0.05); }
.ind-roll__step.is-active { background: linear-gradient(90deg, rgba(238,97,36,0.12), rgba(255,255,255,0.02)); border-left-color: var(--signal); }
.ind-roll__num { font-family: var(--font-mono); font-size: 13px; color: var(--steel-500); }
.ind-roll__step.is-active .ind-roll__num { color: var(--signal); }
.ind-roll__k { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.04em; color: var(--steel-300); }
.ind-roll__step.is-active .ind-roll__k { color: var(--paper); }
.ind-roll__tick { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #3a424f; }
.ind-roll__step.is-active .ind-roll__tick { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 10px rgba(238,97,36,0.6); }
.ind-roll__panels { position: relative; min-height: 240px; border: 1px solid #262b36; border-radius: 6px; background: #12141b; padding: 34px 34px 38px; overflow: hidden; }
.ind-roll__panel { position: absolute; inset: 0; padding: 34px 34px 38px; opacity: 0; transform: translateY(14px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); pointer-events: none; }
.ind-roll__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ind-roll__big { position: absolute; right: 24px; top: 8px; font-family: var(--font-mono); font-size: 128px; font-weight: 600; color: rgba(255,255,255,0.04); line-height: 1; }
.ind-roll__panel h3 { color: var(--paper); font-size: 22px; margin: 0 0 14px; position: relative; }
.ind-roll__panel p { color: var(--steel-300); font-size: 16px; line-height: 1.65; max-width: 46ch; position: relative; }
@media (max-width: 860px) { .ind-roll__grid { grid-template-columns: 1fr; gap: 24px; } .ind-roll__panels { min-height: 210px; } }

/* ---- why Indiott ---- */
.ind-why { padding: 76px 0; }
.ind-why__in { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 54px; align-items: center; }
.ind-why__in--nopic { grid-template-columns: 1fr; }
.ind-why__copy h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 6px 0 28px; }
.ind-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; }
.ind-why__prop { position: relative; padding-left: 20px; }
.ind-why__dot { position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(238,97,36,0.12); }
.ind-why__prop h3 { font-size: 16.5px; margin: 0 0 7px; }
.ind-why__prop p { font-size: 14px; line-height: 1.55; color: var(--steel-700); margin: 0; }
.ind-why__brands { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--steel-100); }
.ind-why__brandlbl { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-500); margin-bottom: 12px; }
.ind-why__brandrow { display: flex; flex-wrap: wrap; gap: 8px; }
.ind-why__brandrow span { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em; color: var(--ink); background: var(--card); border: 1px solid var(--steel-300); border-radius: 3px; padding: 7px 13px; box-shadow: var(--shadow-1); }
.ind-why__media { position: relative; }
.ind-why__media img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: 6px; display: block; filter: saturate(0.92) contrast(1.03); }
.ind-why__media::after { content: ''; position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(35,36,88,0.12); background: linear-gradient(160deg, transparent 55%, rgba(35,36,88,0.28)); pointer-events: none; }
.ind-why__mediatag { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: #fff; background: rgba(35,36,88,0.72); border: 1px solid rgba(255,255,255,0.18); border-radius: 2px; padding: 5px 10px; backdrop-filter: blur(3px); }
.ind-why__medialine { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--signal); border-radius: 6px 6px 0 0; z-index: 2; animation: whyScan 4.5s var(--ease) infinite; }
@keyframes whyScan { 0%,100% { opacity: 0.5; transform: scaleX(0.4); transform-origin: left; } 50% { opacity: 1; transform: scaleX(1); } }
@media (max-width: 900px) { .ind-why__in { grid-template-columns: 1fr; gap: 34px; } .ind-why__grid { gap: 22px 28px; } }
@media (max-width: 560px) { .ind-why__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ind-why__medialine { animation: none; } }

/* ============ SOLUTION FEATURE: legionella risk explorer + drift timeline ============ */
.ind-legf { padding: 76px 0 20px; }
.ind-legf__intro { max-width: 760px; }
.ind-legf__intro p { color: var(--steel-700); font-size: 17px; }

.ind-legf__limits {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px;
  background: var(--steel-100); border: 1px solid var(--steel-100); border-radius: 4px; overflow: hidden;
}
.ind-legf__limit { background: var(--card); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.ind-legf__limit b { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.ind-legf__limit span { font-size: 13.5px; color: var(--steel-700); line-height: 1.4; max-width: none; }
.ind-legf__limit i { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-500); font-style: normal; }
.ind-legf__limit--cold b { color: #2563eb; }
.ind-legf__limit--grow b { color: #dc2626; }
.ind-legf__limit--hot b  { color: #15803d; }
.ind-legf__limit--kill b { color: #0f766e; }

/* ---- flagship: risk explorer ---- */
.ind-rx {
  margin: 44px 0 0; background: #14171b; border: 1px solid #2c323a; border-radius: 14px;
  padding: 26px; color: #e8ebee; position: relative; overflow: hidden;
  background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ind-rx__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ind-rx__tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; color: #9aa3ad; text-transform: uppercase; }
.ind-rx__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); display: inline-block; box-shadow: 0 0 0 3px rgba(238,97,36,.18); }
.ind-rx__hint { font-family: var(--font-mono); font-size: 11px; color: #6b7480; letter-spacing: 0.02em; }
.ind-rx__stage { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: stretch; }
@media (max-width: 760px) { .ind-rx__stage { grid-template-columns: 1fr; gap: 22px; } }
.ind-rx__readout { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ind-rx__temp { font-family: var(--font-mono); font-size: 66px; font-weight: 600; line-height: .9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color .25s var(--ease); }
.ind-rx__unit { font-family: var(--font-mono); font-size: 24px; color: #8b939d; }
.ind-rx__zone { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; transition: color .25s var(--ease); min-height: 16px; }
.ind-rx__scalewrap { margin-top: 26px; position: relative; padding-top: 20px; }
.ind-rx__scale {
  position: relative; height: 22px; border-radius: 11px; overflow: hidden;
  background: linear-gradient(90deg, #2563eb 0%, #2563eb 22.7%, #f59e0b 27%, #dc2626 55%, #f97316 66.6%, #f97316 72.7%, #22c55e 78%, #15803d 100%);
}
.ind-rx__ticks { position: absolute; inset: 0; pointer-events: none; }
.ind-rx__tick { position: absolute; top: -20px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; color: #8b939d; letter-spacing: 0.02em; white-space: nowrap; }
.ind-rx__tick::after { content: ''; position: absolute; left: 50%; top: 16px; width: 1px; height: 26px; background: rgba(255,255,255,.28); }
.ind-rx__range { -webkit-appearance: none; appearance: none; position: absolute; left: 0; top: 20px; width: 100%; height: 22px; background: transparent; margin: 0; cursor: grab; }
.ind-rx__range:active { cursor: grabbing; }
.ind-rx__range:focus { outline: none; }
.ind-rx__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 38px; border-radius: 5px; background: #fff; border: 2px solid #14171b; box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.3); cursor: grab; transition: transform .12s var(--ease); }
.ind-rx__range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.ind-rx__range::-moz-range-thumb { width: 10px; height: 38px; border-radius: 5px; background: #fff; border: 2px solid #14171b; box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: grab; }
.ind-rx__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 3px var(--signal); }
.ind-rx__scalelabels { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--font-mono); font-size: 10px; color: #5b626c; letter-spacing: 0.04em; }
.ind-rx__verdict { background: #1a1d21; border: 1px solid #2c323a; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ind-rx__vhead { display: flex; align-items: center; gap: 10px; }
.ind-rx__vdot { width: 11px; height: 11px; border-radius: 50%; flex: none; transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.ind-rx__vname { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.ind-rx__vbody { font-size: 14.5px; line-height: 1.55; color: #c7cdd4; margin: 0; max-width: none; }
.ind-rx__vbody b { color: #fff; font-weight: 600; }
.ind-rx__rule { border-top: 1px solid #2c323a; padding-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.ind-rx__rulerow { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.ind-rx__rulek { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: #8b939d; flex: none; width: 96px; padding-top: 2px; }
.ind-rx__rulev { color: #e8ebee; }
.ind-rx__rulev b { color: var(--signal); }
.ind-rx__danger { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: #f3a3a3; opacity: 0; height: 0; overflow: hidden; transition: opacity .25s; }
.ind-rx.is-danger .ind-rx__danger { opacity: 1; height: auto; }
.ind-rx__dangerdot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .ind-rx.is-danger .ind-rx__dangerdot { animation: rxpulse 1.15s ease-in-out infinite; }
  .ind-rx.is-danger .ind-rx__vdot { animation: rxpulse 1.15s ease-in-out infinite; }
}
@keyframes rxpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }

/* ---- supporting: drift timeline ---- */
.ind-drift { margin: 56px 0 0; background: var(--card); border: 1px solid var(--steel-100); border-radius: 14px; padding: 30px; box-shadow: 0 1px 2px rgba(26,29,33,.06); }
.ind-drift__grid { display: grid; grid-template-columns: 1fr 300px; gap: 34px; align-items: center; }
@media (max-width: 860px) { .ind-drift__grid { grid-template-columns: 1fr; gap: 26px; } }
.ind-drift h3 { font-size: 22px; margin: 0 0 8px; }
.ind-drift__sub { color: var(--steel-700); font-size: 15px; margin: 0 0 18px; }
.ind-drift__chart { width: 100%; height: auto; display: block; }
.ind-drift__line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ind-drift__alert { opacity: 0; transition: opacity .5s var(--ease) .9s; }
.ind-drift.is-drawn .ind-drift__alert { opacity: 1; }
.ind-drift__stats { display: flex; flex-direction: column; gap: 14px; }
.ind-drift__stat { border-left: 3px solid var(--steel-300); padding: 2px 0 2px 16px; }
.ind-drift__stat--bad { border-left-color: #dc2626; }
.ind-drift__stat--good { border-left-color: var(--stock); }
.ind-drift__num { font-family: var(--font-mono); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ind-drift__stat--bad .ind-drift__num { color: #dc2626; }
.ind-drift__stat--good .ind-drift__num { color: var(--stock); }
.ind-drift__lbl { font-size: 13px; color: var(--steel-700); margin-top: 5px; line-height: 1.4; max-width: none; }

/* ---- GEO answer-first ---- */
.ind-geo2 { margin: 56px 0 0; max-width: 780px; }
.ind-geo2__lead { font-size: 19px; line-height: 1.55; color: var(--ink); font-weight: 500; max-width: 64ch; }
@media (max-width: 560px) { .ind-rx__temp { font-size: 54px; } .ind-legf { padding: 56px 0 12px; } }

/* ============================================================
   SOLUTION TABS (homepage) — inc/solution-tabs.php
   Six domains, twenty solutions. Cards sell the solution, not the SKU:
   icon, name, one sentence, one link. The flagship is a dark two-column
   tile with a bare product photograph in its corner as texture.
   ============================================================ */
.ind-soltabs { padding: 96px 0; background: var(--paper); border-top: 1px solid var(--steel-100); }
.ind-soltabs__intro { max-width: 62ch; margin-bottom: 40px; }
.ind-soltabs__intro h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin: 6px 0 14px; color: var(--ink-deep); }
.ind-soltabs__lede { font-size: 17px; line-height: 1.6; color: var(--steel-700); }
.ind-soltabs__lede strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Tab strip */
.ind-soltabs__tablist { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--steel-300); margin-bottom: 28px; }
.ind-soltabs__tablist::-webkit-scrollbar { display: none; }
.ind-soltabs__tab { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 14px 18px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font: 600 14.5px/1 var(--font-sans); color: var(--steel-500); cursor: pointer; white-space: nowrap; transition: color .18s var(--ease), border-color .18s var(--ease); }
.ind-soltabs__tab:hover { color: var(--ink); }
.ind-soltabs__tab[aria-selected="true"] { color: var(--ink-deep); border-bottom-color: var(--signal); }
.ind-soltabs__tab:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.ind-soltabs__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--steel-100); color: var(--steel-700); font: 600 11.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ind-soltabs__tab[aria-selected="true"] .ind-soltabs__n { background: var(--signal); color: #fff; }

/* Grid: three columns, the flagship taking two of them on the first row. */
.ind-soltabs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.ind-solcard { position: relative; display: flex; flex-direction: column; padding: 26px; background: var(--card); border: 1px solid var(--steel-100); border-radius: 16px; box-shadow: var(--shadow-1); transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.ind-solcard:hover { border-color: var(--steel-300); transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(26,29,33,.4); }
.ind-solcard--wide { grid-column: span 2; }
.ind-solcard--flagship { grid-column: span 2; padding: 34px; background: var(--ink-deep); border-color: var(--ink-deep); color: #fff; overflow: hidden; }

.ind-solcard__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px; border-radius: 12px; background: var(--paper); color: var(--ink); }
.ind-solcard--flagship .ind-solcard__icon { background: rgba(255,255,255,.1); color: #fff; }
.ind-solcard__svg { width: 24px; height: 24px; }

.ind-solcard__name { font-size: 18px; line-height: 1.25; margin: 0 0 8px; color: var(--ink-deep); }
.ind-solcard--flagship .ind-solcard__name { font-size: 26px; color: #fff; max-width: 20ch; }
.ind-solcard__headline { font-size: 14.5px; line-height: 1.55; color: var(--steel-700); margin: 0 0 22px; }
.ind-solcard--flagship .ind-solcard__headline { font-size: 16px; color: rgba(255,255,255,.72); max-width: 42ch; }

/* The photo is texture, not a product listing: no name, no part number, no
   price. It sits in the flagship's bottom-right and never steals the copy. */
.ind-solcard__photo { position: absolute; right: -14px; bottom: -14px; width: 44%; max-width: 260px; pointer-events: none; }
.ind-solcard__photo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 34px rgba(0,0,0,.45)); }
.ind-solcard--flagship .ind-solcard__name,
.ind-solcard--flagship .ind-solcard__headline,
.ind-solcard--flagship .ind-solcard__foot { position: relative; z-index: 1; }

.ind-solcard__foot { display: flex; align-items: center; gap: 12px; margin: auto 0 0; }
.ind-solcard__flag { font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; }
.ind-solcard__cta { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px/1 var(--font-sans); color: var(--ink); text-decoration: none; }
.ind-solcard__cta span { transition: transform .18s var(--ease); }
.ind-solcard:hover .ind-solcard__cta span { transform: translateX(4px); }
.ind-solcard--flagship .ind-solcard__cta { color: #fff; }

/* Closing CTA band */
.ind-soltabs__cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-top: 22px; padding: 30px 32px; border: 1px dashed var(--steel-300); border-radius: 16px; }
.ind-soltabs__cta h3 { font-size: 20px; margin: 0 0 6px; color: var(--ink-deep); }
.ind-soltabs__cta p { font-size: 14.5px; line-height: 1.55; color: var(--steel-700); margin: 0; max-width: 62ch; }
.ind-soltabs__go { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink-deep); color: #fff; transition: transform .2s var(--ease), background .2s var(--ease); }
.ind-soltabs__go svg { width: 22px; height: 22px; }
.ind-soltabs__go:hover { background: var(--signal); transform: translateX(4px); }

@media (max-width: 1000px) {
  .ind-soltabs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-solcard--flagship, .ind-solcard--wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .ind-soltabs { padding: 64px 0; }
  .ind-soltabs__grid { grid-template-columns: 1fr; }
  .ind-solcard--flagship, .ind-solcard--wide { grid-column: span 1; }
  .ind-solcard--flagship { padding: 26px; }
  .ind-solcard__photo { position: static; width: 150px; margin: 18px 0 -6px auto; }
  .ind-soltabs__cta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ind-solcard, .ind-solcard__cta span { transition: none; }
  .ind-solcard:hover { transform: none; }
}

/* ---- AI camera hub (template-ai-cameras.php) ---- */
.ind-camhub__answer { max-width: 74ch; }
.ind-camgroup { margin: 0 0 56px; }
.ind-camgroup h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-deep); margin: 0 0 10px; }
.ind-camgroup__intro { font-size: 16px; line-height: 1.6; color: var(--steel-700); max-width: 78ch; margin: 0 0 20px; }
.ind-camtable-wrap { overflow-x: auto; border: 1px solid var(--steel-100); border-radius: var(--r); }
.ind-camtable { width: 100%; min-width: 760px; border-collapse: collapse; background: var(--card); font-size: 14.5px; }
.ind-camtable th, .ind-camtable td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--steel-100); vertical-align: top; }
.ind-camtable thead th { font: 600 11.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); background: var(--paper); white-space: nowrap; }
.ind-camtable tbody tr:last-child th, .ind-camtable tbody tr:last-child td { border-bottom: 0; }
.ind-camtable tbody tr:hover { background: var(--paper); }
.ind-camtable tbody th { font-weight: 600; color: var(--ink-deep); }
.ind-camtable tbody th a { color: inherit; text-decoration: none; }
.ind-camtable tbody th a:hover { color: var(--signal); }
.ind-camtable__pn { font: 500 13px/1.4 var(--font-mono); color: var(--steel-700); white-space: nowrap; }
.ind-camtable__note { display: block; margin-top: 3px; font-size: 12.5px; color: var(--steel-500); }
.ind-camtable__price { font: 600 14.5px/1.4 var(--font-mono); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ind-camtable__poa { font: 500 12.5px/1.4 var(--font-mono); color: var(--signal); }
@media (max-width: 640px) { .ind-camgroup { margin-bottom: 40px; } }

/* ============================================================================
   SUPPLIER FACT BLOCK  (inc/fact-block.php)
   Credentials near the close of the page, not under the hero. Laid out as a
   tight five-across chip grid rather than a definition slab: the first draft
   used full sentences in a three-column dl and rendered as a ragged wall of
   legal text that buried the pitch. Facts are one line each; the detail lives
   on /shipping-returns/.
   ========================================================================= */
.ind-facts {
  padding: 44px 0 46px;
  background: var(--steel-100);
  border-top: 1px solid var(--steel-300);
}
.ind-facts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  margin: 0 0 22px;
}
.ind-facts__h {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  flex: none;
}
.ind-facts__lede {
  margin: 0;
  flex: 1 1 380px;
  max-width: 72ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--steel-700);
}
.ind-facts__lede a { color: var(--signal-press); }

/* Even five-across chips: every cell the same width, so no row is orphaned. */
.ind-facts__list {
  margin: 0 0 30px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--steel-300);
  border: 1px solid var(--steel-300);
}
.ind-facts__row {
  background: var(--paper);
  padding: 11px 14px;
  min-width: 0;
}
.ind-facts__row dt {
  margin: 0 0 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.ind-facts__row dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: break-word;
}

.ind-facts__ph {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.ind-facts__tablewrap { overflow-x: auto; }
.ind-facts__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--steel-300);
}
.ind-facts__table th,
.ind-facts__table td {
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--steel-100);
  font-size: 13px;
  line-height: 1.4;
}
.ind-facts__table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--steel-500);
  font-weight: 500;
  white-space: nowrap;
}
.ind-facts__table tbody th {
  font-family: var(--font-mono);
  font-weight: 500;
  white-space: nowrap;
}
.ind-facts__table tbody th a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--steel-300); }
.ind-facts__table tbody th a:hover { color: var(--signal-press); border-bottom-color: currentColor; }
.ind-facts__table tbody tr:last-child th,
.ind-facts__table tbody tr:last-child td { border-bottom: 0; }
.ind-facts__price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.ind-facts__table thead th:last-child { text-align: right; }
.ind-facts__note {
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--steel-500);
}
.ind-facts__note a { color: var(--signal-press); }

@media (max-width: 1080px) { .ind-facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .ind-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ind-facts { padding: 32px 0 34px; } }

/* =====================================================================
   SOLUTION TEMPLATE V2 — "AquaIoT rhythm, Indiott language"
   Opt-in per slug via inc/solution-v2.php. Drenched graphite bands
   alternating with paper, real photography, a drawn deployment section,
   staggered scroll reveals. Scoped to .ind-v2 so the other 23 solution
   pages are untouched.
   ===================================================================== */

.ind-v2 { --band-pad: clamp(72px, 8vw, 120px); }
.ind-v2 section { padding: var(--band-pad) 0; }
.ind-v2 .ind-container { position: relative; z-index: 2; }

/* Dark bands declare their own text colours rather than inheriting, so a section
   can never end up navy-on-navy when it is moved or a new one is added. */
.ind-v2 .v2-hero, .ind-v2 .v2-ev, .ind-v2 .v2-deploy,
.ind-v2 .ind-sol-facts, .ind-v2 .ind-capture { color: var(--steel-300); }
.ind-v2 .v2-hero h1, .ind-v2 .v2-hero h2, .ind-v2 .v2-hero h3,
.ind-v2 .v2-ev h2, .ind-v2 .v2-ev h3,
.ind-v2 .v2-deploy h2, .ind-v2 .v2-deploy h3,
.ind-v2 .ind-sol-facts h2, .ind-v2 .ind-capture h2, .ind-v2 .ind-capture h3 { color: var(--paper); }
.ind-v2 .v2-hero .ind-kicker, .ind-v2 .v2-ev .ind-kicker,
.ind-v2 .v2-deploy .ind-kicker, .ind-v2 .ind-capture .ind-kicker { color: var(--signal); }
.ind-v2 .v2-deploy .v2-head p, .ind-v2 .ind-capture p { color: var(--steel-300); }

.ind-v2 .v2-head { max-width: 720px; margin: 0 0 clamp(36px, 4vw, 56px); }
.ind-v2 .v2-head h2 { font-size: clamp(30px, 3.9vw, 46px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 16px; }
.ind-v2 .v2-head p { font-size: 18px; line-height: 1.6; color: var(--steel-700); margin: 0; max-width: 62ch; }
.ind-v2 .v2-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-500); }

/* ---- scroll reveal ------------------------------------------------ */
.ind-v2 [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.ind-v2 [data-rv="l"] { transform: translateX(-34px); }
.ind-v2 [data-rv="r"] { transform: translateX(34px); }
.ind-v2 [data-rv="s"] { transform: scale(0.965) translateY(14px); }
.ind-v2 [data-rv="f"] { transform: none; }
.ind-v2 [data-rv].is-rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ind-v2 [data-rv] { opacity: 1 !important; transform: none !important; } }

/* ---- 1. hero ------------------------------------------------------ */
.v2-hero { background: var(--ink-deep); position: relative; overflow: hidden;
  padding: clamp(56px, 6vw, 88px) 0 clamp(64px, 7vw, 104px) !important; }
.v2-hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; z-index: 4;
  background: linear-gradient(90deg, var(--signal) 0%, var(--signal) 22%, rgba(238,97,36,0.15) 46%, transparent 72%); }
.v2-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 70% at 74% 28%, rgba(238,97,36,0.10), transparent 62%),
              radial-gradient(70% 60% at 8% 92%, rgba(35,36,88,0.85), transparent 70%); }
.v2-hero .ind-fieldbg { z-index: 0; opacity: 0.42; }
.v2-hero__in { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,0.98fr); gap: clamp(36px, 4.5vw, 68px); align-items: center; }
.v2-hero .ind-kicker { margin: 0 0 20px; }
.v2-hero h1 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.032em;
  max-width: 15ch; margin: 0 0 22px; font-weight: 700; text-wrap: balance; }
.v2-hero h1 em { font-style: normal; color: var(--signal); }
.v2-hero__lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--steel-300); max-width: 52ch; margin: 0 0 32px; }
.v2-hero__ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 0 30px; max-width: none; }
.v2-hero__ctas .ind-quote-promise { color: var(--steel-300); margin: 0; }
.v2-hero__ctas .ind-quote-promise b { color: var(--stock); }
.v2-hero .ind-hero__chips { margin: 0; }
.v2-hero .ind-hero__chips span { color: var(--steel-300); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.13); }
.v2-hero__panel { position: relative; }
.v2-hero__panel .ind-dash { max-width: 620px; margin-left: auto;
  box-shadow: 0 60px 110px -50px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.05); }
.v2-hero__panelcap { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 14px 0 0; max-width: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-500); }
.v2-hero__panelcap i { width: 5px; height: 5px; border-radius: 50%; background: var(--stock); flex: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.v2-hero__cue { position: absolute; left: 24px; bottom: 22px; z-index: 4; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel-500); }
.v2-hero__cue span { display: block; width: 1px; height: 30px; background: linear-gradient(180deg, var(--signal), transparent); }
@media (prefers-reduced-motion: no-preference) { .v2-hero__cue span { animation: v2cue 2.4s var(--ease) infinite; transform-origin: top; } }
@keyframes v2cue { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 1020px) {
  .v2-hero__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .v2-hero__panel .ind-dash { max-width: 100%; }
  .v2-hero__cue { display: none; }
}

/* ---- 2. blind spot ------------------------------------------------ */
.v2-blind { background: var(--paper); }
.v2-blind__in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.92fr); gap: clamp(40px, 5vw, 76px); align-items: center; }
.v2-blind__list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--steel-300); }
.v2-blind__list li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--steel-300); }
.v2-blind__list b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--signal-press); }
.v2-blind__list p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink); max-width: 46ch; }
.v2-blind__cost { margin: 26px 0 0; font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--ink); max-width: 50ch; }
.v2-plate { position: relative; background: var(--card); border: 1px solid var(--steel-300); padding: 20px; }
.v2-plate svg { display: block; width: 100%; height: auto; }
.v2-plate__cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--steel-100); }
.v2-plate__key { display: flex; gap: 16px; flex-wrap: wrap; }
.v2-plate__key i { display: inline-flex; align-items: center; gap: 6px; font-style: normal;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--steel-500); }
.v2-plate__key i::before { content: ''; width: 8px; height: 8px; flex: none; }
.v2-plate__key i.k-used::before { background: var(--signal); }
.v2-plate__key i.k-idle::before { background: var(--steel-300); }
.v2-plate__key i.k-ghost::before { background: transparent; border: 1.5px dashed var(--signal-press); }
@media (max-width: 900px) { .v2-blind__in { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ---- 3. evidence -------------------------------------------------- */
.v2-ev { background: var(--ink); position: relative; overflow: hidden; padding: 0 !important; }
.v2-ev__in { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,0.94fr); align-items: stretch; }
.v2-ev__media { position: relative; min-height: 460px; overflow: hidden; }
.v2-ev__media img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 62%; display: block;
  filter: saturate(0.6) contrast(1.08) brightness(0.62); }
.v2-ev__media::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(22,23,58,0.55) 0%, rgba(22,23,58,0.18) 40%, rgba(35,36,88,0.72) 100%),
              radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(10,11,26,0.55) 100%); }
.v2-ev__tag { position: absolute; left: 28px; bottom: 28px; z-index: 2; background: rgba(10,11,26,0.86);
  border: 1px solid rgba(238,97,36,0.42); padding: 14px 18px; max-width: 320px; }
.v2-ev__tag b { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin-bottom: 7px; }
.v2-ev__tag b i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }
@media (prefers-reduced-motion: no-preference) { .v2-ev__tag b i { animation: v2blink 1.5s steps(1) infinite; } }
@keyframes v2blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.v2-ev__tag p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--paper); max-width: none; }
.v2-ev__tag em { font-style: normal; font-family: var(--font-mono); color: #fff; }
.v2-ev__pip { position: absolute; right: 24px; top: 24px; z-index: 2; width: 148px; border: 1px solid rgba(255,255,255,0.22);
  background: var(--ink-deep); box-shadow: 0 26px 50px -22px rgba(0,0,0,0.8); }
.v2-ev__pip img { display: block; width: 100%; height: 110px; object-fit: cover; filter: none; }
/* Cutouts carry their own alpha, so they are contained on the panel rather than cropped,
   and get a little breathing room instead of bleeding to the edge. */
.v2-ev__pip--cut { background: #10121c; }
.v2-ev__pip--cut img { object-fit: contain; height: 124px; padding: 10px 12px 4px; }

/* Product mode: the device is the subject, so it is contained on a drawn graphite field
   rather than cropped like a photograph, and the field carries the grid instead of a
   photographic gradient. Used where we hold no honest scene photograph of our own. */
.v2-ev--product .v2-ev__media { background: #10121c; }
.v2-ev--product .v2-ev__media::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
              radial-gradient(70% 60% at 50% 44%, rgba(238,97,36,0.10), transparent 70%);
  background-size: 40px 40px, 40px 40px, auto; }
/* A definite height is required, not min-height: the base rule sets height:100%, which
   against an auto-height parent lets a portrait cutout drive the band to its own intrinsic
   ratio (a 194x340 sensor stretched it past 1400px tall before this was pinned). */
.v2-ev--product .v2-ev__media > img { position: relative; z-index: 1; object-fit: contain;
  width: 100%; height: clamp(340px, 34vw, 500px); filter: none;
  padding: clamp(32px, 4vw, 60px) clamp(24px, 4vw, 64px) clamp(84px, 9vw, 116px); }
.v2-ev--product .v2-ev__media::after { background: linear-gradient(90deg, transparent 0 60%, rgba(35,36,88,0.5) 100%); }
.v2-ev__pip span { display: block; padding: 7px 9px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-ev__copy { padding: clamp(48px, 5.5vw, 84px) clamp(28px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.v2-ev__copy h2 { font-size: clamp(26px, 2.9vw, 36px); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 18px; max-width: 18ch; }
.v2-ev__copy > p { font-size: 16.5px; line-height: 1.6; color: var(--steel-300); margin: 0 0 30px; max-width: 46ch; }
.v2-ev__facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.11); }
.v2-ev__facts li { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.11); display: grid; gap: 5px; }
.v2-ev__facts b { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); font-weight: 500; }
.v2-ev__facts span { font-size: 15.5px; line-height: 1.5; color: var(--steel-300); max-width: 44ch; }
@media (max-width: 940px) {
  .v2-ev__in { grid-template-columns: minmax(0, 1fr); }
  .v2-ev__media { min-height: 320px; }
  .v2-ev__pip { width: 116px; }
  .v2-ev__pip img { height: 84px; }
}

/* ---- 4. difference (restyles the shared toggle) ------------------- */
.ind-v2 .ind-diff { background: var(--steel-100); }
.ind-v2 .ind-diff__head { text-align: left; max-width: 760px; margin: 0 0 38px; }
.ind-v2 .ind-diff__head h2 { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 26px; }
/* The shared slider is a fixed 50% wide, so the two tabs must be equal columns:
   left to flex, "Running blind" and "On the Indiott stack" size differently and the
   orange slider lands half over the wrong label. */
.ind-v2 .ind-diff__toggle { display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--card); border-radius: 0; padding: 4px; }
.ind-v2 .ind-diff__tab { border-radius: 0; font-size: 12px; padding: 11px 20px; text-align: center; }
.ind-v2 .ind-diff__slider { border-radius: 0; box-shadow: none; background: var(--signal); }
.ind-v2 .v2-diffgrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.62fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.ind-v2 .ind-diff__stage { max-width: none; margin: 0; }
.ind-v2 .ind-diff__state { border-radius: 0; }
.ind-v2 .ind-diff__lead { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; color: var(--ink); max-width: 52ch; }
.ind-v2 .ind-diff__list { grid-template-columns: 1fr; gap: 0; }
.ind-v2 .ind-diff__list li { padding: 16px 0; border-top: 1px solid var(--steel-300); font-size: 16.5px; }
.ind-v2 .ind-diff__list svg { color: var(--signal-press); }

/* The readout carries the hero dashboard's own figures: dashes before, values after. */
.v2-readout { background: var(--ink-deep); padding: 22px 24px 8px; position: relative; overflow: hidden; }
.v2-readout::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--signal) 0 40%, transparent 100%); }
.v2-readout > .v2-meta { color: var(--steel-500); display: block; margin-bottom: 6px; }
.v2-readout dl { margin: 0; }
.v2-readout dl > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.11); }
.v2-readout dl > div:last-child { border-bottom: 0; }
.v2-readout dt { font-size: 14px; color: var(--steel-300); }
.v2-readout dd { margin: 0; font-family: var(--font-mono); font-size: 19px; font-weight: 500; color: var(--steel-700);
  font-variant-numeric: tabular-nums; transition: color 0.3s var(--ease); }
.v2-readout dd b { display: none; font-weight: 500; }
.v2-readout dd i { font-style: normal; }
.ind-v2 [data-diff].is-after .v2-readout dd { color: var(--signal); }
.ind-v2 [data-diff].is-after .v2-readout dd b { display: inline; }
.ind-v2 [data-diff].is-after .v2-readout dd i { display: none; }
@media (max-width: 900px) { .ind-v2 .v2-diffgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---- 5. deployment drawing (the flagship motion) ------------------ */
.v2-deploy { background: var(--ink-deep); position: relative; overflow: hidden; }
.v2-deploy::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 44px 44px; }
.v2-deploy__in { display: grid; grid-template-columns: minmax(0,1.24fr) minmax(0,0.76fr); gap: clamp(36px, 4.5vw, 64px); align-items: center; }
.v2-deploy__fig { position: relative; }
.v2-deploy__fig svg { display: block; width: 100%; height: auto; }
.v2-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.is-drawn .v2-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ease) var(--d, 0s); }
.v2-pop { opacity: 0; transform: scale(0.4); transform-origin: center; transform-box: fill-box; }
.is-drawn .v2-pop { opacity: 1; transform: none; transition: opacity 0.45s var(--ease) var(--d, 0s), transform 0.55s var(--ease) var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .v2-draw { stroke-dashoffset: 0; } .v2-pop { opacity: 1; transform: none; } }
.v2-deploy__layers { list-style: none; margin: 30px 0 0; padding: 0; }
.v2-deploy__layers li { padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.v2-deploy__layers li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.v2-deploy__layers b { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px;
  font-weight: 500; letter-spacing: 0.12em; color: var(--signal); margin-bottom: 8px; }
.v2-deploy__layers b i { width: 7px; height: 7px; background: var(--signal); flex: none; }
.v2-deploy__layers p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--steel-300); max-width: 52ch; }
@media (max-width: 980px) { .v2-deploy__in { grid-template-columns: minmax(0, 1fr); } }

/* ---- 6. kit ------------------------------------------------------- */
.ind-v2 .ind-sol-products { background: var(--paper); }
.ind-v2 .ind-prodgrid { background: var(--steel-300); border-color: var(--steel-300); }
.ind-v2 .ind-prodtile { padding: 22px 20px 24px; gap: 10px; }
.ind-v2 .ind-prodtile__img { aspect-ratio: 4 / 3; background: var(--card); }
.ind-v2 .ind-prodtile:hover .ind-prodtile__img img { transform: scale(1.06); }
.ind-v2 .ind-prodtile__name { font-size: 15px; }
@media (max-width: 900px) { .ind-v2 .ind-prodgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ind-v2 .ind-prodgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---- 7. rollout (light band on v2) -------------------------------- */
.ind-v2 .ind-roll { background: var(--steel-100); }
.ind-v2 .ind-roll .ind-fieldbg { display: none; }
.ind-v2 .ind-roll__head { max-width: 720px; margin: 0 0 44px; }
.ind-v2 .ind-roll__head h2 { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 16px; color: var(--ink); }
.ind-v2 .ind-roll .ind-kicker { color: var(--signal-press); }
.ind-v2 .ind-roll__lede { font-size: 17.5px; line-height: 1.6; color: var(--steel-700); max-width: 60ch; margin: 0; }
.ind-v2 .ind-roll__grid { display: grid; grid-template-columns: minmax(0,0.86fr) minmax(0,1.14fr); gap: clamp(28px, 3.5vw, 56px); align-items: start; }
.ind-v2 .ind-roll__rail { list-style: none; margin: 0; padding: 0; }
.ind-v2 .ind-roll__step { width: 100%; display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 12px;
  appearance: none; background: none; border: 0; border-top: 1px solid var(--steel-300); cursor: pointer;
  padding: 18px 4px; text-align: left; }
.ind-v2 .ind-roll__rail li:last-child .ind-roll__step { border-bottom: 1px solid var(--steel-300); }
.ind-v2 .ind-roll__num { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); }
.ind-v2 .ind-roll__k { font-size: 17px; font-weight: 600; color: var(--steel-700); transition: color 0.2s var(--ease); }
.ind-v2 .ind-roll__tick { width: 8px; height: 8px; background: transparent; border: 1px solid var(--steel-300); border-radius: 0; }
.ind-v2 .ind-roll__step:hover .ind-roll__k, .ind-v2 .ind-roll__step.is-active .ind-roll__k { color: var(--ink); }
.ind-v2 .ind-roll__step.is-active .ind-roll__num { color: var(--signal-press); }
.ind-v2 .ind-roll__step.is-active .ind-roll__tick { background: var(--signal); border-color: var(--signal); }
.ind-v2 .ind-roll__panels { position: relative; background: var(--card); border: 1px solid var(--steel-300); padding: clamp(28px, 3.4vw, 48px); min-height: 264px; }
.ind-v2 .ind-roll__panels::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--signal) 0 34%, var(--steel-300) 34% 100%); }
.ind-v2 .ind-roll__big { display: block; font-family: var(--font-mono); font-size: 56px; line-height: 1; font-weight: 500;
  color: var(--steel-100); margin-bottom: 12px; letter-spacing: -0.02em; }
.ind-v2 .ind-roll__panel h3 { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--ink); }
.ind-v2 .ind-roll__panel p { font-size: 16.5px; line-height: 1.6; color: var(--steel-700); margin: 0; max-width: 54ch; }
@media (max-width: 900px) { .ind-v2 .ind-roll__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- 8. facts ----------------------------------------------------- */
.ind-v2 .ind-sol-facts { background: var(--ink); }
.ind-v2 .ind-sol-facts__cols { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: clamp(36px, 4.5vw, 72px); }
.ind-v2 .ind-sol-facts h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--signal); margin: 0 0 20px; }
.ind-v2 .ind-compliance li { border-top-color: rgba(255,255,255,0.12); padding: 18px 0; }
.ind-v2 .ind-compliance__std { display: block; margin-bottom: 5px; font-size: 13px; letter-spacing: 0.06em; color: #fff; }
.ind-v2 .ind-cost { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.13); padding: 28px 26px 24px; margin-top: 0; }
.ind-v2 .ind-cost::before { background: var(--ink); }
@media (max-width: 820px) { .ind-v2 .ind-sol-facts__cols { grid-template-columns: minmax(0, 1fr); } }

/* ---- 9. FAQ + 10. capture ----------------------------------------- */
.ind-v2 .ind-sol-faq { background: var(--paper); }
.ind-v2 .ind-sol-faq h2 { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 34px; max-width: 20ch; }
.ind-v2 .ind-faq summary { padding: 24px 0; font-size: 18.5px; }
.ind-v2 .ind-faq p { font-size: 16.5px; }
.ind-v2 .ind-capture { background: var(--ink-deep); position: relative; overflow: hidden; }
.ind-v2 .ind-capture::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--signal) 0 22%, rgba(238,97,36,0.15) 46%, transparent 72%); }
.ind-v2 .ind-capture__in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.82fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.ind-v2 .ind-capture h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.028em; margin: 0 0 16px; max-width: 16ch; }
.ind-v2 .ind-capture p { font-size: 17px; line-height: 1.6; max-width: 50ch; }
.ind-v2 .v2-capture__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.ind-v2 .ind-capture__list { list-style: none; margin: 0; padding: 0; }
.ind-v2 .ind-capture__list li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start;
  padding: 15px 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 15.5px; line-height: 1.5; color: var(--steel-300); }
.ind-v2 .ind-capture__list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.ind-v2 .ind-capture__list svg { width: 17px; height: 17px; color: var(--signal); margin-top: 2px; }
@media (max-width: 880px) { .ind-v2 .ind-capture__in { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 700px) {
  .ind-v2 { --band-pad: 60px; }
  .v2-hero h1 { max-width: none; }
}

/* ---- v2 contrast repairs -------------------------------------------
   Signal orange is a mid-tone: navy body ink on it measures 4.2:1, under AA for
   13px mono caps, and the shared button's hover state (navy fill) disappeared
   entirely on the graphite bands. Deepening the label to ink-deep takes it to
   5.2:1 and the dark-band hover now inverts to paper instead of navy. */
.ind-v2 .ind-btn--primary { color: var(--ink-deep); }
.ind-v2 .v2-hero .ind-btn--primary:hover,
.ind-v2 .v2-ev .ind-btn--primary:hover,
.ind-v2 .v2-deploy .ind-btn--primary:hover,
.ind-v2 .ind-sol-facts .ind-btn--primary:hover,
.ind-v2 .ind-capture .ind-btn--primary:hover { background: var(--paper); color: var(--ink-deep); border-color: var(--paper); }
.ind-v2 .ind-diff__tab.is-active { color: var(--ink-deep); }

/* Body links inherit the global navy, which is invisible on a graphite band. */
.ind-v2 .v2-hero a:not(.ind-btn), .ind-v2 .v2-ev a:not(.ind-btn),
.ind-v2 .v2-deploy a:not(.ind-btn), .ind-v2 .ind-sol-facts a:not(.ind-btn),
.ind-v2 .ind-capture a:not(.ind-btn) { color: var(--paper); text-decoration-color: rgba(255,255,255,0.4); }
.ind-v2 .v2-hero a:not(.ind-btn):hover, .ind-v2 .v2-ev a:not(.ind-btn):hover,
.ind-v2 .v2-deploy a:not(.ind-btn):hover, .ind-v2 .ind-sol-facts a:not(.ind-btn):hover,
.ind-v2 .ind-capture a:not(.ind-btn):hover { color: var(--signal); text-decoration-color: var(--signal); }

/* ---- v2 kit strip ---------------------------------------------------
   Product photography is the only imagery here guaranteed real and relevant, so
   it gets scale and a full-bleed run rather than a 4-up tile grid. */
.v2-kit { background: var(--paper); }
.v2-kit .ind-sec-head { margin-bottom: 28px; }
.v2-kit__scroller { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-block: 1px solid var(--steel-300);
  /* Snap positions must clear the leading spacer. Without this the browser snaps the
     first card to the container edge on load, scrolling the gutter out of view and
     leaving the strip flush left while the heading above it sits on the grid. */
  scroll-padding-inline-start: max(24px, calc((100vw - 1200px) / 2)); }
.v2-kit__scroller::-webkit-scrollbar { display: none; }
.v2-kit__rail { display: flex; width: max-content; }
/* Real flex spacers, not padding: a max-content flex row inside a scroll container
   does not reliably reserve inline padding, which left the first card flush to the
   viewport edge instead of aligned to the container gutter. */
.v2-kit__rail::before, .v2-kit__rail::after { content: ''; flex: none;
  width: max(24px, calc((100vw - 1200px) / 2)); }
.v2-kit__card { flex: none; width: clamp(210px, 22vw, 268px); background: var(--card);
  display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px;
  border-left: 1px solid var(--steel-300); scroll-snap-align: start;
  text-decoration: none; transition: background 0.18s var(--ease); }
.v2-kit__card:last-of-type { border-right: 1px solid var(--steel-300); }
.v2-kit__card:hover { background: var(--paper); }
.v2-kit__img { display: block; aspect-ratio: 1; overflow: hidden; background: var(--card); }
.v2-kit__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
  transition: transform 0.3s var(--ease); }
.v2-kit__card:hover .v2-kit__img img { transform: scale(1.06); }
.v2-kit__name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.v2-kit__price { font-family: var(--font-mono); font-size: 14px; color: var(--ink); margin-top: auto; }
.v2-kit__price .ind-exvat { color: var(--steel-500); font-size: 11px; }
.v2-kit__price .ind-request-price { color: var(--signal-press); }
.v2-kit .ind-sol-brands { margin-top: 20px; }
@media (max-width: 700px) { .v2-kit__card { width: 200px; padding: 18px 16px 20px; } }

/* the marquee sits on paper by default; on v2 it separates two light bands */
.ind-v2 .ind-trustedby { background: var(--steel-100); border-top: 1px solid var(--steel-300);
  border-bottom: 1px solid var(--steel-300); padding: 44px 0 !important; }

/* =====================================================================
   V2 FLAGSHIP: pinned dashboard walkthrough, plus the dives and band bands.
   Desktop pins a runway and lights one hotspot at a time. Mobile and
   reduced-motion get an authored static stack, never a degraded pin.
   ===================================================================== */
/* No overflow:hidden here. An ancestor with overflow:hidden silently disables
   position:sticky on the stage inside, which is exactly how the pin failed first time.
   The ::before layer is inset:0 and cannot overflow, so clipping was never needed. */
.v2-demo { background: var(--ink-deep); color: var(--steel-300); position: relative;
  padding: 0 !important; }
.v2-demo::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 46px 46px; }
.v2-demo h2 { color: var(--paper); }
.v2-demo .ind-kicker { color: var(--signal); }
.v2-demo .v2-head p { color: var(--steel-300); }

.v2-demo__grid { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,0.94fr);
  gap: clamp(28px, 3.4vw, 56px); align-items: center; }
/* Inside the pinned stage the heading is compact: the stage has one viewport to hold
   the heading, the console and four steps without clipping the last one. */
.v2-demo__head { margin-bottom: clamp(20px, 2.4vw, 34px); }
.v2-demo__head h2 { font-size: clamp(26px, 3.1vw, 38px); margin-bottom: 10px; }
.v2-demo__head p { font-size: 16.5px; }
/* Short viewports: shed the lede and tighten, rather than clip step four. */
@media (min-width: 981px) and (max-height: 1000px) {
  /* Only the lede goes: .ind-kicker is also a <p>, and hiding it stripped the section's
     eyebrow at every viewport under 1000px tall. */
  .v2-demo__head p:not(.ind-kicker) { display: none; }
  .v2-demo__head { margin-bottom: 18px; }
  .v2-demo__step { padding: 14px 0; }
  .v2-demo__step p { font-size: 14.5px; }
  .v2-demo__step h3 { font-size: 18px; margin-bottom: 5px; }
}
.v2-demo__panel { position: relative; }
.v2-demo__panel:empty { display: none; }
.v2-demo__grid.is-norail { grid-template-columns: minmax(0,1fr); }
.v2-demo__panel .ind-dash { max-width: 100%; margin: 0;
  box-shadow: 0 60px 110px -50px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.05); }

.v2-demo__spot { position: absolute; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center; pointer-events: none; }
.v2-demo__spot i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--signal);
  opacity: .5; transform: scale(.62); transition: transform .45s var(--ease), opacity .45s var(--ease); }
/* The ring frames the reading; the numeral sits on its shoulder rather than on top of
   the value, which it was hiding. */
.v2-demo__spot b { position: absolute; top: -9px; right: -11px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--ink-deep); background: var(--signal); width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; opacity: 0; transform: scale(.5);
  box-shadow: 0 0 0 3px var(--ink-deep);
  transition: transform .45s var(--ease), opacity .45s var(--ease); }
.v2-demo__spot.is-on i { transform: scale(1.25); opacity: 1; }
.v2-demo__spot.is-on b { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .v2-demo__spot.is-on i { animation: v2spot 2.2s var(--ease) infinite; }
}
@keyframes v2spot { 0% { box-shadow: 0 0 0 0 rgba(238,97,36,.5); } 70%,100% { box-shadow: 0 0 0 16px rgba(238,97,36,0); } }

.v2-demo__rail { list-style: none; margin: 0; padding: 0; }
/* Three children in a two-column grid: the number, the heading and the paragraph. Without
   pinning the last two to column 2, auto-placement drops the paragraph into the 34px
   number column and it renders one word per line. */
.v2-demo__step { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 16px; align-items: start;
  padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.12); opacity: .34;
  transition: opacity .4s var(--ease); }
.v2-demo__step > h3, .v2-demo__step > p { grid-column: 2; }
.v2-demo__num { grid-column: 1; grid-row: 1; }
.v2-demo__rail li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.v2-demo__step.is-on { opacity: 1; }
.v2-demo__num { font-family: var(--font-mono); font-size: 12px; color: var(--signal); padding-top: 4px; }
.v2-demo__step h3 { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--paper); margin: 0 0 8px; }
.v2-demo__step p { font-size: 15.5px; line-height: 1.55; color: var(--steel-300); margin: 0; max-width: 46ch; }

/* Desktop only: the runway and the pin. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .v2-demo__runway { height: calc(100vh + var(--steps, 4) * 62vh); position: relative; }
  .v2-demo__stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
}
@media (max-width: 980px), (prefers-reduced-motion: reduce) {
  .v2-demo__runway { height: auto; }
  .v2-demo__stage { position: static; height: auto; padding: var(--band-pad) 0; }
  .v2-demo__grid { grid-template-columns: 1fr; }
  .v2-demo__spot { display: none; }
  .v2-demo__step { opacity: 1; }
}

/* ---- dives ---- */
.v2-dives { background: var(--paper); }
.v2-dives__grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 4vw, 64px); }
.v2-dives__item { padding: 26px 0; border-top: 1px solid var(--steel-300); }
.v2-dives__idx { font-family: var(--font-mono); font-size: 12px; color: var(--signal-press); }
.v2-dives__item h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.2; letter-spacing: -0.02em;
  margin: 10px 0 8px; color: var(--ink); }
.v2-dives__item p { font-size: 16px; line-height: 1.55; color: var(--steel-700); margin: 0; max-width: 44ch; }
@media (max-width: 760px) { .v2-dives__grid { grid-template-columns: 1fr; } }

/* ---- compliance band ---- */
.v2-band { background: var(--ink); color: var(--steel-300); position: relative; overflow: hidden; }
.v2-band__line { font-size: clamp(22px, 2.8vw, 34px); line-height: 1.25; letter-spacing: -0.024em;
  color: var(--paper); font-weight: 600; margin: 0; max-width: 26ch; }
.v2-band__list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.v2-band__list li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--steel-300); border: 1px solid rgba(255,255,255,0.18);
  padding: 7px 12px; }

/* =====================================================================
   Spec/compliance table on a graphite band.
   inc/solution-spec-table.php is styled for the light product surface, but
   page-solution renders it inside .ind-sol-facts, which is drenched graphite —
   so tbody th inherited var(--ink) (navy on navy) and disappeared entirely,
   leaving a table of blank rows. These are the dark-band colours only.
   ===================================================================== */
.ind-sol-facts .ind-soltbl caption { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ind-sol-facts .ind-soltbl { border: 1px solid rgba(255,255,255,0.14); }
.ind-sol-facts .ind-soltbl thead th { background: rgba(255,255,255,0.04); color: var(--signal);
  border-bottom: 1px solid rgba(255,255,255,0.14); padding: 12px 16px; }
.ind-sol-facts .ind-soltbl tbody th { color: var(--paper); font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.10); padding: 14px 16px; }
.ind-sol-facts .ind-soltbl tbody td { color: var(--steel-300); font-family: var(--font-sans);
  border-bottom: 1px solid rgba(255,255,255,0.10); padding: 14px 16px; }
.ind-sol-facts .ind-soltbl tbody tr:last-child th,
.ind-sol-facts .ind-soltbl tbody tr:last-child td { border-bottom: 0; }
.ind-sol-facts .ind-soltbl .iott-cmp__na { color: var(--steel-500); }
.ind-sol-facts .ind-soltbl__sku { color: var(--steel-500); }

/* The logo marquee track is deliberately wider than the viewport; without clipping on
   the marquee itself it leaks ~10px and gives the whole page a horizontal scrollbar. */
.ind-trustedby__marquee { overflow: hidden; max-width: 100%; }
.ind-v2 { overflow-x: clip; }
/* A compliance line with no second half spans the row rather than leaving a dead cell. */
.ind-sol-facts .ind-soltbl__full { font-weight: 600; color: var(--paper); }

/* =====================================================================
   Never reveal-animate the hero.
   The ambient [data-rv] primitive starts at opacity:0, and the hero H1 is the
   LCP element on every solution page — so fading it in pushed LCP from ~1.0s
   to 2.25s (measured). Above-the-fold content paints immediately; the reveal
   language starts below the fold where it costs nothing.
   ===================================================================== */
.ind-v2 .v2-hero [data-rv] { opacity: 1 !important; transform: none !important; }