:root {
  /* ── BACKGROUNDS — cool blue-white ── */
  --bg:      #f5f7fb;     /* cool off-white */
  --white:   #ffffff;     /* pure white for cards */
  --light:   #edf1f8;     /* blue-tinted alternate bg */
  --panel:   #e4eaf5;     /* blue panel bg */

  /* ── FOREGROUNDS — navy family ── */
  --navy:    #0c1828;     /* deep navy — display headings */
  --text:    #1a2840;     /* dark navy — body headings */
  --body:    #2e3e55;     /* navy — paragraph text */
  --dim:     #4a5d75;     /* secondary text */
  --muted:   #7889a0;     /* captions, labels */

  /* ── ACCENT — JQMC blue ── */
  --accent:   #2563eb;     /* primary accent — vivid blue */
  --accent2:  #1d4ed8;     /* darker hover */
  --accentlo: rgba(37,99,235,.09);
  --accentborder: rgba(37,99,235,.22);

  /* ── DARK SECTIONS (hero, banners) — lifted slate instead of near-black ── */
  --dark-bg: #2d3f55;        /* was #0c1828 — now a lifted slate navy */
  --dark-surface: #3d4f66;   /* was #12223d */
  --dark-border: rgba(255,255,255,.12);
  --dark-overlay-a: rgba(45,63,85,.82);  /* for photo overlays */
  --dark-overlay-b: rgba(45,63,85,.88);

  /* ── CARDS ON DARK SECTIONS — pure white, bold shadows ── */
  --ivory:         #ffffff;  /* pure white card surface */
  --ivory-2:       #f5f7fb;  /* cool gray-white for subtle hover */
  --ivory-border:  rgba(12,24,40,.08);
  --ivory-text:    #0c1828;  /* deep navy body text */
  --ivory-dim:     #2e3e55;  /* secondary text — still punchy */
  --ivory-muted:   #4a5d75;  /* captions */
  --ivory-shadow:  0 20px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
  --ivory-shadow-sm: 0 10px 32px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.25);

  /* ── BORDERS & SHADOWS ── */
  --border:  #d4dbe9;
  --border2: #b0bcce;
  --shadow:  0 1px 3px rgba(12,24,40,.07), 0 4px 16px rgba(12,24,40,.06);
  --shadow-md: 0 4px 20px rgba(12,24,40,.10), 0 1px 4px rgba(12,24,40,.08);
  --shadow-lg: 0 8px 40px rgba(12,24,40,.14), 0 2px 8px rgba(12,24,40,.10);

  /* ── TYPOGRAPHY ── */
  --display: 'Plus Jakarta Sans', sans-serif;
  --mono:    'DM Mono', monospace;
  --body-font: 'Outfit', sans-serif;
  --radius:  3px;

  /* ── ACCENT FAMILY (additional tones) ── */
  --sky:     #60a5fa;   /* lighter blue — used in gradients, highlights, hover */
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
section { position:relative; z-index:1; }
html { scroll-behavior:smooth; font-size:17px; }
body {
  background:var(--bg);
  background-image:
    /* cool blue gradient down the page */
    linear-gradient(
      180deg,
      rgba(245,247,251,1) 0%,
      rgba(235,240,250,1) 25%,
      rgba(240,243,248,1) 50%,
      rgba(232,238,248,1) 75%,
      rgba(237,241,248,1) 100%
    );
  background-attachment: fixed;
  color:var(--body);
  font-family:var(--body-font);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Engineering paper — dot grid + faint construction lines */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    /* primary dot grid — intersections */
    radial-gradient(circle, rgba(12,24,40,.08) 1px, transparent 1px),
    /* secondary smaller dot grid — finer detail */
    radial-gradient(circle, rgba(12,24,40,.03) .5px, transparent .5px),
    /* horizontal construction lines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 63px,
      rgba(12,24,40,.03) 63px,
      rgba(12,24,40,.03) 64px
    ),
    /* vertical construction lines */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 63px,
      rgba(12,24,40,.03) 63px,
      rgba(12,24,40,.03) 64px
    );
  background-size: 64px 64px, 16px 16px, 64px 64px, 64px 64px;
  pointer-events:none; z-index:0;
}

/* Soft noise texture overlay for paper feel */
body::after {
  content:'';
  position:fixed; inset:0;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events:none; z-index:0;
}

/* ── UTILS ── */
.wrap { max-width:1200px; margin:0 auto; padding:0 48px; position:relative; z-index:1; }
.section { padding:96px 0; position:relative; z-index:1; text-align:center; }
.mono { font-family:var(--mono); }
.tag {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.65rem; font-weight:500;
  letter-spacing:.1em; text-transform:none;
  color:var(--accent); padding:4px 10px;
  border:1px solid var(--accentborder);
  border-radius:var(--radius); margin-bottom:16px;
  background:var(--accentlo);
}
.tag::before { content:''; width:5px; height:5px; background:var(--accent); border-radius:50%; }
.section-title {
  font-family:var(--display);
  font-size:clamp(2rem, 4vw, 2.8rem);
  font-weight:500;
  color:var(--navy);
  letter-spacing:.04em;
  word-spacing:.12em;
  line-height:1.2;
  text-transform:uppercase;
  margin-bottom:22px;
  text-align:center;
}
.section-desc {
  font-size:.95rem;
  color:var(--dim);
  line-height:1.9;
  max-width:520px;
  margin-bottom:56px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.divider { border:none; border-top:1px solid var(--border); }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:68px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 16px rgba(12,24,40,.07);
  transition:box-shadow .3s;
}
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo-name { font-family:var(--display); font-size:1rem; letter-spacing:.06em; color:var(--navy); text-transform:none; line-height:1; }
.nav-logo-sub { font-family:var(--mono); font-size:.55rem; color:var(--muted); letter-spacing:.12em; text-transform:none; }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links > li > a,
.nav-item > a {
  font-size:.88rem; font-weight:600; font-family:var(--mono);
  color:var(--navy); text-decoration:none; letter-spacing:.04em;
  text-transform:none; transition:color .2s;
  display:inline-flex; align-items:center; gap:4px;
}
.nav-links a:hover { color:var(--accent); }
.nav-caret {
  font-size:.62rem; color:var(--muted);
  transition:transform .25s, color .2s;
  display:inline-block;
  line-height:1;
  margin-left:2px;
}
.nav-item:hover > a > .nav-caret,
.nav-item:focus-within > a > .nav-caret {
  transform:rotate(-180deg);
  color:var(--accent);
}

/* ── NAV DROPDOWNS ── */
.nav-item { position:relative; }
.nav-item.has-dropdown { padding:22px 0; margin:-22px 0; } /* hover buffer so menu stays open when moving pointer */
.nav-dropdown {
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:230px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px;
  box-shadow:0 12px 40px rgba(12,24,40,.18), 0 4px 14px rgba(12,24,40,.10);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  z-index:1001;
}
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}
/* Arrow pointer at top of dropdown */
.nav-dropdown::before {
  content:'';
  position:absolute;
  top:-6px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px;
  background:#ffffff;
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.nav-dropdown a {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  font-family:var(--display); font-size:.82rem; font-weight:500;
  color:var(--text); letter-spacing:.01em;
  border-radius:6px;
  transition:background .15s, color .15s;
  white-space:nowrap;
}
.nav-dropdown a:hover {
  background:var(--accentlo);
  color:var(--accent);
}
.nav-dropdown .nav-dd-head {
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  color:var(--accent); letter-spacing:.1em; text-transform:uppercase;
  padding:10px 14px 12px;
  border-bottom:1px solid var(--border);
  border-radius:6px 6px 0 0;
  margin-bottom:6px;
  justify-content:space-between;
}
.nav-dropdown .nav-dd-head:hover {
  background:var(--accent); color:#fff;
}
.nav-dd-arrow {
  font-size:.85rem;
  transition:transform .2s;
}
.nav-dropdown .nav-dd-head:hover .nav-dd-arrow { transform:translateX(3px); }

/* Wide Products dropdown — 2 columns of 11 */
.nav-dropdown-wide {
  min-width:520px;
  left:auto;
  right:0;
  transform:translateY(-6px);
}
.nav-item:hover > .nav-dropdown-wide,
.nav-item:focus-within > .nav-dropdown-wide {
  transform:translateY(0);
}
.nav-dropdown-wide::before {
  left:auto; right:48px;
  transform:rotate(45deg);
}
.nav-dd-cols {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
}
.nav-dd-cols a {
  padding:9px 12px;
  font-size:.78rem;
}
.nav-dd-num {
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  color:var(--muted); letter-spacing:.08em;
  min-width:20px;
  transition:color .15s;
}
.nav-dd-cols a:hover .nav-dd-num { color:var(--accent); }

/* Stronger floating shadow when scrolled */
nav.scrolled {
  background:rgba(255,255,255,.98);
  box-shadow:0 6px 28px rgba(12,24,40,.13), 0 2px 6px rgba(12,24,40,.08);
  border-bottom-color:rgba(12,24,40,.1);
}
.nav-cta {
  background:var(--accent); color:#fff;
  padding:9px 22px; border-radius:var(--radius);
  font-size:.82rem; font-weight:700; font-family:var(--mono);
  text-decoration:none; letter-spacing:.06em; text-transform:none;
  transition:background .2s, transform .1s, box-shadow .2s;
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}
.nav-cta:hover { background:var(--accent2); transform:translateY(-1px); box-shadow:0 4px 16px rgba(37,99,235,.35); }
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hamburger span {
  display:block; width:24px; height:2px;
  background:var(--navy); border-radius:1px;
  transition:all .3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display:none;
  position:fixed; top:68px; left:0; right:0; bottom:0; z-index:999;
  background:rgba(255,255,255,.98);
  padding:28px 28px 60px;
  flex-direction:column; gap:4px;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  border-top:2px solid var(--accent);
  overflow-y:auto;
}
.mobile-menu.open { transform:translateX(0); }
.mob-group {
  border-bottom:1px solid var(--border);
  display:flex; flex-direction:column;
}
.mob-toggle {
  font-family:var(--display);
  font-size:1.6rem; font-weight:700;
  letter-spacing:.02em;
  color:var(--navy);
  background:none; border:none;
  padding:18px 4px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; width:100%;
  text-align:left;
  transition:color .2s;
}
.mob-toggle:hover { color:var(--accent); }
.mob-chev {
  font-size:.9rem;
  color:var(--muted);
  transition:transform .25s, color .2s;
}
.mob-group.open .mob-chev { transform:rotate(-180deg); color:var(--accent); }
.mob-sub {
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  display:flex; flex-direction:column; gap:2px;
  padding-left:12px;
}
.mob-group.open .mob-sub {
  max-height:800px;
  padding-bottom:14px;
}
.mob-sub a {
  font-family:var(--display);
  font-size:1rem; font-weight:500;
  color:var(--body); text-decoration:none;
  padding:9px 8px;
  border-bottom:none;
  border-radius:6px;
  transition:background .15s, color .15s;
}
.mob-sub a:hover { background:var(--accentlo); color:var(--accent); }

.mobile-menu > .mob-cta {
  margin-top:20px;
  background:var(--accent); color:#fff;
  text-align:center; border:none;
  padding:16px; border-radius:8px;
  font-size:1rem; font-weight:700;
  font-family:var(--mono); letter-spacing:.06em;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(37,99,235,.3);
}
.mobile-menu > .mob-cta:hover { background:var(--accent2); }

/* ── HERO ── */
#hero {
  min-height:100vh;
  display:grid;
  grid-template-rows:1fr auto;
  padding-top:68px;
  position:relative;
  overflow:hidden;
}
/* Conquistador crest — editorial off-canvas bleed, vertically centered,
   dissolves into the dark via a left-to-right fade mask. Sits behind hero text. */
