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

/* ============================================================
   DARK MODE — NEON / FLUORESCENCE OVERRIDE
   ============================================================ */
:root.dark {
  --black:         #080d10;
  --black-2:       #0b1318;
  --card:          #0d1a20;
  --border:        rgba(0,255,200,.12);
  --amber:         #00ffe0;
  --amber-dim:     rgba(0,255,200,.10);
  --amber-glow:    rgba(0,255,200,.06);
  --shadow-soft:   0 14px 34px rgba(0,0,0,.55);
  --shadow-strong: 0 18px 44px rgba(0,255,200,.18);
  --steel:         #091518;
  --white:         #e0fff8;
  --white-dim:     rgba(180,255,235,.65);
  --white-faint:   rgba(180,255,235,.18);
  --peacock:       #ff00aa;
  --mint:          #061014;
  --text-muted:    rgba(180,255,235,.35);

  /* neon accent palette — used throughout */
  --neon-cyan:     #00ffe0;
  --neon-pink:     #ff00aa;
  --neon-blue:     #006bff;
  --neon-green:    #39ff14;
  --neon-yellow:   #ffe600;
}

:root.dark body {
  background: linear-gradient(180deg, #060b0e 0%, #080d10 40%, #050a0d 100%);
}
:root.dark body::before {
  background:
    radial-gradient(480px circle at var(--glow-x) var(--glow-y), rgba(0,255,200,.07), transparent 30%),
    radial-gradient(640px circle at 10% 15%, rgba(255,0,170,.05), transparent 32%);
  mix-blend-mode: screen;
  opacity: 1;
}

/* Nav scrolled in dark */
:root.dark nav.scrolled, :root.dark nav.chips-visible {
  background: rgba(6,12,15,.95);
  border-bottom: 1px solid rgba(0,255,200,.12);
}

/* Neon glow on amber-coloured elements */
:root.dark .ticker         { background: #000; }
:root.dark .ticker-item    { color: var(--neon-cyan); text-shadow: 0 0 12px var(--neon-cyan), 0 0 28px rgba(0,255,200,.4); }
:root.dark .ticker-item::after { opacity: .5; color: var(--neon-pink); }

:root.dark .btn-primary {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
  box-shadow: 0 0 24px rgba(0,255,200,.22), 0 0 48px rgba(255,0,170,.12);
  color: #000;
}
:root.dark .btn-primary:hover {
  box-shadow: 0 0 36px rgba(0,255,200,.38), 0 0 80px rgba(255,0,170,.22);
}

:root.dark .btn-secondary {
  border-color: rgba(0,255,200,.35);
  color: var(--neon-cyan);
}
:root.dark .btn-secondary:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 18px rgba(0,255,200,.2);
}

:root.dark .section-label        { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0,255,200,.5); }
:root.dark .section-label::before { background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); }
:root.dark .section-title em { -webkit-text-stroke: 1px rgba(0,255,200,.6); }

:root.dark .ht-accent       { color: var(--neon-cyan); text-shadow: 0 0 20px rgba(0,255,200,.5); }
:root.dark .ht-outline       { -webkit-text-stroke: 1.5px rgba(0,255,200,.35); }

:root.dark .nav-cta {
  background: var(--neon-cyan) !important;
  color: #000 !important;
  box-shadow: 0 0 18px rgba(0,255,200,.4) !important;
}

:root.dark .hero-grid-bg {
  background-image:
    linear-gradient(rgba(0,255,200,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,200,.05) 1px, transparent 1px);
}

:root.dark .hero-gradient {
  background:
    radial-gradient(ellipse 60% 55% at 75% 45%, rgba(0,255,200,.10) 0%, rgba(255,0,170,.04) 38%, transparent 66%),
    radial-gradient(ellipse 40% 46% at 16% 16%, rgba(0,107,255,.08) 0%, transparent 52%);
}

:root.dark .cap-card::before    { background: linear-gradient(180deg, var(--neon-cyan), var(--neon-pink)); }
:root.dark .cap-badge           { background: rgba(0,255,200,.08); border-color: rgba(0,255,200,.2); color: var(--neon-cyan); }

:root.dark .industry-card::after { background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); }
:root.dark .industry-icon        { color: var(--neon-cyan); filter: drop-shadow(0 0 4px var(--neon-cyan)); }

:root.dark .process-step::before { background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); }
:root.dark .step-index           { color: rgba(0,255,200,.12); }
:root.dark .process-step:hover .step-index { color: rgba(0,255,200,.08); }

:root.dark .material-bar-fill    { background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); box-shadow: 0 0 8px rgba(0,255,200,.4); }
:root.dark .material-swatch      { border-color: rgba(0,255,200,.15); }
:root.dark .mat-pla    { background: linear-gradient(135deg, rgba(0,255,200,.1) 0%, rgba(0,107,255,.08) 100%); }
:root.dark .mat-abs    { background: repeating-linear-gradient(45deg, rgba(0,255,200,.06) 0px, rgba(0,255,200,.06) 2px, rgba(255,0,170,.04) 2px, rgba(255,0,170,.04) 10px); }
:root.dark .mat-resin  { background: linear-gradient(135deg, rgba(0,107,255,.2) 0%, rgba(255,0,170,.2) 100%); }
:root.dark .mat-tpu    { background: repeating-radial-gradient(circle at 50% 50%, rgba(0,255,200,.08) 0px, rgba(0,255,200,.08) 4px, transparent 4px, transparent 12px); }
:root.dark .mat-composite { background: repeating-linear-gradient(-45deg, rgba(0,107,255,.08) 0px, rgba(0,107,255,.08) 2px, rgba(255,0,170,.06) 2px, rgba(255,0,170,.06) 8px); }
:root.dark .mat-petg {
  background:
    linear-gradient(120deg, transparent 30%, rgba(0,255,200,.35) 45%, transparent 60%),
    linear-gradient(135deg, rgba(0,107,255,.18) 0%, rgba(0,255,200,.1) 100%);
}
:root.dark .mat-hips {
  background-image: radial-gradient(rgba(0,255,200,.16) 1.4px, transparent 1.4px);
  background-size: 9px 9px;
  background-color: rgba(0,107,255,.06);
}
:root.dark .mat-pla-cf {
  background:
    repeating-linear-gradient(45deg, rgba(0,255,200,.1) 0px, rgba(0,255,200,.1) 2px, transparent 2px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(255,0,170,.08) 0px, rgba(255,0,170,.08) 2px, transparent 2px, transparent 6px),
    linear-gradient(135deg, rgba(0,107,255,.1) 0%, rgba(0,255,200,.06) 100%);
}
:root.dark .mat-cf-abs {
  background:
    repeating-linear-gradient(45deg, rgba(0,255,200,.16) 0px, rgba(0,255,200,.16) 1.5px, transparent 1.5px, transparent 5px),
    repeating-linear-gradient(-45deg, rgba(255,0,170,.14) 0px, rgba(255,0,170,.14) 1.5px, transparent 1.5px, transparent 5px),
    linear-gradient(135deg, rgba(0,107,255,.14) 0%, rgba(0,255,200,.08) 100%);
}
:root.dark .mat-nylon {
  background: linear-gradient(135deg, rgba(0,255,200,.14) 0%, rgba(0,107,255,.12) 55%, rgba(255,0,170,.08) 100%);
}

:root.dark .tl-year    { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0,255,200,.5); }
:root.dark .tl-item::before { background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }
:root.dark .timeline   { border-left-color: rgba(0,255,200,.2); }

:root.dark .client-card { background: var(--card); border-color: rgba(0,255,200,.1); }
:root.dark .client-card:hover { border-color: rgba(0,255,200,.35); box-shadow: 0 0 32px rgba(0,255,200,.1); }
:root.dark .card-accent { background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); }
:root.dark .card-tag    { background: rgba(0,255,200,.08); border-color: rgba(0,255,200,.2); color: var(--neon-cyan); }
:root.dark .card-tag::before { background: var(--neon-cyan); }

/* Dark theme: the logo backing stays dark (matching the card) so
   transparent-background logos blend in rather than sitting on a
   mismatched light patch. Unlike light mode, logos here stay in full
   color at rest — a permanent grayscale pass on a dark neon card
   reads as murky rather than premium, so only the hover lift remains. */
:root.dark .card-img-wrap img { filter: none; }
:root.dark .client-card:hover .card-img-wrap img { filter: none; transform: scale(1.06); }

