/* ============================================================
   JP MACHINERY — Landing Page Styles
   White-mode, industrial precision aesthetic
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #ffffff;
  --bg-subtle: #f7f7f6;
  --text-primary: #0d0d0d;
  --text-secondary: #444444;
  --text-muted: #888888;
  --accent-blue: #1B4FD8;
  --accent-yellow: #E8A600;
  --accent-blue-light: #EEF2FF;
  --border: rgba(0,0,0,0.08);
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

html {
  scroll-behavior: auto; /* Lenis handles this */
  background: var(--bg);
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===================== LOADER ===================== */
#loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  text-align: center;
}

.loader-brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--text-primary);
  margin-bottom: 2rem;
}

.loader-brand span {
  color: var(--accent-blue);
}

.loader-bar-track {
  width: 220px;
  height: 1px;
  background: var(--border);
  margin: 0 auto 1.2rem;
  position: relative;
  overflow: hidden;
}

#loader-bar {
  height: 100%;
  width: 0%;
  background: var(--accent-blue);
  transition: width 0.1s linear;
}

#loader-percent {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

/* ===================== HEADER ===================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.5rem 4vw;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(0);
  transition: transform 0.4s ease;
}

.site-header.hide {
  transform: translateY(-100%);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-primary);
}

.logo-accent {
  color: var(--accent-blue);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--text-primary); }

.nav-links .nav-cta {
  background: var(--text-primary);
  color: #fff;
  padding: 0.6rem 1.4rem;
  border-radius: 2px;
  letter-spacing: 0.06em;
  transition: background 0.2s, color 0.2s;
}

.nav-links .nav-cta:hover {
  background: var(--accent-blue);
  color: #fff;
}

/* ── Products Dropdown ── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  list-style: none;
  min-width: 230px;
  padding: 0.5rem 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 200;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Invisible bridge so cursor can travel from link to menu */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu li a {
  display: block;
  padding: 0.55rem 1.2rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.nav-dropdown-menu li a:hover {
  color: #000;
  background: rgba(255, 255, 255, 0.1);
}

.nav-dropdown-menu li a .dd-code {
  color: var(--accent-blue);
  font-weight: 600;
  margin-right: 0.4em;
}

/* ── Category flyout ── */
.nav-cat-item {
  position: relative;
}

.nav-cat-item > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cat-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: transform 0.15s, opacity 0.15s;
}

.nav-cat-item:hover > a .cat-chevron {
  transform: translateX(2px);
  opacity: 1;
}

.nav-cat-submenu {
  position: absolute;
  left: 100%;
  top: -0.5rem;
  list-style: none;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  min-width: 230px;
  padding: 0.5rem 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 201;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.nav-cat-item:hover .nav-cat-submenu,
.nav-cat-item.open .nav-cat-submenu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(0);
}

/* ── Mobile category accordion ── */
.mobile-nav-submenu {
  gap: 0 !important;
  align-items: stretch !important;
}

.mob-cat {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mob-cat:last-child {
  border-bottom: none;
}

.mob-cat-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.75rem 0.25rem;
  text-align: left;
  transition: color 0.15s;
}

.mob-cat-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.22s;
}

.mob-cat-toggle:hover,
.mob-cat.open .mob-cat-toggle {
  color: var(--accent-blue);
}

.mob-cat.open .mob-cat-toggle svg {
  transform: rotate(180deg);
}

.mob-cat-items {
  list-style: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0.25rem;
  margin: 0;
}

.mob-cat.open .mob-cat-items {
  max-height: 400px;
  opacity: 1;
  padding: 0.25rem 0.25rem 0.75rem;
}

.mob-cat-items a {
  display: block;
  font-size: clamp(0.82rem, 3.2vw, 0.95rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-secondary) !important;
  padding: 0.4rem 0.4rem !important;
  border-radius: 4px;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.mob-cat-items a:hover {
  color: var(--accent-blue) !important;
  background: rgba(255, 255, 255, 0.05);
}

.mob-cat-items .dd-code {
  color: var(--accent-blue);
  font-weight: 700;
  margin-right: 0.35em;
}

/* ===================== HERO ===================== */
.hero-standalone {
  position: relative;
  height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
  /* Must stack above .video-wrap (also z-index 1, but later in the DOM so
     it would otherwise paint on top) unconditionally — not just under
     900px. The reveal-on-touch JS opens the video's clip-path immediately
     on any touch device regardless of width (iPad landscape, iPad Pro
     12.9" portrait at 1024px, etc.), relying on the hero's own opacity
     fade-out to visually reveal it — which only works if the hero is
     already stacked on top to begin with. */
  z-index: 2;
  overflow: hidden;
}

.hero-standalone::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.hero-inner {
  max-width: 1350px;
  padding-top: 4rem;
}

.hero-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--accent-blue);
  text-transform: uppercase;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.8s 0.3s ease forwards;
}

.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 9rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 2rem;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.hero-heading .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.9s ease forwards;
}
.hero-heading .word:nth-child(1) { animation-delay: 0.5s; }
.hero-heading .word:nth-child(2) { animation-delay: 0.65s; color: var(--accent-blue); }
.hero-heading .word:nth-child(3) { animation-delay: 0.8s; }

.hero-tagline {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 440px;
  opacity: 0;
  animation: fadeUp 0.8s 1s ease forwards;
}

.hero-scroll-hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3rem;
  opacity: 0;
  animation: fadeUp 0.8s 1.2s ease forwards;
}

.hero-scroll-hint span {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.scroll-arrow {
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  animation: bounce 2s infinite;
}

.scroll-arrow svg { width: 100%; height: 100%; }

.hero-meta {
  position: absolute;
  bottom: 3rem;
  right: 8vw;
  display: flex;
  align-items: center;
  gap: 2rem;
  opacity: 0;
  animation: fadeUp 0.8s 1.4s ease forwards;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.meta-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.meta-unit {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--accent-blue);
  letter-spacing: 0.1em;
}

.meta-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-meta-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* ===================== VIDEO LAYER ===================== */
.video-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
}

#product-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--bg);
}

/* ===================== STATS OVERLAY ===================== */
#stats-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: rgba(247, 247, 246, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s linear;
}

/* ===================== MARQUEE ===================== */
.marquee-wrap {
  position: fixed;
  bottom: 5vh;
  left: 0;
  right: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

.marquee-text {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text-primary);
  white-space: nowrap;
  will-change: transform;
  opacity: 0.18;
}

/* ===================== IMAGE SAVE DETERRENTS =====================
   Pairs with the handlers in js/nav.js. These close the casual routes to
   saving a picture: the mobile long-press "Save Image" menu and dragging an
   image out to the desktop.

   Be clear on the ceiling: this is a speed bump, not protection. A browser
   has to download an image to draw it, so the file is already on the
   visitor's machine — DevTools, view-source, the network tab, or just
   turning JavaScript off all still reach it, and nothing here stops a
   screenshot. Visible watermarking is the only real answer if these need
   protecting. */