@keyframes crestDriftIn {
  from { opacity:0; transform:translate(-20px,-50%); }
  to   { opacity:var(--crest-op); transform:translate(0,-50%); }
}
.hero-crest {
  --crest-op:.42;
  position:absolute;
  top:50%; right:-300px;        /* ~44% bleeds off the right edge (clipped by #hero overflow:hidden) */
  transform:translate(0,-50%);
  width:680px;
  height:auto;
  z-index:0;                    /* above .hero-bg, below .wrap (text/stats/scroll) z-index:1 */
  opacity:var(--crest-op);
  pointer-events:none;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.55));
  /* Soft horizontal fade: full on the left, dissolving to nothing toward the off-screen right */
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 30%, transparent 78%);
          mask-image:linear-gradient(to right, #000 0%, #000 30%, transparent 78%);
  animation:crestDriftIn 1.2s cubic-bezier(.2,.6,.2,1) .15s both;
}
@media (max-width:1100px) {
  .hero-crest { width:560px; right:-260px; --crest-op:.4; }
}
@media (max-width:900px) {
  .hero-crest { width:450px; right:-210px; --crest-op:.38; }
}
@media (max-width:560px) {
  .hero-crest { width:280px; right:-140px; --crest-op:.32; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-crest { animation:none; }
}

.hero-bg {
  position:absolute; inset:0;
  background: var(--dark-bg) url('robert-crane-hawaii.jpg') center 55% / cover no-repeat;
}
/* Dark overlay so text stays readable — lighter now */
.hero-bg::before {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(45,63,85,.85) 0%, rgba(45,63,85,.60) 55%, rgba(45,63,85,.35) 100%),
    linear-gradient(to bottom, rgba(45,63,85,.2) 0%, transparent 30%, transparent 70%, rgba(45,63,85,.45) 100%);
}
/* Diagonal accent line */
.hero-bg::after {
  content:'';
  position:absolute;
  top:0; right:15%;
  width:1px; height:100%;
  background:linear-gradient(to bottom, transparent, rgba(77,143,214,.4) 20%, rgba(77,143,214,.4) 80%, transparent);
}
.hero-inner {
  display:grid;
  grid-template-columns:1fr 420px;
  gap:60px;
  align-items:center;
  padding:80px 0 60px;
  position:relative; z-index:1;
}
.hero-logo {
  display:block;
  width: min(520px, 90%);
  height: auto;
  object-fit:contain;
  margin-bottom:36px;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.7));
}
.hero-eyebrow {
  font-family:var(--mono);
  font-size:.7rem;
  color:#60a5fa;
  letter-spacing:.16em;
  text-transform:none;
  margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
}
.hero-eyebrow::before {
  content:''; display:block;
  width:32px; height:1px; background:#60a5fa;
}
h1.hero-title {
  font-family:var(--display);
  font-size:clamp(3.2rem, 6.4vw, 5.4rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.01em;
  word-spacing:.08em;
  text-transform:none;
  color:#ffffff;
  margin-bottom:32px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.hero-title .ht-line {
  display:block;
  color:#ffffff;
}
.hero-title .ht-accent {
  color:#60a5fa;
  font-weight:700;
  font-style:italic;
  letter-spacing:-.02em;
}
/* Legacy em fallback */
h1.hero-title em {
  font-style:italic;
  color:#60a5fa;
  display:block;
  font-weight:700;
}
.hero-body {
  font-size:.95rem;
  color:rgba(255,255,255,.72);
  line-height:1.9;
  max-width:480px;
  margin-bottom:36px;
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary {
  background:var(--accent); color:#fff;
  padding:13px 28px; border-radius:var(--radius);
  font-size:.8rem; font-weight:700; font-family:var(--mono);
  text-decoration:none; letter-spacing:.08em; text-transform:none;
  transition:all .2s; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 2px 10px rgba(37,99,235,.3);
}
.btn-primary:hover { background:var(--accent2); transform:translateY(-2px); box-shadow:0 4px 18px rgba(37,99,235,.4); }
.btn-secondary {
  background:rgba(255,255,255,.12); color:#fff;
  padding:13px 28px; border-radius:var(--radius);
  font-size:.8rem; font-weight:500; font-family:var(--mono);
  text-decoration:none; letter-spacing:.08em; text-transform:none;
  transition:all .2s; border:1px solid rgba(255,255,255,.3);
  display:inline-flex; align-items:center; gap:8px;
  backdrop-filter:blur(4px);
}
.btn-secondary:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.6); }

/* Hero stats panel — stays dark because it's inside the dark hero photo */
.hero-stats {
  background:rgba(12,24,40,.75);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 40px rgba(0,0,0,.4);
}
.hero-stats::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:3px; background:linear-gradient(90deg,var(--accent),#60a5fa);
}
.hstat-header {
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--mono);
  font-size:.6rem;
  color:rgba(255,255,255,.5);
  letter-spacing:.12em;
  text-transform:none;
  display:flex; align-items:center; gap:8px;
}
.hstat-header::before {
  content:'';
  width:6px; height:6px;
  background:#4ade80;
  border-radius:50%;
  animation:pulse 2s infinite; box-shadow:0 0 6px #4ade80;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.hstat-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(255,255,255,.08);
}
.hstat {
  padding:24px 20px;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hstat:nth-child(2n) { border-right:none; }
.hstat:nth-last-child(-n+2) { border-bottom:none; }
.hstat-val {
  font-family:var(--display);
  font-size:2.4rem;
  color:#fff;
  line-height:1;
  margin-bottom:4px;
}
.hstat-val span { color:#60a5fa; }
.hstat-lbl {
  font-family:var(--mono);
  font-size:.62rem;
  color:rgba(255,255,255,.45);
  letter-spacing:.08em;
  text-transform:none;
  line-height:1.4;
}
.hero-badge {
  padding:16px 20px;
  display:flex; align-items:center; gap:12px;
  border-top:1px solid rgba(255,255,255,.1);
}
.badge-icon {
  width:32px; height:32px; min-width:32px;
  background:rgba(37,99,235,.3);
  border:1px solid rgba(96,165,250,.3);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
}
.badge-text { font-size:.72rem; color:rgba(255,255,255,.5); line-height:1.5; }
.badge-text strong { color:#fff; font-weight:600; display:block; }

.hero-scroll {
  grid-column:1/-1;
  padding:24px 0;
  display:flex; align-items:center; gap:20px;
  border-top:1px solid rgba(255,255,255,.1);
  position:relative; z-index:1;
}
.scroll-line { flex:1; height:1px; background:rgba(255,255,255,.15); }
.scroll-label {
  font-family:var(--mono);
  font-size:.6rem; color:rgba(255,255,255,.4);
  letter-spacing:.1em; text-transform:none;
  display:flex; align-items:center; gap:8px;
}
.scroll-label::after { content:'↓'; animation:bounce 2s infinite; }
@keyframes bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(4px); } }


/* ── ABOUT ── */
#about {
  border-top:1px solid var(--border);
  background:
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.84)),
    url('robert-building-mountains.jpg') center/cover no-repeat;
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
  text-align:left;
}
.about-year {
  font-family:var(--display);
  font-size:clamp(6rem, 12vw, 10rem);
  line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px var(--border);
  letter-spacing:.02em;
  margin-bottom:-10px;
}
.about-quote {
  font-family:var(--display);
  font-size:clamp(1.4rem, 2.5vw, 2rem);
  font-weight:700;
  color:var(--navy);
  letter-spacing:.01em;
  line-height:1.2;
  margin-bottom:24px;
  position:relative;
  padding-left:20px;
}
.about-quote::before {
  content:'';
  position:absolute; left:0; top:4px; bottom:4px;
  width:3px; background:var(--accent);
}
.about-body { font-size:.9rem; color:var(--dim); line-height:1.9; margin-bottom:16px; text-align:left; }