:root.dark .client-carousel { background: #080d10; }
:root.dark .carousel-wrapper::before { background: linear-gradient(to right, #080d10 0%, transparent 100%); }
:root.dark .carousel-wrapper::after  { background: linear-gradient(to left,  #080d10 0%, transparent 100%); }


:root.dark .case-card { border-color: rgba(0,255,200,.1); }
:root.dark .case-card:hover { border-color: rgba(0,255,200,.3); box-shadow: 0 22px 50px rgba(0,255,200,.08); }
:root.dark .case-industry { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0,255,200,.4); }

:root.dark .hstat-print-layers { background-image: repeating-linear-gradient(180deg, rgba(0,255,200,.15) 0px, rgba(0,255,200,.15) 3px, transparent 3px, transparent 9px); }
:root.dark .hstat-print-head-body { background: rgba(0,255,200,.25); }
:root.dark .hstat-print-nozzle    { background: var(--neon-pink); }
:root.dark .hstat-print-nozzle::after { background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }
:root.dark .hstat-print-bg { background: linear-gradient(180deg, var(--card) 0%, #051014 100%); }

:root.dark .form-input  { background: rgba(0,255,200,.04); border-color: rgba(0,255,200,.15); color: var(--white); }
:root.dark .form-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(0,255,200,.1); }
:root.dark select.form-input { background-color: #0d1a20 !important; color: #e0fff8 !important; border-color: rgba(0,255,200,.15); color-scheme: dark; }
:root.dark select.form-input option { background-color: #0d1a20; color: #e0fff8; }
:root.dark select.form-input option:checked { background-color: rgba(0,255,200,.18); color: #00ffe0; }
:root.dark .upload-zone { border-color: rgba(0,255,200,.2); }
:root.dark .upload-zone:hover, :root.dark .upload-zone.dragover { border-color: var(--neon-cyan); background: rgba(0,255,200,.04); box-shadow: 0 0 24px rgba(0,255,200,.08); }
:root.dark .upload-icon { color: var(--neon-cyan); filter: drop-shadow(0 0 4px var(--neon-cyan)); }
:root.dark .file-item   { background: rgba(0,255,200,.08); color: var(--neon-cyan); }

:root.dark .info-block  { border-left-color: var(--neon-cyan); box-shadow: -2px 0 12px rgba(0,255,200,.15); }

:root.dark footer        { background: #060b0d; border-top-color: rgba(0,255,200,.1); }
:root.dark .footer-heading { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0,255,200,.4); }
:root.dark .footer-links a:hover { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0,255,200,.5); }
:root.dark .social-link:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); background: rgba(0,255,200,.06); box-shadow: 0 0 12px rgba(0,255,200,.2); }
:root.dark .footer-map  { border-color: rgba(0,255,200,.12); box-shadow: 0 0 24px rgba(0,255,200,.06); }

:root.dark .cursor       { background: var(--neon-cyan); box-shadow: 0 0 12px var(--neon-cyan); }
:root.dark .cursor-ring  { border-color: var(--neon-cyan); box-shadow: 0 0 8px rgba(0,255,200,.3); }

:root.dark .nav-logo-mark { border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0,255,200,.25); }
:root.dark .nav-logo-mark::before { background: var(--neon-cyan); }
:root.dark .nav-logo-img { filter: invert(1) hue-rotate(160deg) brightness(1.2); }
:root.dark .about-logo   { filter: invert(1) hue-rotate(160deg) brightness(1.2); }

:root.dark .lb-spinner { border-color: rgba(0,255,200,.2); border-top-color: var(--neon-cyan); }
:root.dark .lightbox-panel { background: rgba(8,13,16,.97); border-color: rgba(0,255,200,.15); }
:root.dark .lightbox-header { background: rgba(8,13,16,.95); border-bottom-color: rgba(0,255,200,.12); }
:root.dark .lightbox-close:hover { background: rgba(0,255,200,.08); border-color: var(--neon-cyan); color: var(--neon-cyan); }
:root.dark .lb-nav { background: #0d1a20; border-color: rgba(0,255,200,.2); }
:root.dark .lb-nav:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 16px rgba(0,255,200,.2); }
:root.dark .lb-back { background: rgba(0,255,200,.06); border-color: rgba(0,255,200,.2); }
:root.dark .lb-back:hover { color: var(--neon-cyan); background: rgba(0,255,200,.1); border-color: var(--neon-cyan); }

:root.dark .img-lightbox-close:hover { background: rgba(0,255,200,.08); border-color: var(--neon-cyan); color: var(--neon-cyan); }

:root.dark .process-step { background: var(--card); }

:root.dark .wa-float { box-shadow: 0 6px 24px rgba(37,211,102,.3); }
:root.dark .wa-float:hover { box-shadow: 0 10px 36px rgba(37,211,102,.45); }

:root {
  --black:         #eff5f7;
  --black-2:       #f5f8fa;
  --card:          #ffffff;
  --border:        #dbe5ea;
  --amber:         #1560bd;
  --amber-dim:     rgba(37, 200, 217, 0.14);
  --amber-glow:    rgba(37, 200, 217, 0.08);
  --shadow-soft:   0 14px 34px rgba(15, 23, 42, 0.08);
  --shadow-strong: 0 18px 44px rgba(14, 165, 177, 0.16);
  --steel:         #dff6fb;
  --white:         #17313b;
  --white-dim:     rgba(23, 49, 59, 0.72);
  --white-faint:   rgba(23, 49, 59, 0.18);
  --peacock:       #0ea5b1;
  --mint:          #e8fbfe;
  --text-muted:    rgba(23, 49, 59, 0.68);

  --mono:    'JetBrains Mono', monospace;
  --display: 'Barlow Condensed', sans-serif;
  --body:    'Inter', sans-serif;

  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-14: 112px;
  --sp-18: 144px;

  --page-pad:  clamp(24px, 5vw, 80px);
  --radius:    16px;
  --radius-sm: 8px;

  --glow-x: 50%;
  --glow-y: 50%;
}

html { scroll-behavior: smooth; }

body {
  background: linear-gradient(180deg, #ffffff 0%, var(--black) 40%, #edf2f5 100%);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed; inset: -20%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(480px circle at var(--glow-x) var(--glow-y), rgba(37,200,217,.09), transparent 30%),
    radial-gradient(640px circle at 10% 15%, rgba(14,165,177,.07), transparent 32%);
  filter: blur(12px);
  mix-blend-mode: screen;
  opacity: .75;
}
body > * { position: relative; z-index: 1; }

img { display: block; max-width: 100%; height: auto; }
.lightbox-trigger { cursor: zoom-in; }

a, button, input, select, textarea { outline: none; }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

section { scroll-margin-top: 88px; }

::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 2px; }


/* ============================================================
   CURSOR
   ============================================================ */
.cursor {
  width: 10px; height: 10px;
  background: var(--amber);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  will-change: transform;
  transform: translate(-50%, -50%);
  transition: width .15s ease, height .15s ease, background .15s ease, opacity .15s ease;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--amber);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  will-change: transform;
  transform: translate(-50%, -50%);
  opacity: .45;
  transition: width .15s ease, height .15s ease, opacity .15s ease;
}
.cursor.hover      { width: 18px; height: 18px; }
.cursor-ring.hover { width: 58px; height: 58px; opacity: .22; }


/* ============================================================
   NAV
   ============================================================ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; flex-direction: column;
  transition: background .35s, backdrop-filter .35s;
}
.nav-row-main {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--page-pad);
  transition: padding .35s;
}
nav.scrolled, nav.chips-visible {
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(15,23,42,.06);
}
nav.scrolled .nav-row-main { padding: 13px var(--page-pad); }

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--white);
}
.nav-logo-img { width: 90px; height: auto; display: block; transition: filter .35s ease; }
.nav-logo-mark {
  width: 28px; height: 28px;
  border: 2px solid var(--amber);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.nav-logo-mark::before {
  content: '';
  position: absolute; width: 100%; height: 2px;
  background: var(--amber);
  animation: scanline 2.2s linear infinite;
}
@keyframes scanline {
  0%   { transform: translateY(-18px); }
  100% { transform: translateY(36px); }
}

.nav-links {
  display: flex; align-items: center; gap: var(--sp-6);
  list-style: none;
}
.nav-links a {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--white-dim);
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--amber);
  transition: width .28s;
}
.nav-links a:hover        { color: var(--white); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  background: var(--amber) !important;
  color: #fff !important;
  font-family: var(--display) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  padding: 9px 22px;
  transition: opacity .2s, transform .2s !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover  { opacity: .88 !important; transform: translateY(-1px) !important; }

.nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none;
  cursor: pointer; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--white);
  transition: transform .25s, opacity .25s;
}

.nav-drawer {
  position: fixed; top: 0; right: 0;
  width: min(300px, 85vw); height: 100vh; height: 100dvh;
  background: var(--card);
  border-left: 1px solid var(--border);
  z-index: 300;
  padding: 80px var(--sp-6) var(--sp-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(15,23,42,.12);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer ul   { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.drawer-link {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
  text-decoration: none;
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s, padding-left .2s;
}
.drawer-link:hover       { color: var(--amber); padding-left: 8px; }
.drawer-cta              { color: var(--amber) !important; border-bottom: none !important; }


/* ============================================================
   TRUST RIBBON — "Showcased With" strip beneath the hero
   ============================================================ */
.trust-ribbon {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 18px var(--page-pad);
}
.trust-ribbon-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.trust-ribbon-label {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); white-space: nowrap;
}
.trust-ribbon-items {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; flex: 1;
}
.trust-item {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; padding: 4px 0;
}
.trust-item-title {
  font-family: var(--display); font-size: .95rem; font-weight: 600;
  letter-spacing: .01em; color: var(--white);
  transition: color .2s;
}
.trust-item:hover .trust-item-title { color: var(--amber); }
.trust-item-sub {
  font-size: .72rem; color: var(--white-dim);
}
.trust-item-divider {
  width: 1px; height: 28px; background: var(--border); flex-shrink: 0;
}
@media (max-width: 900px) {
  .trust-ribbon-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .trust-item-divider { display: none; }
  .trust-ribbon-items { gap: 14px; }
}


/* ============================================================
   NAV ROW — CHIPS — sticky section wayfinding, lives inside
   the single <nav> element (second internal row, not a
   separate floating bar) so scrolling only ever shows one
   header, which simply grows a row rather than stacking two.
   ============================================================ */
.nav-row-chips {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease, padding .3s ease;
}
nav.chips-visible .nav-row-chips {
  max-height: 60px; opacity: 1; padding: 0 0 10px;
  border-top: 1px solid var(--border);
}
nav.chips-visible.scrolled .nav-row-chips { border-top-color: var(--border); padding-top: 10px; }
.chip-nav-track {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--page-pad); max-width: 1400px; margin: 0 auto;
}
.chip-nav-track::-webkit-scrollbar { display: none; }
.chip-link {
  flex-shrink: 0;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--white-dim); text-decoration: none;
  padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--border);
  transition: color .2s, border-color .2s, background .2s;
  white-space: nowrap;
}
.chip-link:hover, .chip-link.active {
  color: var(--white); border-color: var(--amber);
  background: var(--amber-dim);
}
.chip-link--cta {
  background: var(--amber) !important; color: #fff !important;
  border-color: var(--amber) !important; font-weight: 700;
}


/* ============================================================
   STICKY BOTTOM CTA BAR — mobile
   ============================================================ */