img,
canvas {
  -webkit-touch-callout: none;  /* iOS/Android long-press menu */
  -webkit-user-drag: none;      /* drag-out to desktop (WebKit/Blink) */
  -webkit-user-select: none;
  user-select: none;
}

/* ===================== SCROLL CONTAINER ===================== */
#scroll-container {
  position: relative;
  height: 900vh;
}

/* ===================== SCROLL SECTIONS ===================== */
.scroll-section {
  position: absolute;
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
  will-change: transform, opacity;
  transform: translateY(-50%);
}

/* Side-aligned zones: text in outer 40%, product in center */
.align-left {
  padding-left: 5vw;
  padding-right: 52vw;
}

.align-right {
  padding-left: 52vw;
  padding-right: 5vw;
}

.section-inner {
  max-width: 42vw;
  padding: 2.5rem 2rem 2.5rem 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 2px solid var(--border);
  padding-left: 2rem;
}

.align-right .section-inner {
  border-left: none;
  border-right: 2px solid var(--border);
  padding-left: 0;
  padding-right: 2rem;
  text-align: right;
}

.section-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--accent-blue);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 1.4rem;
}

.section-body {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
}

.section-note {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 0.5rem;
}

/* ===================== STATS SECTION ===================== */
.section-stats {
  left: 0;
  right: 0;
  padding: 0 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  width: 100%;
  max-width: 1000px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}

.stat-value-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.stat-suffix {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent-blue);
}

.stat-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ===================== CTA SECTION ===================== */
.section-cta .section-heading {
  font-size: clamp(2.5rem, 4.5vw, 4.2rem);
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 2rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 2px;
  transition: all 2s linear;
}

.cta-primary {
  background: var(--text-primary);
  color: #fff;
  border: 1px solid var(--text-primary);
}

.cta-primary:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.cta-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.cta-secondary:hover {
  border-color: var(--text-primary);
  background: rgba(0,0,0,0.03);
}

/* ===================== FOOTER ===================== */
.site-footer {
  position: relative;
  z-index: 50;
  background: #0d0d0d;
  border-top: none;
  padding: 5rem 8vw 3rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 4rem;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: start;
}

.footer-brand { display: flex; flex-direction: column; }

.footer-logo {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
  display: block;
  margin-bottom: 0.8rem;
}

/* White-on-transparent mark, sized to ~62% of the brand column.
   The width/height attributes on the tag carry the 540x310 aspect
   ratio, so the row reserves its space before the PNG decodes.
   max-width keeps it inside the column once the footer collapses
   to a single column on narrow screens.                           */
.footer-logo img {
  display: block;
  width: 170px;
  max-width: 100%;
  height: auto;
}

.footer-tagline {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,0.35);
  max-width: 240px;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.6);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.footer-social-link:hover {
  color: #fff;
  border-color: var(--accent-blue);
  background: var(--accent-blue);
  transform: translateY(-2px);
}
.footer-social-link:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.footer-social-link svg {
  width: 18px;
  height: 18px;
}

/* Promotional product popup — desktop only for now (hidden below 1024px).
   Hidden by default via opacity/visibility so it can fade; .active shows it. */
.promo-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(13, 13, 13, 0.62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.promo-popup-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.promo-popup {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(13, 13, 13, 0.38), 0 8px 24px rgba(27, 79, 216, 0.14);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.promo-popup-overlay.active .promo-popup {
  transform: translateY(0) scale(1);
}
.promo-popup-img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
}
.promo-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.promo-popup-close svg { width: 18px; height: 18px; }
.promo-popup-close:hover { background: rgba(13, 13, 13, 0.8); transform: rotate(90deg); }
.promo-popup-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.promo-popup-body { padding: 1.9rem 2.1rem 2.1rem; }
.promo-popup-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 0.7rem;
}
.promo-popup-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 0.8rem;
}
.promo-popup-text {
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.6;
  color: #555;
  margin: 0 0 1.6rem;
}
.promo-popup-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: var(--accent-blue);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 100px;
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease;
}
.promo-popup-cta svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.promo-popup-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 79, 216, 0.3); }
.promo-popup-cta:hover svg { transform: translateX(3px); }
.promo-popup-cta:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }

/* Tablet / iPad — slightly shorter image so the card isn't too tall. */
@media (max-width: 1024px) {
  .promo-popup { max-width: 500px; }
  .promo-popup-img { height: 300px; }
}

/* Phones — fit the card to the viewport and scale the image/type down. */
@media (max-width: 560px) {
  .promo-popup-overlay { padding: 16px; }
  .promo-popup { max-width: 400px; border-radius: 14px; }
  .promo-popup-img { height: 210px; }
  .promo-popup-body { padding: 1.5rem 1.5rem 1.7rem; }
  .promo-popup-title { font-size: 1.4rem; }
  .promo-popup-text { font-size: 0.92rem; }
}

/* Floating "Get a Quote" CTA — desktop only for now; mobile/tablet
   treatment is handled separately, so it's hidden below 1024px. */
.sticky-quote {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  background: var(--accent-blue);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(27,79,216,0.28), 0 12px 32px rgba(27,79,216,0.16);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease;
}
.sticky-quote:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(27,79,216,0.34), 0 18px 44px rgba(27,79,216,0.22);
}
.sticky-quote:active { transform: translateY(-1px); }
.sticky-quote:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sticky-quote svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}
.sticky-quote:hover svg { transform: translateX(3px); }

@media (max-width: 1024px) {
  .sticky-quote { display: none; }
}

/* WhatsApp floating button — mobile & tablet only (hidden on desktop).
   On the homepage it carries the --gated modifier and stays hidden until
   the Industries section scrolls into view (JS adds .is-visible). */
.whatsapp-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 950;
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.42), 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.whatsapp-fab svg { width: 30px; height: 30px; }
.whatsapp-fab:active { transform: scale(0.94); }
.whatsapp-fab--gated {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
}
.whatsapp-fab--gated.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
@media (max-width: 1024px) {
  .whatsapp-fab { display: inline-flex; }
}