/* About identity panel — right column */
.about-identity {
  display:flex; flex-direction:column; gap:0;
  position:sticky; top:88px;
}
.aident-top {
  background:var(--navy);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:28px 28px 24px;
  border-bottom:3px solid var(--accent);
}
.aident-label {
  font-family:var(--mono); font-size:.6rem; color:rgba(255,255,255,.45);
  letter-spacing:.12em; text-transform:none; margin-bottom:6px;
}
.aident-val {
  font-family:var(--display); font-size:1.8rem; color:#fff;
  letter-spacing:.04em; text-transform:none; line-height:1; margin-bottom:4px;
}
.aident-sub { font-family:var(--mono); font-size:.68rem; color:rgba(255,255,255,.45); letter-spacing:.06em; }
.aident-stats {
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--white);
  border:1px solid var(--border); border-top:none;
}
.aident-stat {
  padding:22px 20px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  transition:background .2s;
}
.aident-stat:hover { background:var(--light); }
.aident-stat:nth-child(2n) { border-right:none; }
.aident-stat:nth-last-child(-n+2) { border-bottom:none; }
.aident-num {
  font-family:var(--display); font-size:2.6rem; color:var(--navy);
  line-height:1; margin-bottom:4px;
}
.aident-num span { font-size:1.6rem; color:var(--accent); }
.aident-lbl { font-family:var(--mono); font-size:.6rem; color:var(--muted); letter-spacing:.08em; text-transform:none; line-height:1.4; }
.aident-badges {
  border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.aident-badge {
  display:flex; align-items:center; gap:14px; padding:16px 20px;
  background:var(--white); border-bottom:1px solid var(--border);
  transition:background .2s;
}
.aident-badge:last-child { border-bottom:none; }
.aident-badge:hover { background:var(--accentlo); }
.aident-badge-icon { font-size:1.4rem; flex-shrink:0; }
.aident-badge-title { font-size:.8rem; font-weight:600; color:var(--text); margin-bottom:2px; }
.aident-badge-sub { font-family:var(--mono); font-size:.6rem; color:var(--muted); letter-spacing:.04em; }

.cert-strip {
  margin-top:36px;
  display:flex; flex-direction:column; gap:10px;
}
.cert-item {
  display:flex; align-items:center; gap:14px;
  padding:12px 16px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:box-shadow .2s, transform .2s;
}
.cert-item:hover { box-shadow:var(--shadow-md); transform:translateX(3px); }
.cert-dot {
  width:8px; height:8px; min-width:8px;
  background:var(--accent); border-radius:50%;
}
.cert-text { font-size:.78rem; color:var(--text); font-weight:500; }
.cert-sub { font-family:var(--mono); font-size:.62rem; color:var(--muted); letter-spacing:.04em; }

/* Team grid */

/* ── PRODUCTS ── */
#products {
  background:
    linear-gradient(rgba(45,63,85,.78), rgba(45,63,85,.84)),
    url('wayne-relay-lineup.jpg') center/cover no-repeat;
}
#products .section-title { color:#fff; }
#products .section-desc { color:rgba(255,255,255,.7); }
#products .tag { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); }
.products-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  background:transparent;
}
.product-card {
  position:relative;
  overflow:hidden;
  border-radius:8px;
  min-height:340px;
  display:flex;
  flex-direction:column;
  background:#2d3f55 center/cover no-repeat;
  transition:box-shadow .3s, transform .3s, border-color .3s;
  cursor:pointer;
  border:1px solid var(--ivory-border);
  box-shadow:var(--ivory-shadow-sm);
  text-align:left;
  isolation:isolate; /* contain pseudo-elements */
}
.product-card-overlay { display:none; }
/* Dark gradient overlay — heading area top + ovals area bottom, mid stays clear so the photo reads through */
.product-card::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(12,24,40,.72) 0%,
    rgba(12,24,40,.55) 22%,
    rgba(12,24,40,.20) 45%,
    rgba(12,24,40,.20) 55%,
    rgba(12,24,40,.55) 78%,
    rgba(12,24,40,.92) 100%
  );
  z-index:0;
  transition:background .3s;
}
.product-card:hover { box-shadow:var(--ivory-shadow); transform:translateY(-4px); border-color:var(--accent); }
.product-card:hover::before {
  background:linear-gradient(
    to bottom,
    rgba(12,24,40,.78) 0%,
    rgba(12,24,40,.62) 22%,
    rgba(12,24,40,.30) 45%,
    rgba(12,24,40,.30) 55%,
    rgba(12,24,40,.62) 78%,
    rgba(12,24,40,.95) 100%
  );
}
.product-card::after {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), #60a5fa);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s;
  z-index:2;
}
.product-card:hover::after { transform:scaleX(1); }
.product-card-content {
  position:relative; z-index:1;
  padding:26px 22px 24px;
  display:flex;
  flex-direction:column;
  flex:1;  /* stretch to fill card */
}
.product-num {
  font-family:var(--mono);
  font-size:.62rem; color:#60a5fa;
  letter-spacing:.1em; text-transform:none;
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
  font-weight:700;
}
.product-num::before {
  content:''; width:20px;
  height:1px; background:#60a5fa; opacity:.6;
}
.product-card h3 {
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.01em;
  line-height:1.2;
  margin-bottom:10px;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.product-card p {
  font-size:.8rem;
  color:rgba(255,255,255,.88);
  line-height:1.7;
  margin-bottom:14px;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  flex:1;  /* push the oval tags to the bottom */
}
.product-tags { display:flex; flex-wrap:wrap; gap:5px; }
.ptag {
  font-family:var(--mono);
  font-size:.56rem;
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  padding:3px 9px;
  border-radius:20px;
  letter-spacing:.06em;
  text-transform:none;
  font-weight:500;
}

/* ── PER-PRODUCT BACKGROUND IMAGES ── */
.product-card.pc-substation { background-image:url('jqmc_factory_module_exterior.jpg'); }
.product-card.pc-switchgear  { background-image:url('switchgear-exterior-onsite.jpg'); }
.product-card.pc-tpss        { background-image:url('tpss-brick-transport.jpg'); }
.product-card.pc-mcc         { background-image:url('mcc-building-elevated.jpg'); }
.product-card.pc-faa         { background-image:url('faa-shelter-airfield.jpg'); }
.product-card.pc-comm        { background-image:url('stock-06-comm.jpg'); }
.product-card.pc-solar       { background-image:url('stock-07-solar.jpg'); }
.product-card.pc-datacenter  { background-image:url('jqmc_bess_corridor.jpg'); }
.product-card.pc-oilgas      { background-image:url('oilgas-onshore.jpg'); }
.product-card.pc-microgrid   { background-image:url('radian-interior-wide.jpg'); }
.product-card.pc-transit     { background-image:url('stock-11-transit.jpg'); }

/* ── PRODUCT DETAIL SECTIONS ── */
.product-card-link {
  text-decoration:none; color:inherit; display:block; cursor:pointer;
}
.product-card-link .product-card { cursor:pointer; }

.product-detail {
  padding:80px 0;
  border-top:1px solid var(--border);
}
.product-detail:nth-child(odd)  { background:var(--white); }
.product-detail:nth-child(even) { background:var(--bg); }

.product-detail-inner {
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:flex-start;
  gap:48px;
}
.product-detail:nth-child(even) .product-detail-inner {
  flex-direction:row-reverse;
}

.product-detail-img {
  flex:0 0 48%;
  display:flex;
  flex-direction:column;
}
.product-detail-img img {
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
/* Gallery now lives in the image column — tighten its top spacing and drop the divider line */
.product-detail-img .pgallery {
  margin:24px 0 0;
  padding-top:0;
  border-top:none;
}
.product-detail-img .pgallery-grid {
  grid-template-columns:repeat(2, 1fr);
}

.product-detail-content {
  flex:1;
  text-align:left;
}
.product-detail-content .tag {
  font-family:var(--mono);
  font-size:.6rem;
  color:var(--accent);
  letter-spacing:.12em;
  text-transform:none;
  margin-bottom:12px;
}
.product-detail-content h3 {
  font-family:var(--display);
  font-size:2rem;
  font-weight:700;
  color:var(--navy);
  letter-spacing:.01em;
  line-height:1.15;
  margin-bottom:20px;
}
.product-detail-content p {
  font-size:.88rem;
  color:var(--body);
  line-height:1.8;
  margin-bottom:16px;
}

.specs-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:24px 0;
}
.spec-item {
  background:var(--panel);
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
}
.spec-item .spec-label {
  font-family:var(--mono);
  font-size:.55rem;
  color:var(--muted);
  letter-spacing:.1em;
  text-transform:none;
  margin-bottom:4px;
}
.spec-item .spec-value {
  font-family:var(--body-font);
  font-size:.82rem;
  color:var(--navy);
  font-weight:600;
}

.product-detail .product-tags {
  display:flex; flex-wrap:wrap; gap:5px;
  margin-bottom:24px;
}
.product-detail .ptag {
  color:var(--accent);
  border:1px solid var(--accentborder);
  background:var(--accentlo);
  backdrop-filter:none;
  border-radius:var(--radius);
}

@media (max-width:768px) {
  .product-detail-inner {
    flex-direction:column !important;
    gap:32px;
  }
  .product-detail-img {
    flex:none;
    width:100%;
  }
  .product-detail-img img {
    height:280px;
  }
  .specs-grid {
    grid-template-columns:1fr;
  }
}

/* ── FEATURED PROJECTS ── */
#projects {
  border-top:1px solid var(--border);
  background:
    linear-gradient(rgba(45,63,85,.72), rgba(45,63,85,.80)),
    url('robert-crane-lift-bluesky.jpg') center/cover no-repeat;
}
#projects .section-title { color:#fff; }
#projects .section-desc { color:rgba(255,255,255,.7); }
#projects .tag { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); }
.projects-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  background:transparent;
}
.project-card {
  background:var(--ivory);
  padding:36px 32px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--ivory-border);
  border-radius:8px;
  box-shadow:var(--ivory-shadow-sm);
  transition:box-shadow .25s, transform .25s, border-color .25s;
}
.project-card:hover { box-shadow:var(--ivory-shadow); transform:translateY(-3px); border-color:var(--accent); }
.project-card::before {
  content:'';
  position:absolute; top:0; left:0;
  width:100%; height:3px;
}
.project-card.amber::before { background:linear-gradient(90deg, var(--accent), #60a5fa); }
.project-card.blue::before { background:linear-gradient(90deg, #1d4ed8, var(--accent)); }
.project-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; min-height:88px; }
.project-client {
  font-family:var(--mono);
  font-size:.82rem; color:var(--accent);
  letter-spacing:.08em; text-transform:none;
  margin-bottom:8px;
  font-weight:700;
}
.project-card h3 {
  font-family:var(--display);
  font-size:1.75rem; color:var(--navy);
  letter-spacing:.03em; text-transform:none;
  line-height:1.15;
  font-weight:700;
}
.project-job {
  font-family:var(--mono);
  font-size:.62rem; color:var(--ivory-dim);
  letter-spacing:.06em;
  background:rgba(12,24,40,.05);
  border:1px solid var(--ivory-border);
  padding:4px 10px;
  border-radius:var(--radius);
}
.project-specs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--ivory-border);
  border:1px solid var(--ivory-border);
  border-radius:var(--radius);
  overflow:hidden;
  margin:20px 0;
}
.pspec {
  background:#fbf8f2;
  padding:12px 14px;
}
.pspec-val {
  font-family:var(--display);
  font-size:1.4rem;
  color:var(--navy);
  line-height:1;
  margin-bottom:3px;
  font-weight:700;
}
.pspec-lbl {
  font-family:var(--mono);
  font-size:.62rem; color:var(--ivory-dim);
  letter-spacing:.07em; text-transform:none;
}
.project-desc { font-size:.9rem; color:var(--body); line-height:1.75; margin-bottom:16px; }
.project-codes {
  display:flex; flex-wrap:wrap; gap:5px;
}
.pcode {
  font-family:var(--mono);
  font-size:.66rem;
  color:var(--ivory-dim);
  border:1px solid var(--ivory-border);
  background:rgba(12,24,40,.04);
  padding:4px 11px;
  border-radius:20px;
  letter-spacing:.05em;
  font-weight:500;
}
.pcode.highlight {
  color:var(--accent);
  border-color:var(--accentborder);
  background:var(--accentlo);
}

/* ── CAPABILITIES ── */
#capabilities {
  background:
    linear-gradient(rgba(45,63,85,.78), rgba(45,63,85,.84)),
    url('robert-building-piers.jpg') center/cover no-repeat;
}
#capabilities .section-title { color:#fff; }
#capabilities .section-desc { color:rgba(255,255,255,.7); }
#capabilities .tag { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); }
.cap-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  background:transparent;
}
.cap-item {
  background:#fff;
  padding:28px 26px;
  display:flex; gap:20px;
  transition:box-shadow .25s, transform .25s, border-color .25s;
  border:1px solid var(--ivory-border);
  border-radius:8px;
  box-shadow:var(--ivory-shadow-sm);
  position:relative;
  overflow:hidden;
}
.cap-item::before {
  content:'';
  position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--accent), #60a5fa);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.cap-item:hover { box-shadow:var(--ivory-shadow); transform:translateY(-3px); border-color:var(--accent); }
.cap-item:hover::before { transform:scaleX(1); }
.cap-num {
  font-family:var(--display);
  font-size:2.2rem;
  color:rgba(12,24,40,.12);
  line-height:1;
  min-width:44px;
  transition:color .2s;
  font-weight:800;
}
.cap-item:hover .cap-num { color:var(--accent); }
.cap-item h3 {
  font-family:var(--display);
  font-size:1.05rem;
  color:var(--navy);
  letter-spacing:.04em;
  text-transform:none;
  margin-bottom:8px;
  font-weight:700;
}
.cap-item p { font-size:.82rem; color:var(--body); line-height:1.75; }