.sticky-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 250;
  background: var(--card); border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(15,23,42,.08);
  padding: 10px var(--sp-3);
  gap: 10px;
}
:root.dark .sticky-cta-bar { box-shadow: 0 -8px 24px rgba(0,0,0,.5); }
.sticky-cta-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-size: .85rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 12px 10px; border-radius: var(--radius-sm);
  text-decoration: none;
}
.sticky-cta-wa {
  background: #25D366; color: #fff !important;
}
.sticky-cta-quote {
  background: var(--amber); color: #fff !important;
}
@media (max-width: 680px) and (orientation: portrait) {
  .sticky-cta-bar { display: flex; }
  body { padding-bottom: 62px; }
}


/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float {
  position: fixed; bottom: 2rem; left: 2rem;
  width: 52px; height: 52px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 150;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(37,211,102,.4);
  transition: transform .25s, box-shadow .25s, opacity .4s;
  opacity: 0; transform: translateY(20px);
}
.wa-float.visible { opacity: 1; transform: translateY(0); }
.wa-float:hover   { transform: scale(1.1); box-shadow: 0 10px 32px rgba(37,211,102,.55); }
.wa-float svg     { width: 25px; height: 25px; fill: white; }

/* Portrait: the sticky WhatsApp/Get Quote bar sits at the bottom of
   the screen and the floating round icon would overlap/hide behind
   it, so keep only the sticky bar visible.
   Landscape: there's no sticky bar competing for the same space, so
   the floating icon is shown. */
@media (orientation: portrait) {
  .wa-float { display: none; }
}
@media (orientation: landscape) {
  .wa-float { display: flex; }
}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--amber), var(--peacock));
  color: #fff;
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 15px 32px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .22s, box-shadow .22s;
}
.btn-primary::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: rgba(255,255,255,.14);
  transform: skewX(-18deg);
  transition: left .3s;
}
.btn-primary:hover::before { left: 120%; }
.btn-primary:hover  { transform: translateY(-2px); box-shadow: var(--shadow-strong); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-full { width: 100%; justify-content: center; font-size: .95rem; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border);
  color: var(--white);
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 15px 32px;
  text-decoration: none;
  background: none;
  transition: border-color .22s, color .22s, transform .22s, box-shadow .22s;
}
.btn-secondary:hover {
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px var(--page-pad) var(--sp-10);
  position: relative; overflow: hidden;
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(37,200,217,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,200,217,.07) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero-gradient {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 75% 45%, rgba(37,200,217,.16) 0%, rgba(37,200,217,.04) 38%, transparent 66%),
    radial-gradient(ellipse 40% 46% at 16% 16%, rgba(14,165,177,.10) 0%, transparent 52%);
}

.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  /* Right column is a fluid clamp, not a hard px value — this is what
     keeps the stats panel from ever being squeezed/overlapped as the
     viewport narrows. It only truly stacks at the .hero-inner { 1fr }
     breakpoint below; up to that point it just gently shrinks. */
  grid-template-columns: minmax(0, 1fr) clamp(280px, 27vw, 380px);
  gap: clamp(2.5rem, 5vw, var(--sp-14));
  align-items: center;
  max-width: 1400px;
}

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--sp-3);
}
.eyebrow-line { width: 36px; height: 1px; background: var(--amber); flex-shrink: 0; }

.hero-title {
  font-family: var(--display);
  font-size: clamp(3.8rem, 9vw, 8.5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.ht-solid  { display: block; color: var(--white); }
.ht-outline {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white-dim);
}
.ht-accent { display: block; color: var(--amber); }

.hero-sub {
  font-size: 1.05rem;
  color: var(--white-dim);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: var(--sp-5);
}
.hero-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.hero-right {
  display: flex; flex-direction: column; gap: var(--sp-3);
  /* Pins the panel to the right edge of its own grid track and keeps
     it from stretching wider than the content actually needs, so it
     reads as a distinct, fixed-feeling column rather than something
     that reflows with the paragraph next to it. */
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  /* Sits at its own natural height, vertically centered against the
     taller text column (via .hero-inner's align-items: center) —
     not stretched to match it, which was reading as an elongated,
     oddly tall card with a lot of empty space inside it. */
  align-self: center;
}

.hero-stats-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, var(--sp-4));
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.hstat, .hstat-divider { position: relative; z-index: 1; }
.hstat {
  padding: clamp(.85rem, 2vw, var(--sp-3)) 0;
  min-width: 0; /* lets long numbers/labels shrink instead of forcing overflow */
}
.hstat-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  color: var(--white);
  white-space: nowrap;
}
.hstat-label {
  display: block;
  font-family: var(--mono);
  font-size: clamp(.56rem, 1.2vw, .62rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 4px;
}
.hstat-divider { height: 1px; background: var(--border); flex-shrink: 0; }

/* ── 3D-printing background animation, behind the whole stats panel ── */
.hstat-print-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--card) 0%, var(--mint) 100%);
}
.hstat-print-layers {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  transform: scaleY(.03);
  transform-origin: top;
  background-image: repeating-linear-gradient(
    180deg,
    var(--amber-dim) 0px,
    var(--amber-dim) 3px,
    transparent 3px,
    transparent 9px
  );
  opacity: .55;
  animation: hstatLayersRise 6s linear infinite;
  will-change: transform;
}
.hstat-print-head {
  position: absolute;
  top: 8%;
  left: 6%;
  width: 34px;
  height: 34px;
  animation: hstatHeadTravel 6s linear infinite;
}
.hstat-print-head-body {
  width: 100%;
  height: 22px;
  background: var(--white);
  opacity: .9;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}
.hstat-print-nozzle {
  width: 6px;
  height: 14px;
  margin: 0 auto;
  background: var(--peacock);
  border-radius: 0 0 2px 2px;
  position: relative;
}
.hstat-print-nozzle::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 3px;
  height: 6px;
  background: var(--amber);
  border-radius: 1px;
  transform: translateX(-50%);
  opacity: .85;
  animation: hstatNozzleGlow 1.1s ease-in-out infinite;
}

@keyframes hstatHeadTravel {
  0%   { left: 6%;  top: 8%;  }
  20%  { left: 82%; top: 8%;  }
  25%  { left: 82%; top: 28%; }
  45%  { left: 6%;  top: 28%; }
  50%  { left: 6%;  top: 48%; }
  70%  { left: 82%; top: 48%; }
  75%  { left: 82%; top: 68%; }
  95%  { left: 6%;  top: 68%; }
  100% { left: 6%;  top: 8%;  }
}
@keyframes hstatLayersRise {
  /* Percentages mirror hstatHeadTravel exactly: the fill grows while
     the nozzle sweeps a row (printing it), then holds flat while the
     nozzle drops to the next row (no printing happening), so what's
     "printed" always reflects what the nozzle has actually covered —
     rather than an unrelated rise-and-fall breathing motion. */
  0%   { transform: scaleY(.03); }  /* row 1 sweep starts */
  20%  { transform: scaleY(.27); }  /* row 1 done */
  25%  { transform: scaleY(.27); }  /* holds — nozzle dropping to row 2 */
  45%  { transform: scaleY(.51); }  /* row 2 done */
  50%  { transform: scaleY(.51); }  /* holds — nozzle dropping to row 3 */
  70%  { transform: scaleY(.75); }  /* row 3 done */
  75%  { transform: scaleY(.75); }  /* holds — nozzle dropping to row 4 */
  95%  { transform: scaleY(1); }    /* row 4 done — fully printed */
  100% { transform: scaleY(.03); }  /* new print job — resets exactly as
                                        the nozzle jumps back to the top */
}
@keyframes hstatNozzleGlow {
  0%, 100% { opacity: .4;  transform: translateX(-50%) scaleY(1);   }
  50%      { opacity: .95; transform: translateX(-50%) scaleY(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .hstat-print-layers, .hstat-print-head, .hstat-print-nozzle::after {
    animation: none;
  }
}
/* Paused by JS (IntersectionObserver) once the panel scrolls out of
   view, so these infinite animations aren't burning frames on a part
   of the page the visitor can no longer see. */
.hstat-print-bg.anim-paused .hstat-print-layers,
.hstat-print-bg.anim-paused .hstat-print-head,
.hstat-print-bg.anim-paused .hstat-print-nozzle::after {
  animation-play-state: paused;
}

/* ── TRUSTED BY — full-bleed single-line auto-scrolling logo marquee ── */
.hero-client-belt {
  margin-top: clamp(2rem, 4vw, 2.6rem);
  padding-top: clamp(1.4rem, 3vw, 1.8rem);
  /* Break out of the hero's side padding so the strip runs truly
     edge-to-edge, independent of how wide the viewport is. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.hcb-label {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: clamp(1.2rem, 2.5vw, 1.6rem);
}
.hcb-label-line { width: 28px; height: 1px; background: var(--amber); flex-shrink: 0; }

.hcb-track-wrap {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hcb-track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  animation: hcbScroll 34s linear infinite;
}
.hcb-track-wrap:hover .hcb-track { animation-play-state: paused; }

.hcb-item {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  /* No border, no card background — logos float free on the page,
     separated only by soft shadow/glow. */
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .16));
  transition: filter .3s ease, transform .3s ease;
}
.hcb-item:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 22px rgba(21, 96, 189, .32))
          drop-shadow(0 0 18px rgba(21, 96, 189, .22));
}
.hcb-item img {
  height: clamp(56px, 6vw, 84px);
  width: auto;
  max-width: none;
  object-fit: contain;
}
:root.dark .hcb-item { filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
:root.dark .hcb-item:hover {
  filter: drop-shadow(0 0 20px rgba(0,255,200,.35))
          drop-shadow(0 0 40px rgba(255,0,170,.18));
}

@keyframes hcbScroll {
  /* Ticker below scrolls 0 → -50% (right-to-left). This flows the
     opposite way — left-to-right — by animating the reverse. */
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hcb-track { animation: none; }
}

@media (max-width: 900px) {
  .hcb-item img { height: clamp(44px, 8vw, 64px); }
  .hcb-track    { gap: clamp(2rem, 8vw, 3rem); animation-duration: 26s; }
}
@media (max-width: 480px) {
  .hcb-item img { height: 40px; }
  .hcb-track    { gap: 1.75rem; animation-duration: 20s; }
}

.hero-spec-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.spec-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: .8rem;
}
.spec-line:last-child { border-bottom: none; }
.spec-k { color: var(--white-dim); }
.spec-v  { font-family: var(--mono); font-size: .72rem; color: var(--amber); font-weight: 500; }