.footer-col-title {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.footer-links a:hover { color: #fff; }

.footer-contact-line {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.footer-contact-label {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
}

.footer-contact-value {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
}

.footer-bottom {
  max-width: 1400px;
  margin: 2.5rem auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copy {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.06em;
}

.footer-legal {
  display: flex;
  gap: 2rem;
}

.footer-legal a {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.22);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.footer-legal a:hover { color: rgba(255,255,255,0.6); }

/* ===================== ANIMATIONS ===================== */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ===================== HAMBURGER + MOBILE NAV ===================== */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  z-index: 1100;
  position: relative;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.nav-burger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-burger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-burger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.mobile-nav.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  text-align: center;
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-nav a:hover { color: var(--accent-blue); }

.mobile-nav .nav-cta {
  background: var(--text-primary);
  color: #fff;
  padding: 0.75rem 2.2rem;
  border-radius: 2px;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  display: inline-block;
}

.mobile-nav .nav-cta:hover {
  background: var(--accent-blue);
  color: #fff;
}

.mobile-nav-close {
  position: absolute;
  top: 1.5rem;
  right: 5vw;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text-primary);
  line-height: 0;
}

.mobile-nav-close svg {
  width: 28px;
  height: 28px;
}

body.menu-open { overflow: hidden; }

/* ── Mobile nav Products dropdown ── */
.mobile-nav-dropdown-row {
  position: relative;
  display: inline-block;
}

.mobile-nav-toggle {
  position: absolute;
  left: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-primary);
  line-height: 0;
  transition: transform 0.25s ease;
}

.mobile-nav-toggle svg {
  width: 20px;
  height: 20px;
}

.mobile-nav-dropdown.open .mobile-nav-toggle {
  transform: translateY(-50%) rotate(180deg);
}

.mobile-nav-submenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease;
  opacity: 0;
  margin-top: 0;
}

.mobile-nav-dropdown.open .mobile-nav-submenu {
  pointer-events: auto;
}

.mobile-nav-dropdown.open .mobile-nav-submenu {
  max-height: 700px;
  opacity: 1;
  margin-top: 1rem;
}

.mobile-nav-submenu a {
  font-size: clamp(0.85rem, 3.5vw, 1.05rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--text-secondary) !important;
}

.mobile-nav-submenu a:hover {
  color: var(--accent-blue) !important;
}

.mobile-nav-submenu .dd-code {
  color: var(--accent-blue);
  font-weight: 600;
  margin-right: 0.35em;
}

/* ===================== MOBILE CTA FALLBACK ===================== */
.mobile-cta-fallback {
  display: none; /* desktop: hidden — animated version handles it */
  position: relative;
  z-index: 50;
  background: var(--bg);
  padding: 8vw 5vw;
  border-top: 1px solid var(--border);
}

.mobile-cta-fallback .section-inner {
  max-width: 100%;
  background: var(--bg);
  border-left: 2px solid var(--border);
  padding: 2rem 2rem 2rem 2rem;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {

  .hero-meta { display: none; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }

  /* .video-wrap is a fixed, full-viewport layer sitting behind the hero
     (js/app.js sets it fully open immediately on touch devices — see
     "Lenis + hero clip-path (desktop-only)") — it's only hidden because
     the hero, a normal 100vh flow element, physically covers the
     viewport on top of it. That means the video can't become visible
     at all until a full screen's worth of hero has been scrolled past,
     independent of the video's own scroll-to-complete pacing. Same fix
     already applied for iPad portrait below: shrink the hero so the
     video starts coming into view sooner. */
  .hero-standalone {
    height: 82vh;
  }

  .hero-heading {
    font-size: clamp(2.4rem, 7vw, 4.5rem);
    line-height: 1.0;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Hide the <br> so each word stacks evenly without a blank line */
  .hero-heading br { display: none; }

  .hero-heading .word {
    display: block;
    white-space: nowrap;
  }

  .hero-inner {
    padding-left: 0;
    padding-right: 0;
  }

  /* Mobile: the cards are ordinary flow content stacked in a single column
     inside #scroll-container, scrolling up over the fixed video canvas. No
     fixed positioning and no entrance animation — see the MOBILE SCROLL CARDS
     block at the end of this file for the container that paces them. */
  .scroll-section {
    position: relative;
    top: auto;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
  }

  .align-left,
  .align-right {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .section-inner {
    max-width: 100%;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .align-right .section-inner {
    text-align: left;
    border-right: none;
    border-left: 2px solid var(--border);
    padding-left: 2rem;
    padding-right: 0;
  }

  .section-stats {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .section-stats .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 2px solid var(--border);
    padding: 1.4rem;
  }

  .section-stats .stat-number {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }

  .section-stats .stat-suffix {
    font-size: 0.95rem;
  }

  .section-stats .stat-label {
    font-size: 0.58rem;
  }

  /* #scroll-container's mobile sizing lives in the MOBILE SCROLL CARDS block
     at the end of this file — it has to come after the IPAD PORTRAIT block to
     win the cascade, so it's kept in one place rather than split across both. */

  .marquee-text {
    font-size: clamp(2rem, 10vw, 4rem);
  }

  /* Prevent heading overflow on mobile */
  .section-heading {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    overflow-wrap: break-word;
  }

  .static-heading {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    overflow-wrap: break-word;
  }

  /* Section 005: 2pt smaller heading */
  .industries-section .static-heading {
    font-size: clamp(1.35rem, 4.5vw, 2.2rem);
  }

  /* Section 006: tighten process step grid */
  .process-step {
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
  }

  .process-step-num {
    font-size: 1.8rem;
  }

  .process-section .static-heading {
    font-size: clamp(1.35rem, 4.5vw, 2.2rem);
  }

  /* "Get in Touch / Start Your Project" — must come after .process-section override */
  .process-section.products-contact-section .static-heading {
    font-size: clamp(2.2rem, 10vw, 3.5rem);
  }

  .process-step-title {
    font-size: 1.05rem;
  }

  .process-step-body {
    font-size: 0.78rem;
  }

  /* Section 008: allow metrics bar to wrap */
  .about-metric-label {
    white-space: normal;
    text-align: center;
    max-width: 5rem;
  }

  .about-visual-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .about-metric-divider {
    display: none;
  }

}

@media (max-width: 740px) {
  .hero-standalone {
    padding: 0 6vw;
  }

  .hero-heading {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
    line-height: 1.0;
  }

  .hero-tagline {
    font-size: 0.9rem;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .site-header { padding: 1.2rem 5vw; }

  .hero-standalone {
    padding: 0 5vw;
    justify-content: center;
  }

  .hero-inner {
    padding-top: 5rem;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
  }

  .hero-heading {
    font-size: clamp(1.9rem, 10vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero-heading .word {
    display: block;
    white-space: nowrap;
  }

  .hero-tagline {
    font-size: 0.85rem;
    line-height: 1.65;
    max-width: 100%;
  }

  .hero-tagline br { display: none; }

  .hero-label {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .stat-number {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }

  .stat-suffix {
    font-size: 0.85rem;
  }

  .section-inner {
    padding: 1.5rem 1rem;
    padding-left: 1rem;
  }

  .align-right .section-inner {
    padding-left: 1rem;
    padding-right: 0;
  }

  /* Final step-down for narrowest screens */
  .section-heading {
    font-size: clamp(1.25rem, 5.5vw, 1.9rem);
  }

  .static-heading {
    font-size: clamp(1.35rem, 5.5vw, 2.1rem);
  }

  .industries-section .static-heading {
    font-size: clamp(1.2rem, 5vw, 1.9rem);
  }

  .process-section .static-heading {
    font-size: clamp(1.2rem, 5vw, 1.9rem);
  }

  .process-section.products-contact-section .static-heading {
    font-size: clamp(2.2rem, 10vw, 3.5rem);
  }

  .process-step-title {
    font-size: 0.95rem;
  }

  .process-step-body {
    font-size: 0.73rem;
  }

  .cta-buttons { display: none; }
}

/* ============================================================
   STATIC SECTIONS — below video scroll zone
   ============================================================ */

.static-section {
  position: relative;
  z-index: 30;
  background: var(--bg);
  padding: 8rem 12vw;
  overflow: hidden;
}

.static-inner {
  margin-bottom: 4rem;
  max-width: 480px;
}

.static-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 1.4rem;
}

.static-body {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 560px;
}

/* ── Industries ─────────────────────────────────────────────── */
.industries-section {
  background: #fff;
  position: relative;
}

/* Smoke background blobs — soft light colours on white */
.smoke-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.smoke-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}

.smoke-blob--1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(69, 116, 235, 0.09) 0%, transparent 70%);
  top: -20%;
  left: -10%;
  animation: smokeDrift1 14s ease-in-out infinite alternate;
}

.smoke-blob--2 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(100,130,240,0.06) 0%, transparent 70%);
  top: 30%;
  right: -8%;
  animation: smokeDrift2 18s ease-in-out infinite alternate;
}

.smoke-blob--3 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(27,79,216,0.07) 0%, transparent 70%);
  bottom: -15%;
  left: 25%;
  animation: smokeDrift3 16s ease-in-out infinite alternate;
}

.smoke-blob--4 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(232,166,0,0.06) 0%, transparent 70%);
  top: 5%;
  right: 25%;
  animation: smokeDrift4 20s ease-in-out infinite alternate;
}