/* ── ROI ── */
#roi {
  border-top:1px solid var(--border);
  background:
    linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.94)),
    url('gallery-steel-skid.jpg') center/cover no-repeat;
}
.roi-intro { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:48px; }
.roi-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.roi-kpi { background:var(--white); padding:24px 20px; text-align:center; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.roi-kpi-val { font-family:var(--display); font-size:2.8rem; color:var(--accent); line-height:1; margin-bottom:6px; }
.roi-kpi-lbl { font-family:var(--mono); font-size:.62rem; color:var(--muted); letter-spacing:.08em; text-transform:none; }

.roi-table { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.roi-head { display:grid; grid-template-columns:2fr 1.1fr 1.1fr; }
.roi-h { padding:14px 20px; font-family:var(--mono); font-size:.65rem; font-weight:500; letter-spacing:.1em; text-transform:none; }
.roi-h:first-child { background:var(--light); color:var(--muted); border-bottom:1px solid var(--border); }
.roi-h:nth-child(2) { background:var(--accent); color:#fff; text-align:center; }
.roi-h:nth-child(3) { background:var(--light); color:var(--muted); text-align:center; border-bottom:1px solid var(--border); }
.roi-row { display:grid; grid-template-columns:2fr 1.1fr 1.1fr; border-bottom:1px solid var(--border); }
.roi-row:last-child { border-bottom:none; }
.roi-cell { padding:12px 20px; font-size:.83rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.roi-cell:first-child { background:var(--white); color:var(--text); }
.roi-cell:nth-child(2) { background:var(--accentlo); color:var(--navy); font-weight:600; justify-content:center; flex-direction:column; gap:3px; font-size:.78rem; }
.roi-cell:nth-child(3) { background:var(--light); color:var(--dim); justify-content:center; font-size:.78rem; }
.roi-badge { font-size:.58rem; font-weight:700; background:var(--accentlo); color:var(--accent); padding:2px 6px; border-radius:var(--radius); letter-spacing:.06em; border:1px solid var(--accentborder); }

/* ── STANDARDS ── */
.standards-strip { display:flex; flex-wrap:wrap; gap:6px; margin-top:40px; }
.std-chip {
  font-family:var(--mono);
  font-size:.65rem; color:var(--dim);
  border:1px solid var(--border); background:var(--white);
  padding:5px 12px; border-radius:var(--radius);
  letter-spacing:.06em; text-transform:none;
  transition:all .2s; cursor:default; box-shadow:var(--shadow);
}
.std-chip:hover { border-color:var(--accent); color:var(--accent); background:var(--accentlo); }

/* ── MISSION / VISION / VALUES ── */
.mvv-section { margin-top:56px; }
.mvv-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mvv-card {
  background:#fff; padding:32px 36px;
  border:1px solid var(--ivory-border); border-radius:8px;
  box-shadow:var(--ivory-shadow-sm); transition:box-shadow .2s, transform .2s, border-color .2s;
  text-align:left;
}
.mvv-card:hover { box-shadow:var(--ivory-shadow); transform:translateY(-2px); border-color:var(--accent); }
.mvv-card:nth-last-child(1) { grid-column:span 2; }
.mvv-card-values { grid-column:span 2; }
.mvv-label { font-family:var(--mono); font-size:.62rem; color:var(--accent); letter-spacing:.1em; text-transform:none; margin-bottom:10px; font-weight:600; }
.mvv-card h3 { font-family:var(--display); font-size:1.5rem; font-weight:700; color:var(--navy); letter-spacing:.01em; line-height:1.2; margin-bottom:14px; }
.mvv-card p { font-size:.87rem; color:var(--body); line-height:1.9; }
.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
.val-item { background:var(--ivory-2); border:1px solid var(--ivory-border); border-radius:6px; padding:16px 20px; transition:border-color .2s, background .2s; }
.val-item:hover { border-color:var(--accent); background:#fff; }
.val-name { font-family:var(--display); font-size:1.15rem; color:var(--accent); letter-spacing:.02em; text-transform:none; margin-bottom:10px; font-weight:700; }
.val-body { font-size:.88rem; color:var(--body); line-height:1.75; }

/* ── FOCUS FOR 2026 ── */
#focus2026 {
  border-top:none;
  background:
    linear-gradient(rgba(45,63,85,.82), rgba(45,63,85,.82)),
    url('robert-crane-offload-field.jpg') center/cover no-repeat;
}
#focus2026 .tag { color:#60a5fa; border-color:rgba(96,165,250,.3); background:rgba(96,165,250,.08); }
#focus2026 .tag::before { background:#60a5fa; }
#focus2026 .section-title { color:#fff; }
#focus2026 .section-desc { color:rgba(255,255,255,.55); }
.f26-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:40px; }
.f26-card {
  background:#fff; border:1px solid var(--ivory-border);
  border-radius:var(--radius); padding:32px 30px; position:relative; overflow:hidden;
  transition:background .2s, border-color .2s, transform .25s, box-shadow .25s;
  box-shadow:var(--ivory-shadow-sm);
  text-align:left;
}
.f26-card:hover { background:var(--ivory-2); border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--ivory-shadow); }
.f26-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#60a5fa,#2563eb); }
.f26-num { font-family:var(--display); font-size:3rem; color:rgba(12,24,40,.12); line-height:1; margin-bottom:12px; font-weight:700; }
.f26-card h3 { font-family:var(--display); font-size:1.4rem; font-weight:700; color:var(--navy); letter-spacing:.01em; line-height:1.2; margin-bottom:14px; }
.f26-card p { font-size:.85rem; color:var(--body); line-height:1.9; }

/* ── THANK YOU BANNER ── */
.thankyou-band {
  background:linear-gradient(135deg, #f0f4ff 0%, #e8f0fc 50%, #f5f7fb 100%);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:72px 0; text-align:center; position:relative; overflow:hidden;
}
.thankyou-band::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%, rgba(37,99,235,.06) 0%, transparent 70%);
  pointer-events:none;
}
.thankyou-band .tag { justify-content:center; display:inline-flex; margin-bottom:20px; }
.thankyou-band h2 { font-family:var(--display); font-size:clamp(2rem,5vw,3.5rem); color:var(--navy); letter-spacing:.04em; text-transform:uppercase; line-height:1; margin-bottom:20px; }
.thankyou-band p { font-size:.95rem; color:var(--dim); line-height:1.9; max-width:640px; margin:0 auto 28px; }
.thankyou-stars { font-size:1.5rem; letter-spacing:8px; margin-bottom:12px; color:var(--accent); opacity:.7; }

/* ── SOCIAL PROOF BAND ── */
.proof-band {
  background:var(--dark-bg);
  position:relative; overflow:hidden;
}
.proof-band::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(37,99,235,.12) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent, transparent 63px, rgba(37,99,235,.06) 63px, rgba(37,99,235,.06) 64px),
    repeating-linear-gradient(90deg, transparent, transparent 63px, rgba(37,99,235,.06) 63px, rgba(37,99,235,.06) 64px);
  background-size: 64px 64px, 64px 64px, 64px 64px;
  opacity:.4; pointer-events:none;
}
.proof-band::after {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 30%, rgba(37,99,235,.15) 0%, transparent 60%);
  pointer-events:none;
}
.proof-band .wrap { position:relative; z-index:1; }
.proof-stat { text-align:center; }
.proof-num {
  font-family:var(--display);
  font-size:clamp(2.4rem,5vw,3.6rem);
  color:#fff;
  letter-spacing:.04em;
  line-height:1;
  margin-bottom:8px;
}
.proof-num span { color:var(--accent); }
.proof-lbl {
  font-family:var(--mono);
  font-size:.68rem;
  color:rgba(255,255,255,.5);
  letter-spacing:.08em;
  text-transform:none;
  line-height:1.5;
}
.proof-quote {
  background:#fff;
  border:1px solid var(--ivory-border);
  border-radius:var(--radius);
  padding:28px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .2s, background .2s, transform .25s, box-shadow .25s;
  box-shadow:var(--ivory-shadow-sm);
}
.proof-quote:hover {
  border-color:var(--accent);
  background:var(--ivory-2);
  transform:translateY(-2px);
  box-shadow:var(--ivory-shadow);
}
.proof-quote-text {
  font-size:.88rem;
  color:var(--body);
  line-height:1.8;
  font-style:italic;
  margin-bottom:20px;
  text-align:left;
}
.proof-quote-attr { border-top:1px solid var(--ivory-border); padding-top:14px; }
.proof-quote-role {
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--accent);
  letter-spacing:.06em;
  text-transform:none;
  font-weight:600;
}
.proof-quote-co {
  font-size:.75rem;
  color:var(--ivory-dim);
  margin-top:2px;
}
.proof-tag {
  font-family:var(--mono);
  font-size:.65rem;
  color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  padding:6px 14px;
  border-radius:var(--radius);
  letter-spacing:.07em;
  text-transform:none;
  transition:border-color .2s, color .2s;
}
.proof-tag:hover {
  border-color:rgba(37,99,235,.4);
  color:rgba(255,255,255,.7);
}
@media (max-width:768px) {
  .proof-band .wrap > div[style*="grid-template-columns:repeat(4"] { grid-template-columns:repeat(2,1fr) !important; }
  .proof-band .wrap > div[style*="grid-template-columns:repeat(3"] { grid-template-columns:1fr !important; }
}
/* ── PROCESS + PRODUCT STRIP RESPONSIVE ── */
@media (max-width:900px) {
  section div[style*="grid-template-columns:repeat(5"] { grid-template-columns:repeat(3,1fr) !important; }
  section div[style*="grid-template-columns:repeat(4,1fr);gap:12px"] { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:560px) {
  section div[style*="grid-template-columns:repeat(5"] { grid-template-columns:repeat(2,1fr) !important; }
  section div[style*="grid-template-columns:repeat(4,1fr);gap:12px"] { grid-template-columns:1fr !important; }
}

/* ── PROCESS BAND — LIGHT VARIANT (home page How We Work) ── */
.process-step-light {
  position:relative;
  padding:0 8px;
  text-align:center;
}
.process-num-light {
  width:64px; height:64px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
  font-family:var(--display); font-weight:800; font-size:1.4rem;
  box-shadow:0 6px 20px rgba(12,24,40,.18);
  position:relative;
  transition:transform .25s, box-shadow .25s, background .25s;
}
/* Light-to-dark progression across the 5 process steps */
.process-grid--light .process-step-light:nth-child(1) .process-num-light { background:#94a3b8; }
.process-grid--light .process-step-light:nth-child(2) .process-num-light { background:#64748b; }
.process-grid--light .process-step-light:nth-child(3) .process-num-light { background:#475569; }
.process-grid--light .process-step-light:nth-child(4) .process-num-light { background:#1e293b; }
.process-grid--light .process-step-light:nth-child(5) .process-num-light { background:var(--accent); }
.process-step-light:hover .process-num-light {
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 28px rgba(12,24,40,.28);
}
.process-step-light.highlight .process-num-light {
  background:var(--accent);
  box-shadow:0 8px 24px rgba(37,99,235,.45);
}
.process-step-light.highlight:hover .process-num-light {
  background:var(--accent);
  box-shadow:0 12px 32px rgba(37,99,235,.55);
}
/* Connector line between steps on wide screens */
.process-grid--light .process-step-light:not(:last-child) .process-num-light::after {
  content:'';
  position:absolute;
  top:50%; left:calc(100% + 10px);
  width:calc(100% - 44px);
  height:2px;
  background:linear-gradient(90deg, rgba(12,24,40,.15), rgba(12,24,40,.05));
  transform:translateY(-50%);
  pointer-events:none;
}
.process-step-light h3 {
  font-family:var(--display); font-size:1rem; font-weight:700;
  color:var(--navy);
  margin-bottom:10px;
  letter-spacing:.01em;
}
.process-step-light p {
  font-size:.8rem; color:var(--dim); line-height:1.7;
}
@media (max-width:900px) {
  .process-grid--light { grid-template-columns:repeat(3,1fr) !important; gap:40px 20px !important; }
  .process-grid--light .process-step-light:not(:last-child) .process-num-light::after { display:none; }
}
@media (max-width:560px) {
  .process-grid--light { grid-template-columns:repeat(2,1fr) !important; }
}

/* ── PROCESS BAND TAGLINE — "One Team · Start to Finish" callout ── */
.process-tagline {
  font-family:var(--display);
  font-size:clamp(1rem, 2vw, 1.35rem);
  font-weight:700;
  color:var(--accent);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:8px 0 22px;
  text-align:center;
}

/* ── PROCESS BAND — LIGHT VARIANT BLUEPRINT BACKDROP ── */
.process-band--light::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:url('process-blueprint.jpg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.22;
  pointer-events:none;
  z-index:0;
}
@media (max-width:640px) {
  .process-band--light::before { opacity:.14; }
}
.process-band--light > .wrap { position:relative; z-index:1; }

/* ── PROCESS BAND — DARK VARIANT (legacy, unused for now but kept) ── */
.process-band { position:relative; }
.process-step {
  position:relative;
  padding:28px 18px 22px;
  background:#fff;
  border:1px solid var(--ivory-border);
  border-radius:10px;
  box-shadow:var(--ivory-shadow-sm);
  transition:transform .25s, box-shadow .25s, border-color .25s;
  text-align:center;
  overflow:hidden;
}
.process-step::before {
  content:'';
  position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), #60a5fa);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.process-step:hover {
  transform:translateY(-3px);
  box-shadow:var(--ivory-shadow);
  border-color:var(--accent);
}
.process-step:hover::before { transform:scaleX(1); }
.process-step.highlight::before { transform:scaleX(1); }
.process-step.highlight { border-color:var(--accent); }
.process-num {
  width:52px; height:52px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  box-shadow:0 4px 12px rgba(12,24,40,.25);
}
.process-step.highlight .process-num {
  background:var(--accent);
  box-shadow:0 4px 14px rgba(37,99,235,.5);
}
.process-step h3 {
  font-family:var(--display); font-size:1rem; font-weight:700;
  color:var(--navy);
  margin-bottom:8px;
  letter-spacing:.01em;
}
.process-step p {
  font-size:.78rem; color:var(--body); line-height:1.7;
}

/* ── "All in one" feature cards row above the product strip ── */
.prodstrip-features {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0 auto 28px;
  max-width:980px;
}
.prodstrip-feature {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:140px;
  backdrop-filter:blur(4px);
  transition:background .2s, border-color .2s, transform .2s;
}
.prodstrip-feature:hover {
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.30);
  transform:translateY(-2px);
}
.prodstrip-feature-num {
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:700;
  color:var(--sky);
  letter-spacing:.12em;
}
.prodstrip-feature-label {
  font-family:var(--display);
  font-size:.92rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
  text-align:center;
}
@media (max-width:560px) {
  .prodstrip-feature { min-width:0; flex:1 1 calc(50% - 10px); padding:10px 12px; }
  .prodstrip-feature-label { font-size:.82rem; }
}

/* ── "Also Built As" callout chips above the product strip ── */
.prodstrip-aka {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 auto 36px;
  max-width:920px;
}
.prodstrip-aka-label {
  font-family:var(--mono);
  font-size:.65rem;
  font-weight:700;
  color:rgba(255,255,255,.55);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-right:4px;
}
.prodstrip-aka-chip {
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  padding:6px 12px;
  border-radius:18px;
  letter-spacing:.04em;
}

/* ── PRODUCT STRIP CARDS (image-backed with dark overlay) ── */
.prodstrip-grid {
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:14px;
  margin-bottom:36px;
}
@media (max-width:1280px) { .prodstrip-grid { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:900px)  { .prodstrip-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:640px)  { .prodstrip-grid { grid-template-columns:repeat(2, 1fr); gap:12px; } }
@media (max-width:420px)  { .prodstrip-grid { grid-template-columns:1fr; } }

.prodstrip-card {
  display:flex; flex-direction:column; justify-content:flex-end;
  background:#2d3f55 center/cover no-repeat;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:24px 22px;
  text-decoration:none;
  transition:all .25s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  position:relative;
  overflow:hidden;
  min-height:240px;
  isolation:isolate;
}
.prodstrip-card::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(12,24,40,.3) 0%,
    rgba(12,24,40,.65) 55%,
    rgba(12,24,40,.92) 100%
  );
  z-index:0;
  transition:background .3s;
}
.prodstrip-card::before {
  content:'';
  position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), #60a5fa);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
  z-index:2;
}
.prodstrip-card:hover {
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.prodstrip-card:hover::before { transform:scaleX(1); }
.prodstrip-card:hover::after {
  background:linear-gradient(
    to bottom,
    rgba(12,24,40,.2) 0%,
    rgba(12,24,40,.55) 55%,
    rgba(12,24,40,.9) 100%
  );
}
.prodstrip-card > * { position:relative; z-index:1; }
.prodstrip-num {
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  color:var(--sky);
  margin-bottom:10px; letter-spacing:.14em;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.prodstrip-title {
  font-family:var(--display); font-size:1rem; font-weight:700;
  color:#fff; line-height:1.25;
  letter-spacing:.01em;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* Per-product backgrounds — same images as main product cards */
.prodstrip-card.pc-substation { background-image:url('jqmc_factory_module_exterior.jpg'); }
.prodstrip-card.pc-switchgear  { background-image:url('switchgear-exterior-onsite.jpg'); }
.prodstrip-card.pc-tpss        { background-image:url('tpss-brick-transport.jpg'); }
.prodstrip-card.pc-mcc         { background-image:url('mcc-building-elevated.jpg'); }
.prodstrip-card.pc-faa         { background-image:url('faa-shelter-airfield.jpg'); }
.prodstrip-card.pc-comm        { background-image:url('stock-06-comm.jpg'); }
.prodstrip-card.pc-solar       { background-image:url('stock-07-solar.jpg'); }
.prodstrip-card.pc-datacenter  { background-image:url('jqmc_bess_corridor.jpg'); }
.prodstrip-card.pc-oilgas      { background-image:url('oilgas-onshore.jpg'); }
.prodstrip-card.pc-microgrid   { background-image:url('radian-interior-wide.jpg'); }
.prodstrip-card.pc-transit     { background-image:url('stock-11-transit.jpg'); }
.prodstrip-card.pc-trailers    { background-image:url('wayne-nasa-trailer.jpg'); }
.product-card.pc-trailers      { background-image:url('wayne-nasa-trailer.jpg'); }

/* ── SEVEN SYSTEMS GRID ── */
.sys-hero {
  position:relative;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:28px;
  aspect-ratio: 21 / 9;
  border:1px solid rgba(255,255,255,.08);
}
.sys-hero img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .45s ease;
}
.sys-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,24,40,.25) 0%, rgba(12,24,40,.85) 100%);
  pointer-events:none;
}
.sys-hero-caption {
  position:absolute; left:24px; bottom:20px; right:24px;
  display:flex; flex-direction:column; gap:4px;
  color:#fff;
}
.sys-hero-kicker {
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  color:var(--accent); letter-spacing:.18em; text-transform:uppercase;
}
.sys-hero-label {
  font-family:var(--display); font-size:clamp(.95rem, 2vw, 1.15rem); font-weight:600;
  color:rgba(255,255,255,.92);
}
.sys-hint-desktop { display:inline; }
.sys-hint-mobile { display:none; }
@media (max-width:720px) {
  .sys-hint-desktop { display:none; }
  .sys-hint-mobile { display:inline; }
  .sys-hero { aspect-ratio: 16 / 10; }
  .sys-hero-caption { left:16px; right:16px; bottom:14px; }
}