.hero-3d-printer {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(37,200,217,.08) 0%, rgba(14,165,177,.04) 100%);
  border: 1px solid rgba(37,200,217,.2);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.hero-3d-printer:hover {
  transform: translateY(-2px);
  border-color: rgba(37,200,217,.4);
  box-shadow: 0 8px 24px rgba(37,200,217,.12);
}
.hero-printer-svg {
  width: 140px;
  height: 180px;
  color: var(--amber);
  filter: drop-shadow(0 4px 8px rgba(37,200,217,.12));
}


/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  background: var(--amber);
  padding: 11px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex; gap: 0;
  animation: ticker 32s linear infinite;
}
.ticker-item {
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  padding: 0 2.5rem;
  display: inline-flex; align-items: center; gap: 1.5rem;
}
.ticker-item::after { content: '//'; opacity: .4; }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ============================================================
   SECTION SHARED
   ============================================================ */
.section {
  padding: clamp(72px, 10vw, 120px) var(--page-pad);
}
.section-head {
  margin-bottom: var(--sp-8);
  max-width: 680px;
}
.section-label {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--amber);
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  display: flex; align-items: center; gap: 12px;
}
.section-label::before { content: ''; width: 28px; height: 1px; background: var(--amber); }
.section-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .93;
  letter-spacing: -.01em;
}
.section-title em {
  font-style: normal;
  -webkit-text-stroke: 1px var(--white-dim);
  color: transparent;
}


/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries { background: var(--black-2); }

.industries-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.industry-card {
  background: var(--card);
  padding: var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: background .22s, transform .22s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--rd, 0s);
}
.industry-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--peacock));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s;
}
.industry-card:hover              { background: rgba(37,200,217,.04); }
.industry-card:hover::after       { transform: scaleX(1); }
.industry-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
  background: rgba(37,200,217,.06);
}
.industry-name {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--white);
}
.industry-icon {
  color: var(--amber);
  opacity: .85;
  display: flex;
  width: 22px;
  height: 22px;
}


/* ============================================================
   CAPABILITIES
   ============================================================ */
.capabilities { background: var(--black); }

.cap-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.cap-matrix {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cap-row {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
  transition: background .2s;
}
.cap-row:last-child    { border-bottom: none; }
.cap-row:hover         { background: rgba(37,200,217,.04); }
.cap-row--header       { background: var(--amber-glow); }
.cap-row--header:hover { background: var(--amber-glow); }

.cap-cell {
  padding: 1.1rem 1.4rem;
  font-size: .85rem;
  border-right: 1px solid var(--border);
}
.cap-cell:last-child { border-right: none; }
.cap-row--header .cap-cell {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--amber);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}
.cap-name { font-weight: 600; color: var(--white); }
.cap-tech { color: var(--white-dim); font-family: var(--mono); font-size: .73rem; }

.cap-highlights { display: flex; flex-direction: column; gap: var(--sp-3); }
.cap-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
  transition-delay: var(--rd, 0s);
}
.cap-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--amber), var(--peacock));
}
.cap-card:hover {
  transform: translateX(4px);
  border-color: rgba(37,200,217,.35);
  box-shadow: var(--shadow-soft);
}
.cap-card h4 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.cap-card p   { color: var(--white-dim); font-size: .84rem; line-height: 1.65; }
.cap-badge {
  display: inline-flex;
  background: var(--amber-dim);
  border: 1px solid rgba(37,200,217,.25);
  padding: 5px 13px;
  margin-top: var(--sp-2);
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--amber);
  letter-spacing: .1em;
  border-radius: var(--radius-sm);
}
.cap-card--formats .formats-list {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--white-dim);
  letter-spacing: .06em;
  margin-top: var(--sp-1);
}


/* ============================================================
   PROCESS
   ============================================================ */
.process { background: var(--black-2); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.process-step {
  padding: var(--sp-5) var(--sp-4);
  border-right: 1px solid var(--border);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: background .25s;
  transition-delay: var(--rd, 0s);
}
.process-step:last-child { border-right: none; }
.process-step::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--peacock));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s;
}
.process-step:hover           { background: rgba(37,200,217,.03); }
.process-step:hover::before   { transform: scaleX(1); }

.step-index {
  font-family: var(--display);
  font-size: 5.5rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(37,200,217,.18);
  margin-bottom: var(--sp-3);
  transition: color .3s;
}
.process-step:hover .step-index { color: rgba(37,200,217,.12); }

.step-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.step-title {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--white);
}
.step-desc  { color: var(--white-dim); font-size: .83rem; line-height: 1.65; flex: 1; }
.step-tags  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--sp-2); }
.tag {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--amber);
  background: var(--amber-dim);
  padding: 4px 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
}

.step-icon {
  width: 100px;
  height: 100px;
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: transform .3s, opacity .3s;
}
.process-step:hover .step-icon {
  transform: scale(1.08) translateY(-4px);
  opacity: 1;
}
.process-step-svg {
  width: 100%;
  height: 100%;
  color: var(--amber);
  filter: drop-shadow(0 2px 4px rgba(37,200,217,.08));
}


/* ============================================================
   CASE STUDIES & PROJECTS
   ============================================================ */
.projects { background: var(--black); }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.case-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
  transition-delay: var(--rd, 0s);
}
.case-card:hover {
  transform: translateY(-6px);
  border-color: rgba(14,165,177,.35);
  box-shadow: 0 22px 50px rgba(14,165,177,.14);
}
.case-thumb {
  width: 100%; height: 220px;
  overflow: hidden; flex-shrink: 0;
}
.case-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .5s ease;
}
.case-card:hover .case-thumb img { transform: scale(1.04); }

.case-thumb img[src*="WhatsApp Image 2026-06-22"] {
  object-position: center 15%;
}

.case-body {
  display: flex; flex-direction: column;
  flex: 1; padding: var(--sp-4);
  gap: 10px;
}
.case-industry {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}
.case-title {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.12;
  color: var(--white);
}
.case-desc {
  color: var(--white-dim);
  font-size: .83rem;
  line-height: 1.7;
  flex-grow: 1;
}
.case-meta {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  list-style: none;
}
.meta-pair { display: flex; flex-direction: column; gap: 3px; }
.meta-pair dt {
  font-family: var(--mono);
  font-size: .57rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--white-faint);
}
.meta-pair dd {
  font-family: var(--mono);
  font-size: .71rem;
  color: var(--white-dim);
  margin: 0;
}

.see-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

.btn-see-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white-dim);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 14px 36px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: border-color .25s, color .25s, background .25s, transform .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.btn-see-more::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(37,200,217,.06), rgba(14,165,177,.06));
  opacity: 0;
  transition: opacity .25s;
}
.btn-see-more:hover {
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(21,96,189,.12);
}
.btn-see-more:hover::before { opacity: 1; }
.btn-see-more svg { opacity: .65; transition: opacity .25s; }
.btn-see-more:hover svg { opacity: 1; }

.see-more-count {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid rgba(37,200,217,.25);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .1em;
  display: none;
}
.see-more-count.visible { display: inline; }


/* ============================================================
   LIGHTBOX OVERLAY (FIXED RESPONSIBLE GRID MATRIX)
   ============================================================ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.lightbox-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 26, 0.72);
  backdrop-filter: blur(18px) saturate(0.6);
  -webkit-backdrop-filter: blur(18px) saturate(0.6);
}

.lightbox-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  height: 90vh;
  max-height: 90vh;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 100px rgba(10,20,26,.3), 0 0 0 1px rgba(255,255,255,.5);
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
.lightbox-overlay.open .lightbox-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: rgba(255,255,255,.9);
}
.lightbox-title-group { display: flex; align-items: center; gap: 12px; }
.lightbox-label {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
}
.lightbox-label::before {
  content: '';
  display: inline-block;
  width: 16px; height: 1px;
  background: var(--amber);
  vertical-align: middle;
  margin-right: 8px;
}
.lightbox-total {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--white-dim);
  letter-spacing: .1em;
  background: var(--black);
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.lightbox-close {
  width: 36px; height: 36px;
  background: var(--black);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--white-dim);
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}
.lightbox-close:hover {
  background: rgba(21,96,189,.1);
  border-color: var(--amber);
  color: var(--amber);
}

/* 
   THE STACK FIX: Changed template to clean responsive columns 
   with an absolute 1.5rem gap to keep bounding containers separated.
*/
#lightboxGrid.lightbox-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: 180px;
  align-content: start;
  gap: 1rem;
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  opacity: 1;
  transition: opacity .15s ease;
}
#lightboxGrid.lightbox-grid.hidden {
  display: none !important;
  opacity: 0;
}
.lightbox-grid::-webkit-scrollbar       { width: 4px; }
.lightbox-grid::-webkit-scrollbar-track { background: var(--black); }
.lightbox-grid::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 2px; }

/* 
   THE FLICKER FIX: Absolute positions stripped out completely. 
   Dimensions are bound strictly to the grid cell space.
*/
#lightboxGrid .lb-thumb {
  position: relative !important;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--black);
  will-change: transform;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.lb-thumb:hover {
  border-color: var(--peacock);
  box-shadow: var(--shadow-soft);
}
.lb-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21,96,189,.15), transparent 70%);
  opacity: 0;
  z-index: 2;
  transition: opacity .25s ease;
}
.lb-thumb:hover::after { opacity: 1; }

