/* ==========================================================================
   LITUS GLOBAL SOLUTIONS — DESIGN SYSTEM

   Grounded in the actual subject matter: precision electrical fabrication.
   Type: IBM Plex, an engineering-heritage family with a real mono companion.
   Color: the brand blue sampled directly from the Litus logo file
   (#005EB8) is the only brand color used — every other value here is a
   neutral or a tint/shade derived mathematically from that one blue,
   not an invented accent.
   Motion: one signature moment (the scroll-driven process diagram) rather
   than fade-ups scattered across every card.
   ========================================================================== */

:root{
  /* brand + structure */
  --blue:        #005EB8;   /* sourced directly from the Litus logo file */
  --blue-deep:   #001B33;   /* near-black blue, dark sections */
  --blue-mid:    #0A3D6B;
  --blue-bright: #1479E0;
  --blue-mist:   #E7EEF6;
  --blue-mist-2: #D3E1F0;

  /* neutrals — clean, cool grays (no invented accent color) */
  --white:       #FFFFFF;
  --cloud:       #F4F6F8;
  --cloud-dim:   #EAEDF1;
  --ink:         #14181D;
  --ink-soft:    #414A52;
  --steel:       #67717A;
  --steel-light: #98A1A8;
  --line:        #DDE2E7;
  --line-soft:   #EBEEF1;

  --f-display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --f-body:    "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", "SF Mono", Consolas, monospace;

  --max: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 8px;
  --radius-lg: 16px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; scroll-padding-top: 96px; }