.sys-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-bottom:32px;
}
.sys-grid .sys-card:nth-child(5) { grid-column:1 / span 2; }
.sys-grid .sys-card:nth-child(6) { grid-column:3 / span 2; }
.sys-grid .sys-card:nth-child(7) { grid-column:2 / span 2; }

.sys-card {
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:14px;
  padding:26px 22px 22px;
  background:#fff;
  border:1px solid var(--ivory-border);
  border-radius:14px;
  cursor:pointer;
  transition:all .25s ease;
  color:var(--ivory-text);
  text-align:left;
  overflow:hidden;
  min-height:180px;
  box-shadow:var(--ivory-shadow-sm);
}
.sys-card::before {
  content:'';
  position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--sys-color, var(--accent));
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.sys-card:hover,
.sys-card.active {
  background:#fbf8f2;
  border-color:var(--sys-color, var(--accent));
  transform:translateY(-3px);
  box-shadow:var(--ivory-shadow);
}
.sys-card:hover::before,
.sys-card.active::before { transform:scaleX(1); }
.sys-card:focus-visible {
  outline:none;
  border-color:var(--sys-color, var(--accent));
  box-shadow:0 0 0 3px rgba(37,99,235,.35), var(--ivory-shadow);
}
.sys-card:focus-visible::before { transform:scaleX(1); }
.sys-num {
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  color:var(--sys-color, var(--accent));
  letter-spacing:.18em;
}
.sys-icon {
  width:44px; height:44px;
  color:var(--sys-color, var(--accent));
  display:flex; align-items:center; justify-content:center;
}
.sys-icon svg { width:100%; height:100%; }
.sys-title {
  font-family:var(--display); font-size:1.1rem; font-weight:700;
  color:var(--navy); line-height:1.15;
}
.sys-sub {
  font-family:var(--mono); font-size:.72rem;
  color:var(--ivory-dim);
  letter-spacing:.02em;
  line-height:1.4;
}

.sys-detail {
  background:#fff;
  border:1px solid var(--ivory-border);
  border-left:4px solid var(--sys-color, var(--accent));
  border-radius:14px;
  padding:32px 36px;
  transition:border-color .3s ease;
  box-shadow:var(--ivory-shadow-sm);
}
.sys-detail-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:start;
}
.sys-detail-num {
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  color:var(--sys-color, var(--accent));
  letter-spacing:.18em;
  margin-bottom:8px;
}
.sys-detail-title {
  font-family:var(--display); font-size:1.6rem; font-weight:700;
  color:var(--navy); margin-bottom:12px; line-height:1.2;
}
.sys-detail-body {
  font-size:.95rem; color:var(--body); line-height:1.75;
}
.sys-detail-list {
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr; gap:10px 18px;
}
.sys-detail-list li {
  position:relative;
  padding-left:20px;
  font-size:.85rem; color:var(--ivory-text);
  line-height:1.5;
  font-weight:500;
}
.sys-detail-list li::before {
  content:'';
  position:absolute; left:0; top:8px;
  width:8px; height:2px;
  background:var(--sys-color, var(--accent));
}

@media (max-width:1000px) {
  .sys-grid { grid-template-columns:repeat(3, 1fr); }
  .sys-grid .sys-card:nth-child(5),
  .sys-grid .sys-card:nth-child(6),
  .sys-grid .sys-card:nth-child(7) { grid-column:auto; }
}
@media (max-width:720px) {
  .sys-grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .sys-card { min-height:160px; padding:22px 18px 18px; }
  .sys-detail { padding:24px; }
  .sys-detail-inner { grid-template-columns:1fr; gap:20px; }
  .sys-detail-list { grid-template-columns:1fr; }
}
@media (max-width:440px) {
  .sys-grid { grid-template-columns:1fr; }
}

/* ── WORKING SMARTER BANNER ── */
.working-smarter-band {
  position:relative; overflow:hidden; height:340px;
  background: var(--dark-bg) url('wayne-relay-lineup.jpg') center 40% / cover no-repeat;
}
.wsb-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(45,63,85,.78) 0%,rgba(45,63,85,.5) 50%,rgba(45,63,85,.68) 100%); }
.wsb-content { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 20px; }
.wsb-tagline { font-family:var(--mono); font-size:.75rem; color:#60a5fa; letter-spacing:.2em; text-transform:none; margin-bottom:18px; }
.wsb-headline { font-family:var(--display); font-size:clamp(3rem,8vw,6rem); color:#fff; letter-spacing:.08em; text-transform:uppercase; line-height:1; text-shadow:0 2px 40px rgba(0,0,0,.8); margin-bottom:16px; }
.wsb-sub { font-size:.9rem; color:rgba(255,255,255,.55); letter-spacing:.06em; font-style:italic; }
#resources {
  background:
    linear-gradient(rgba(45,63,85,.82), rgba(45,63,85,.88)),
    url('gallery-electrical.jpg') center/cover no-repeat;
}
#resources .section-title { color:#fff; }
#resources .section-desc { color:rgba(255,255,255,.7); }
#resources .tag { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); }
#resources .rf { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.75); box-shadow:none; }
#resources .rf:hover { background:rgba(255,255,255,.12); border-color:var(--accent); color:#fff; }
#resources .rf.on { background:var(--accent); border-color:var(--accent); color:#fff; }
#resources .spec-strip { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); box-shadow:none; }
#resources .ss { background:transparent; border-right-color:rgba(255,255,255,.08); }
#resources .ss-val { color:#60a5fa; }
#resources .ss-lbl { color:rgba(255,255,255,.55); }
.res-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.rf {
  font-family:var(--mono); font-size:.65rem; font-weight:500;
  letter-spacing:.07em; text-transform:none;
  padding:7px 16px; border-radius:var(--radius);
  border:1px solid var(--border); color:var(--dim);
  background:var(--white); cursor:pointer; transition:all .2s;
  box-shadow:var(--shadow);
}
.rf:hover { border-color:var(--accent); color:var(--accent); }
.rf.on { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.3); }

.spec-strip {
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:0;
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; margin:24px 0 32px;
  box-shadow:var(--shadow);
}
.ss { background:var(--white); padding:16px 14px; text-align:center; border-right:1px solid var(--border); }
.ss-val { font-family:var(--display); font-size:1.3rem; color:var(--accent); line-height:1; margin-bottom:4px; }
.ss-lbl { font-family:var(--mono); font-size:.58rem; color:var(--muted); letter-spacing:.07em; text-transform:none; line-height:1.4; }

.res-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:32px;
}
.rcard {
  background:var(--ivory);
  display:flex; flex-direction:column;
  transition:box-shadow .3s, transform .3s, border-color .3s;
  border:1px solid var(--ivory-border);
  border-radius:12px;
  box-shadow:var(--ivory-shadow-sm);
  text-align:left;
  overflow:hidden;
  position:relative;
}
.rcard::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg,var(--accent),rgba(37,99,235,.3));
  opacity:0;
  transition:opacity .3s;
}
.rcard:hover { box-shadow:var(--ivory-shadow); transform:translateY(-4px); border-color:var(--accent); }
.rcard:hover::before { opacity:1; }
.rcard.placeholder { opacity:.65; }
.rcard.hidden { display:none; }