/* Zoom animation occurs only to asset layer away from cursor layout boundary */
.lb-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform .3s cubic-bezier(.25, .46, .45, .94);
}
.lb-thumb:hover img { transform: scale(1.05); }

.lb-thumb-img-loading { opacity: 0; }
.lb-thumb::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,.03) 30%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.03) 70%);
  background-size: 200% 100%;
  animation: lb-shimmer 1.3s ease-in-out infinite;
  z-index: 0;
}
.lb-thumb.lb-thumb-loaded::before { display: none; }
@keyframes lb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Lightbox Image Viewer Component */
.lightbox-viewer {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  position: relative;
  padding: 56px 20px 20px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .15s ease;
}
.lightbox-viewer.active { display: flex; opacity: 1; }
.lb-img-wrap {
  flex: 1;
  min-height: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; overflow: hidden;
}
.lb-full-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  box-shadow: 0 12px 40px rgba(10,20,26,.15);
  transition: opacity .12s ease;
}
.lb-full-img.loading { opacity: .4; }
.lb-caption {
  font-family: var(--mono);
  font-size: .64rem;
  color: var(--white-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 12px;
  text-align: center;
  flex-shrink: 0;
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--white);
  transition: border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease;
  z-index: 2;
}
.lb-nav:hover {
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: 0 4px 16px rgba(21,96,189,.15);
  transform: translateY(-50%) scale(1.1);
}
.lb-nav--prev { left: 8px; }
.lb-nav--next { right: 8px; }

.lb-back {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--white-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
  z-index: 3;
}
.lb-back:hover {
  color: var(--amber);
  background: var(--amber-dim);
  border-color: var(--amber);
  box-shadow: 0 4px 16px rgba(21,96,189,.08);
}

.lb-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: var(--sp-8) 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  grid-column: 1 / -1;
}
.lb-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(14,165,177,.2);
  border-top-color: var(--peacock);
  border-radius: 50%;
  animation: lb-spin .7s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

.lb-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: var(--sp-8) var(--sp-4);
  text-align: center; flex: 1;
  color: var(--white-dim);
}
.lb-empty-icon  { opacity: .35; color: var(--amber); }
.lb-empty-title { font-family: var(--display); font-size: 1.4rem; font-weight: 800; text-transform: uppercase; color: var(--white); }
.lb-empty-sub   { font-size: .82rem; line-height: 1.6; max-width: 320px; color: var(--white-dim); }
.lb-empty-path  { font-family: var(--mono); font-size: .68rem; color: var(--amber); background: var(--amber-dim); border: 1px solid rgba(37,200,217,.25); padding: 8px 16px; border-radius: var(--radius-sm); letter-spacing: .1em; }


/* ============================================================
   SINGLE-IMAGE ZOOM LIGHTBOX
   ============================================================ */
img.zoomable { cursor: zoom-in; }

.img-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.img-lightbox.open { opacity: 1; pointer-events: all; }
.img-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 20, 26, 0.72);
  backdrop-filter: blur(18px) saturate(0.6);
  -webkit-backdrop-filter: blur(18px) saturate(0.6);
}
.img-lightbox-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-width: min(92vw, 1100px); max-height: 90vh;
  opacity: 0; transform: translateY(16px) scale(.98);
  transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
.img-lightbox.open .img-lightbox-stage { opacity: 1; transform: translateY(0) scale(1); }
.img-lightbox-full {
  max-width: 100%; max-height: 90vh;
  width: auto; height: auto;
  object-fit: contain; border-radius: 12px; display: block;
  box-shadow: 0 40px 100px rgba(10,20,26,.3), 0 0 0 1px rgba(255,255,255,.12);
}
.img-lightbox-close {
  position: absolute; top: -16px; right: -16px;
  width: 36px; height: 36px;
  background: var(--card); border: 1px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--white-dim);
  transition: background .2s, color .2s, border-color .2s;
  z-index: 2;
}
.img-lightbox-close:hover {
  background: rgba(21,96,189,.1);
  border-color: var(--amber);
  color: var(--amber);
}

@media (max-width: 640px) { .img-lightbox-close { top: -14px; right: 0; } }


/* ============================================================
   MATERIALS
   ============================================================ */
.materials { background: var(--black-2); }
.materials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.material-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
  transition-delay: var(--rd, 0s);
}
.material-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(14,165,177,.12);
  border-color: rgba(37,200,217,.35);
}
.material-swatch { width: 100%; height: 72px; border-radius: var(--radius-sm); margin-bottom: var(--sp-1); border: 1px solid rgba(14,165,177,.12); }
.mat-pla { background: linear-gradient(135deg, rgba(37,200,217,.15) 0%, rgba(21,96,189,.12) 50%, rgba(14,165,177,.08) 100%); }
.mat-abs { background: repeating-linear-gradient(45deg, rgba(37,200,217,.08) 0px, rgba(37,200,217,.08) 2px, rgba(14,165,177,.04) 2px, rgba(14,165,177,.04) 10px); }
.mat-resin { background: linear-gradient(135deg, rgba(14,165,177,.25) 0%, rgba(21,96,189,.35) 100%); }
.mat-tpu { background: repeating-radial-gradient(circle at 50% 50%, rgba(37,200,217,.1) 0px, rgba(37,200,217,.1) 4px, transparent 4px, transparent 12px); }
.mat-composite { background: repeating-linear-gradient(-45deg, rgba(21,96,189,.1) 0px, rgba(21,96,189,.1) 2px, rgba(14,165,177,.06) 2px, rgba(14,165,177,.06) 8px); }

/* Extended filament textures */
.mat-petg {
  background:
    linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%),
    linear-gradient(135deg, rgba(14,165,177,.22) 0%, rgba(21,96,189,.14) 100%);
}
.mat-hips {
  background-image: radial-gradient(rgba(21,96,189,.18) 1.4px, transparent 1.4px);
  background-size: 9px 9px;
  background-color: rgba(14,165,177,.08);
}
.mat-pla-cf {
  background:
    repeating-linear-gradient(45deg, rgba(15,23,42,.16) 0px, rgba(15,23,42,.16) 2px, transparent 2px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(21,96,189,.14) 0px, rgba(21,96,189,.14) 2px, transparent 2px, transparent 6px),
    linear-gradient(135deg, rgba(14,165,177,.12) 0%, rgba(21,96,189,.08) 100%);
}
.mat-cf-abs {
  background:
    repeating-linear-gradient(45deg, rgba(15,23,42,.28) 0px, rgba(15,23,42,.28) 1.5px, transparent 1.5px, transparent 5px),
    repeating-linear-gradient(-45deg, rgba(15,23,42,.28) 0px, rgba(15,23,42,.28) 1.5px, transparent 1.5px, transparent 5px),
    linear-gradient(135deg, rgba(21,96,189,.2) 0%, rgba(14,165,177,.14) 100%);
}

.material-swatch { position: relative; overflow: hidden; }
.material-swatch-tag {
  position: absolute; left: 10px; bottom: 8px;
  font-family: var(--mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
  background: rgba(255,255,255,.55);
  padding: 2px 8px; border-radius: 999px;
  backdrop-filter: blur(2px);
}
:root.dark .material-swatch-tag { background: rgba(8,13,16,.55); color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0,255,200,.4); }

.materials-intro { margin-top: var(--sp-2); color: var(--white-dim); font-size: .98rem; line-height: 1.7; max-width: 640px; }
.materials-cta { margin-top: var(--sp-3); }
.mat-nylon {
  background: linear-gradient(135deg, rgba(120,144,156,.22) 0%, rgba(37,200,217,.12) 55%, rgba(21,96,189,.10) 100%);
}
.material-tagline { color: var(--white); font-size: .85rem; font-weight: 600; line-height: 1.4; }
.material-uses { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.material-uses li {
  color: var(--white-dim); font-size: .78rem; line-height: 1.5; padding-left: 14px; position: relative;
}
.material-uses li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber);
}

.material-name { font-family: var(--display); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--white); }
.material-use  { color: var(--white-dim); font-size: .79rem; line-height: 1.5; flex: 1; }
.material-bar-row { display: flex; align-items: center; gap: 10px; margin-top: auto; font-family: var(--mono); font-size: .6rem; color: var(--amber); letter-spacing: .1em; text-transform: uppercase; }
.material-bar { flex: 1; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; }
.material-bar-fill {
  height: 100%; width: var(--w, 0%);
  background: linear-gradient(90deg, var(--amber), var(--peacock));
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.4,0,.2,1);
}
.material-card.visible .material-bar-fill { transform: scaleX(1); }


/* ============================================================
   QUOTE FORM
   ============================================================ */
.quote-section { background: var(--black); border-top: 1px solid var(--border); }
.quote-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
.quote-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-family: var(--mono); font-size: .62rem; color: var(--white-dim); letter-spacing: .16em; text-transform: uppercase; }
.form-input {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--white); font-family: var(--body); font-size: .88rem; padding: 11px 15px; width: 100%;
  transition: border-color .2s, box-shadow .2s; appearance: none;
}
.form-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(21,96,189,.08); }
.form-textarea { resize: vertical; min-height: 110px; font-family: var(--body); }
.form-more { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 15px; }
.form-more-toggle {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  color: var(--amber); letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 0; user-select: none;
}
.form-more-toggle::-webkit-details-marker { display: none; }
.form-more-hint { color: var(--white-dim); text-transform: none; letter-spacing: 0; font-family: var(--body); }
.form-more-body { padding-bottom: var(--sp-3); }
.upload-zone {
  border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--sp-5) var(--sp-4);
  text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: border-color .25s, background .25s;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--amber); background: var(--amber-glow); }
.upload-icon { color: var(--amber); opacity: .75; }
.upload-text { font-size: .84rem; color: var(--white-dim); }
.upload-formats { font-family: var(--mono); font-size: .6rem; color: var(--white-faint); letter-spacing: .1em; }
.file-list { display: flex; flex-direction: column; gap: 4px; }
.file-item { font-family: var(--mono); font-size: .68rem; color: var(--amber); padding: 4px 10px; background: var(--amber-dim); border-radius: 4px; }
.quote-status { font-family: var(--mono); font-size: .72rem; font-weight: 500; min-height: 1.4em; transition: color .2s; }