.smoke-blob--5 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(180,200,255,0.08) 0%, transparent 70%);
  bottom: 10%;
  right: 10%;
  animation: smokeDrift1 22s ease-in-out infinite alternate-reverse;
}

@keyframes smokeDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(70px, 50px) scale(1.18); }
}
@keyframes smokeDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-55px, 35px) scale(1.12); }
}
@keyframes smokeDrift3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(45px, -55px) scale(1.1); }
}
@keyframes smokeDrift4 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-35px, -30px) scale(1.22); }
}

/* Content sits above smoke */
.industries-content {
  position: relative;
  z-index: 1;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.07);
}

/* Light glass cards on white background */
.industry-card {
  background: rgba(255, 255, 255, 0.548);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: none;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
  overflow: hidden;
  transition: background 0.35s ease;
}

.industry-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 100%;
  height: 2px;
  background: var(--accent-blue);
  transition: right 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.industry-card:hover {
  background: rgba(255,255,255,0.92);
}
.industry-card:hover::after { right: 0; }

.industry-num {
  font-family: var(--font-display);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-blue);
}

.industry-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.industry-desc {
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* ── Process ────────────────────────────────────────────────── */
.process-section {
  background: #0d0d0d;
}

.process-section .section-label {
  color: var(--accent-yellow);
}

.process-section .static-heading {
  color: #fff;
}

.process-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8vw;
  align-items: start;
}

.process-header {
  position: sticky;
  top: 8rem;
}

.process-steps {
  display: flex;
  flex-direction: column;
}

.process-step {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.3s ease;
}

.process-step:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.process-step:hover {
  border-top-color: rgba(27, 79, 216, 0.4);
}

.process-step-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(255,255,255,0.08);
  line-height: 1;
  padding-top: 0.2rem;
  transition: color 0.35s ease;
}

.process-step:hover .process-step-num {
  color: var(--accent-blue);
}

.process-step-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.8rem;
  line-height: 1.2;
}

.process-step-body {
  font-size: 0.87rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255,255,255,0.45);
}

/* ── Portfolio ───────────────────────────────────────────────── */
.portfolio-section {
  background: var(--bg);
}

.portfolio-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.portfolio-all-link {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-blue);
  text-decoration: none;
  transition: opacity 0.2s;
  padding-bottom: 0.25rem;
}

.portfolio-all-link:hover { opacity: 0.65; }

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1.55fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: border-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.portfolio-card:hover {
  border-color: rgba(27, 79, 216, 0.25);
}

.portfolio-card-img {
  height: 260px;
  position: relative;
  overflow: hidden;
}

.portfolio-card--featured .portfolio-card-img {
  height: 360px;
}

/* Styled image placeholders — industrial blueprint aesthetic */
.pci--1 {
  background: linear-gradient(145deg, #e8ebf4 0%, #cdd4ec 100%);
}

.pci--2 {
  background: linear-gradient(145deg, #e2e8ec 0%, #c6d0d8 100%);
}

.pci--3 {
  background: linear-gradient(145deg, #ece8e2 0%, #d8cebc 100%);
}

.pci--1::before, .pci--2::before, .pci--3::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(27,79,216,0.04) 28px, rgba(27,79,216,0.04) 29px),
    repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(27,79,216,0.04) 28px, rgba(27,79,216,0.04) 29px);
}

.portfolio-card-info {
  padding: 1.8rem 1.8rem 2rem;
  border-top: 1px solid var(--border);
}

.portfolio-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent-blue);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.portfolio-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.portfolio-card-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* ── About ───────────────────────────────────────────────────── */
.about-section {
  background: var(--bg-subtle);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: center;
}

.about-visual {
  position: relative;
}

.about-img-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(145deg, #dce0ec 0%, #c4ccdf 50%, #b8c2d8 100%);
  position: relative;
  overflow: hidden;
}

.about-img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 18px,
      rgba(27, 79, 216, 0.035) 18px,
      rgba(27, 79, 216, 0.035) 19px
    );
}

.about-img-placeholder::after {
  content: 'JP MACHINERY';
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(27, 79, 216, 0.3);
  white-space: nowrap;
}

.about-visual-inner {
  position: absolute;
  bottom: -2rem;
  left: 2rem;
  right: -2rem;
  background: var(--text-primary);
  padding: 1.8rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1.5rem;
  z-index: 2;
}

.about-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}

.about-metric-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.about-metric-label {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  white-space: nowrap;
}

.about-metric-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.about-content {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.about-content .section-label { margin-bottom: 1.4rem; }

.about-body-2 {
  margin-top: 1rem;
}

.about-cta {
  margin-top: 2rem;
  display: inline-flex;
}

/* ── Testimonials ───────────────────────────────────────────── */
.testimonials-section {
  background: var(--bg);
  padding-left: 0;
  padding-right: 0;
}

.testimonials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 8vw 3rem;
  gap: 2rem;
}

.testimonials-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.test-pill {
  display: inline-block;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: rgba(27, 79, 216, 0.1);
  color: var(--accent-blue);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.test-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-blue) 0%, rgba(27, 79, 216, 0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
  margin: 0;
}

.test-divider {
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-blue), rgba(27, 79, 216, 0.35));
  border-radius: 2px;
  margin-top: 1.25rem;
}

.test-arrows {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.test-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.test-arrow:hover:not(:disabled) {
  border-color: var(--accent-blue);
  background: var(--accent-blue-light);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(27, 79, 216, 0.15);
}

.test-arrow:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  transform: none;
}

.test-arrow svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-primary);
  transition: stroke 0.2s ease;
}