/* card header zone */
.rcard-top {
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 24px 0;
}
.rcat {
  font-family:var(--mono); font-size:.58rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px;
}
.rcat.quality { background:rgba(37,99,235,.1); color:var(--accent); border:1px solid rgba(37,99,235,.25); }
.rcat.specs   { background:rgba(16,185,129,.1); color:#059669; border:1px solid rgba(16,185,129,.25); }
.rcat.engineering { background:rgba(99,102,241,.1); color:#4f46e5; border:1px solid rgba(99,102,241,.25); }
.rcat.reference   { background:rgba(168,85,247,.1); color:#7c3aed; border:1px solid rgba(168,85,247,.25); }
.rfile {
  font-family:var(--mono); font-size:.58rem; color:var(--ivory-muted);
  letter-spacing:.05em;
  background:rgba(12,24,40,.05);
  padding:3px 8px; border-radius:4px;
}

/* card body */
.rcard-body { padding:16px 24px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.rcard h3 {
  font-family:var(--display); font-size:1rem; font-weight:700;
  color:var(--navy); letter-spacing:.02em; text-transform:none; line-height:1.3;
}
.rcard p {
  font-size:.8rem; color:var(--body); line-height:1.75; flex:1;
}
.rmeta {
  display:flex; gap:8px; flex-wrap:wrap; padding-top:4px;
}
.rmeta span {
  font-family:var(--mono); font-size:.56rem; color:var(--ivory-dim);
  letter-spacing:.06em; text-transform:uppercase;
  background:rgba(12,24,40,.05);
  padding:3px 8px; border-radius:4px;
}

/* download button zone */
.rcard-action { padding:0 24px 22px; }
.rdl {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--accent),#1d4ed8); color:#fff;
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:11px 20px; border-radius:8px;
  text-decoration:none; transition:all .25s; border:none; cursor:pointer;
  box-shadow:0 2px 12px rgba(37,99,235,.3);
  width:100%; justify-content:center;
}
.rdl:hover {
  background:linear-gradient(135deg,#3b82f6,var(--accent));
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(37,99,235,.4);
}
.rdl.soon { background:var(--panel); color:var(--muted); cursor:default; pointer-events:none; transform:none; box-shadow:none; }

.res-cta {
  background:var(--white);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  padding:24px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
  box-shadow:var(--shadow);
}
.res-cta p { font-size:.88rem; color:var(--dim); }

/* ── CONTACT ── */
#contact {
  border-top:1px solid var(--border);
  background:
    linear-gradient(rgba(248,250,252,.72), rgba(248,250,252,.78)),
    url('robert-building-storm.jpg') center/cover no-repeat;
}
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; text-align:left; }
.contact-info h2 {
  font-family:var(--display);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  color:var(--navy); letter-spacing:.01em;
  line-height:1.15; margin-bottom:20px;
}
.contact-info > p { font-size:.88rem; color:var(--dim); line-height:1.9; margin-bottom:32px; }
.cdet { display:flex; gap:14px; margin-bottom:14px; align-items:flex-start; }
.cdet-icon {
  width:34px; height:34px; min-width:34px;
  background:var(--accentlo);
  border:1px solid var(--accentborder);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
}
.cdet-text { font-size:.84rem; color:var(--dim); line-height:1.6; }
.cdet-text a { color:var(--accent); text-decoration:none; }
.cdet-text a:hover { text-decoration:underline; }
.cdet-text strong { color:var(--text); display:block; font-size:.75rem; font-family:var(--mono); letter-spacing:.06em; text-transform:none; margin-bottom:2px; }

.cform-wrap {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.cform-header {
  background:var(--accent);
  border-bottom:none;
  padding:16px 24px;
  font-family:var(--mono); font-size:.65rem;
  color:#fff; letter-spacing:.1em; text-transform:none;
  display:flex; align-items:center; gap:8px;
}
.cform-header::before {
  content:''; width:6px; height:6px;
  background:#fff; border-radius:50%;
}
.cform { padding:24px; text-align:left; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fgroup { margin-bottom:14px; }
.fgroup label {
  display:block;
  font-family:var(--mono); font-size:.62rem;
  color:var(--muted); letter-spacing:.1em; text-transform:none;
  margin-bottom:6px;
}
.fgroup input,
.fgroup textarea,
.fgroup select {
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 14px;
  border-radius:var(--radius);
  font-family:var(--body-font); font-size:.84rem;
  outline:none; transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none;
}
.fgroup input:focus,
.fgroup textarea:focus,
.fgroup select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accentlo);
}
.fgroup select { color:var(--dim); }
.fgroup textarea { height:100px; resize:vertical; }
.cform-submit {
  width:100%; background:var(--accent); color:#fff;
  border:none; padding:13px;
  border-radius:var(--radius);
  font-family:var(--mono); font-size:.8rem; font-weight:700;
  letter-spacing:.08em; text-transform:none;
  cursor:pointer; transition:all .2s;
  margin-top:4px;
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}
.cform-submit:hover { background:var(--accent2); box-shadow:0 4px 16px rgba(37,99,235,.35); }

/* ── FOOTER ── */
footer {
  background:var(--navy);
  border-top:none;
  padding:32px 48px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  position:relative; z-index:2;
}
.footer-left { display:flex; align-items:center; gap:20px; }
.footer-copy { font-family:var(--mono); font-size:.62rem; color:rgba(255,255,255,.45); letter-spacing:.05em; }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a {
  font-family:var(--mono); font-size:.62rem;
  color:rgba(255,255,255,.4); text-decoration:none; letter-spacing:.06em;
  text-transform:none; transition:color .2s;
}
.footer-links a:hover { color:#fff; }
.footer-credits {
  width:100%;
  font-family:var(--mono);
  font-size:.58rem;
  color:rgba(255,255,255,.32);
  letter-spacing:.04em;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:14px;
  margin-top:6px;
  line-height:1.6;
}
.footer-credits a {
  color:rgba(255,255,255,.55);
  text-decoration:underline;
  text-decoration-thickness:.5px;
  text-underline-offset:2px;
}
.footer-credits a:hover { color:#fff; }

/* ── BRAND WATERMARK (reusable subtle background crest) ── */
.brand-watermark {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.brand-watermark::before {
  content:'';
  position:absolute;
  top:50%;
  right:-80px;
  transform:translateY(-50%);
  width:600px;
  height:600px;
  background:url('jqmc_brand_logo.png') center/contain no-repeat;
  opacity:.06;
  pointer-events:none;
  z-index:0;
}
.brand-watermark > * { position:relative; z-index:1; }
@media (max-width:900px) {
  .brand-watermark::before { width:420px; height:420px; right:-120px; opacity:.05; }
}

/* ── VIDEO BAND (home page — Factory to Field, between Process and Social Proof) ── */
.video-band {
  background:var(--dark-bg);
  padding:96px 0;
  position:relative;
  z-index:2;
}
.video-band-player {
  position:relative;
  margin:8px auto 20px;
  max-width:1080px;
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
  background:#000;
}
.video-band-player video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.video-band-caption {
  font-family:var(--mono);
  font-size:.66rem;
  color:rgba(255,255,255,.5);
  letter-spacing:.08em;
  text-transform:none;
}
@media (max-width:768px) {
  .video-band { padding:64px 0; }
  .video-band-player { border-radius:8px; }
}


/* ── SCROLL REVEAL ── */
.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
  opacity:1;
  transform:none;
}

/* ── RESPONSIVE ── */
/* ── HOW IT WORKS ── */
#process {
  border-top:1px solid var(--border);
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    url('robert-hangar-crane.jpg') center/cover no-repeat;
}
.process-steps { position:relative; }
.process-steps::before {
  content:'';
  position:absolute; top:36px; left:calc(50% - 0.5px);
  width:1px; height:calc(100% - 72px);
  background:linear-gradient(to bottom, var(--accent), var(--border));
  z-index:0;
}
.pstep {
  display:grid; grid-template-columns:1fr 60px 1fr;
  gap:0 32px; margin-bottom:1px;
  position:relative; z-index:1;
}
.pstep:nth-child(even) .pstep-card { grid-column:3; }
.pstep:nth-child(even) .pstep-empty { grid-column:1; grid-row:1; }
.pstep:nth-child(odd) .pstep-card { grid-column:1; }
.pstep-center {
  display:flex; flex-direction:column; align-items:center; gap:0;
  grid-column:2; grid-row:1;
}
.pstep-node {
  width:44px; height:44px;
  background:var(--white);
  border:2px solid var(--accent);
  box-shadow:0 0 0 4px var(--accentlo), 0 4px 12px rgba(37,99,235,.2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1rem;
  color:var(--accent); z-index:2;
  flex-shrink:0;
}
.pstep-line { flex:1; width:1px; background:var(--border); }
.pstep-card {
  background:var(--dark-bg);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:28px 26px;
  text-align:left;
  margin-bottom:24px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.pstep-card:hover { border-color:var(--accent); box-shadow:0 8px 36px rgba(0,0,0,.35); transform:translateY(-2px); }
.pstep-empty { margin-bottom:24px; }
.pstep-label {
  font-family:var(--mono); font-size:.62rem;
  color:var(--accent); letter-spacing:.1em; text-transform:none;
  margin-bottom:8px;
}
.pstep-card h3 {
  font-family:var(--display); font-size:1.2rem; font-weight:700;
  color:#fff; letter-spacing:.01em;
  margin-bottom:8px;
}
.pstep-card p { font-size:.83rem; color:rgba(255,255,255,.6); line-height:1.8; }
.pstep-card ul { list-style:none; margin-top:10px; display:flex; flex-wrap:wrap; gap:5px; }
.pstep-card ul li {
  font-family:var(--mono); font-size:.6rem; color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06);
  padding:3px 9px; border-radius:20px;
  letter-spacing:.05em; text-transform:none;
}

/* ── INDUSTRIES ── */
#industries {
  border-top:1px solid var(--border);
  background:
    linear-gradient(rgba(45,63,85,.88), rgba(45,63,85,.92)),
    url('robert-transport-truck.jpg') center/cover no-repeat;
}
#industries .section-title { color:#fff; }
#industries .section-desc { color:rgba(255,255,255,.7); }
#industries .tag { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); }
.ind-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.ind-card {
  background:var(--dark-bg);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:28px 24px;
  position:relative;
  overflow:hidden;
  text-align:left;
  transition:box-shadow .25s, transform .25s, border-color .25s;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.ind-card:hover { box-shadow:0 8px 36px rgba(0,0,0,.35); transform:translateY(-3px); border-color:var(--accent); }
.ind-accent {
  position:absolute; top:0; left:0; right:0;
  height:4px;
}
.ind-icon { font-size:1.8rem; display:block; margin-bottom:12px; margin-top:10px; }
.ind-card h3 {
  font-family:var(--display);
  font-size:1.15rem; font-weight:700; color:#fff;
  letter-spacing:.01em;
  margin-bottom:10px; line-height:1.2;
}
.ind-card p { font-size:.82rem; color:rgba(255,255,255,.6); line-height:1.75; margin-bottom:14px; }
.ind-specs { display:flex; flex-wrap:wrap; gap:4px; }
.ind-spec {
  font-family:var(--mono); font-size:.56rem;
  color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  padding:3px 9px; border-radius:20px;
  letter-spacing:.06em; text-transform:none;
  backdrop-filter:blur(4px);
}

/* ── CASE STUDIES ── */
#casestudies {
  border-top:1px solid var(--border);
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    url('robert-crane-solar.jpg') center/cover no-repeat;
}
.cs-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; margin-bottom:8px;
  box-shadow:var(--shadow);
  transition:box-shadow .2s;
}
.cs-card:hover { box-shadow:var(--shadow-md); }
.cs-card + .cs-card { margin-top:8px; }
.cs-header {
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:20px;
  padding:20px 28px; cursor:pointer;
  transition:background .2s;
  border-bottom:1px solid transparent;
  user-select:none;
}
.cs-card.open .cs-header { background:var(--accentlo); border-bottom-color:var(--accentborder); }
.cs-header:hover { background:var(--light); }
.cs-num {
  font-family:var(--display); font-size:2rem; color:var(--border2);
  line-height:1; min-width:40px;
  transition:color .2s;
}
.cs-card.open .cs-num { color:var(--accent); }
.cs-meta { }
.cs-client { font-family:var(--mono); font-size:.62rem; color:var(--accent); letter-spacing:.08em; text-transform:none; margin-bottom:4px; }
.cs-title { font-family:var(--display); font-size:1.4rem; font-weight:700; color:var(--navy); letter-spacing:.01em; line-height:1.2; }
.cs-arrow { font-size:1rem; color:var(--muted); transition:transform .3s, color .2s; }
.cs-card.open .cs-arrow { transform:rotate(180deg); color:var(--accent); }
.cs-body {
  display:none; padding:32px 28px;
  grid-template-columns:2fr 1fr; gap:48px;
  background:var(--white);
}
.cs-card.open .cs-body { display:grid; }
.cs-body h4 {
  font-family:var(--mono); font-size:.65rem; color:var(--accent);
  letter-spacing:.1em; text-transform:none; margin-bottom:10px; margin-top:20px;
}
.cs-body h4:first-child { margin-top:0; }
.cs-body p { font-size:.84rem; color:var(--dim); line-height:1.9; margin-bottom:8px; }
.cs-dl-link {
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:none;
  padding:9px 18px; border-radius:var(--radius);
  text-decoration:none; transition:all .2s;
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}
.cs-dl-link:hover { background:var(--accent2); transform:translateY(-1px); }
.cs-sidebar { border-left:1px solid var(--border); padding-left:32px; }
.cs-photo {
  grid-column: 1 / -1;
  margin: 0 0 20px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--dark-bg);
  box-shadow: 0 8px 28px rgba(12,24,40,.18);
}
.cs-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.cs-photo:hover img { transform:scale(1.03); }
.cs-photo-caption {
  position:absolute; bottom:0; left:0; right:0;
  padding:14px 18px;
  background:linear-gradient(to top, rgba(12,24,40,.88) 0%, rgba(12,24,40,.55) 60%, transparent 100%);
  color:rgba(255,255,255,.92);
  font-family:var(--mono); font-size:.65rem; letter-spacing:.08em;
}
.cs-stat-list { display:flex; flex-direction:column; gap:16px; }
.cs-stat { border-bottom:1px solid var(--border); padding-bottom:16px; }
.cs-stat:last-child { border-bottom:none; }
.cs-stat-val { font-family:var(--display); font-size:1.8rem; color:var(--navy); line-height:1; margin-bottom:3px; }
.cs-stat-lbl { font-family:var(--mono); font-size:.6rem; color:var(--muted); letter-spacing:.07em; text-transform:none; }
.cs-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.cs-tag {
  font-family:var(--mono); font-size:.58rem;
  border:1px solid var(--border); color:var(--muted);
  padding:2px 7px; border-radius:var(--radius); letter-spacing:.05em; text-transform:none;
}
.cs-tag.hl { color:var(--accent); border-color:var(--accentborder); background:var(--accentlo); }

/* ── NATIONWIDE MAP ── */
#delivery { background:var(--light); border-top:1px solid var(--border); }
.delivery-grid { display:grid; grid-template-columns:1fr 380px; gap:60px; align-items:start; }
.delivery-grid > * { min-width:0; }
.map-wrap {
  background:var(--navy);
  border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; position:relative;
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.map-wrap svg { width:100%; height:auto; display:block; max-width:100%; }
.map-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.mleg { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.62rem; color:rgba(255,255,255,.5); letter-spacing:.04em; text-transform:none; }
.mleg-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.delivery-stats { display:flex; flex-direction:column; gap:8px; }
.dstat {
  background:var(--white); border:1px solid var(--border);
  padding:20px; border-left:4px solid transparent;
  border-radius:var(--radius);
  transition:border-left-color .2s, box-shadow .2s, transform .2s;
  box-shadow:var(--shadow);
}
.dstat:hover { border-left-color:var(--accent); box-shadow:var(--shadow-md); transform:translateX(3px); }
.dstat-val { font-family:var(--display); font-size:2rem; color:var(--navy); line-height:1; margin-bottom:4px; }
.dstat-lbl { font-family:var(--mono); font-size:.62rem; color:var(--accent); letter-spacing:.07em; text-transform:none; margin-bottom:6px; }
.dstat-desc { font-size:.78rem; color:var(--dim); line-height:1.6; }
.dot-project { cursor:pointer; }
.map-tooltip {
  position:absolute;
  background:var(--navy); border:1px solid rgba(96,165,250,.5);
  border-radius:var(--radius); padding:8px 12px;
  font-family:var(--mono); font-size:.62rem; color:#fff;
  pointer-events:none; opacity:0; transition:opacity .2s;
  z-index:10; white-space:nowrap;
}

/* ── FAQ ── */
#faq {
  border-top:1px solid var(--border);
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.86)),
    url('gallery-cabling.jpg') center/cover no-repeat;
}
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; background:transparent; }
.faq-item {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:box-shadow .2s; text-align:left;
}
.faq-item:hover { box-shadow:var(--shadow-md); }
.faq-q {
  padding:20px 24px; cursor:pointer; display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  transition:background .2s; user-select:none;
}
.faq-q:hover { background:var(--light); }
.faq-q-text { font-size:.88rem; color:var(--text); font-weight:500; line-height:1.5; }
.faq-icon { color:var(--accent); font-size:1.1rem; flex-shrink:0; margin-top:2px; transition:transform .25s; font-weight:300; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-item.open .faq-q { background:var(--accentlo); }
.faq-a { max-height:0; overflow:hidden; padding:0 24px; font-size:.82rem; color:var(--body); line-height:1.9; border-top:0px solid var(--border); transition:max-height .35s ease,padding .35s ease,border-top-width .35s; }
.faq-item.open .faq-a { max-height:none; overflow:visible; padding:14px 24px 20px; border-top-width:1px; }
.faq-a a { color:var(--accent); }

@media(max-width:900px) {
  .res-grid { grid-template-columns:repeat(2,1fr); }
  .ind-grid { grid-template-columns:1fr 1fr; }
  .cs-body { grid-template-columns:1fr; }
  .cs-sidebar { border-left:none; padding-left:0; border-top:1px solid var(--border); padding-top:24px; }
  .delivery-grid { grid-template-columns:1fr; }
  .faq-grid { grid-template-columns:1fr; }
  .process-steps::before { display:none; }
  .pstep { grid-template-columns:1fr; }
  .pstep-center { display:none; }
  .pstep:nth-child(even) .pstep-card { grid-column:1; }
  .pstep:nth-child(even) .pstep-empty { display:none; }
  .pstep-empty { display:none; }
  .config-summary { grid-template-columns:1fr 1fr; }
  nav { padding:0 20px; }
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .mobile-menu { display:flex; }
  .wrap { padding:0 20px; }
  .section { padding:64px 0; }
  .hero-inner { grid-template-columns:1fr; gap:40px; }
  .hero-stats { display:none; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .about-year { font-size:5rem; }
  .about-identity { position:static; }
  .products-grid { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  .cap-grid { grid-template-columns:1fr; }
  .roi-intro { grid-template-columns:1fr; gap:30px; }
  .roi-kpis { grid-template-columns:1fr; }
  .spec-strip { grid-template-columns:repeat(3,1fr); }
  .res-grid { grid-template-columns:1fr !important; }
  .rcard { width:100% !important; }
  .contact-grid { grid-template-columns:1fr; gap:48px; }
  .frow { grid-template-columns:1fr; }
  footer { flex-direction:column; align-items:flex-start; padding:24px 20px; }
  .mvv-grid { grid-template-columns:1fr; }
  .f26-grid { grid-template-columns:1fr; }
  .mvv-card-values { grid-column:1; }
  .ind-grid { grid-template-columns:1fr; }
  .aident-stats { grid-template-columns:1fr 1fr; }
  .values-grid { grid-template-columns:1fr; }
}

/* ── PREMIUM POLISH ── */

/* Page load fade-in — opacity-only so it doesn't create a containing block
   that would break position:fixed on the nav */
@keyframes pageIn {
  from { opacity:0; }
  to   { opacity:1; }
}
body { animation: pageIn .4s ease both; }


/* Divider upgrade — gradient fade */
.divider {
  border:none;
  height:1px;
  background:linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
  position:relative;
}
.divider::before {
  content:'+';
  position:absolute;
  left:48px; top:-6px;
  font-family:var(--mono);
  font-size:.65rem;
  color:rgba(37,99,235,.18);
  letter-spacing:.1em;
}
.divider::after {
  content:'+';
  position:absolute;
  right:48px; top:-6px;
  font-family:var(--mono);
  font-size:.65rem;
  color:rgba(37,99,235,.18);
  letter-spacing:.1em;
}

/* Section label (tag) on dark background (hero, focus2026) */
.tag.light {
  color:#60a5fa;
  border-color:rgba(96,165,250,.3);
  background:rgba(96,165,250,.08);
}
.tag.light::before { background:#60a5fa; }

/* Smooth link transitions sitewide */
a { transition: color .18s, opacity .18s; }

/* Nav active link indicator */
.nav-links a.active { color:var(--accent); }

/* Subtle ROI table row hover */
.roi-row:hover .roi-cell:first-child { background:var(--light); }

/* Improve standards chip hover */
.std-chip:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }

/* Delivery stat card left bar gradient */
.dstat:hover { border-left-color:var(--accent); }
.dstat::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:0; background:var(--accent);
  transition:width .25s; border-radius:var(--radius) 0 0 var(--radius);
}
.dstat { position:relative; overflow:hidden; }
.dstat:hover::before { width:4px; }
/* Override the direct border to keep it invisible until hover */
.dstat { border-left:4px solid transparent; }

/* Case study open state — blue left bar */
.cs-card.open {
  border-left: 3px solid var(--accent);
}

/* Subtle card border glow on hover for product cards */
/* product-card hover handled in main declaration */

/* Nav active scroll highlight */
.nav-links a {
  position:relative;
}
.nav-links a::after {
  content:'';
  position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform:scaleX(1); }

/* Improved form submit button */
.cform-submit:active { transform:scale(.98); }

footer img { filter: brightness(0) invert(1) opacity(.75); transition:filter .2s; }
footer img:hover { filter: brightness(0) invert(1) opacity(1); }

/* ── PAGE LOAD ANIMATION ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}
.hero-left { animation: fadeUp .7s cubic-bezier(.4,0,.2,1) both; }
.hero-stats { animation: fadeUp .7s .2s cubic-bezier(.4,0,.2,1) both; }

/* ── PREMIUM SECTION DIVIDER ── */
hr.divider {
  border:none;
  height:1px;
  background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

/* ── SELECTION COLOUR ── */
::selection { background:var(--accentlo); color:var(--navy); }

/* ── SMOOTH FOCUS RINGS (accessibility) ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ── SCROLLBAR STYLING ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ── STAGGERED REVEAL for grids ── */
.products-grid .product-card:nth-child(1) { transition-delay:.05s; }
.products-grid .product-card:nth-child(2) { transition-delay:.10s; }
.products-grid .product-card:nth-child(3) { transition-delay:.15s; }
.products-grid .product-card:nth-child(4) { transition-delay:.20s; }
.products-grid .product-card:nth-child(5) { transition-delay:.25s; }
.products-grid .product-card:nth-child(6) { transition-delay:.30s; }

.cap-grid .cap-item:nth-child(1) { transition-delay:.04s; }
.cap-grid .cap-item:nth-child(2) { transition-delay:.08s; }
.cap-grid .cap-item:nth-child(3) { transition-delay:.12s; }
.cap-grid .cap-item:nth-child(4) { transition-delay:.16s; }
.cap-grid .cap-item:nth-child(5) { transition-delay:.20s; }
.cap-grid .cap-item:nth-child(6) { transition-delay:.24s; }
.cap-grid .cap-item:nth-child(7) { transition-delay:.28s; }

/* ── PRINT STYLES ── */
@media print {
  nav, .hero-scroll, #backToTop, .mobile-menu { display:none !important; }
  body { background:#fff !important; color:#000 !important; }
  section { page-break-inside:avoid; }
  .working-smarter-band { display:none; }
}

/* ── EXTRA RESPONSIVE POLISH ── */
@media(max-width:600px) {
  .wrap { padding:0 20px; }
  .section { padding:60px 0; }
  h1.hero-title { font-size:3.2rem; }
  .aident-stats { grid-template-columns:1fr 1fr; }
  .faq-grid { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  .f26-grid { grid-template-columns:1fr; }
  .products-grid { grid-template-columns:1fr; }
  .cap-grid { grid-template-columns:1fr; }
  .roi-intro { grid-template-columns:1fr; }
  .roi-kpis { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .mvv-grid { grid-template-columns:1fr; }
  .mvv-card-values { grid-column:1; }
  .values-grid { grid-template-columns:1fr; }
  .spec-strip { grid-template-columns:repeat(3,1fr); }
  .hstat-val { font-size:1.8rem; }
  .working-smarter-band { background-attachment:scroll; }
}

/* ═══════════════════════════════════════════════════════ */
/* CREDENTIALS BAND — under home page hero                  */
/* ═══════════════════════════════════════════════════════ */
.creds-band {
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:18px 0;
  position:relative;
  overflow:hidden;
}
.creds-band::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(37,99,235,.08) 0%, transparent 30%, transparent 70%, rgba(37,99,235,.08) 100%);
  pointer-events:none;
}
.creds-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px 32px;
  position:relative; z-index:1;
}
.cred-item {
  display:flex; flex-direction:column; align-items:center;
  gap:2px;
  text-align:center;
}
.cred-label {
  font-family:var(--display);
  font-size:.82rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.04em;
  text-transform:none;
  line-height:1.1;
}
.cred-sub {
  font-family:var(--mono);
  font-size:.58rem;
  color:rgba(255,255,255,.55);
  letter-spacing:.08em;
  text-transform:none;
}
.cred-sep {
  width:1px;
  height:32px;
  background:linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
}
@media (max-width:720px) {
  .creds-inner { gap:16px 20px; }
  .cred-label { font-size:.74rem; }
  .cred-sub { font-size:.52rem; }
  .cred-sep { display:none; }
}
@media (max-width:480px) {
  .cred-sub { display:none; }
}

/* ═══════════════════════════════════════════════════════ */
/* EXTRACTED INLINE STYLES — home page                     */
/* ═══════════════════════════════════════════════════════ */

/* Back to top button */
#backToTop {
  position:fixed; bottom:28px; right:28px; z-index:999;
  width:44px; height:44px; border-radius:50%;
  background:var(--navy); color:#fff; border:none;
  font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(12,24,40,.25);
  opacity:0; transition:opacity .3s, transform .2s, background .2s;
}
#backToTop:hover { background:var(--accent); transform:translateY(-2px); }

/* Product lines section */
#product-lines { background:var(--navy); padding:80px 0; scroll-margin-top:80px; }
#product-lines .wrap { text-align:center; }
#product-lines .tag {
  color:rgba(255,255,255,.45); border-color:rgba(255,255,255,.12);
  background:transparent; margin-bottom:20px;
}
#product-lines h2 {
  font-family:var(--display); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700;
  color:#fff; letter-spacing:.04em; text-transform:uppercase;
  line-height:1.15; margin-top:12px; margin-bottom:40px;
}
#product-lines > .wrap > p {
  font-size:.95rem; color:rgba(255,255,255,.6); line-height:1.7;
  max-width:760px; margin:0 auto 24px;
}
.prodstrip-all-link {
  font-family:var(--display); font-size:.9rem; color:var(--accent);
  text-decoration:none; font-weight:600; letter-spacing:.02em;
}