.quote-info { display: flex; flex-direction: column; gap: var(--sp-4); }
.info-block { border-left: 2px solid var(--amber); padding-left: var(--sp-3); }
.info-block h4 { font-family: var(--display); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.info-block p { color: var(--white-dim); font-size: .83rem; line-height: 1.65; }

.tech-specs { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.spec-heading { font-family: var(--mono); font-size: .62rem; color: var(--amber); letter-spacing: .22em; text-transform: uppercase; padding: 14px var(--sp-4); border-bottom: 1px solid var(--border); background: var(--amber-glow); }
.spec-row { display: flex; justify-content: space-between; align-items: center; padding: 11px var(--sp-4); border-bottom: 1px solid var(--border); font-size: .8rem; }
.spec-row:last-child { border-bottom: none; }
.spec-k { color: var(--white-dim); }
.spec-v { font-family: var(--mono); font-size: .72rem; color: var(--white); }


/* ============================================================
   ABOUT
   ============================================================ */
.about { background: var(--black-2); }
.about-layout { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-8); align-items: start; }
.about-photo { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 3/4; position: relative; }
.about-photo::after { content: ''; position: absolute; top: 0; right: 0; width: 55%; height: 3px; background: linear-gradient(90deg, transparent, var(--amber)); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-content { display: flex; flex-direction: column; gap: var(--sp-4); }
.about-brand { display: flex; flex-direction: column; gap: 6px; }
.about-logo { width: 160px; height: auto; }
.about-role { font-family: var(--mono); font-size: .68rem; color: var(--amber); letter-spacing: .2em; text-transform: uppercase; }
.about-bio { color: var(--white-dim); font-size: .9rem; line-height: 1.82; }

.timeline { border-left: 1px solid var(--border); padding-left: var(--sp-4); display: flex; flex-direction: column; }
.tl-item { position: relative; padding-bottom: var(--sp-3); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; left: calc(-1 * var(--sp-4) - 3px); top: 6px; width: 6px; height: 6px; background: var(--amber); border-radius: 50%; }
.tl-year { display: block; font-family: var(--mono); font-size: .62rem; color: var(--amber); letter-spacing: .16em; margin-bottom: 3px; }
.tl-text { font-size: .85rem; color: var(--white-dim); line-height: 1.55; }


/* ============================================================
   CLIENT CAROUSEL
   ============================================================ */
.client-carousel { padding: clamp(72px, 10vw, 120px) 0; background: #ffffff; overflow: hidden; }
.client-carousel--footer { padding-bottom: clamp(48px, 6vw, 72px); }
.carousel-header { padding: 0 var(--page-pad); margin-bottom: var(--sp-8); }
.carousel-wrapper { position: relative; overflow: hidden; }
.carousel-wrapper::before, .carousel-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; }
.carousel-wrapper::before { left: 0; background: linear-gradient(to right, #ffffff 0%, transparent 100%); }
.carousel-wrapper::after { right: 0; background: linear-gradient(to left, #ffffff 0%, transparent 100%); }
.carousel-track { display: flex; align-items: stretch; gap: 28px; width: max-content; animation: scrollClients 42s linear infinite; padding: 12px 0 20px; }
.carousel-wrapper:hover .carousel-track { animation-play-state: paused; }
.client-card {
  position: relative; width: 250px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s, border-color .32s;
  cursor: pointer;
}
.client-card:hover { transform: translateY(-6px) scale(1.03); border-color: rgba(37,200,217,.45); box-shadow: 0 20px 48px rgba(14,165,177,.15); }
/* The logo sits directly on the card's own background rather than a
   forced white chip — logos exported with a transparent background
   blend in seamlessly and pick up whatever surface (light card /
   dark neon card) they're placed on, instead of fighting a mismatched
   backing color. Generous, fixed dimensions still give every logo the
   same amount of room regardless of the source file's intrinsic size. */
.card-img-wrap {
  width: 100%; height: 132px; overflow: hidden;
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 26px;
}
.card-img-wrap img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: grayscale(100%) contrast(1.05) opacity(.78);
  transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}
.client-card:hover .card-img-wrap img { filter: grayscale(0%) contrast(1) opacity(1); transform: scale(1.06); }
.card-accent { height: 2px; margin-top: 12px; background: linear-gradient(90deg, var(--amber), var(--peacock)); transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.client-card:hover .card-accent { transform: scaleX(1); }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.card-name { font-family: var(--display); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--white); line-height: 1.15; }
.card-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .6rem; color: var(--amber); background: var(--amber-dim); border: 1px solid rgba(37,200,217,.25); padding: 3px 10px; border-radius: 4px; letter-spacing: .08em; text-transform: uppercase; width: fit-content; }
.card-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); opacity: .7; flex-shrink: 0; }
@keyframes scrollClients { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--black-2); border-top: 1px solid var(--border); padding: var(--sp-14) var(--page-pad) var(--sp-5); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--border); }
.footer-brand p { color: var(--white-dim); font-size: .83rem; line-height: 1.7; margin-top: var(--sp-2); max-width: 270px; }
.footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.social-link { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--white-dim); text-decoration: none; transition: border-color .22s, color .22s, background .22s; }
.social-link svg { width: 15px; height: 15px; display: block; }
.social-link:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.footer-heading { font-family: var(--mono); font-size: .62rem; color: var(--amber); letter-spacing: .22em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--white-dim); text-decoration: none; font-size: .83rem; transition: color .2s, padding-left .2s; }
.footer-sector-links a { color: var(--amber); text-decoration: none; transition: opacity .2s; }
.footer-sector-links a:hover { opacity: .75; text-decoration: underline; }
.footer-links a:hover { color: var(--amber); padding-left: 4px; }
.footer-contact-item { font-size: .83rem; color: var(--white-dim); margin-bottom: var(--sp-1); display: flex; gap: 8px; align-items: flex-start; }
.footer-contact-item strong { color: var(--white); min-width: 20px; }
.footer-contact-item a { color: var(--white-dim); text-decoration: none; transition: color .2s; }
.footer-contact-item a:hover { color: var(--amber); }
.footer-map { margin-top: var(--sp-6); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 0 0 1px rgba(21,96,189,.08), 0 4px 24px rgba(14,165,177,.12); }
.footer-map iframe { width: 100%; height: 220px; border: none; display: block; filter: grayscale(100%) contrast(1.1); transition: filter .4s; }
.footer-map:hover iframe { filter: grayscale(0%); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-4); font-size: .76rem; color: rgba(23,49,59,.3); }
.footer-bottom a { color: rgba(23,49,59,.3); text-decoration: none; }
.footer-bottom a:hover { color: var(--amber); }


/* ============================================================
   PRESS / NEWS ELEMENTS
   ============================================================ */
.press-thumb { display: block; position: relative; width: 100%; height: 220px; overflow: hidden; flex-shrink: 0; text-decoration: none; }
.press-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .45s ease; }
.press-thumb:hover img { transform: scale(1.06); }
.press-thumb-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 22, 40, 0.52); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.press-thumb:hover .press-thumb-overlay { opacity: 1; }
.press-links { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.press-links .tag { text-decoration: none; cursor: pointer; color: inherit; }
.press-links .tag:hover { border-color: var(--amber); color: var(--amber); }


/* ============================================================
   ANIMATIONS & MEDIA RESPONSIVENESS
   ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeLeft { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } }

.anim-fade-up { opacity: 0; transform: translateY(28px); animation: fadeUp .72s cubic-bezier(.4,0,.2,1) var(--d, 0s) forwards; }
.anim-fade-left { opacity: 0; transform: translateX(32px); animation: fadeLeft .72s cubic-bezier(.4,0,.2,1) var(--d, 0s) forwards; }
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .65s ease, transform .65s ease; transition-delay: var(--rd, 0s); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Accurate "not maximized" collapse, driven by JS comparing the
   window's actual width against the screen's available width (see
   initMaximizeDetection in script.js). This works correctly on any
   monitor size, unlike a fixed width breakpoint. */
html.win-not-maximized nav ul.nav-links { display: none; }
html.win-not-maximized .nav-hamburger    { display: flex; }

@media (max-width: 1300px) {
  .hero-inner          { grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 320px); gap: var(--sp-10); }
  .industries-grid     { grid-template-columns: repeat(4, 1fr); }
  .materials-grid      { grid-template-columns: repeat(3, 1fr); }
  /* Fallback for when JS hasn't run yet (or is disabled): still
     collapse the header once the window gets meaningfully narrow. */
  nav ul.nav-links     { display: none; }
  .nav-hamburger       { display: flex; }
}
/* Tablet landscape (e.g. iPad 1024x768, Android tablets landscape):
   the two-column hero still has room, so keep text/stats side-by-side
   but let the panel's own column shrink further rather than clipping. */