body{
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button{ font: inherit; cursor: pointer; background: none; border: 0; }
svg{ display: block; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
:focus-visible{ outline: 2.5px solid var(--blue-bright); outline-offset: 2px; border-radius: 1px; }

/* ---------- type ---------- */
h1, .h1{ font-family: var(--f-display); font-weight: 700; letter-spacing: -0.005em; line-height: 1.02; color: var(--ink); font-size: clamp(2.3rem, 1.6rem + 3vw, 3.9rem); }
h2, .h2{ font-family: var(--f-display); font-weight: 700; letter-spacing: 0; line-height: 1.08; color: var(--ink); font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem); }
h3, .h3{ font-family: var(--f-display); font-weight: 700; letter-spacing: 0; line-height: 1.18; color: var(--ink); font-size: 1.32rem; }
h4, .h4{ font-family: var(--f-display); font-weight: 600; line-height: 1.25; color: var(--ink); font-size: 1.08rem; }
p{ color: var(--ink-soft); max-width: 62ch; }
p.lede{ font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); max-width: 52ch; }
.eyebrow{ font-family: var(--f-body); font-size: 0.92rem; font-weight: 600; color: var(--blue); }
.text-steel{ color: var(--steel); }
.max-prose{ max-width: 62ch; }
.num{ font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.wrap{ max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section{ padding: clamp(44px, 6vw, 76px) 0; }
.section-tight{ padding: clamp(36px, 5vw, 56px) 0; }
.section-head{ max-width: 640px; margin-bottom: clamp(26px, 4vw, 40px); }
.section-head .eyebrow{ display: block; margin-bottom: 6px; }
.bg-cloud{ background: radial-gradient(ellipse 120% 100% at 50% 0%, #F7F4EF 0%, var(--cloud) 55%, #EEF2F5 100%); }
.bg-mist{ background: var(--blue-mist); }
.bg-ink{ background: var(--blue-deep); color: var(--white); }
.bg-ink p{ color: #C3CFDC; }
.bg-blue-deep{ background: var(--blue-deep); color: var(--white); }
.bg-blue-deep::before{ content: ""; }
.bg-blue-deep p{ color: #C3CFDC; }
.bg-blue-deep h1, .bg-blue-deep h2, .bg-blue-deep h3{ color: var(--white); }
.divider{ height: 1px; background: var(--line); border: 0; margin: 0; }

.grid{ display: grid; gap: clamp(18px, 3vw, 30px); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-6{ grid-template-columns: repeat(6, 1fr); }
@media (max-width: 980px){ .grid-3{ grid-template-columns: repeat(2, 1fr); } .grid-4{ grid-template-columns: repeat(2, 1fr); } .grid-6{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } .grid-6{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- buttons ---------- */
.btn{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-body); font-weight: 600; font-size: 0.95rem; padding: 13px 24px; border-radius: var(--radius); border: 1.5px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; }
.btn-primary{ background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn-primary:hover{ background: var(--blue-bright); border-color: var(--blue-bright); }
.btn-secondary{ background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-secondary:hover{ background: var(--blue-mist); }
.bg-blue-deep .btn-secondary, .bg-ink .btn-secondary,
.hero .btn-secondary, .page-head .btn-secondary, .cta-band .btn-secondary{
  color: var(--white); border-color: rgba(255,255,255,.6); background: transparent;
}
.bg-blue-deep .btn-secondary:hover, .bg-ink .btn-secondary:hover,
.hero .btn-secondary:hover, .page-head .btn-secondary:hover, .cta-band .btn-secondary:hover{
  background: var(--white); color: var(--blue-deep); border-color: var(--white);
}
.btn-tertiary{ background: var(--ink); color: var(--white); }
.btn-row{ display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.link-arrow{ display: inline-flex; align-items: center; gap: 0; font-weight: 600; font-size: 0.95rem; color: var(--blue); border-bottom: 1.5px solid transparent; transition: border-color .15s ease; }
.link-arrow:hover{ border-color: var(--blue); }
.link-arrow svg{ width: 15px; height: 15px; opacity: 0; transform: translateX(-5px); transition: opacity .18s ease, transform .18s ease, margin-left .18s ease; margin-left: -15px; }
.link-arrow:hover svg, .link-arrow:focus-visible svg{ opacity: 1; transform: translateX(0); margin-left: 6px; }

/* ---------- spec tag / tier badge ---------- */
.spec-tag{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; color: var(--blue-deep); background: var(--blue-mist); border: 1px solid var(--blue-mist-2); border-radius: var(--radius); padding: 6px 11px; }
.bg-blue-deep .spec-tag, .bg-ink .spec-tag{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #DCE7F3; }
.spec-tag.muted{ background: transparent; border-color: rgba(255,255,255,.3); color: #B7CDE6; }
.spec-tag svg{ width: 13px; height: 13px; }
.spec-tag img{ width: 15px; height: 15px; object-fit: contain; }

.tier{ display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; padding: 5px 10px; border-radius: var(--radius); }
.tier-built{ color: var(--white); background: var(--blue); }
.tier-sourced{ color: var(--blue-deep); background: var(--white); border: 1.4px solid var(--blue); }
.tier-neutral{ color: var(--steel); background: var(--cloud); }
.tier-dot{ width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- header / nav ---------- */
.site-header{ position: sticky; top: 0; z-index: 100; background: rgba(245,241,231,.94); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); }
.nav-bar{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand{ display: flex; align-items: center; gap: 10px; flex: none; }
.brand img{ height: 28px; width: auto; }
.nav-links{ display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.nav-item{ position: relative; }
.nav-link{ display: flex; align-items: center; gap: 5px; padding: 10px 13px; font-family: var(--f-body); font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); border-radius: var(--radius); transition: color .15s ease, background .15s ease; }
.nav-link:hover, .nav-item.open .nav-link{ color: var(--blue); background: var(--blue-mist); }
.nav-link .caret{ width: 9px; height: 9px; transition: transform .15s ease; }
.nav-item.open .nav-link .caret{ transform: rotate(180deg); }
.nav-link.current{ color: var(--blue); }

.dropdown{ position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 300px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 18px 40px -16px rgba(27,24,18,.28); padding: 10px; opacity: 0; visibility: hidden; translate: 0 4px; transition: opacity .15s ease, translate .15s ease, visibility .15s ease; }
.nav-item.open .dropdown, .nav-item:hover .dropdown, .nav-item:focus-within .dropdown{ opacity: 1; visibility: visible; translate: 0 0; }
.dropdown a{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius); font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); }
.dropdown a:hover{ background: var(--blue-mist); color: var(--blue); }
.dropdown a .sub{ font-size: 0.78rem; font-weight: 400; color: var(--steel); }
.dropdown .group-label{ font-family: var(--f-mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.04em; color: var(--steel); padding: 8px 12px 4px; }

.nav-cta{ display: flex; align-items: center; gap: 10px; flex: none; }
.nav-cta .btn{ padding: 10px 18px; font-size: 0.88rem; }
.nav-toggle{ display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); align-items: center; justify-content: center; }
.nav-toggle svg{ width: 18px; height: 18px; }

@media (max-width: 1120px){
  .nav-links{ display: none; }
  .nav-cta .btn-secondary{ display: none; }
  .nav-toggle{ display: flex; }
  .nav-cta{ margin-left: auto; }
  body.nav-open .mobile-panel{ max-height: 80vh; padding: 10px var(--gutter) 24px; overflow-y: auto; }
  .mobile-panel{ max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; border-top: 1px solid var(--line); padding: 0 var(--gutter); background: var(--white); }
  .mobile-panel a:not(.btn){ display: block; padding: 13px 4px; font-weight: 500; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
  .mobile-panel .mobile-group-label{ font-family: var(--f-mono); font-size: .65rem; font-weight: 500; letter-spacing: .04em; color: var(--steel); padding: 14px 4px 4px; }
  .mobile-panel .btn{ width: 100%; justify-content: center; margin-top: 10px; }
}
@media (min-width: 1121px){ .mobile-panel{ display: none; } .nav-link{ white-space: nowrap; } }

/* ---------- hero ---------- */
.hero{ position: relative; overflow: hidden; background: var(--blue-deep); color: var(--white); }
.hero-bg-photos{ position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; z-index: 0; }
.hero-bg-photos img{ width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(.3) brightness(.75); }

.hero::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,20,38,.86) 0%, rgba(6,20,38,.72) 45%, rgba(6,20,38,.9) 100%); z-index: 1; }
@media (max-width: 900px){ .hero-bg-photos{ grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce){ .hero-bg-photos img{ animation: none !important; } }
.hero::before{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 85% 70% at 25% 30%, black 35%, transparent 82%); pointer-events: none; }
.hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(ellipse 60% 70% at 82% 15%, rgba(0,94,184,.35), transparent 60%); pointer-events:none; }
.hero-inner{ position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: clamp(44px, 6vw, 80px) var(--gutter) clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero-inner > div:first-child{ position: relative; z-index: 2; }

/* ---------- hero 3D stage (build 8.2): canvas lives inside the right-hand column, never behind the headline ---------- */
.hero-art{ position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; margin-right: calc(-1 * (max(0px, var(--gutter) - 14px) + clamp(0px, (100vw - var(--max)) / 2 - 14px, 150px))); }
.hero-stage{ position: relative; width: 100%; height: clamp(420px, 36vw, 560px); }
#hero3d, .page-head-art canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 8px rgba(90,160,255,.28)); }
.hero-label{ margin-top: 10px; text-align: center; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .02em; color: #9FC1E4; }
.page-head-art{ position: relative; z-index: 1; min-width: 0; height: clamp(420px, 34vw, 500px); margin-right: calc(-1 * (max(0px, var(--gutter) - 14px) + clamp(0px, (100vw - var(--max)) / 2 - 14px, 150px))); }
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .page-head-grid{ grid-template-columns: 1fr; }
  .hero-art, .page-head-art{ width: 100%; max-width: 100%; margin-right: 0; }
  .hero-stage{ height: 340px; }
  .page-head-art{ height: 320px; margin-top: 8px; }
}
.hero h1{ color: var(--white); }
.hero p.lede{ color: #CBD9E8; margin-top: 18px; }
.hero .btn-row{ margin-top: 30px; }
.hero .spec-tag{ margin-bottom: 20px; }
/* (replaced in build 8.2) */

/* (replaced in build 8.2) */
/* (replaced in build 8.2) */
/* (replaced in build 8.2) */
/* (replaced in build 8.2) */
.hero-dim{ stroke: rgba(255,255,255,.4); stroke-width: 1; }
.hero-dim-text{ font-family: var(--f-mono); font-size: 9px; fill: rgba(255,255,255,.55); }
.hero-callout{ stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 2 2; }
.hero-callout-text{ font-family: var(--f-mono); font-size: 9.5px; fill: rgba(255,255,255,.62); }

/* ---------- shared glow accent (used by subpage hero pulses) ---------- */
.sb-glow{ filter: drop-shadow(0 0 2px rgba(90,160,255,.85)) drop-shadow(0 0 7px rgba(60,130,255,.5)); }

/* ---------- page header (non-home) ---------- */
.page-head{ background: linear-gradient(125deg, var(--blue-deep) 0%, #002d52 45%, var(--blue-deep) 100%); background-size: 180% 180%;  color: var(--white); padding: clamp(46px, 7vw, 72px) 0 clamp(38px, 6vw, 56px); position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce){ .page-head{ animation: none; } }
.page-head::before{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 65% 100% at 88% 0%, black 25%, transparent 75%); }
.page-head .wrap{ position: relative; }
.breadcrumb{ display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .78rem; font-weight: 500; color: #8FADCE; margin-bottom: 18px; }
.breadcrumb a:hover{ color: var(--white); }
.page-head h1{ color: var(--white); max-width: 16ch; }
.page-head p.lede{ color: #CBD9E8; margin-top: 14px; }
.page-head .tier-row{ display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* ---------- page-head with a dedicated animated wireframe scene ---------- */
.page-head-grid{ position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; }
@media (max-width: 900px){ .page-head-grid{ grid-template-columns: 1fr; } }
.page-head-grid > div:first-child{ position: relative; z-index: 2; }
/* (replaced in build 8.2) */
/* (replaced in build 8.2) */
/* (replaced in build 8.2) */

/* ---------- cards ---------- */
.card-link{ display: block; height: 100%; }
.card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; height: 100%; display: flex; flex-direction: column; box-shadow: 0 2px 10px -4px rgba(20,30,45,.06); }
a.card-link:hover .card, .card.hoverable:hover{ box-shadow: 0 16px 32px -12px rgba(20,40,70,.16); transform: translateY(-3px); }
.card-link .card{ height: 100%; }
.card-link{ display: block; }
a.card-link:hover .card, .card.hoverable:hover{ border-color: var(--blue); }
.card .icon-badge{ margin-bottom: 16px; }
.card h3{ margin-bottom: 8px; }
.card p{ font-size: .94rem; }
.card .card-foot{ margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.icon-badge{ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--blue-mist); border-radius: var(--radius); color: var(--blue); flex: none; }
.icon-badge svg{ width: 23px; height: 23px; }
.icon-badge.inverse{ background: rgba(255,255,255,.12); color: var(--white); }

.path-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 13px; height: 100%; border-top: 3px solid var(--blue); box-shadow: 0 2px 10px -4px rgba(20,30,45,.06); transition: box-shadow .2s ease, transform .2s ease; }
a.card-link:hover .path-card{ box-shadow: 0 16px 32px -12px rgba(20,40,70,.16); transform: translateY(-3px); }
.path-card .eyebrow{ color: var(--steel); font-family: var(--f-mono); font-size: .76rem; font-weight: 500; }
.path-card h3{ font-size: 1.3rem; }
.path-card p{ font-size: .94rem; flex: 1; }
.path-card .photo-frame{ aspect-ratio: 5 / 4; margin-bottom: 10px; border-radius: var(--radius); }
.market-card{ padding-top: 0; overflow: hidden; }
.market-card .market-photo{ aspect-ratio: 4 / 3; margin: -26px -26px 18px; border-radius: 0; }
.market-card .icon-badge{ margin-top: 4px; }

/* ---------- photo placeholders (watermarked stock previews, pending real assets) ---------- */
.photo-circle{ width: 74px; height: 74px; border-radius: 50%; flex: none; background: radial-gradient(circle at 32% 28%, #E7EEF6, #C9DBEC 60%, #9FC0E0); border: 1px solid var(--blue-mist-2); display: flex; align-items: center; justify-content: center; color: var(--blue); position: relative; overflow: hidden; }
.photo-circle svg{ width: 25px; height: 25px; opacity: .8; position: relative; }
.photo-circle.sm{ width: 50px; height: 50px; }
.photo-circle.sm svg{ width: 19px; height: 19px; }
.photo-circle.glow{ box-shadow: 0 0 0 6px rgba(0,94,184,.08); }

/* shared watermark tile: a diagonal repeated "STOCK PLACEHOLDER" pattern, standing in for a
   licensed photo. Swap the background-image on .photo-block/.photo-band/.photo-frame for a
   real <img> the moment licensed or client photography is available. */
.photo-block, .photo-band, .photo-frame{ position: relative; overflow: hidden; background: linear-gradient(135deg, #3C4650 0%, #262E36 55%, #171D24 100%); }
.photo-block.has-photo::before, .photo-band.has-photo::before, .photo-frame.has-photo::before{ display: none; }
.photo-block .real-photo, .photo-band .real-photo, .photo-frame .real-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
@media (prefers-reduced-motion: reduce){ .real-photo{ animation: none !important; } }
.photo-block::before, .photo-band::before, .photo-frame::before{
  content: ""; position: absolute; inset: -10%;
  background-image: none;
  background-repeat: repeat; background-size: 200px 100px; pointer-events: none;
}
.photo-block::after, .photo-frame::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 22%, rgba(0,94,184,.4), transparent 58%); }
.photo-band::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4,12,22,.86) 0%, rgba(4,12,22,.62) 32%, rgba(4,12,22,.18) 60%, transparent 78%), linear-gradient(0deg, rgba(4,12,22,.5) 0%, transparent 40%); z-index: 0; }

@media (prefers-reduced-motion: reduce){ .photo-block::before, .photo-band::before, .photo-frame::before{ animation: none !important; } }
.photo-block{ border-radius: var(--radius-lg); aspect-ratio: 4 / 3; display: flex; align-items: flex-end; }
.photo-block .photo-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-58%); width: 22%; max-width: 60px; color: rgba(255,255,255,.4); z-index: 1; }
.photo-block .photo-icon svg{ width: 100%; height: 100%; }
.photo-block .photo-caption{ position: relative; z-index: 1; width: 100%; padding: 14px 16px; background: linear-gradient(0deg, rgba(0,10,20,.75), transparent); font-family: var(--f-mono); font-size: .68rem; color: #D9E7F6; }
.photo-block.square{ aspect-ratio: 1 / 1; }
.photo-block.wide{ aspect-ratio: 21 / 9; }

.bleed{ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.photo-band{ width: 100%; aspect-ratio: 21 / 7; min-height: 280px; max-height: 460px; display: flex; align-items: center; }
@media (max-width: 900px){ .photo-band{ aspect-ratio: auto; min-height: 250px; max-height: none; } .hero-art, #hero3d, .page-head-art{ width: 100%; max-width: 100%; } }
.photo-band-inner{ position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); width: 100%; color: var(--white); }
.photo-band-inner .eyebrow{ color: #8FADCE; }
.photo-band-inner h2{ color: var(--white); margin-top: 8px; max-width: 26ch; }
.photo-band-tag{ position: relative; z-index: 1; }

.photo-frame{ border-radius: var(--radius); display: flex; align-items: flex-end; }
.path-card .photo-frame .real-photo{ transition: transform .5s ease; }
a.card-link:hover .path-card .photo-frame .real-photo{ transform: scale(1.1); }
.photo-frame .real-photo{ transition: transform .5s ease; }
.path-card:hover .photo-frame .real-photo, a.card-link:hover .photo-frame .real-photo{ transform: scale(1.12); }
.photo-frame .frame-caption{ position: relative; z-index: 1; width: 100%; padding: 8px 10px; background: linear-gradient(0deg, rgba(0,10,20,.72), transparent); font-family: var(--f-mono); font-size: .58rem; color: #D9E7F6; line-height: 1.3; }
.stock-tag{ position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .03em; background: rgba(0,0,0,.55); color: #fff; padding: 3px 8px; border-radius: 2px; }
.photo-band .stock-tag, .photo-block .stock-tag{ top: 14px; left: 14px; }

/* ---------- product tier explainer ---------- */
.tier-explainer{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.tier-explainer::before{ content: ""; position: absolute; inset: 0; background: url("../img/photos2/p2-project-gallery.jpg") center/cover; opacity: .08; z-index: 0; }
.tier-explainer > div{ background: var(--white); padding: 30px 28px; position: relative; z-index: 1; }
.tier-explainer h3{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 1.1rem; }
@media (max-width: 700px){ .tier-explainer{ grid-template-columns: 1fr; } }

/* ---------- nameplate: a real equipment-tag component for credentials ---------- */
.nameplate{ background: var(--blue-deep); border: 1px solid #002a4d; border-radius: var(--radius); padding: 22px 24px; position: relative; overflow: hidden; }
.nameplate::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 8px); }
.nameplate-row{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12); position: relative; }
.nameplate-row:last-child{ border-bottom: none; }
.nameplate-row .label{ font-family: var(--f-mono); font-size: .78rem; color: #9FC1E4; }
.nameplate-row .value{ font-family: var(--f-mono); font-size: .82rem; font-weight: 500; color: var(--white); text-align: right; }
.cred-group{ margin-bottom: 26px; }
.cred-group:last-child{ margin-bottom: 0; }
.cred-group-title{ font-family: var(--f-body); font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 12px; }

.cert-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px){ .cert-grid{ grid-template-columns: repeat(2, 1fr); } }
.cert-item{ display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.cert-item .icon-badge{ margin: 0; }
.cert-item .label{ font-family: var(--f-body); font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cert-item .sub{ font-size: .78rem; color: var(--steel); margin-top: 2px; }

/* ---------- spec table ---------- */
.spec-table{ width: 100%; border-collapse: collapse; }
.spec-table th{ text-align: left; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .03em; color: var(--steel); font-weight: 500; padding: 0 14px 10px; border-bottom: 1.5px solid var(--ink); }
.spec-table td{ padding: 14px; border-bottom: 1px solid var(--line); font-size: .93rem; vertical-align: top; }
.spec-table td:first-child, .spec-table th:first-child{ padding-left: 0; }
.spec-table tr:last-child td{ border-bottom: none; }
.spec-table .label{ font-weight: 600; color: var(--ink); }

/* ---------- stat tiles ---------- */
.stat-strip{ display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.stat-strip .stat{ padding: 22px 16px; text-align: center; background: var(--white); border-left: 1px solid var(--line); }
.stat-strip .stat:first-child{ border-left: none; }
.stat-num{ font-family: var(--f-display); font-weight: 700; font-size: 2rem; color: var(--blue); letter-spacing: -0.01em; }
.stat-label{ font-family: var(--f-mono); font-size: .66rem; color: var(--steel); margin-top: 4px; }
@media (max-width: 700px){ .stat-strip{ grid-template-columns: repeat(2,1fr); } .stat-strip .stat:nth-child(2n+1){border-left:none;} .stat-strip .stat:nth-child(-n+2){border-bottom:1px solid var(--line);} }
.stat-strip.cols-6{ grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px){ .stat-strip.cols-6{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px){ .stat-strip.cols-6{ grid-template-columns: repeat(2, 1fr); } }

.leadtime-compare{ display: grid; gap: 16px; }
.leadtime-row{ display: grid; grid-template-columns: 150px 1fr 90px; align-items: center; gap: 14px; }
.leadtime-row .lt-label{ font-family: var(--f-body); font-size: .84rem; font-weight: 500; color: var(--ink-soft); }
.leadtime-row .lt-track{ height: 12px; border-radius: 1px; background: var(--line-soft); overflow: hidden; }
.leadtime-row .lt-fill{ display: block; height: 100%; width: 0; transition: width 1.6s cubic-bezier(.16,.84,.32,1); }
.leadtime-row.slow .lt-fill{ background: var(--steel-light); }
.leadtime-row.fast .lt-fill{ background: var(--blue); }
.leadtime-row.in-view .lt-fill{ width: var(--w, 0); }
.leadtime-row .lt-value{ opacity: 0; transition: opacity .5s ease .9s; }
.leadtime-row.in-view .lt-value{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .leadtime-row .lt-fill{ width: var(--w, 0) !important; transition: none; } .leadtime-row .lt-value{ opacity: 1 !important; } }
.leadtime-row .lt-value{ font-family: var(--f-mono); font-weight: 500; text-align: right; font-size: .88rem; color: var(--ink); }
@media (max-width: 640px){ .leadtime-row{ grid-template-columns: 100px 1fr 70px; } }

/* ---------- trigger / check lists ---------- */
.check-list{ display: grid; gap: 12px; }
.check-list li{ display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--ink-soft); }
.check-list svg{ flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--blue); }

.trigger-grid{ display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px){ .trigger-grid{ grid-template-columns: 1fr; } }
.trigger-grid li{ display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px 15px 0; border-bottom: 1px solid var(--line); }
.trigger-grid svg{ flex: none; width: 15px; height: 15px; margin-top: 4px; color: var(--blue); }
.trigger-grid .trig-title{ font-size: .94rem; font-weight: 600; color: var(--ink); display: block; }
.trigger-grid .trig-copy{ font-size: .84rem; color: var(--steel); margin-top: 3px; }

/* ---------- accordion ---------- */
.accordion{ border-top: 1px solid var(--line); }
.accordion-item{ border-bottom: 1px solid var(--line); }
.accordion-trigger{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; text-align: left; font-family: var(--f-body); font-weight: 600; font-size: .98rem; color: var(--ink); }
.accordion-trigger:hover{ color: var(--blue); }
.accordion-trigger .plus-icon{ flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--blue); transition: transform .2s ease; }
.accordion-trigger .plus-icon svg{ width: 13px; height: 13px; }
.accordion-item.open .accordion-trigger .plus-icon{ transform: rotate(135deg); }
.accordion-panel{ max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.accordion-item.open .accordion-panel{ max-height: 400px; }
.accordion-panel-inner{ padding: 0 2px 20px 0; font-size: .93rem; color: var(--ink-soft); line-height: 1.6; max-width: 60ch; }

/* ---------- use-case interactive lanes ---------- */
.usecase-tabs{ display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.usecase-tab{ padding: 12px 4px; margin-right: 22px; font-family: var(--f-body); font-weight: 600; font-size: .92rem; color: var(--steel); border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease; }
.usecase-tab:hover{ color: var(--blue); }
.usecase-tab.active{ color: var(--blue); border-color: var(--blue); }
.usecase-panel{ display: none; text-align: center; }
.usecase-panel.active{ display: block; }
.usecase-photo{ aspect-ratio: 21/6; max-width: 720px; margin: 0 auto 24px; border-radius: var(--radius-lg); }
.usecase-desc{ font-size: 1.05rem; color: var(--ink-soft); max-width: 62ch; margin: 0 auto 28px; }
.usecase-steps{ display: grid; gap: 0; border-left: 2px solid var(--line); padding-left: 26px; margin: 0 auto; max-width: 560px; text-align: left; }
.usecase-step{ position: relative; padding-bottom: 26px; display: flex; gap: 14px; align-items: flex-start; }
.usecase-step:last-child{ padding-bottom: 6px; }
.usecase-step::before{ content: ""; position: absolute; left: -32px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--blue); }
.usecase-step .icon-badge{ flex: none; width: 34px; height: 34px; margin-top: 2px; }
.usecase-step .icon-badge svg{ width: 17px; height: 17px; }
.usecase-step-text h4{ font-size: .98rem; }
.usecase-step-text p{ font-size: .89rem; margin-top: 4px; color: var(--steel); }
.usecase-cta{ margin-top: 28px; }

/* ---------- vertical scroll-driven panel-assembly diagram (the one signature motion) ---------- */
.assembly-wrap{ display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.assembly-visual{ position: sticky; top: 96px; background: var(--cloud); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; perspective: 1200px; }
.assembly-visual svg{ }

@media (prefers-reduced-motion: reduce){ .assembly-visual svg{ animation: none !important; } }
.assembly-visual svg{ width: 100%; height: auto; display: block; }
.assembly-visual .assembly-caption{ margin-top: 14px; font-family: var(--f-mono); font-size: .72rem; color: var(--steel); text-align: center; }
.assembly-layer{ opacity: 0; transition: opacity .5s ease; }
.assembly-layer.active{ opacity: 1; }
.assembly-progress-track{ height: 3px; background: var(--line-soft); margin-bottom: 22px; overflow: hidden; }
.assembly-progress-fill{ height: 100%; width: 0%; background: var(--blue); transition: width .3s ease; }
.assembly-stages{ display: grid; }
.assembly-stage{ padding: 20px 0 20px 26px; border-left: 2px solid var(--line); position: relative; }
.assembly-stage::before{ content: ""; position: absolute; left: -7px; top: 36px; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--line); transition: border-color .3s ease, background .3s ease; }
.assembly-stage.active{ opacity: 1; }
/* Launch fix (Oct 26): inactive steps dim by colour rather than opacity, so their text still meets WCAG AA contrast */
.assembly-stage h4, .assembly-stage p, .assembly-stage .stage-tags, .assembly-stage .tier{ transition: color .4s ease, background-color .4s ease, border-color .4s ease; }
.assembly-stage:not(.active) h4, .assembly-stage:not(.active) p, .assembly-stage:not(.active) .stage-tags{ color: var(--steel); }
.assembly-stage:not(.active) .tier-built{ background: var(--steel); }
.assembly-stage:not(.active) .tier-sourced{ color: var(--steel); border-color: var(--steel); }
.assembly-stage.active::before{ border-color: var(--blue); background: var(--blue); }
.assembly-stage .tier{ margin-bottom: 8px; }
.assembly-stage h4{ font-size: 1.15rem; }
.assembly-stage p{ margin-top: 8px; font-size: .93rem; }
.assembly-stage .stage-tags{ font-family: var(--f-mono); font-size: .68rem; color: var(--steel); margin-top: 8px; }
@media (max-width: 900px){
  .assembly-wrap{ grid-template-columns: 1fr; }
  .assembly-visual{ position: static; max-width: 240px; margin: 0 auto 28px; }
}

/* ---------- customer logo strip / brand row ---------- */
.logo-strip{ text-align: center; }
.logo-strip-caption{ font-size: .92rem; color: var(--steel); margin: 0 auto 22px; max-width: 44ch; text-align: center; }
.logo-strip-row{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px 50px; }
.logo-box{ height: 54px; width: 128px; display: flex; align-items: center; justify-content: center; }
.logo-mark{ max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) opacity(.55); transition: filter .25s ease, transform .25s ease; cursor: default; }
.logo-mark:hover{ filter: grayscale(0) opacity(1); transform: scale(1.05); }
@media (prefers-reduced-motion: reduce){ .logo-mark{ transition: none; } }
.brand-row{ display: flex; flex-wrap: wrap; gap: 9px; }
.mfr-grid{ display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.mfr-cell{ padding: 18px 20px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.mfr-cell:nth-child(-n+2){ border-top: none; }
.mfr-cell:nth-child(2n+1){ border-left: none; }
.mfr-cell .icon-badge{ margin-bottom: 10px; width: 36px; height: 36px; }
.mfr-cell .icon-badge svg{ width: 18px; height: 18px; }
.mfr-cat{ font-family: var(--f-body); font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.mfr-names{ font-family: var(--f-mono); font-size: .78rem; color: var(--steel); line-height: 1.5; }
.mfr-note{ font-size: .78rem; color: var(--steel); margin-top: 6px; }
@media (max-width: 700px){ .mfr-grid{ grid-template-columns: 1fr; } .mfr-cell{ border-left: none !important; } .mfr-cell:nth-child(-n+2){ border-top: 1px solid var(--line); } .mfr-cell:first-child{ border-top: none; } }
.brand-chip{ display: inline-flex; align-items: center; font-family: var(--f-mono); font-size: .76rem; padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft); background: var(--white); }

/* ---------- promise band ---------- */
.promise-band{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promise-row{ display: grid; grid-template-columns: 52px 150px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.promise-row:last-child{ border-bottom: none; }
.promise-row .label{ font-family: var(--f-mono); font-size: .76rem; color: var(--steel); }
.promise-row .value{ font-weight: 600; font-size: 1.05rem; color: var(--ink); }
@media (max-width: 640px){ .promise-row{ grid-template-columns: 40px 1fr; grid-template-areas: "circle label" "circle value"; row-gap: 2px; column-gap: 14px; } .promise-row .photo-circle{ grid-area: circle; } .promise-row .label{ grid-area: label; } .promise-row .value{ grid-area: value; } }

/* ---------- CTA band ---------- */
.cta-band{ background: linear-gradient(120deg, var(--blue-deep) 0%, #002d52 50%, var(--blue-deep) 100%); background-size: 200% 200%; color: var(--white); border-radius: var(--radius-lg); padding: clamp(36px, 6vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce){ .cta-band{ animation: none; } }
.cta-band::before{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse 65% 100% at 100% 0%, black 15%, transparent 70%); }
.cta-band > *{ position: relative; }
.cta-band h2{ color: var(--white); max-width: 20ch; }
.cta-band p{ color: #CBD9E8; margin-top: 8px; }

/* ---------- footer ---------- */
.site-footer{ background: var(--blue-deep); color: #A9BBCE; }
.footer-top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: clamp(48px, 7vw, 72px) 0 30px; }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-top img{ height: 24px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-top p{ font-size: .88rem; color: #8CA0B6; max-width: 30ch; }
.footer-col h4{ color: #E4EBF2; font-family: var(--f-body); font-size: .88rem; font-weight: 600; margin-bottom: 14px; }
.footer-col a, .footer-col li{ display: block; font-size: .89rem; color: #8CA0B6; padding: 6px 0; }
.footer-col a:hover{ color: var(--white); }
.footer-contact-link{ display: flex !important; align-items: center; gap: 10px; }
.icon-inline{ width: 16px; height: 16px; flex: none; color: #7590A8; }
.footer-contact-link:hover .icon-inline{ color: var(--blue-bright); }
.footer-note{ font-size: .76rem; color: #8094A9; padding: 16px 0 4px; max-width: 68ch; line-height: 1.6; border-top: 1px solid rgba(255,255,255,.1); margin-top: 8px; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: #8094A9; }

/* ---------- misc ---------- */
.badge-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.cert-photo-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cert-photo-card{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cert-photo-card .cert-photo{ width: 100%; aspect-ratio: 5 / 4; border-radius: var(--radius); }
.cert-photo-card .spec-tag{ font-size: .68rem; }
@media (max-width: 900px){ .cert-photo-grid{ grid-template-columns: repeat(2, 1fr); } }
.kv-line{ display: flex; gap: 8px; align-items: baseline; font-size: .89rem; color: var(--steel); }
.kv-line b{ color: var(--ink); font-weight: 600; }
.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: start; }
@media (max-width: 800px){ .two-col{ grid-template-columns: 1fr; } }
.numbered{ counter-reset: step; display: grid; gap: 24px; }
.numbered li{ counter-increment: step; display: flex; gap: 18px; }
.numbered li::before{ content: counter(step); font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; width: 40px; flex: none; color: var(--blue); line-height: 1.1; }
.lane{ border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }
.lane-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pill{ display: inline-flex; align-items: center; font-family: var(--f-mono); font-size: .7rem; padding: 4px 10px; border-radius: 20px; background: var(--blue-mist); color: var(--blue-deep); }

/* ---------- scroll-reveal (used sparingly — see components.py) ---------- */
.reveal{ opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
[data-parallax]{ will-change: transform; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-parallax]{ transform: none !important; }
}

/* build 8.2: keep credential groups inside the viewport on narrow screens (G4 follow-up) */
.cred-group, .cert-grid > *, .nameplate{ min-width: 0; }
.cert-item .label, .cert-item .sub{ overflow-wrap: anywhere; }
@media (max-width: 480px){ .cert-grid{ grid-template-columns: 1fr; } }

/* ---------- build 8.2: slots with no correct photograph yet run as designed panels ----------
   (the Photo Spec's rule: run the slot without a photo rather than put the wrong product in it).
   These override the default placeholder pattern so nothing reads as stock or as a missing image. */
.photo-band.no-photo, .photo-frame.no-photo{ background: linear-gradient(125deg, var(--blue-deep) 0%, #002d52 52%, var(--blue-deep) 100%); }
.photo-band.no-photo::before, .photo-frame.no-photo::before{ content: ""; position: absolute; inset: 0; animation: none; background-repeat: repeat; background-size: 46px 46px;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 80% 120% at 78% 35%, #000 15%, transparent 78%); mask-image: radial-gradient(ellipse 80% 120% at 78% 35%, #000 15%, transparent 78%); }
.photo-band.no-photo::after, .photo-frame.no-photo::after{ background: radial-gradient(ellipse 45% 85% at 80% 35%, rgba(0,94,184,.34), transparent 68%); }
.band-schematic{ position: absolute; right: 9%; top: 50%; transform: translateY(-50%); height: 78%; width: auto; z-index: 1; opacity: .92; }
.photo-frame.schematic svg{ position: absolute; inset: 8% 0; width: 100%; height: 84%; z-index: 1; }
@media (max-width: 900px){ .band-schematic{ right: 4%; height: 62%; opacity: .5; } }
/* two frames side by side (the retrofit before/after pair) */
.photo-band.pair .real-photo{ width: 50%; left: 0; object-position: 50% 45%; }
.photo-band.pair .real-photo + .real-photo{ left: 50%; }
.photo-band.pair{ align-items: flex-end; }
.photo-band.pair::after{ background: linear-gradient(0deg, rgba(4,12,22,.88) 0%, rgba(4,12,22,.35) 38%, transparent 62%); }
.photo-band.pair .photo-band-inner{ padding-bottom: 28px; }

.mono-label{ font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--steel); }

/* build 8.2: band captions sit bottom-right and stay legible over any photo */
.photo-band-tag{ position: absolute; right: var(--gutter); bottom: 12px; z-index: 2; max-width: 64ch; text-align: right; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .02em; color: rgba(255,255,255,.86); text-shadow: 0 1px 3px rgba(0,0,0,.75); }
@media (max-width: 600px){ .photo-band-tag{ left: var(--gutter); text-align: left; } }

/* build v10 (H18): nothing moves on its own once the page has loaded. Hover responses and one-time entrances stay. */
.hero-bg-photos img, .page-head, .cta-band, .real-photo, .photo-block::before, .photo-band::before, .photo-frame::before, .assembly-visual svg{ animation: none !important; }

/* v10 G8: contact icons sized to the text */
.kv-line{ align-items: center; }
.kv-line svg{ width: 20px; height: 20px; flex: none; color: var(--blue); }
/* v10 G6: customer-history cards never get narrower than 200px; the set wraps */
.cert-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 900px){ .cert-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (max-width: 480px){ .cert-grid{ grid-template-columns: 1fr; } }
/* v10 S14: blocks that lost their photograph run at full width */
.cred-block{ display: block; }
.cred-block > p{ color: var(--steel); font-size: .95rem; max-width: 62ch; margin-bottom: 24px; }
.cred-block .cert-photo-grid{ grid-template-columns: repeat(4, 1fr); width: 100%; }
@media (max-width: 900px){ .cred-block .cert-photo-grid{ grid-template-columns: repeat(2, 1fr); } }
.card.wide p{ max-width: none; }
/* v10 S15: the Markets / Products panel is wide enough for a label column and a subtitle column */
.dropdown{ min-width: 500px; }
.dropdown a > span:first-child{ white-space: nowrap; }
.dropdown a .sub{ white-space: nowrap; }
/* v10 S25: cards share one grid so badge, heading, body and link start at the same height in every card */
@supports (grid-template-rows: subgrid){
  .grid.row-align{ row-gap: 10px; }
  .grid.row-align > .card-link{ display: grid; grid-row: span var(--rows, 6); grid-template-rows: subgrid; margin-bottom: 22px; }
  .grid.row-align > .card-link > .card, .grid.row-align > .card-link > .path-card{ display: grid; grid-row: span var(--rows, 6); grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
}
/* v10 H16: the hero label stays on one line where there is room for it */
@media (min-width: 1120px){ .hero-label{ white-space: nowrap; } }

.brand-chip-more{ background: none; border-color: transparent; color: var(--steel); font-style: italic; }
.inline-link{ text-decoration: underline; text-underline-offset: 3px; }

/* v10: label under the interior hero canvas (Emerging Energy) */
.page-head-art .hero-label{ position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; text-align: center; }

/* ---------- build v11 ---------- */
#rfq-form label[for="f-file"] svg{ width: 22px; height: 22px; flex: none; }                      /* V1 */
.grid.row-align .card > span{ justify-self: start; }                                            /* V7 */
.hero-label{ max-width: none; }                                                                  /* V28 */
.nameplate-row .label{ white-space: nowrap; }                                                    /* V30 */
.photo-band .real-photo[src*="stock/vfd-cabinet"]{ object-position: 50% 20%; }                    /* keep the drive keypad in the band */
.photo-band .real-photo[src*="stock/switchboard-main-section"]{ object-position: 50% 42%; }
@media (max-width: 900px){ .photo-band.has-photo:not(.pair)::after{ background: linear-gradient(0deg, rgba(4,12,22,.8) 0%, rgba(4,12,22,.64) 55%, rgba(4,12,22,.52) 100%); } }  /* text spans the full width on phones */

/* ---------- build v12 ---------- */
.photo-band .real-photo[src*="stock/switchboard-lineup"]{ object-position: 50% 6%; }              /* keep the two main breakers in the band */
.cred-block > p{ text-align: center; margin-left: auto; margin-right: auto; }                    /* credentials block centered */
.cred-block .cert-photo-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cred-block .cert-photo-card{ flex: 0 0 calc((100% - 42px) / 4); min-width: 0; }
@media (max-width: 900px){ .cred-block .cert-photo-card{ flex-basis: calc((100% - 14px) / 2); } }
.cert-photo-card .spec-tag svg{ width: 17px; height: 17px; }                                      /* tag icons about 30% larger */
.cert-photo-card .spec-tag img{ width: 20px; height: 20px; }