.test-arrow:hover:not(:disabled) svg {
  stroke: var(--accent-blue);
}

.testimonials-viewport {
  overflow: hidden;
  padding: 0.25rem 8vw 2rem;
}

.testimonials-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  align-items: stretch;
}

.testimonial-card {
  flex-shrink: 0;
  padding: 2rem 2rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(27, 79, 216, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.testimonial-card:hover {
  box-shadow: 0 10px 32px rgba(27, 79, 216, 0.12);
  transform: translateY(-4px);
  border-color: rgba(27, 79, 216, 0.2);
}

.test-quote-mark {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 54px;
  height: 54px;
  color: var(--accent-blue);
  opacity: 0.09;
  pointer-events: none;
}

.testimonial-quote {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
  padding-top: 0.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: auto;
}

.testimonial-initials {
  width: 40px;
  height: 40px;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--accent-blue-light);
}

.testimonial-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

.testimonial-role {
  display: block;
  font-size: 0.71rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.test-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.25rem;
}

.test-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}

.test-dot.active {
  background: var(--accent-blue);
  transform: scale(1.3);
}

/* ── Partners ───────────────────────────────────────────────── */
.partners-section {
  background: var(--bg-subtle);
  padding-top: 5rem;
  padding-bottom: 5rem;
  overflow: hidden;
}

.partners-label,
.glass-world .partners-label {
  text-align: center;
  display: block;
  margin-bottom: 2.5rem;
  color: #fff !important;
}


/* ── Clients marquee ────────────────────────────────────────── */
.clients-section {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-bottom: 7rem;
  overflow: hidden;
}

.clients-header {
  margin-bottom: 4rem;
}

.clients-header .section-label { margin-bottom: 1.2rem; }
.clients-header .static-heading { margin-bottom: 1rem; }

.clients-marquee-stage {
  position: relative;
  overflow: hidden;
}


.clients-marquee-row {
  overflow: hidden;
  padding: 0;
  border-top: 1px solid var(--border);
}

.clients-marquee-row:last-of-type {
  border-bottom: 1px solid var(--border);
}

.clients-marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
}

.clients-track--left {
  animation: clientsLeft 20s linear infinite;
}

.clients-track--right {
  animation: clientsRight 20s linear infinite;
}

@keyframes clientsLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes clientsRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Pause on hover for readability */
.clients-marquee-stage:hover .clients-marquee-track {
  animation-play-state: paused;
}

.client-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.4rem 2.8rem;
  border-right: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
  cursor: default;
}

.client-item:hover {
  color: var(--accent-blue);
  background: var(--accent-blue-light);
}

.client-item em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  transition: color 0.2s;
}

.client-item:hover em {
  color: var(--accent-blue);
  opacity: 0.7;
}

/* ── Testimonials: mobile layout ─────────────────────────────── */
@media (max-width: 767px) {
  .testimonials-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 2rem;
  }

  /* Remove side padding so clientWidth matches visible width,
     keeping card widths computed by JS exactly full-screen */
  .testimonials-viewport {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── Contact ────────────────────────────────────────────────── */
.contact-section {
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 8vw;
  align-items: start;
}

.contact-left {
  display: flex;
  flex-direction: column;
}

.contact-left .section-label { margin-bottom: 1.2rem; }
.contact-left .static-heading { margin-bottom: 1.2rem; }
.contact-left .static-body { margin-bottom: 2.5rem; }

.contact-details {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--border);
}

.contact-detail:last-child {
  border-bottom: 1px solid var(--border);
}

.contact-detail-label {
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 500;
}

.contact-detail-value {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 400;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.form-input {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 0.82rem 1rem;
  outline: none;
  border-radius: 2px;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.form-input:focus {
  border-color: var(--accent-blue);
  background: #fff;
}

.form-input::placeholder {
  color: var(--text-muted);
  font-weight: 300;
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-body);
  line-height: 1.6;
}

.form-submit-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.form-submit {
  cursor: pointer;
  font-family: var(--font-body);
  border: 1px solid var(--text-primary);
  padding: 0.88rem 2.2rem;
  font-size: 0.8rem;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.form-submit:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

.form-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.form-success {
  font-size: 0.82rem;
  color: var(--accent-blue);
  letter-spacing: 0.05em;
  min-height: 1.2rem;
}

/* ============================================================
   RESPONSIVE — static sections
   ============================================================ */

@media (max-width: 1100px) {
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
  }
  .portfolio-grid .portfolio-card:last-child {
    display: none;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 4rem;
  }
}

@media (max-width: 900px) {
  .static-section {
    padding: 6rem 5vw;
    overflow-x: hidden;
  }

  .industries-grid {
    grid-template-columns: 1fr 1fr;
  }

  .process-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .process-header {
    position: static;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid .portfolio-card:last-child {
    display: flex;
  }

  .portfolio-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .about-section {
    grid-template-columns: 1fr;
    gap: 6rem;
  }

  .about-visual-inner {
    position: absolute;
    bottom: -4rem;
    left: 1rem;
    right: 1rem;
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
}

@media (max-width: 600px) {
  .static-section {
    padding: 5rem 5vw;
    overflow-x: hidden;
  }

  .industries-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    align-items: center;
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
  }

  .about-visual-inner {
    padding: 1.4rem;
    gap: 1rem;
  }

  .form-submit-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Process step numbers always glow on mobile (no hover needed) */
  .process-step-num,
  .glass-world .process-step-num {
    color: var(--accent-blue) !important;
  }
}

/* ============================================================
   GLASS WORLD — Frosted / Liquid Glass Theme (Sections 005–010)
   Apple liquid glass light mode: silver-white backdrop, frosted
   translucent panels with white specular highlights.
   ============================================================ */

.glass-world {
  position: relative;
  z-index: 31;
  background: #f4f8ff;
}

/* Very faint blue mist */
.glass-world::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 40% at 15% 20%,  rgba(27,  79, 216, 0.05) 0%, transparent 100%),
    radial-gradient(ellipse 50% 45% at 88% 75%,  rgba(60, 100, 240, 0.04) 0%, transparent 100%),
    radial-gradient(ellipse 60% 35% at 50% 55%,  rgba(80, 130, 255, 0.03) 0%, transparent 100%);
}

/* ── Dotted surface underlay ───────────────────────────────── */
/* Absolute overlay inside .industries-section — fills the section
   and stays below content via z-index. Canvas is injected by JS. */
.dotted-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.dotted-bg canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── Section bases ─────────────────────────────────────────── */
.glass-world .static-section {
  background: transparent;
  border-top: 1px solid rgba(180, 210, 255, 0.30);
}

.glass-world .industries-section {
  background: #f8fcff;
}

.glass-world .portfolio-section,
.glass-world .testimonials-section,
.glass-world .contact-section {
  background: #f8fcff;
}

.glass-world .clients-section {
  background: transparent;
}