@media (max-width: 1180px) and (min-width: 1101px) {
  .hero-inner          { grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 300px); gap: var(--sp-8); }
}
@media (max-width: 1100px) {
  .hero-inner          { grid-template-columns: 1fr; }
  .hero-right          { display: grid; grid-template-columns: 1fr 1fr; max-width: 620px; margin-left: auto; margin-right: auto; }
  .hero-stats-panel    { flex-direction: row; align-items: center; }
  .hstat-divider       { width: 1px; height: 60px; align-self: center; }
  .cap-layout          { grid-template-columns: 1fr; }
  .cases-grid          { grid-template-columns: repeat(2, 1fr); }
  .about-layout        { grid-template-columns: 260px 1fr; gap: var(--sp-6); }
  .footer-top          { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}
/* Tablet portrait (e.g. iPad 768–900, Galaxy Tab portrait): full-width
   stats panel reads better as a single row of 3 rather than a cramped
   2x2, since there's ample horizontal space even though it's stacked. */
@media (max-width: 900px) and (min-width: 681px) {
  .hero-right          { grid-template-columns: 1fr; max-width: 640px; }
  .hero-stats-panel    { flex-direction: row; }
  .hstat               { flex: 1; text-align: center; }
}
@media (max-width: 900px) {
  .industries-grid     { grid-template-columns: repeat(2, 1fr); }
  .process-grid        { grid-template-columns: repeat(2, 1fr); }
  .process-step        { border-bottom: 1px solid var(--border); }
  .process-step:nth-child(2n) { border-right: none; }
  .process-step:last-child { border-bottom: none; }
  .materials-grid      { grid-template-columns: repeat(2, 1fr); }
  .quote-layout        { grid-template-columns: 1fr; }
  .about-layout        { grid-template-columns: 1fr; }
  .about-photo         { aspect-ratio: 16/9; max-height: 320px; }
  .about-photo img     { object-position: center top; }
  .carousel-wrapper::before, .carousel-wrapper::after { width: 60px; }
  /* Fallback optimization matrix on tablet portraits */
  #lightboxGrid.lightbox-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: 140px; gap: 1rem; }
}
@media (max-width: 680px) {
  .hero               { min-height: auto; padding: 110px var(--page-pad) var(--sp-8); }
  .hero-title         { font-size: clamp(3rem, 15vw, 4.5rem); }
  .hero-sub           { font-size: .96rem; }
  .hero-right         { grid-template-columns: 1fr; max-width: 100%; }
  /* Phones in landscape (e.g. 667–740px wide) still have room for a
     tidy horizontal row; only true narrow-portrait phones stack. */
  .hero-stats-panel   { flex-direction: row; }
  .hstat-divider      { width: 1px; height: 48px; align-self: center; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .industries-grid    { grid-template-columns: 1fr; }
  .process-grid       { grid-template-columns: 1fr; }
  .process-step       { border-right: none; border-bottom: 1px solid var(--border); }
  .process-step:last-child { border-bottom: none; }
  .cases-grid         { grid-template-columns: 1fr; }
  .materials-grid     { grid-template-columns: 1fr; }
  .form-row           { grid-template-columns: 1fr; }
  .footer-top         { grid-template-columns: 1fr; }
  .client-card        { width: 190px; }
  .card-img-wrap       { height: 100px; padding: 12px 14px; }
  .lightbox-panel     { max-height: 95vh; height: 95vh; border-radius: 14px; }
  .lightbox-viewer    { padding: 52px 12px 12px; }
  #lightboxGrid.lightbox-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); grid-auto-rows: 110px; gap: 12px; padding: 14px; }
  .lb-nav             { width: 34px; height: 34px; }
  .lb-nav--prev       { left: 4px; }
  .lb-nav--next       { right: 4px; }
  .lb-back            { top: 12px; left: 12px; }
}
/* Only true narrow-portrait phones (≲400px) stack the stats fully —
   anything wider (including 480px-class phones) keeps the tidy row. */
@media (max-width: 400px) {
  .hero-stats-panel   { flex-direction: column; }
  .hstat-divider      { width: 100%; height: 1px; }
}
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
  .wa-float { bottom: 1rem; left: 1rem; }
}

/* ============================================================
   TOUCH DEVICES (PHONES & TABLETS) — the collapsed/folder menu
   is the default header, in BOTH portrait and landscape.
   This is independent of viewport width so a tablet turned
   sideways (which can be wider than the 900px desktop-compress
   breakpoint below) still gets the hamburger menu instead of
   the full link row.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  nav ul.nav-links { display: none; }
  .nav-hamburger    { display: flex; }
}

/* Landscape phones / short-height landscape tablets: the drawer
   and hero can be taller than the viewport — make sure both
   scroll cleanly instead of clipping or overlapping. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero            { min-height: auto; padding-top: 96px; padding-bottom: var(--sp-6); }
  .nav-drawer      { padding-top: 64px; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ============================================================
   DARK MODE TOGGLE BUTTON
   ============================================================ */
.nav-right-cluster {
  display: flex; align-items: center; gap: 12px;
}

.dark-mode-toggle {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
  cursor: pointer;
  color: var(--white-dim);
  transition: border-color .25s, color .25s, box-shadow .25s, background .25s;
  position: relative;
}
.dark-mode-toggle:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-glow);
}
:root.dark .dark-mode-toggle:hover {
  box-shadow: 0 0 16px rgba(0,255,200,.2);
}
.dmt-icon { display: flex; align-items: center; justify-content: center; }
.dmt-track {
  width: 32px; height: 18px;
  background: var(--border);
  border-radius: 9px;
  position: relative;
  transition: background .3s;
}
:root.dark .dmt-track { background: var(--neon-cyan, var(--amber)); box-shadow: 0 0 10px rgba(0,255,200,.4); }
.dmt-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s;
}
:root.dark .dmt-thumb { transform: translateX(14px); background: #000; }

/* hide one icon depending on mode */
.dmt-sun  { display: flex; }
.dmt-moon { display: none; }
:root.dark .dmt-sun  { display: none; }
:root.dark .dmt-moon { display: flex; }


/* ============================================================
   3D PRINT PAGE-BUILD OVERLAY
   ============================================================ */
.print3d-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
}

/* Full-page dark mask that reveals from bottom as printing "completes" */
.print3d-layer-mask {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background: #070b0e;
  transform-origin: bottom;
  transition: none;
}