/* Process band — light variant */
.process-band--light { background:#f8fafc; padding:88px 0; overflow:hidden; }
.process-band--light > .wrap { text-align:center; }
.process-band--light .tag { display:inline-flex; margin-bottom:24px; }
.process-grid--light {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:32px; margin-top:56px; text-align:center;
}

/* Video band */
.video-band .wrap { text-align:center; }
.video-band .tag {
  display:inline-flex; margin-bottom:20px;
  color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}
.video-band h2 {
  font-family:var(--display); font-size:clamp(2rem,5vw,3.2rem); font-weight:700;
  color:#fff; letter-spacing:.02em; text-transform:uppercase;
  line-height:1.1; margin-bottom:14px;
}
.video-band > .wrap > p {
  font-size:.95rem; color:rgba(255,255,255,.6); line-height:1.7;
  max-width:680px; margin:0 auto 36px;
}

/* Social proof band */
.proof-band .wrap { padding-top:72px; padding-bottom:72px; }
.proof-band .tag {
  display:inline-flex; margin-bottom:24px;
  color:rgba(255,255,255,.45); border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.proof-band h2 {
  font-family:var(--display); font-size:clamp(2rem,5vw,3.2rem); font-weight:700;
  color:#fff; letter-spacing:.02em; text-transform:uppercase;
  line-height:1.1; margin-bottom:14px;
}
.proof-band > .wrap > p {
  font-size:.95rem; color:rgba(255,255,255,.6); line-height:1.7;
  max-width:780px; margin-bottom:48px;
}
.proof-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:32px; }
.proof-stats-row--last { margin-bottom:56px; }
.proof-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

/* Closing CTA */
.closing-cta {
  position:relative; padding:96px 0; overflow:hidden;
  background:
    linear-gradient(rgba(248,250,252,.55), rgba(248,250,252,.68)),
    url('jqmc_team_truck_on_roof.jpg') center 22% / cover no-repeat;
}
.closing-cta .wrap { text-align:center; }
.closing-cta .tag { display:inline-flex; margin-bottom:20px; }
.closing-cta h2 {
  font-family:var(--display); font-size:clamp(2rem,5vw,3.2rem); font-weight:700;
  color:var(--navy); letter-spacing:.04em; text-transform:uppercase;
  line-height:1.15; margin-bottom:22px;
}
.closing-cta-body {
  font-size:1rem; color:var(--text); line-height:1.85;
  max-width:720px; margin:0 auto 14px; font-weight:500;
}
.closing-cta-sub {
  font-size:.92rem; color:var(--dim); line-height:1.8;
  max-width:720px; margin:0 auto 16px;
}
.closing-cta-cert {
  font-size:.85rem; color:var(--muted); line-height:1.85;
  max-width:660px; margin:0 auto 36px;
  font-family:var(--mono); letter-spacing:.04em;
}
.closing-cta-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.closing-cta-btn-outline { border:1px solid var(--navy) !important; color:var(--navy) !important; background:transparent !important; }

/* Responsive — proof stats rows */
@media (max-width:768px) {
  .proof-stats-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .proof-stats-row { grid-template-columns:1fr; }
  .closing-cta { padding:64px 0; }
}

/* ═══════════════════════════════════════════════════════ */
/* PROJECT GALLERY — collapsible, per-product line         */
/* ═══════════════════════════════════════════════════════ */
.pgallery {
  margin:32px 0 24px;
  padding-top:28px;
  border-top:1px solid var(--border);
}
.pgallery-toggle {
  display:flex; align-items:center; gap:14px;
  width:100%;
  padding:16px 22px;
  background:var(--accentlo);
  border:1px solid var(--accentborder);
  border-radius:10px;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s;
  color:var(--navy);
  font-family:var(--display);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
}
.pgallery-toggle:hover {
  background:rgba(37,99,235,.13);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.pgallery-toggle-icon {
  display:inline-flex; align-items:center;
  color:var(--accent);
  flex-shrink:0;
}
.pgallery-toggle-text {
  flex:1; text-align:left;
}
.pgallery-count {
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.08em;
  background:rgba(37,99,235,.1);
  padding:5px 11px;
  border-radius:12px;
  text-transform:uppercase;
}
.pgallery-chev {
  color:var(--accent);
  font-size:1rem;
  transition:transform .28s;
  display:inline-block;
}
.pgallery.open .pgallery-chev { transform:rotate(-180deg); }

.pgallery-body {
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease, padding-top .4s ease;
}
.pgallery.open .pgallery-body {
  max-height:3200px;
  padding-top:22px;
}
.pgallery-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.pgallery-thumb {
  position:relative;
  aspect-ratio:4/3;
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  padding:0;
  background:#0c1828;
  transition:transform .2s, box-shadow .25s, border-color .2s;
}
.pgallery-thumb img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s;
}
.pgallery-thumb::after {
  content:'⊕';
  position:absolute;
  top:10px; right:10px;
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(12,24,40,.75);
  color:#fff;
  font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .2s;
  backdrop-filter:blur(6px);
}
.pgallery-thumb:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(12,24,40,.2);
  border-color:var(--accent);
}
.pgallery-thumb:hover img { transform:scale(1.08); }
.pgallery-thumb:hover::after { opacity:1; }
.pgallery-thumb:focus-visible {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.35);
}