.glass-world .process-section {
  background:
    radial-gradient(ellipse 70% 55% at 15% 20%,  rgba(27,  79, 216, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 55% 60% at 88% 85%,  rgba(100, 50, 200, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 55% 55%,  rgba(0,  120, 200, 0.10) 0%, transparent 60%),
    #07091c;
  backdrop-filter: blur(0px);
}

.glass-world .about-section {
  background: #f8fcff;
}

.glass-world .partners-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,  rgba(27,  79, 216, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at  5% 80%,  rgba(100, 50, 200, 0.12) 0%, transparent 60%),
    #07091c;
}

/* ── Typography — dark text on light glass ─────────────────── */
.glass-world .section-label {
  color: var(--accent-blue);
}

.glass-world .static-heading {
  color: var(--text-primary);
}

.glass-world .static-body {
  color: var(--text-secondary);
}

/* Process section (006) — dark mode */
.glass-world .process-section .section-label {
  color: var(--accent-yellow);
}
.glass-world .process-section .static-heading {
  color: #fff;
}

/* ── Smoke blobs — barely-there blue mist ───────────────────── */
.glass-world .smoke-blob--1 {
  background: radial-gradient(circle, rgba(27,  79, 216, 0.04) 0%, transparent 70%);
}
.glass-world .smoke-blob--2 {
  background: radial-gradient(circle, rgba(60, 100, 240, 0.03) 0%, transparent 70%);
}
.glass-world .smoke-blob--3 {
  background: radial-gradient(circle, rgba(27,  79, 216, 0.04) 0%, transparent 70%);
}
.glass-world .smoke-blob--4 {
  background: radial-gradient(circle, rgba(80, 130, 255, 0.03) 0%, transparent 70%);
}
.glass-world .smoke-blob--5 {
  background: radial-gradient(circle, rgba(40, 100, 230, 0.03) 0%, transparent 70%);
}

/* ── Industries grid & cards ───────────────────────────────── */
.glass-world .industries-grid {
  background: rgba(180, 210, 255, 0.18);
  gap: 1px;
}

.glass-world .industry-card {
  background: #ffffff;
  backdrop-filter: blur(36px) saturate(1.4);
  -webkit-backdrop-filter: blur(36px) saturate(1.4);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 20px rgba(27, 79, 216, 0.05);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.glass-world .industry-card:hover {
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 28px rgba(27, 79, 216, 0.09);
}

.glass-world .industry-card::after {
  background: var(--accent-blue);
}

.glass-world .industry-num   { color: var(--accent-blue); }
.glass-world .industry-title { color: var(--text-primary); }
.glass-world .industry-desc  { color: var(--text-secondary); }

/* ── Process steps (dark) ──────────────────────────────────── */
.glass-world .process-step {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.glass-world .process-step:last-child {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.glass-world .process-step:hover {
  border-top-color: rgba(27, 79, 216, 0.45);
}
.glass-world .process-step-num {
  color: rgba(255, 255, 255, 0.06);
}
.glass-world .process-step:hover .process-step-num {
  color: var(--accent-blue);
}
.glass-world .process-step-title { color: #fff; }
.glass-world .process-step-body  { color: rgba(255, 255, 255, 0.45); }

/* ── 3D Card Stacking — Portfolio (007) & About (008) ─────── */
.glass-world .portfolio-section,
.glass-world .about-section {
  position: sticky;
  top: 0;
  border-radius: 28px 28px 0 0;
  border-top: none;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.90),
    0 -24px 50px rgba(27, 79, 216, 0.06),
    0  10px 36px rgba(27, 79, 216, 0.04);
  transform-origin: top center;
  will-change: transform;
  overflow: hidden;
  z-index: 2;
}

.glass-world .about-section {
  z-index: 3;
}

/* ── Portfolio ─────────────────────────────────────────────── */
.glass-world .portfolio-card {
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(32px) saturate(1.3);
  -webkit-backdrop-filter: blur(32px) saturate(1.3);
  border-color: rgba(255, 255, 255, 0.90);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 6px 28px rgba(27, 79, 216, 0.05);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-world .portfolio-card:hover {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(180, 210, 255, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 12px 36px rgba(27, 79, 216, 0.08);
}

.glass-world .portfolio-card-info {
  border-top-color: rgba(180, 210, 255, 0.22);
  background: rgba(245, 250, 255, 0.55);
}

.glass-world .portfolio-tag        { color: var(--accent-blue); }
.glass-world .portfolio-card-title { color: var(--text-primary); }
.glass-world .portfolio-card-meta  { color: var(--text-muted); }
.glass-world .portfolio-all-link   { color: var(--accent-blue); }
.glass-world .portfolio-all-link:hover { opacity: 0.70; }

.glass-world .pci--1 {
  background: url('../Box%20pasting/BOX%20PASTING%20MACHINE%201.jpeg') center/cover no-repeat, linear-gradient(145deg, #e8ebf4 0%, #cdd4ec 100%);
}
.glass-world .pci--2 {
  background: url('../pvc%20compounding/pvc%20compounding%20new.png') center/cover no-repeat, linear-gradient(145deg, #e2e8ec 0%, #c6d0d8 100%);
}
.glass-world .pci--3 {
  background: url('../extruder%20LINE/Extruder%20line%20new.png') center/contain no-repeat;
  background-color: #ffffff;
}
.glass-world .pci--1::before,
.glass-world .pci--2::before,
.glass-world .pci--3::before {
  display: none;
}
@media (max-width: 900px) {
  .glass-world .portfolio-card-img {
    height: 200px;
  }
  .glass-world .portfolio-card--featured .portfolio-card-img {
    height: 200px;
  }
}

/* ── About ─────────────────────────────────────────────────── */
.glass-world .about-img-placeholder {
  background: url('../JP%20MACHINERY%20BUILDING.png') center/cover no-repeat, linear-gradient(145deg, #dce0ec 0%, #c4ccdf 50%, #b8c2d8 100%);
}
.glass-world .about-img-placeholder::before {
  display: none;
}
.glass-world .about-img-placeholder::after {
  display: none;
}

.glass-world .about-visual-inner {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(36px) saturate(1.4);
  -webkit-backdrop-filter: blur(36px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 32px rgba(27, 79, 216, 0.06);
}

.glass-world .about-metric-num    { color: #ffffff; }
.glass-world .about-metric-label  { color: #ffffff; }
.glass-world .about-metric-divider{ background: rgba(180, 210, 255, 0.35); }

/* ── Clients ───────────────────────────────────────────────── */
/* ── Clients (009) — dark mode ─────────────────────────────── */
.glass-world .clients-section {
  background:
    radial-gradient(ellipse 65% 50% at 80% 15%,  rgba(27,  79, 216, 0.25) 0%, transparent 62%),
    radial-gradient(ellipse 55% 65% at 10% 90%,  rgba(100, 50, 200, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 45% 40% at 50% 50%,  rgba(0,  140, 210, 0.08) 0%, transparent 60%),
    #07091c;
  border-top-color: rgba(255, 255, 255, 0.07);
}
.glass-world .clients-section .section-label { color: var(--accent-blue); }
.glass-world .clients-section .static-heading { color: #fff; }
.glass-world .clients-section .static-body { color: rgba(255, 255, 255, 0.50); }
.glass-world .clients-marquee-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.glass-world .clients-marquee-row:last-of-type {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.glass-world .client-item {
  color: rgba(255, 255, 255, 0.75);
  border-right-color: rgba(255, 255, 255, 0.08);
}
.glass-world .client-item em {
  color: rgba(255, 255, 255, 0.35);
}
.glass-world .client-item:hover {
  color: #fff;
  background: rgba(27, 79, 216, 0.18);
}
.glass-world .client-item:hover em {
  color: rgba(160, 190, 255, 0.75);
  opacity: 1;
}

/* ── Testimonials ──────────────────────────────────────────── */
.glass-world .test-pill {
  background: rgba(200, 220, 255, 0.35);
  color: var(--text-secondary);
}
.glass-world .test-heading {
  background: linear-gradient(135deg, #1a2a4a 0%, rgba(27, 79, 216, 0.50) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.glass-world .test-divider {
  background: linear-gradient(90deg, rgba(27, 79, 216, 0.16), rgba(27, 79, 216, 0.03));
}

.glass-world .test-arrow {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(180, 210, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 10px rgba(27, 79, 216, 0.05);
}
.glass-world .test-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(27, 79, 216, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 16px rgba(27, 79, 216, 0.08);
}
.glass-world .test-arrow svg { stroke: var(--text-primary); }
.glass-world .test-arrow:hover:not(:disabled) svg { stroke: var(--text-primary); }

.glass-world .testimonial-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(36px) saturate(1.4);
  -webkit-backdrop-filter: blur(36px) saturate(1.4);
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 24px rgba(27, 79, 216, 0.05);
}
.glass-world .testimonial-card:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(180, 210, 255, 0.40);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 12px 36px rgba(27, 79, 216, 0.08);
}
.glass-world .test-quote-mark      { color: rgba(27, 79, 216, 0.14); opacity: 1; }
.glass-world .testimonial-quote    { color: var(--text-secondary); }
.glass-world .testimonial-author   { border-top-color: rgba(180, 210, 255, 0.25); }
.glass-world .testimonial-initials {
  background: rgba(200, 220, 255, 0.40);
  color: var(--accent-blue);
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(180, 210, 255, 0.25);
}
.glass-world .testimonial-name { color: var(--text-primary); }
.glass-world .testimonial-role { color: var(--text-muted); }

.glass-world .test-dot        { background: rgba(27, 79, 216, 0.14); }
.glass-world .test-dot.active { background: rgba(27, 79, 216, 0.55); }


/* ── Contact ───────────────────────────────────────────────── */
.glass-world .contact-section {
  border-top-color: rgba(180, 210, 255, 0.28);
}
.glass-world .contact-detail {
  border-top-color: rgba(180, 210, 255, 0.22);
}
.glass-world .contact-detail:last-child {
  border-bottom-color: rgba(180, 210, 255, 0.22);
}
.glass-world .contact-detail-label { color: var(--text-muted); }
.glass-world .contact-detail-value { color: var(--text-primary); }

.glass-world .form-label { color: var(--text-muted); }

.glass-world .form-input {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(180, 210, 255, 0.38);
  color: var(--text-primary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.glass-world .form-input:focus {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--accent-blue);
}
.glass-world .form-input::placeholder {
  color: var(--text-muted);
}
.glass-world .form-note { color: var(--text-muted); }

/* ── CTA buttons on light glass ────────────────────────────── */
.glass-world .cta-primary {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: #fff;
  backdrop-filter: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.glass-world .cta-primary:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

.glass-world .form-submit {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--text-primary);
  color: var(--text-primary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}
.glass-world .form-submit:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

/* ===================== IPAD PORTRAIT ONLY =====================
   Scoped to iPad portrait widths specifically (not phones, not
   landscape, not desktop) via min-width + orientation so it can't
   affect anything outside that range. Tightens the hero's vertical
   whitespace and shortens the scroll distance before the video
   finishes revealing, without touching mobile/desktop pacing. Placed
   last so it wins the cascade over the max-width:900px block above.

   #scroll-container needs to exceed one viewport height by a real
   margin — the ScrollTrigger scrub runs from "container top hits
   viewport top" to "container bottom hits viewport bottom", so at
   exactly 100vh those two points land on almost the same scroll
   position and the frame progression collapses to an instant jump to
   the last frame (looked like a frozen picture) instead of scrubbing.

   600vh here pairs with js/app.js's getMobileVideoPortion() returning
   0.16 (instead of the default 0.30) for this same width/orientation
   range: scrollable distance is ~500vh (600vh minus one viewport), so
   the video gets ~80vh of scroll and each of the 6 .scroll-section
   cards gets ~70vh — short video, but each card still gets close to a
   full screen of scroll instead of flashing past in ~17vh. */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-standalone {
    height: 82vh;
  }

  #scroll-container {
    height: 600vh;
  }

  /* Industries section: .static-inner's 480px cap (a desktop typographic
     choice, keeping the heading from stretching too wide on a big screen)
     leaves a large empty gap on the right on iPad portrait, where the
     text block isn't sharing a row with anything — the heading has room
     to use the full section width instead. .static-body keeps its own
     560px cap so the paragraph doesn't get uncomfortably wide. */
  .industries-section .static-inner {
    max-width: none;
  }

  /* Process section: the max-width:900px rule already stacks this to a
     single column, but iPad Pro 12.9" portrait is 1024px wide — above
     that breakpoint — so it was still getting the 2-column desktop grid
     (1fr 2fr) with the numbered steps squeezed into the narrow right
     column. Same single-column treatment, extended to the full iPad
     portrait range. */
  .process-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .process-header {
    position: static;
  }

  /* About section: same 1024-vs-900 gap as Process above. The
     max-width:900px rule already stacks the image above the content
     and lets the metrics bar wrap (dropping dividers) so all 3 stats
     fit, but iPad Pro 12.9" portrait (1024px) is above that
     breakpoint, so it was still getting the 2-column desktop grid —
     squeezing the image into a half-width column — and the
     unwrapped metrics row, whose 3rd stat overflowed past the
     section's overflow:hidden and got clipped. Same treatment,
     extended to the full iPad portrait range. */
  .about-section {
    grid-template-columns: 1fr;
    gap: 6rem;
  }

  .about-visual-inner {
    position: absolute;
    bottom: -4rem;
    left: 1rem;
    right: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 3.5rem;
  }

  .about-metric-label {
    white-space: normal;
    text-align: center;
    max-width: 5rem;
  }

  .about-metric-divider {
    display: none;
  }
}

/* ===================== IPAD PRO 12.9" PORTRAIT — PORTFOLIO ONLY =====================
   Scoped to just the 901-1024px portrait gap (not the whole iPad
   portrait range above): at max-width:900px, the portfolio grid
   already correctly stacks to a single column showing all 3 cards, so
   that narrower-iPad behavior is left alone. But iPad Pro 12.9"
   portrait (1024px) sits above that breakpoint and was instead hitting
   the max-width:1100px rule (2 columns, 3rd card hidden) meant for
   in-between desktop widths.

   A single column was tried first, but at nearly full card width
   `background-size: cover` no longer needs to crop the photo's width
   to fill the frame — it only crops top/bottom — so the whitespace
   baked into the product photos (e.g. the Box Pasting Machine shot)
   stayed fully visible on the sides instead of being cropped away.
   Keeping a 2-column grid (like the working <=900px layout) forces
   `cover` to crop the excess width too, so photos actually fill their
   frames.

   The 3rd card spans the full width of its own row (grid-column: 1 /
   -1) instead of leaving an empty cell next to it. At that width the
   fixed 260px image height is far shorter than the row is wide, so
   `cover` was forced to crop almost all the way down to a thin
   horizontal strip — chopping the top/bottom off the product photo
   instead of showing the whole machine. Swapping to `aspect-ratio: 4
   / 3` with `height: auto` sizes the image to match the product
   photos' actual proportions (all shot close to 4:3), so `cover` no
   longer needs to crop vertically — and for any wider photo (e.g. the
   1.8:1 Box Pasting Machine shot, which has visible white margin on
   both sides) the now-taller frame forces `cover` to crop the width
   instead, cutting away that margin rather than displaying it. Order-
   independent: works whichever card ends up last. */
@media (min-width: 901px) and (max-width: 1024px) and (orientation: portrait) {
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-grid .portfolio-card:last-child {
    display: flex;
    grid-column: 1 / -1;
  }

  .portfolio-grid .portfolio-card:last-child .portfolio-card-img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ===================== IPAD LANDSCAPE — PROCESS SECTION ONLY =====================
   Same fix as the portrait block above, mirrored for iPad landscape widths.
   Landscape width alone would also match ordinary desktop/laptop browser
   windows (unlike portrait, which essentially no desktop window matches),
   so this stays iPad-only via `html.is-touch-device` instead — a class
   set in js/nav.js via navigator.maxTouchPoints, confirmed reliable via
   on-device diagnostic (an earlier attempt using the `pointer`/`hover`
   media features directly was scrapped over a suspected iPadOS quirk,
   but device testing showed both actually reporting correctly here —
   the class-based check was kept regardless since it's already proven
   working end to end).
   Upper bound widened from 1366px to 1400px — an actual iPad Pro
   landscape width measured at 1373px via on-device diagnostic, 7px past
   the 1366px this was originally scoped to (based on the older 12.9"
   spec), so the rule never matched at all on that device.
   Other landscape issues are intentionally out of scope for now — this
   only covers the Process section per explicit request. */
@media (min-width: 1024px) and (max-width: 1400px) and (orientation: landscape) {
  html.is-touch-device .process-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  html.is-touch-device .process-header {
    position: static;
  }

  /* About section: the metrics bar doesn't wrap outside the
     max-width:900px rule, so in landscape the narrower half-width
     .about-visual column doesn't leave enough room for all 3 stats
     plus their dividers — the 3rd stat overflows past the section's
     overflow:hidden and gets clipped. Wrapping (the portrait fix)
     got all 3 to fit but pushed the 3rd onto its own line, which
     looked broken given how much narrower this column is than the
     full-width portrait one. Instead: drop the dividers, shrink the
     type and padding, and let each label wrap onto 2 lines within a
     narrower column — enough to fit all 3 side by side on one line
     even in the narrowest iPad landscape width (1024px) in range. */
  html.is-touch-device .about-visual-inner {
    left: 1rem;
    right: 1rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 1.4rem 1.1rem;
  }

  html.is-touch-device .about-metric-num {
    font-size: 1.4rem;
  }

  html.is-touch-device .about-metric-label {
    white-space: normal;
    text-align: center;
    max-width: 4rem;
    font-size: 0.52rem;
  }

  html.is-touch-device .about-metric-divider {
    display: none;
  }

  /* Portfolio section: the non-featured cards' 1fr grid columns are
     narrower/more square (~1.07:1) than the 4:3 product photos, so
     `cover` has to crop a meaningful chunk off both left and right
     edges to fill the frame — cutting off parts of the machine (e.g.
     the compounding line's end flanges) right at the card border.
     Sizing these images with aspect-ratio:4/3 instead of the fixed
     260px height matches the photos' actual proportions, so `cover`
     no longer needs to crop the width — whichever product ends up in
     a non-featured slot shows uncropped. */
  html.is-touch-device .portfolio-card:not(.portfolio-card--featured) .portfolio-card-img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ===================== MOBILE SCROLL CARDS =====================
   Placed last so it wins the cascade over the IPAD PORTRAIT block above,
   which pins #scroll-container to a fixed 600vh across 700–1024px portrait.
   At ≤900px — exactly where js/app.js takes its mobile path — the container
   instead sizes to its content: the cards are ordinary flow elements that
   scroll up over the fixed video canvas, so there's nothing to position and
   no height to reserve for reveals. Above 900px that iPad rule still stands,
   because those widths run the desktop path, which does need a tall fixed
   container to place its absolutely-positioned cards against.

   padding-top is the video's scroll runway and the single source of truth for
   its pacing: js/app.js reads it back in measureMobileVideoPortion() and paces
   the frames so the video lands on its final frame exactly as the first card
   reaches the bottom of the screen. Raise it to slow the video down, lower it
   to speed it up — the JS follows automatically.

   padding-bottom keeps the last card from butting straight into the static
   sections below it. */
@media (max-width: 900px) {
  #scroll-container {
    height: auto;
    padding-top: 360vh;
    padding-bottom: 60vh;
  }

  /* Roughly one card on screen at a time. 100vh is the exact threshold — at
     that gap a card's bottom edge reaches the top of the screen precisely as
     the next card's top edge touches the bottom edge, so they never share the
     screen. Every 10vh below that overlaps them by another tenth of a screen:
     at 70vh a leaving card still has roughly its top third on screen as the
     next arrives, so the two briefly share the screen and the rhythm is brisk.
     Raise toward 100vh for a cleaner hand-off, lower for more overlap.

     Applied as margin-top on adjacent siblings rather than margin-bottom on
     every card, so the gap stays strictly between cards: the last card leaves
     no trailing margin to double up with the container's padding-bottom (nor
     to collapse out through it). .section-breather is display:none below, so
     it generates no box and its margin never applies. */
  .scroll-section + .scroll-section {
    margin-top: 70vh;
  }

  /* Empty spacer that only the desktop path uses */
  .section-breather {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Small phones scroll a shorter page overall, so trim the runway slightly to
     keep the video from dragging before the first card arrives. The video's
     scroll distance works out to (padding-top − 100vh) regardless of how tall
     the cards are, so 340vh gives it ~240vh of scroll against the ~180vh it had
     when the container was a fixed 700vh at 30% — roughly a third slower. */
  #scroll-container {
    padding-top: 340vh;
  }
}