/* Horizontal scan line (the nozzle track) */
.print3d-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(21,96,189,.6) 20%, var(--peacock, #0ea5b1) 50%, rgba(21,96,189,.6) 80%, transparent 100%);
  box-shadow: 0 0 12px rgba(14,165,177,.6), 0 0 32px rgba(14,165,177,.25);
  top: 0;
  transition: none;
}
:root.dark .print3d-scanline {
  background: linear-gradient(90deg, transparent 0%, rgba(0,255,200,.5) 20%, #00ffe0 50%, rgba(255,0,170,.5) 80%, transparent 100%);
  box-shadow: 0 0 16px rgba(0,255,200,.7), 0 0 40px rgba(255,0,170,.3);
}

/* Nozzle head */
.print3d-nozzle {
  position: absolute;
  width: 40px;
  display: flex; flex-direction: column; align-items: center;
  top: 0;
}
.print3d-nozzle-body {
  width: 36px; height: 24px;
  background: linear-gradient(180deg, #1a3a4a 0%, #0ea5b1 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 2px 8px rgba(14,165,177,.3);
}
:root.dark .print3d-nozzle-body {
  background: linear-gradient(180deg, #0d1a20 0%, #00ffe0 100%);
  box-shadow: 0 0 20px rgba(0,255,200,.4);
}
.print3d-nozzle-tip {
  width: 10px; height: 14px;
  background: var(--peacock, #0ea5b1);
  border-radius: 0 0 3px 3px;
  margin-top: -1px;
}
:root.dark .print3d-nozzle-tip {
  background: var(--neon-pink, #ff00aa);
  box-shadow: 0 0 10px rgba(255,0,170,.6);
}
.print3d-filament {
  width: 3px;
  background: linear-gradient(180deg, rgba(37,200,217,.8), rgba(21,96,189,.4));
  border-radius: 0 0 2px 2px;
  height: 0;
  transition: none;
}
:root.dark .print3d-filament {
  background: linear-gradient(180deg, rgba(0,255,200,.9), rgba(255,0,170,.4));
  box-shadow: 0 0 6px rgba(0,255,200,.6);
}

/* HUD */
.print3d-hud {
  position: absolute;
  top: 16px; right: 20px;
  display: flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(14,165,177,.85);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(14,165,177,.2);
  padding: 6px 14px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
:root.dark .print3d-hud {
  color: rgba(0,255,200,.9);
  background: rgba(8,13,16,.9);
  border-color: rgba(0,255,200,.25);
  text-shadow: 0 0 8px rgba(0,255,200,.5);
}
.print3d-hud-label { opacity: .7; }
.print3d-hud-pct   { font-weight: 600; }

/* Hide overlay after animation done */
.print3d-overlay.done {
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

/* Layer shimmer effect on the mask reveal edge */
@keyframes layerShimmer {
  0%   { opacity: .9; }
  50%  { opacity: .7; }
  100% { opacity: .9; }
}
.print3d-layer-mask.active {
  animation: layerShimmer .3s ease infinite;
}


/* ============================================================
   NAV right cluster on small screens
   ============================================================ */
.nav-right-cluster { display: flex; align-items: center; gap: 12px; }
@media (max-width: 900px) {
  .dark-mode-toggle { padding: 6px 10px 6px 7px; }
  .dark-mode-toggle .dmt-track { width: 28px; height: 16px; }
  .dark-mode-toggle .dmt-thumb { width: 12px; height: 12px; }
  :root.dark .dmt-thumb { transform: translateX(12px); }
}
/* ============================================================
   WORK GALLERY — tabbed technology gallery
   ============================================================ */
.gallery-intro {
  margin-top: var(--sp-2); color: var(--white-dim);
  font-size: .98rem; line-height: 1.7; max-width: 560px;
}

.gallery-tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: var(--sp-4) 0 var(--sp-4);
}
.gallery-tab {
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 22px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--white-dim);
  border: 1px solid var(--border);
  transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .2s ease;
}
.gallery-tab:hover {
  color: var(--amber); border-color: var(--amber);
  transform: translateY(-1px);
}
.gallery-tab.active {
  background: var(--amber); color: var(--card);
  border-color: var(--amber);
  box-shadow: var(--shadow-strong);
}

.gallery-grid {
  display: grid;
  /* Fixed integer column counts (matching the same breakpoint ladder
     used by .industries-grid / .materials-grid elsewhere in this file)
     instead of `repeat(auto-fill, minmax(240px, 1fr))`.

     auto-fill recalculates the column count from raw container width,
     so tiny width changes — including the ones browser zoom produces,
     since zooming in/out changes how many CSS pixels are available —
     could flip the grid between column counts at arbitrary, non-round
     zoom levels. Because every track was still `1fr`, the row always
     filled 100% of the width either way, so nothing ever overflowed;
     but the *number* of columns (and therefore the size/crop of every
     square thumbnail) shifted unpredictably, which read as the grid
     "restructuring itself" and squares looking freshly cropped.

     Fixed columns + explicit media queries change column count only
     at the same handful of breakpoints as the rest of the page, so
     the gallery now reflows in lockstep with everything else and
     zoom no longer produces an off-ladder layout. */
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}
@media (max-width: 1300px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.gallery-item {
  position: relative; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
  border-color: var(--amber);
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item.hidden { display: none; }

/* subtle technology badge from alt-category */
.gallery-item::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }

@media (max-width: 640px) {
  .gallery-tab  { padding: 8px 16px; font-size: .72rem; }
}

/* ── Dark mode — neon treatment ── */
:root.dark .gallery-tab {
  border-color: rgba(0,255,200,.2); color: var(--white-dim);
}
:root.dark .gallery-tab:hover {
  color: var(--neon-cyan); border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0,255,200,.18);
}
:root.dark .gallery-tab.active {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
  color: #000; border-color: transparent;
  box-shadow: 0 0 24px rgba(0,255,200,.28), 0 0 48px rgba(255,0,170,.14);
}
:root.dark .gallery-item {
  border-color: rgba(0,255,200,.12); background: var(--card);
}
:root.dark .gallery-item:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 22px rgba(0,255,200,.22), 0 14px 34px rgba(0,0,0,.55);
}

/* ============================================================
   QUOTATION POPUP (auto-opening quick-quote menu)
   ============================================================ */
.quote-popup-overlay {
  /* Anchored to the bottom-right edge of the viewport rather than
     covering the screen — the rest of the page stays fully usable
     (clickable and scrollable) while this is open. */
  position: fixed;
  inset: auto 0 0 auto;
  right: 20px;
  bottom: 20px;
  width: auto;
  height: auto;
  z-index: 1200;
  display: block;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.quote-popup-overlay.open {
  opacity: 1;
  pointer-events: none; /* overlay itself stays click-through; panel re-enables below */
}
.quote-popup-overlay.open .quote-popup-panel {
  pointer-events: all;
}
.quote-popup-backdrop {
  /* No full-page dimming/blur — it previously blocked interaction
     with the rest of the page. Kept in the DOM (for the close-on-
     outside-click JS) but visually and functionally inert. */
  display: none;
}
.quote-popup-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 26px 22px;
  box-shadow: var(--shadow-soft), var(--shadow-strong);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  opacity: 0;
  transform: translateX(24px) translateY(16px) scale(.96);
  transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.quote-popup-overlay.open .quote-popup-panel {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
  animation: quotePopIn .5s cubic-bezier(.22,1,.36,1);
}
@keyframes quotePopIn {
  0%   { transform: translateX(24px) translateY(16px) scale(.96); }
  60%  { transform: translateX(-4px) translateY(-2px) scale(1.015); }
  100% { transform: translateX(0) translateY(0) scale(1); }
}
:root.dark .quote-popup-panel {
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,255,200,.12);
}
.quote-popup-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--black-2);
  color: var(--white-dim);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.quote-popup-close:hover {
  color: var(--amber);
  border-color: var(--amber);
  transform: rotate(90deg);
}
.quote-popup-label {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
:root.dark .quote-popup-label { text-shadow: 0 0 8px rgba(0,255,200,.5); }
.quote-popup-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 12px;
}
.quote-popup-title em {
  font-style: normal;
  color: var(--amber);
}
:root.dark .quote-popup-title em { text-shadow: 0 0 14px rgba(0,255,200,.45); }
.quote-popup-text {
  font-family: var(--body);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--white-dim);
  margin-bottom: 24px;
}
.quote-popup-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.quote-popup-actions .btn-primary,
.quote-popup-actions .btn-secondary {
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
}
.quote-popup-dismiss {
  text-align: center;
  font-family: var(--body);
  font-size: .8rem;
  color: var(--text-muted);
}
.quote-popup-dismiss button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--white-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .2s ease;
}
.quote-popup-dismiss button:hover { color: var(--amber); }

@media (max-width: 480px) {
  .quote-popup-overlay { right: 10px; bottom: 10px; left: 10px; }
  .quote-popup-panel { max-width: none; padding: 24px 20px 20px; }
  .quote-popup-title { font-size: 1.4rem; }
  .quote-popup-actions { flex-direction: column; }
}


/* ============================================================
   VAP 3D — FESTIVAL POPUP
   Uses the site's existing tokens (--card, --border, --white,
   --display, --body, --mono). The only per-festival variables
   are --fest-a and --fest-b, set inline by the script.

   Shape: a wide card centred under the nav, with a picture panel
   on the left. The bottom-right corner belongs to the quotation
   popup, the bottom-left to the WhatsApp float, and the bottom
   edge on mobile to the sticky CTA bar — up top is the one
   position that clears all three on a short laptop screen as
   well as a tall desktop one.
   ============================================================ */

.fest-popup {
  position: fixed;
  top: var(--fest-top, 96px);
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1190;
  width: min(880px, calc(100vw - 32px));
  display: flex;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  box-shadow: var(--shadow-soft), 0 14px 40px color-mix(in srgb, var(--fest-a) 18%, transparent);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .3s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
}

.fest-popup.open {
  opacity: 1;
  transform: translateY(0);
}

:root.dark .fest-popup {
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6),
              0 0 32px color-mix(in srgb, var(--fest-a) 26%, transparent);
}

/* Accent bead along the top edge, in the festival's two colours. */
.fest-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--fest-a), var(--fest-b));
}

/* ---------- picture panel ----------
   Sized so a landscape photo sits comfortably; before a photo
   is added it holds the drawn motif on a tinted ground, so the
   card is never empty on the left. */
.fest-media {
  position: relative;
  flex: 0 0 190px;
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--fest-a) 14%, var(--card)),
              color-mix(in srgb, var(--fest-b) 14%, var(--card)));
  border-right: 1px solid var(--border);
}

.fest-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Once a real picture loads, the motif steps aside. */
.fest-popup.has-image .fest-motif { display: none; }

.fest-motif {
  width: 54px; height: 54px;
  color: var(--fest-a);
}
.fest-motif svg { width: 100%; height: 100%; display: block; }

/* Signature: the motif draws itself stroke by stroke on open,
   the way the printer lays down a bead of filament. */
.fest-motif svg > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.fest-popup.open .fest-motif svg > * {
  animation: festDraw .7s cubic-bezier(.65, 0, .35, 1) forwards;
}
.fest-popup.open .fest-motif svg > *:nth-child(1) { animation-delay: .12s; }
.fest-popup.open .fest-motif svg > *:nth-child(2) { animation-delay: .24s; stroke: var(--fest-b); }
.fest-popup.open .fest-motif svg > *:nth-child(3) { animation-delay: .36s; }
.fest-popup.open .fest-motif svg > *:nth-child(4) { animation-delay: .48s; stroke: var(--fest-b); }
.fest-popup.open .fest-motif svg > *:nth-child(5) { animation-delay: .60s; }

@keyframes festDraw {
  to { stroke-dashoffset: 0; }
}

/* ---------- body ---------- */
.fest-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 52px 14px 20px;
}

.fest-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.fest-eyebrow {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .2em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fest-a);
  margin: 0 0 4px;
}

.fest-line {
  margin: 0;
  min-width: 0;
}

.fest-title {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.15;
  color: var(--white);
}
.fest-title em {
  font-style: normal;
  color: var(--fest-a);
}
:root.dark .fest-title em {
  text-shadow: 0 0 14px var(--fest-a);
  text-shadow: 0 0 14px color-mix(in srgb, var(--fest-a) 55%, transparent);
}

/* The picture gives the card height, so the supporting line has
   room to wrap to a second line instead of being truncated. */
.fest-text {
  margin-top: 3px;
  font-family: var(--body);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--white-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- actions ---------- */
.fest-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fest-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: var(--radius-sm, 8px);
  background: linear-gradient(135deg, var(--fest-a), var(--fest-b));
  color: #fff;
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fest-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--fest-a) 40%, transparent);
}

.fest-wa,
.fest-close {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--black-2);
  color: var(--white-dim);
  cursor: pointer;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, transform .25s ease;
}
.fest-wa:hover { color: #25D366; border-color: #25D366; }

.fest-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 30px; height: 30px;
}
.fest-close:hover {
  color: var(--fest-a);
  border-color: var(--fest-a);
  transform: rotate(90deg);
}

.fest-cta:focus-visible,
.fest-wa:focus-visible,
.fest-close:focus-visible {
  outline: 2px solid var(--fest-a);
  outline-offset: 3px;
}

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
  .fest-media { flex-basis: 150px; }
  .fest-body { padding-right: 48px; gap: 14px; }
}

@media (max-width: 720px) {
  .fest-popup {
    width: calc(100vw - 20px);
    flex-direction: column;
  }
  /* Picture goes full width across the top. */
  .fest-media {
    flex: 0 0 auto;
    width: 100%;
    height: 116px;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .fest-body {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .fest-title { font-size: 1.18rem; }
  .fest-cta { flex: 1 1 auto; }
  .fest-close {
    background: var(--card);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  }
}

/* Landscape phones: the picture is the first thing to go, then
   the card altogether. */
@media (max-height: 560px) and (max-width: 900px) {
  .fest-media { display: none; }
}
@media (max-height: 430px) {
  .fest-popup { display: none; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .fest-popup { transition: opacity .2s ease; transform: none; }
  .fest-popup.open { transform: none; }
  .fest-motif svg > * { stroke-dasharray: none; stroke-dashoffset: 0; }
  .fest-popup.open .fest-motif svg > * { animation: none; }
  .fest-close:hover, .fest-cta:hover { transform: none; }
}