.pgallery-note {
  margin-top:20px;
  padding:16px 20px;
  background:rgba(37,99,235,.05);
  border-left:3px solid var(--accent);
  border-radius:4px;
  font-size:.85rem;
  color:var(--body);
  line-height:1.7;
}
.pgallery-note strong {
  color:var(--navy);
  font-family:var(--display);
  display:block;
  margin-bottom:4px;
  font-size:.92rem;
  font-weight:700;
}
.pgallery-note a {
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--accentborder);
}
.pgallery-note a:hover {
  border-bottom-color:var(--accent);
}

@media (max-width:900px) {
  .pgallery-grid { grid-template-columns:repeat(3, 1fr); gap:8px; }
  .pgallery-toggle { padding:14px 18px; font-size:.88rem; }
}
@media (max-width:560px) {
  .pgallery-grid { grid-template-columns:repeat(2, 1fr); }
  .pgallery-count { display:none; }
}

/* ═══════════════════════════════════════════════════════ */
/* LIGHTBOX                                                 */
/* ═══════════════════════════════════════════════════════ */
.lightbox {
  position:fixed; inset:0;
  background:rgba(5,10,20,.96);
  z-index:2000;
  display:none;
  align-items:center; justify-content:center;
  padding:40px;
  opacity:0;
  transition:opacity .25s;
  cursor:zoom-out;
}
.lightbox.open {
  display:flex;
  opacity:1;
}
.lightbox-inner {
  max-width:min(90vw, 1600px);
  max-height:86vh;
  display:flex; flex-direction:column;
  align-items:center; gap:16px;
  cursor:default;
}
#lightboxImg {
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  display:block;
}
.lightbox-caption {
  color:rgba(255,255,255,.9);
  font-family:var(--display);
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.02em;
  text-align:center;
  max-width:680px;
  line-height:1.5;
}
.lightbox-counter {
  font-family:var(--mono);
  font-size:.65rem;
  color:rgba(255,255,255,.5);
  letter-spacing:.1em;
  margin-top:-6px;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position:absolute;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  border-radius:50%;
  width:52px; height:52px;
  font-size:1.8rem; font-weight:300;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, transform .15s;
  backdrop-filter:blur(14px);
  line-height:1;
}
.lightbox-close { top:24px; right:24px; }
.lightbox-prev { left:24px; top:50%; transform:translateY(-50%); }
.lightbox-next { right:24px; top:50%; transform:translateY(-50%); }
.lightbox-close:hover { background:rgba(239,68,68,.25); border-color:#ef4444; transform:scale(1.05); }
.lightbox-prev:hover, .lightbox-next:hover {
  background:rgba(37,99,235,.3);
  border-color:var(--accent);
}
.lightbox-prev:hover { transform:translateY(-50%) scale(1.05); }
.lightbox-next:hover { transform:translateY(-50%) scale(1.05); }

@media (max-width:720px) {
  .lightbox { padding:20px; }
  .lightbox-close, .lightbox-prev, .lightbox-next { width:42px; height:42px; font-size:1.4rem; }
  .lightbox-close { top:16px; right:16px; }
  .lightbox-prev { left:12px; }
  .lightbox-next { right:12px; }
}