/* ================================================================
   REGAL STEEL — PREMIUM STYLING SYSTEM
   Stage 3: Visual Identity · Metallic Surfaces · Theme System
   ================================================================
   01  RESET & BASE
   02  TYPOGRAPHY UTILITIES
   03  TEXTURE LAYER
   04  LAYOUT SYSTEM
   05  BUTTON SYSTEM
   06  DEV PLACEHOLDERS
   07  NAVIGATION
   08  MOBILE MENU
   09  HERO
   10  QUICK STATS
   11  ABOUT
   12  TIMELINE
   13  SERVICES
   14  PRODUCTS
   15  FACTORY
   16  PROJECTS
   17  QUALITY
   18  WHY REGAL STEEL
   19  CONTACT
   20  FOOTER
   21  RESPONSIVE — TABLET ≤1024px
   22  RESPONSIVE — MOBILE ≤767px
   23  REDUCED MOTION
   ================================================================ */


/* ================================================================
   01  RESET & BASE
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--w-regular);
  line-height: var(--lead-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  transition:
    background-color var(--dur-slow) var(--ease-in-out),
    color var(--dur-slow) var(--ease-in-out);
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
address { font-style: normal; }
::selection { background-color: rgba(56, 189, 248, 0.38); color: inherit; }


/* ================================================================
   02  TYPOGRAPHY UTILITIES
   ================================================================ */

/* Display: Barlow Condensed ExtraBold — all section headlines */
/* Display: Barlow Condensed ExtraBold — silver metallic color + sheen */
.display-text {
  font-family: var(--font-display);
  font-weight: var(--w-xbold);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height: var(--lead-tight);
  color: var(--blue);
}

/* Mono: JetBrains Mono Light — labels, numbers, data */
.mono-text {
  font-family: var(--font-mono);
  font-weight: var(--w-light);
  letter-spacing: var(--track-wide);
  font-size: var(--text-xs);
}


/* ================================================================
   03  TEXTURE LAYER
   Grain SVG overlay — dark mode only
   ================================================================ */

/* Applied to sections that need a metallic surface texture */
.has-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}




/* ================================================================
   04  LAYOUT SYSTEM
   ================================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Section base */
.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Alternating backgrounds */
.section--stats,
.section--factory,
.section--purpose {
  background-color: var(--bg-section-alt);
}

.section--services,
.section--quality,
.section--contact {
  background-color: #0d1630;
}


.section--about,
.section--products,
.section--projects,
.section--why {
  background-color: var(--bg-primary);
}

/* ── PURPOSE — Vision · Mission · Values ── */
.purpose__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}
.purpose-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8);
  border-top: 3px solid var(--accent);
}
.purpose-card__label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.purpose-card__body {
  font-size: var(--text-md);
  line-height: var(--lead-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
.values__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-5);
}
.values__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: 0;
  list-style: none;
}
.value-chip {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
  transition: border-color var(--dur-base) var(--ease-steel),
              color var(--dur-base) var(--ease-steel),
              transform var(--dur-base) var(--ease-steel);
}
.value-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .purpose__grid { grid-template-columns: 1fr; }
}

/* Subtle separator line between sections */
.section + .section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-section-sep);
}

/* ── Section Header ── */
.section__header {
  margin-bottom: var(--sp-16);
  max-width: 780px;
}

.section__header--center {
  text-align: center;
  max-width: 100%;
}

.section__label {
  display: none; /* hidden from UI — kept in HTML for reference */
}

.section__label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--accent);
  flex-shrink: 0;
}

.section__headline {
  font-size: var(--text-h2);
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}

/* Yellow accent underline */
.section__headline::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  background-color: var(--accent);
  margin-top: var(--sp-5);
}

.section__header--center .section__headline::after {
  margin-inline: auto;
}

.section__intro {
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 620px;
  line-height: var(--lead-relaxed);
  margin-top: var(--sp-4);
}

.section__header--center .section__intro {
  margin-inline: auto;
}


/* ================================================================
   05  BUTTON SYSTEM
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.78em 1.85em;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--dur-base) var(--ease-steel),
    color var(--dur-base) var(--ease-steel),
    border-color var(--dur-base) var(--ease-steel),
    transform var(--dur-base) var(--ease-steel),
    box-shadow var(--dur-base) var(--ease-steel);
}

/* Hover lift */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* — Primary (Yellow) — */
.btn--primary {
  background-color: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid transparent;
  box-shadow: var(--surface-shine), var(--shadow-xs), 0 0 18px rgba(245,196,0,0.20);
}

.btn--primary:hover {
  background-color: var(--accent-hover);
  box-shadow: var(--surface-shine), var(--shadow-glow), 0 0 28px rgba(245,196,0,0.35);
}

/* Light mode: replace gold glow with blue glow on primary button */
[data-theme="light"] .btn--primary {
  box-shadow: var(--surface-shine), var(--shadow-xs), 0 0 18px rgba(14,165,233,0.22);
}
[data-theme="light"] .btn--primary:hover {
  box-shadow: var(--surface-shine), var(--shadow-glow), 0 0 28px rgba(14,165,233,0.38);
}

/* — Outline — */
.btn--outline {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--blue-muted);
  box-shadow: 0 0 12px var(--blue-dim);
}

.btn--outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  background-color: var(--blue-dim);
  box-shadow: 0 0 20px var(--blue-glow);
}

/* — Sizes — */
.btn--sm  { padding: 0.55em 1.2em; font-size: var(--text-xs); }
.btn--full { width: 100%; }


/* ================================================================
   06  DEV PLACEHOLDERS
   ================================================================ */

.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 280px;
  background-color: var(--bg-elevated);
  background-image: var(--gradient-steel-sheen);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-8);
  position: relative;
  overflow: hidden;
}

.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.012) 8px,
    rgba(255,255,255,0.012) 9px
  );
  pointer-events: none;
}

.img-placeholder__label {
  position: relative;
  font-size: var(--text-xs);
  color: var(--accent-muted);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}

.img-placeholder__note {
  position: relative;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.img-placeholder--landscape { aspect-ratio: 16 / 10; min-height: unset; }


/* ================================================================
   07  NAVIGATION
   ================================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--nav-h);
  transition:
    background-color var(--dur-base) var(--ease-steel),
    border-color var(--dur-base) var(--ease-steel),
    box-shadow var(--dur-base) var(--ease-steel);
}

.nav.is-scrolled {
  background-color: var(--nav-bg-scrolled);
  border-bottom: 1px solid var(--nav-border-scrolled);
  backdrop-filter: var(--nav-backdrop);
  -webkit-backdrop-filter: var(--nav-backdrop);
  box-shadow: 0 1px 40px rgba(0,0,0,0.30);
}

.nav__container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  gap: var(--sp-8);
}
.nav__logo    { justify-self: start; }
.nav__actions { justify-self: end; }

/* ── Logo ── */
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

/* Subsidiary tagline — positioned just below the navbar, under the logo */
.nav__tagline {
  position: absolute;
  top: calc(100% + 2px);
  left: var(--container-pad);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.66);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-steel);
}
.nav.is-scrolled .nav__tagline { opacity: 0; }

.nav__logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
  filter: brightness(1);
  transition: opacity var(--dur-fast);
}

.nav__logo:hover .nav__logo-img { opacity: 0.85; }

.nav__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.nav__logo-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--w-xbold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1;
}

.nav__logo-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--w-regular);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* ── Desktop Links ── */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex: 1;
  justify-content: center;
}

.nav__link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  padding-block: var(--sp-1);
  position: relative;
  transition: color var(--dur-fast) var(--ease-steel);

  /* Chrome silver — same gradient as hero "ENGINEERED" */
  background-image: var(--gradient-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hover / active — solid medium blue (gradient off) so the state reads clearly */
.nav__link:hover,
.nav__link.is-active {
  background-image: none;
  -webkit-text-fill-color: currentColor;
}

/* When navbar is over a light scrolled background, switch to solid deep navy */
[data-theme="light"] .nav.is-scrolled .nav__link {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: #0c1e4f;
}
[data-theme="light"] .nav.is-scrolled .nav__link:hover,
[data-theme="light"] .nav.is-scrolled .nav__link.is-active {
  color: #1b6cbe;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transition: width var(--dur-base) var(--ease-steel);
  box-shadow: 0 0 6px var(--blue-glow);
}

.nav__link:hover { color: var(--blue); }
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }
.nav__link.is-active { color: var(--blue); }

/* ── Actions ── */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* ── Theme Toggle ── */
.nav__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  box-shadow: var(--surface-shine), var(--shadow-xs);
  transition:
    color var(--dur-fast),
    border-color var(--dur-fast),
    background-color var(--dur-fast),
    box-shadow var(--dur-fast);
}

.nav__theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--accent-dim);
  box-shadow: var(--surface-shine), var(--shadow-accent);
}

/* Icon visibility by theme */
[data-theme="dark"]  .theme-icon--sun  { display: none; }
[data-theme="dark"]  .theme-icon--moon { display: block; }
[data-theme="light"] .theme-icon--moon { display: none; }
[data-theme="light"] .theme-icon--sun  { display: block; }

/* ── Hamburger ── */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: var(--sp-2);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-elevated);
  transition: border-color var(--dur-fast);
}

.nav__hamburger:hover { border-color: var(--border-strong); }

.nav__hamburger-line {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--text-primary);
  border-radius: 1px;
  transition:
    transform var(--dur-base) var(--ease-steel),
    opacity var(--dur-base) var(--ease-steel);
}


/* ================================================================
   08  MOBILE MENU
   ================================================================ */

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.mobile-menu.is-open { display: block; }

.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mobile-menu__panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background-color: var(--bg-surface);
  background-image: var(--gradient-steel-sheen);
  border-right: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  overflow-y: auto;
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  margin-bottom: var(--sp-10);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background-color: var(--bg-elevated);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.mobile-menu__close:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: var(--text-secondary);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  line-height: 1;
  transition: color var(--dur-fast), padding-left var(--dur-base) var(--ease-steel);
}

.mobile-menu__link:hover {
  color: var(--text-primary);
  padding-left: var(--sp-3);
}

.mobile-menu__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
  width: 22px;
}

.mobile-menu__footer {
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-subtle);
}

.mobile-menu__location {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
}


/* ================================================================
   09  HERO
   Cinematic full-viewport opener. Always dark.
   ================================================================ */

.section--hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: 0;
  overflow: hidden;
  background-color: #050505; /* always dark — hero never lightens */
}

/* ── Background layers ── */
.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Interactive steel beam canvas — fills hero background */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #050505;
}

/* Cinematic overlay */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-overlay);
}

/* Grain texture */
.hero__bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 250px 250px;
  pointer-events: none;
}

/* ── Container layout ── */
.hero__container {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--nav-h) + var(--sp-16));
  padding-bottom: var(--sp-20);
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* ── Content ── */
.hero__content {
  max-width: 800px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-regular);
  color: rgba(255,255,255,0.40);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}

.hero__eyebrow-dot {
  color: var(--accent);
  font-size: 7px;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Headline ── */
.hero__headline {
  font-size: var(--text-hero);
  color: var(--silver-bright);
  margin-bottom: var(--sp-6);
  line-height: var(--lead-tight);
}

.hero__headline-line { display: block; }

/* "ENGINEERED" — chrome metallic gradient that matches the logo */
.hero__headline-line:not(.hero__headline-line--accent) {
  background-image: var(--gradient-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* "TO ENDURE." — metallic shimmer gradient */
.hero__headline-line--accent {
  background: var(--gradient-metallic-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subheadline {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.42);
  line-height: var(--lead-relaxed);
  margin-bottom: var(--sp-10);
  max-width: 560px;
  font-weight: var(--w-regular);
}

/* Hero always white-based regardless of mode */
.section--hero .hero__headline { color: #e4e4e4; }
.section--hero .hero__eyebrow  { color: rgba(255,255,255,0.40); }
.section--hero .hero__subheadline { color: rgba(255,255,255,0.42); }

/* Override hero BTN colours (stays on dark bg) */
.section--hero .btn--outline {
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.80);
}
.section--hero .btn--outline:hover {
  border-color: var(--blue);
  color: #38bdf8;
  background-color: rgba(14,165,233,0.08);
}

.hero__actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ── Scroll indicator ── */
.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-6);
  align-self: flex-end;
}

.hero__scroll-line {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, var(--blue) 0%, rgba(14,165,233,0.40) 65%, transparent 100%);
  box-shadow: 0 0 8px var(--blue-glow);
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.6; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(1.08); }
}

.hero__scroll-label {
  font-size: 9px;
  color: rgba(255,255,255,0.28);
  writing-mode: vertical-rl;
  letter-spacing: var(--track-widest);
}


/* ================================================================
   10  QUICK STATS
   ================================================================ */

.section--stats {
  padding-block: 0;
  overflow: hidden;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  border-right: 1px solid var(--border-subtle);
  position: relative;
  transition: background-color var(--dur-base) var(--ease-steel);
}

.stat-item:last-child { border-right: none; }

.stat-item:hover {
  background-color: var(--bg-elevated);
}

/* Top accent line — only on hover */
.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background-color: var(--accent);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-steel);
}

.stat-item:hover::before { transform: scaleX(1); }

.stat-item__value {
  display: block;
  font-size: var(--text-stat);
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--sp-2);
  letter-spacing: var(--track-tighter);
}

.stat-item--featured .stat-item__value {
  font-size: calc(var(--text-stat) * 1.15);
}

/* The "SR " prefix is rendered via a ::before + data-prefix attribute combo */
.stat-item--featured .stat-item__value::before {
  content: 'SR ';
  font-size: 0.55em;
  vertical-align: 0.2em;
  opacity: 0.7;
}

.stat-item__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  line-height: var(--lead-snug);
  max-width: 120px;
}


/* ================================================================
   11  ABOUT
   ================================================================ */

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
  margin-bottom: var(--sp-20);
}

.about__lead {
  font-size: var(--text-md);
  color: var(--text-primary);
  line-height: var(--lead-relaxed);
  margin-bottom: var(--sp-5);
  font-weight: var(--w-medium);
}

.about__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--lead-relaxed);
  margin-bottom: var(--sp-10);
}

/* Group Structure */
.about__group-title {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  letter-spacing: var(--track-widest);
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
}

.about__group-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.about__group-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background-color: var(--bg-elevated);
  background-image: var(--gradient-steel-sheen);
  box-shadow: var(--surface-shine);
  transition:
    background-color var(--dur-fast),
    border-color var(--dur-fast);
}

.about__group-item--active {
  border-color: var(--accent);
  background-color: var(--accent-dim);
  box-shadow: var(--surface-shine), 0 0 0 1px var(--accent-dim);
}

.about__group-indicator {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
}

.about__group-indicator--active { color: var(--accent); }

.about__group-name {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--text-primary);
}

.about__group-item--active .about__group-name { color: var(--accent); }

.about__group-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  letter-spacing: var(--track-wide);
}

/* Sticky image column */
.about__visual {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-6));
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 420px;
}

.about__visual > img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  border-radius: var(--radius-md);
}

.about__visual .img-placeholder { min-height: 520px; }


/* ================================================================
   12  TIMELINE  (Horizontal futuristic scroll)
   ================================================================ */

.timeline {
  border-top: 1px solid var(--border-default);
  padding-top: var(--sp-12);
  overflow: visible;
}

.timeline__heading {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  margin-bottom: var(--sp-8);
}

/* ── Horizontal timeline — redesigned card layout ── */

/* Wrapper — full viewport width, break out of container */
.htimeline {
  width: calc(100vw - 160px);
  margin-inline: calc(50% - 50vw + 80px);
  overflow: visible;
}

/* Track — 70vh tall, items share width equally */
.htimeline__track {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 56vh;
  min-height: 520px;
  position: relative;
}

/* Rail — runs through the vertical midpoint */
.htimeline__track::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 2%,
    var(--border-default) 10%,
    var(--border-subtle) 70%,
    var(--accent-muted) 95%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Each milestone column */
.htimeline__item {
  display: grid;
  grid-template-rows: 1fr 24px 1fr;   /* equal zones + dot row */
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* Zone — fills its grid cell */
.htimeline__zone {
  overflow: visible;   /* allow card to scale out on hover */
  position: relative;
}

/* ── CARD — image fills the zone, text slides up on hover ── */
.htimeline__card {
  position: absolute;
  inset: 4px;           /* 4px gap between cards */
  overflow: hidden;
  background: var(--bg-elevated);
  background-image: var(--gradient-steel-sheen);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.4s var(--ease-steel),
              box-shadow   0.4s var(--ease-steel),
              transform    0.4s var(--ease-steel);
  transform-origin: center center;
  z-index: 1;
}

.htimeline__card:hover {
  transform: scale(1.12);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 20px 60px rgba(0,0,0,0.55), 0 0 40px var(--accent-glow);
  z-index: 10;
}

/* ── Card background (placeholder or real image) ── */
.htimeline__card-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s var(--ease-steel);
}

.htimeline__card-bg > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.htimeline__card-bg svg {
  width: 52px; height: 52px;
  color: var(--silver-muted);
  opacity: 0.25;
  transition: transform 0.6s var(--ease-steel);
}

.htimeline__card:hover .htimeline__card-bg {
  transform: scale(1.10);
}

/* ── Year label — floats between card edge and rail ── */
.htimeline__card-year {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  color: var(--accent);
  letter-spacing: var(--track-wider);
  z-index: 5;
  line-height: 1;
  white-space: nowrap;
}

/* Above items: year sits at the bottom of the top zone (closest to rail) */
.htimeline__item--above .htimeline__zone--top .htimeline__card-year {
  bottom: 7px;
}

/* Below items: year sits at the top of the bottom zone (closest to rail) */
.htimeline__item--below .htimeline__zone--bottom .htimeline__card-year {
  top: 7px;
}

/* Leave space at the rail-facing edge of each card for the year label */
.htimeline__item--above .htimeline__card {
  inset: 4px 4px 26px 4px;
}
.htimeline__item--below .htimeline__card {
  inset: 26px 4px 4px 4px;
}

/* ── Text overlay — slides up from bottom on hover ── */
.htimeline__card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 18px 16px;
  background: rgba(14, 14, 14, 0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(100%);
  transition: transform 0.45s var(--ease-steel);
  z-index: 2;
}

.htimeline__card:hover .htimeline__card-overlay {
  transform: translateY(0);
}

.htimeline__card-event {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: #ffffff;
  line-height: var(--lead-snug);
}

.htimeline__card-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin: 0;
}

/* ── Dot row ── */
.htimeline__dot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.htimeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--bg-primary);
  border: 2px solid var(--silver-muted);
  flex-shrink: 0;
  transition:
    border-color var(--dur-base) var(--ease-steel),
    box-shadow   var(--dur-base) var(--ease-steel),
    width        var(--dur-base) var(--ease-steel),
    height       var(--dur-base) var(--ease-steel);
}

.htimeline__item:hover .htimeline__dot {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim), 0 0 14px var(--accent-glow);
}

.htimeline__item--current .htimeline__dot {
  background-color: var(--accent);
  border-color: var(--accent);
  width: 14px; height: 14px;
  box-shadow: 0 0 0 5px var(--accent-dim), 0 0 20px var(--accent-glow);
}

/* ── Light mode ── */
[data-theme=light] .htimeline__card {
  border-color: rgba(14, 42, 88, 0.12);
}
[data-theme=light] .htimeline__dot {
  background-color: var(--bg-primary);
}
[data-theme=light] .htimeline__card-overlay {
  background: rgba(10, 20, 40, 0.65);
}

/* (old horizontal-scroll mobile timeline removed — replaced by the stacked card layout below) */


/* ================================================================
   13  SERVICES
   13  SERVICES
   ================================================================ */

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.service-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-steel),
              box-shadow   var(--dur-base) var(--ease-steel),
              transform    var(--dur-base) var(--ease-steel);
}
.service-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.service-card__media {
  aspect-ratio: 16 / 9;
  background: var(--bg-surface);
  background-image: var(--gradient-steel-sheen);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.service-card__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card__media-icon { width: 40px; height: 40px; color: var(--silver-muted); opacity: 0.5; }
.service-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.service-card__icon { width: 36px; height: 36px; flex-shrink: 0; color: var(--accent); }
.service-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: var(--track-wider);
  display: block;
  margin-bottom: var(--sp-1);
}
.service-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: var(--text-primary);
  line-height: var(--lead-snug);
  margin: 0;
  padding: 0 var(--sp-5) var(--sp-3);
}
.service-card__body { padding: 0 var(--sp-5) var(--sp-5); flex: 1; }

/* Number + icon removed from Service & Product cards (per request) */
.service-card__header { display: none; }
.service-card__title  { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.pcard__icon, .pcard__num { display: none; }


/* ================================================================
   14  PRODUCTS CAROUSEL
   ================================================================ */

.products-carousel {
  position: relative;
  overflow: hidden;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.products-carousel.is-dragging { cursor: grabbing; }
.products-carousel__track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: var(--sp-6) 60px;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}
.carousel-hint {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  opacity: 0.5;
  margin-top: var(--sp-4);
}
.pcard {
  width: 256px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-steel),
              box-shadow   var(--dur-base) var(--ease-steel);
  will-change: transform;
  transform-origin: center;
}
.pcard.is-center {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 32px var(--accent-glow);
}
.pcard__icon {
  display: none;
  width: 42px;
  height: 42px;
  color: var(--blue);
  opacity: 0.65;
  margin-bottom: var(--sp-3);
  flex-shrink: 0;
}
.pcard__inner { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.pcard__num {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  letter-spacing: var(--track-wider);
}
.pcard__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: var(--text-primary);
  line-height: var(--lead-snug);
}
.pcard__desc { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--lead-normal); }
.products-carousel__hint { margin-top: var(--sp-4); }


/* ================================================================
   15  MACHINERY CAROUSEL
   ================================================================ */

.machinery-carousel {
  position: relative;
  overflow: hidden;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.machinery-carousel.is-dragging { cursor: grabbing; }
.machinery-carousel__track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: var(--sp-5) 60px;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}
.mcard {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-steel),
              box-shadow   var(--dur-base) var(--ease-steel);
  will-change: transform;
  transform-origin: center;
}
.mcard.is-center {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 24px var(--accent-glow);
}
.mcard__media {
  height: 160px;
  background: var(--bg-surface);
  background-image: var(--gradient-steel-sheen);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-default);
  overflow: hidden;
}
.mcard__media--placeholder { color: var(--silver-muted); }
.mcard__media--placeholder svg { width: 44px; height: 44px; opacity: 0.35; }
.mcard__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard__name {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: var(--text-primary);
  line-height: var(--lead-snug);
}


/* ================================================================
   16  CLIENTS STRIP
   ================================================================ */

.clients-strip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-20);     /* breathing room above the marquee */
  padding-top: var(--sp-10);
  border-top: 1px solid rgba(14, 42, 88, 0.08);
}
.clients-strip__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  max-width: 720px;
  margin-inline: auto;
}
.clients-strip__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #1b6cbe;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
.clients-strip__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: #0c1e4f;
  line-height: var(--lead-snug);
  margin: 0;
}
.clients-strip__subtitle {
  font-size: var(--text-md);
  color: #000000;
  line-height: var(--lead-relaxed);
  max-width: 640px;
}
.clients-strip__track-wrapper {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.clients-strip__track {
  display: flex;
  gap: var(--sp-8);
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: strip-scroll 30s linear infinite;
}
@keyframes strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.client-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  /* Uniform optical box — every logo scales to fill the same area, so
     wide and narrow marks read at a consistent visual size */
  width: 200px;
  height: 90px;
  padding-inline: var(--sp-2);
}
/* Real client logos — clients without a supplied logo fall back to a wordmark */
.client-logo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--dur-base) var(--ease-steel),
              transform var(--dur-base) var(--ease-steel);
}
.client-logo:hover .client-logo__img { opacity: 1; transform: scale(1.06); }
.client-logo__name {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  color: var(--silver-mid);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  opacity: 0.62;
  transition: color var(--dur-base) var(--ease-steel),
              opacity var(--dur-base) var(--ease-steel);
}
.client-logo:hover .client-logo__name {
  color: var(--accent-hover);
  opacity: 1;
}


/* ================================================================
   17  PROJECTS — Two opposing scroll rails (draggable)
   ================================================================ */

.projects-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
  /* Break out of the max-width container so the rails span the full viewport */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.projects-rail__row {
  position: relative;
  overflow: hidden;
  cursor: grab;
}
.projects-rail__row.is-dragging { cursor: grabbing; }

.projects-rail__track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
  padding: var(--sp-2) 0;
  will-change: transform;
  -webkit-user-select: none;
          user-select: none;
}

.projects-rail__track .project-card {
  flex-shrink: 0;
  width: clamp(300px, 30vw, 420px);
}

/* legacy class kept for any historical references */
.projects__featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

/* Card */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(14, 42, 88, 0.10);
  background: #0a1224;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition:
    transform   0.45s var(--ease-steel),
    border-color 0.45s var(--ease-steel),
    box-shadow   0.45s var(--ease-steel);
}
.project-card--large { aspect-ratio: 4 / 3; }   /* unify */

.project-card:hover {
  transform: translateY(-4px);
  border-color: #1b6cbe;
  box-shadow:
    0 18px 48px rgba(12, 30, 79, 0.22),
    0 0 0 1px rgba(27, 108, 190, 0.50);
}

/* Image — fills card, zooms gently on hover */
.project-card__media {
  position: absolute;
  inset: 0;
  background: #0a1224;
}
.project-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-steel), filter 0.45s var(--ease-steel);
  filter: saturate(0.92) contrast(1.04);
}
.project-card:hover .project-card__media > img {
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.06);
}

/* Gradient overlay — readable dark-to-transparent for content area */
.project-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(5, 8, 22, 0.94) 0%,
      rgba(5, 8, 22, 0.65) 28%,
      rgba(5, 8, 22, 0.05) 60%,
      rgba(5, 8, 22, 0.0)  100%);
  pointer-events: none;
}

/* Content layer */
.project-card__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-3);
  pointer-events: none;
}

/* Scope chip — top-right corner */
.project-card__scope {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  color: #ffffff;
  letter-spacing: var(--track-wider);
  background: rgba(27, 108, 190, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Title */
.project-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: #ffffff;
  line-height: var(--lead-snug);
  margin: 0;
}
.project-card--large .project-card__title { font-size: var(--text-xl); }

/* Subtitle */
.project-card__subtitle {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* Meta — show only client (most relevant on card surface);
   consultant + location live in the modal. */
.project-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--sp-3);
  margin-top: var(--sp-1);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.project-card__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
}
.project-card__meta-row:not(:first-child) { display: none; }
.project-card__meta-row dt {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  flex-shrink: 0;
}
.project-card__meta-row dd {
  color: #ffffff;
  font-weight: var(--w-medium);
  text-align: right;
}

/* "Open" arrow — appears on hover, bottom-right of card */
.project-card::after {
  content: '';
  position: absolute;
  bottom: var(--sp-4);
  right: var(--sp-4);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #1b6cbe;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='9 7 17 7 17 15'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  opacity: 0;
  transform: translate(6px, 6px) scale(0.92);
  transition: opacity 0.3s var(--ease-steel), transform 0.35s var(--ease-steel);
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 6px 18px rgba(27, 108, 190, 0.45);
}
.project-card:hover::after {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* View-all toggle row */
.projects__expand-row {
  margin-top: var(--sp-6);
  display: flex;
  justify-content: center;
}

.projects__expand-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: #ffffff;
  background: #0c1e4f;
  border: 1px solid #1b6cbe;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-6);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-steel),
              transform var(--dur-base) var(--ease-steel),
              box-shadow var(--dur-base) var(--ease-steel);
}
.projects__expand-btn::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.32s var(--ease-steel);
}
.projects__expand-btn[aria-expanded="true"]::after { transform: rotate(-180deg); }
.projects__expand-btn:hover {
  background: #1b6cbe;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(27, 108, 190, 0.32);
}

/* Full projects table */
.projects__all {
  margin-top: var(--sp-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(14, 42, 88, 0.10);
}
.projects-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  background: #ffffff;
}
.projects-table thead {
  background: #0c1e4f;
}
.projects-table thead th {
  padding: var(--sp-4) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: #ffffff;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.projects-table tbody tr {
  border-bottom: 1px solid rgba(14, 42, 88, 0.08);
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
  cursor: pointer;
  position: relative;
}
.projects-table tbody tr:last-child { border-bottom: none; }
.projects-table tbody tr:hover {
  background: rgba(27, 108, 190, 0.06);
  box-shadow: inset 3px 0 0 #1b6cbe;
}
.projects-table td {
  padding: var(--sp-4) var(--sp-4);
  font-size: var(--text-sm);
  color: #000000;
  vertical-align: middle;
}
.projects-table td:first-child {
  color: #1b6cbe;
  font-weight: var(--w-medium);
  width: 56px;
}
.projects-table td:nth-child(2) {
  color: #0c1e4f;
  font-weight: var(--w-semibold);
}
.projects-table td:last-child {
  color: #1b6cbe;
  font-weight: var(--w-medium);
  white-space: nowrap;
}

/* ================================================================
   PROJECT MODAL — Restyled
   ================================================================ */

.proj-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  /* visibility removes the whole subtree from hit-testing while closed —
     children with pointer-events:auto (gallery slides, nav buttons) would
     otherwise keep swallowing clicks over the page. Delayed so the
     fade-out still plays. */
  visibility: hidden;
  transition: opacity var(--dur-base), visibility 0s linear var(--dur-base);
  padding: var(--sp-4);
}
.proj-modal.is-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity var(--dur-base), visibility 0s;
}

.proj-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 22, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.proj-modal__panel {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid rgba(14, 42, 88, 0.12);
  border-radius: var(--radius-xl);
  width: min(1080px, 95vw);
  max-height: 90vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  box-shadow: 0 30px 80px rgba(5, 8, 22, 0.50);
}

/* — Gallery — */
.proj-modal__gallery {
  position: relative;
  background: #0a1224;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-height: 100%;
}

.proj-modal__gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s var(--ease-steel);
  pointer-events: none;
  z-index: 1;
}
.proj-modal__gallery-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.proj-modal__gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* — Gallery nav (nested inside .proj-modal__gallery) — */
.proj-modal__gallery-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  z-index: 5;
  pointer-events: none;     /* let clicks pass to slide */
}
.proj-modal__gallery-nav[aria-hidden="true"] { display: none; }

.proj-modal__nav-btn {
  width: 40px;
  height: 40px;
  background: rgba(12, 30, 79, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.proj-modal__nav-btn:hover {
  background: #1b6cbe;
  transform: scale(1.08);
}

.proj-modal__nav-counter {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #ffffff;
  background: rgba(12, 30, 79, 0.85);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* — Info panel — */
.proj-modal__info {
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  overflow-y: auto;
  max-height: 90vh;
}
.proj-modal__info-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Scope as a blue pill — matches the card chip */
.proj-modal__scope {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  color: #ffffff;
  letter-spacing: var(--track-wider);
  background: #1b6cbe;
  border-radius: 999px;
}

.proj-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: #0c1e4f;
  line-height: var(--lead-snug);
  margin: 0;
}

.proj-modal__subtitle {
  font-size: var(--text-md);
  color: #000000;
  line-height: var(--lead-snug);
}

/* Meta: clean stacked rows with blue labels */
.proj-modal__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(14, 42, 88, 0.10);
  margin: 0;
}
.proj-modal__meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proj-modal__meta-row dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  color: #1b6cbe;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.proj-modal__meta-row dd {
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  color: #0c1e4f;
  margin: 0;
}

/* Close button */
.proj-modal__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 38px;
  height: 38px;
  background: #ffffff;
  border: 1px solid rgba(14, 42, 88, 0.15);
  border-radius: 50%;
  color: #0c1e4f;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  box-shadow: 0 4px 12px rgba(5, 8, 22, 0.15);
}
.proj-modal__close:hover {
  background: #1b6cbe;
  color: #ffffff;
  border-color: #1b6cbe;
  transform: rotate(90deg);
}

/* Responsive — collapse to single column on narrow screens */
@media (max-width: 768px) {
  .proj-modal__panel {
    grid-template-columns: 1fr;
    max-height: 92vh;
  }
  .proj-modal__gallery {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .proj-modal__info {
    max-height: none;
    padding: var(--sp-6);
  }
}


/* ================================================================
   18  FACTORY
   ================================================================ */

.section--factory { overflow: hidden; }
.factory__bg { position: absolute; inset: 0; z-index: 0; }
.factory__bg > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.factory__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(5,5,15,0.96) 0%, rgba(5,5,15,0.75) 50%, rgba(5,5,15,0.50) 100%);
}
.section--factory .container { position: relative; z-index: 1; }
.factory__layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
.factory__scale { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-8); }
.factory__scale-item { padding: var(--sp-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: rgba(255,255,255,0.03); text-align: center; }
.factory__scale-item--highlight { border-color: var(--accent); background: var(--accent-dim); }
.factory__scale-num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  font-weight: var(--w-xbold);
  letter-spacing: var(--track-tight);
  line-height: 1;
  display: inline-block;
}

/* Chrome silver on factory stat numbers — overrides the [data-theme="light"]
   .display-text deep-navy rule via higher specificity. */
.section--factory .factory__scale-num,
[data-theme="light"] .section--factory .factory__scale-num {
  background-image: var(--gradient-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.factory__scale-unit { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: var(--track-wider); margin-left: 2px; }
.factory__scale-label { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--sp-1); display: block; }
.factory__location { font-size: var(--text-sm); color: var(--text-secondary); display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.factory__map-link { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); letter-spacing: var(--track-wider); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--accent-muted); transition: border-color var(--dur-fast); }
.factory__map-link:hover { border-color: var(--accent); }
.factory__machinery { margin-top: var(--sp-12); }
.factory__machinery-intro { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--sp-2); }
.factory__machinery-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--w-bold); text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--sp-6); }


/* ================================================================
   19  QUALITY / ISO
   ================================================================ */

.iso-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.iso-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); transition: border-color var(--dur-base) var(--ease-steel), transform var(--dur-base) var(--ease-steel); }
.iso-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.iso-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.iso-card__badge { font-family: var(--font-mono); font-size: 9px; color: var(--accent); border: 1px solid var(--accent); padding: 2px 6px; border-radius: 2px; letter-spacing: var(--track-wider); text-transform: uppercase; }
.iso-card__standard { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: var(--track-wide); }
.iso-card__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--w-bold); text-transform: uppercase; color: var(--text-primary); line-height: var(--lead-snug); }
.iso-card__body { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--lead-normal); }
.iso-card__details { display: flex; flex-direction: column; gap: var(--sp-1); border-top: 1px solid var(--border-subtle); padding-top: var(--sp-3); margin-top: auto; }


/* ================================================================
   20  APPROVALS CAROUSEL
   ================================================================ */

.approvals__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--w-bold); text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--sp-2); }
.approvals__intro { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--sp-6); }
.approvals-carousel { position: relative; overflow: hidden; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%); }
.approvals-carousel.is-dragging { cursor: grabbing; }
.approvals-carousel__track { display: flex; gap: 20px; width: max-content; padding: var(--sp-4) 60px; will-change: transform; -webkit-user-select: none; user-select: none; }
.acard { width: 180px; flex-shrink: 0; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; transition: border-color var(--dur-base) var(--ease-steel), box-shadow var(--dur-base) var(--ease-steel); will-change: transform; transform-origin: center; }
.acard.is-center { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 24px var(--accent-glow); }
.acard__logo { width: 72px; height: 72px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.acard__logo > img { width: 100%; height: 100%; object-fit: contain; }
.acard__logo-abbr { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--w-xbold); color: var(--accent); letter-spacing: var(--track-tight); }
.acard__org { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--w-bold); text-transform: uppercase; color: var(--text-primary); letter-spacing: var(--track-tight); line-height: var(--lead-snug); }
.acard__scope { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.6; }


/* ================================================================
   21  PARTNERS
   ================================================================ */

.partners { margin-top: var(--sp-12); }
.partners__title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: var(--track-widest); text-transform: uppercase; margin-bottom: var(--sp-5); }

/* Spec Scanner — hover a tile to sweep a scan-line + reveal its supply spec */
.partners__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: var(--sp-6);
  padding: 10px;
}
/* Blueprint grid on a masked layer behind the tiles — fades at the edges
   so it merges into the section background instead of a hard rectangle */
.partners__grid::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 82% 78% at 50% 50%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 82% 78% at 50% 50%, #000 45%, transparent 100%);
}
.partner-tile {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.16);
  background: rgba(56, 189, 248, 0.03);
  padding: 16px 16px 18px;
  transition: border-color var(--dur-base) var(--ease-steel),
              background   var(--dur-base) var(--ease-steel);
}
.partner-tile:hover { border-color: #38bdf8; background: rgba(56, 189, 248, 0.09); }

.partner-tile__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 1.25rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #cdd8e6;
  transition: color var(--dur-base) var(--ease-steel);
}
.partner-tile:hover .partner-tile__name { color: #ffffff; }

.partner-tile__spec {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: #38bdf8;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--dur-base) var(--ease-steel),
              transform var(--dur-base) var(--ease-steel);
}
.partner-tile:hover .partner-tile__spec { opacity: 1; transform: none; }

.partner-tile__scan {
  position: absolute;
  left: 0; right: 0; top: -4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #38bdf8, transparent);
  opacity: 0;
  pointer-events: none;
}
.partner-tile:hover .partner-tile__scan {
  opacity: 1;
  animation: partner-scan 1.15s linear infinite;
}
@keyframes partner-scan { from { top: -4px; } to { top: 104%; } }

/* Touch / narrow screens have no hover — show specs, disable the sweep */
@media (hover: none), (max-width: 640px) {
  .partner-tile__spec { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-tile:hover .partner-tile__scan { animation: none; }
}


/* ================================================================
   22  WHY REGAL
   ================================================================ */

.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.why-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); transition: border-color var(--dur-base) var(--ease-steel), transform var(--dur-base) var(--ease-steel); }
.why-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.why-card__num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); letter-spacing: var(--track-wider); }
.why-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.why-card__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--track-tight); color: var(--text-primary); line-height: var(--lead-snug); }
.why-card__stat { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--w-xbold); color: var(--accent); letter-spacing: var(--track-tight); line-height: 1; }


/* ================================================================
   23  CONTACT
   ================================================================ */

.contact__layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-16); align-items: flex-start; }
.contact__info-col { display: flex; flex-direction: column; gap: var(--sp-8); }
.contact__address { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lead-relaxed); }
.contact__location { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact__location-title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: var(--track-widest); text-transform: uppercase; }
.contact__map-btn { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); letter-spacing: var(--track-wider); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--accent-muted); width: fit-content; transition: border-color var(--dur-fast); }
.contact__map-btn:hover { border-color: var(--accent); }
.contact__location {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}
.contact__map-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
  box-shadow: var(--shadow-md);
}
.contact__map {
  width: 100%;
  height: 440px;
  border: 0;
  display: block;
}
.office-cards { display: flex; flex-direction: column; gap: var(--sp-3); }
.office-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); transition: border-color var(--dur-base); }
.office-card--primary { border-color: var(--border-strong); }
.office-card__header { display: flex; align-items: center; justify-content: space-between; }
.office-card__city { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--w-bold); text-transform: uppercase; color: var(--text-primary); }
.office-card__region { font-size: var(--text-xs); color: var(--text-tertiary); }
.office-card__badge { font-family: var(--font-mono); font-size: 9px; color: var(--accent); border: 1px solid var(--accent); padding: 2px 6px; border-radius: 2px; letter-spacing: var(--track-wider); }
.office-card__details { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.7; }
.office-card__link { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); text-decoration: none; letter-spacing: var(--track-wide); }
.contact__form-col { }
.contact-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: var(--track-wider); text-transform: uppercase; }
.form-required { color: var(--accent); margin-left: 2px; }
.form-input, .form-textarea { width: 100%; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); outline: none; box-sizing: border-box; }
.form-input:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.form-textarea { resize: vertical; min-height: 120px; }
/* Custom dropdown chevron — native select arrow removed for a consistent look */
select.form-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
}
select.form-input option { color: #0c1e4f; background: #ffffff; }
.form-conditional { display: none; }
.form-conditional.is-visible { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-file-input { display: none; }
.form-file-label { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border: 1px dashed var(--border-default); border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: var(--track-wider); transition: border-color var(--dur-fast), color var(--dur-fast); }
.form-file-label:hover { border-color: var(--accent); color: var(--accent); }
.form-file-text { font-size: var(--text-xs); color: var(--text-tertiary); }
.topic-selector { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.topic-option { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.topic-option:hover, .topic-option.is-active { border-color: var(--accent); background: var(--accent-dim); }
.topic-option__icon { width: 16px; height: 16px; color: var(--accent); }
.topic-option__text { display: flex; flex-direction: column; }
.topic-option__label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: var(--track-wide); }
.topic-option__sub { font-size: 10px; color: var(--text-tertiary); }
.contact-form__note { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.6; }
.contact-form__submit { display: flex; gap: var(--sp-3); align-items: center; }


/* ================================================================
   24  FOOTER
   ================================================================ */

.footer { background: #050810; border-top: 1px solid var(--border-subtle); }
.footer__main { padding-block: var(--sp-16) var(--sp-12); }
.footer__main-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-10); }
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); }
.footer__logo { display: flex; align-items: center; gap: var(--sp-3); }
.footer__logo-img { height: 34px; width: auto; }
.footer__brand-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lead-relaxed); max-width: 340px; }
.footer__certs { margin-top: var(--sp-4); }
.footer__cert-list { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.footer__cert-note { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--sp-2); }
.footer__col-title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: var(--track-widest); text-transform: uppercase; margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-subtle); }
.footer__nav-list { display: flex; flex-direction: column; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.footer__nav-link { font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast); }
.footer__nav-link:hover { color: var(--accent); }
.footer__group { display: flex; flex-direction: column; gap: var(--sp-1); }
.footer__group-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__group-item { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); transition: padding-left var(--dur-fast); cursor: default; }
.footer__group-item--active, .footer__group-item:hover { padding-left: var(--sp-2); }
.footer__group-name { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--w-bold); text-transform: uppercase; color: var(--text-primary); letter-spacing: var(--track-tight); }
.footer__group-item--active .footer__group-name, .footer__group-item:hover .footer__group-name { color: var(--accent); }
.footer__group-label { font-size: var(--text-xs); color: var(--text-tertiary); }
.footer__group-type { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); letter-spacing: var(--track-wider); }
.footer__group-link { font-size: var(--text-xs); color: var(--accent); text-decoration: none; }
.footer__location { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.7; margin-top: var(--sp-3); }
.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer__social-link { width: 34px; height: 34px; border: 1px solid var(--border-default); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast); }
.footer__social-link:hover { border-color: var(--accent); color: var(--accent); }
.footer__bottom { border-top: 1px solid var(--border-subtle); padding-block: var(--sp-5); }
.footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.footer__legal { font-size: var(--text-xs); color: var(--text-tertiary); }
.footer__legal-detail { font-size: 10px; color: var(--text-tertiary); opacity: 0.6; margin-top: 2px; }
.footer__back-top { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: var(--track-wider); text-transform: uppercase; background: none; border: 1px solid var(--border-default); border-radius: var(--radius); padding: var(--sp-2) var(--sp-4); cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); }
.footer__back-top:hover { border-color: var(--accent); color: var(--accent); }


/* ================================================================
   LIGHT MODE OVERRIDES
   ================================================================ */

[data-theme="light"] .service-card,
[data-theme="light"] .pcard,
[data-theme="light"] .mcard,
[data-theme="light"] .why-card,
[data-theme="light"] .iso-card,
[data-theme="light"] .acard,
[data-theme="light"] .office-card {
  background: var(--bg-surface);
  border-color: var(--border-default);
}
[data-theme="light"] .service-card__media,
[data-theme="light"] .pcard__icon,
[data-theme="light"] .mcard__media {
  background: var(--bg-elevated);
  border-color: rgba(14,42,88,0.10);
}
[data-theme="light"] .project-card { border-color: rgba(14,42,88,0.12); }
[data-theme="light"] .factory__bg-overlay {
  background: linear-gradient(to right, rgba(5,14,36,0.97) 0%, rgba(5,14,36,0.80) 55%, rgba(5,14,36,0.55) 100%);
}
[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea { background: var(--bg-surface); border-color: var(--border-default); }
[data-theme="light"] .footer { background: #0d1630; color: #f0f4fb; }
[data-theme="light"] .htimeline__dot { background-color: var(--bg-primary); }
[data-theme="light"] .htimeline__card { border-color: rgba(14,42,88,0.12); background: var(--bg-elevated); }
[data-theme="light"] .htimeline__card-overlay { background: rgba(10,20,40,0.65); }

/* Light mode: display + headlines pick up the new deep-navy primary text colour */
[data-theme="light"] .display-text {
  color: #0c1e4f;
}
[data-theme="light"] .section__headline { color: #0c1e4f; }
/* Services + Quality + Contact use a dark navy background in light mode —
   see "DARK NAVY SECTIONS" and "SERVICES BLUEPRINT" blocks below. */
[data-theme="light"] .pcard__icon { color: #0ea5e9; opacity: 0.7; }


/* ================================================================
   SECTION HEADLINE COLOR SYSTEM
   - Default: metallic silver shimmer (sits on dark backgrounds)
   - Light mode (the section actually renders on a light background):
       light blue, except the factory section which has a dark image overlay.
   Defined after the [data-theme="light"] override above so this wins.
   ================================================================ */

.section__headline {
  background-image: var(--gradient-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Restore solid color on the underline pseudo-element */
.section__headline::after {
  -webkit-text-fill-color: initial;
}

/* Light-background sections (light mode) — deep navy headline (pic 3).
   Factory + Services + Quality + Contact use a dark background even in
   light mode and therefore keep the default metallic gradient. */
[data-theme="light"] .section--about    .section__headline,
[data-theme="light"] .section--products .section__headline,
[data-theme="light"] .section--projects .section__headline,
[data-theme="light"] .section--purpose  .section__headline,
[data-theme="light"] .section--team     .section__headline,
[data-theme="light"] .section--why      .section__headline {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: #0c1e4f;
}


/* ================================================================
   SERVICES — Dark blueprint background (light mode)
   Deep navy paper, layered blueprint grid, single clean steel-frame
   elevation as centred watermark. Replaces the cluttered first attempt.
   ================================================================ */

[data-theme="light"] .section--services {
  background-color: #0a1d3a;
  background-image:
    /* Major grid (every 5th line) */
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    /* Minor grid */
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 250px 250px, 250px 250px, 50px 50px, 50px 50px;
  background-position: 0 0;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .section--services > .container {
  position: relative;
  z-index: 2;
}

/* Cinematic vignette so the centre reads dark and edges fade subtly */
[data-theme="light"] .section--services::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, rgba(5, 12, 30, 0.55) 100%);
}

/* Steel-frame elevation drawing — centred watermark */
[data-theme="light"] .section--services::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(1280px, 92%) auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 640' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><g stroke-opacity='0.95'><rect x='160' y='120' width='40' height='420'/><line x1='180' y1='120' x2='180' y2='540'/><rect x='1080' y='120' width='40' height='420'/><line x1='1100' y1='120' x2='1100' y2='540'/><rect x='150' y='110' width='980' height='28'/><rect x='150' y='520' width='980' height='20'/></g><g stroke-opacity='0.75'><line x1='200' y1='138' x2='370' y2='270'/><line x1='370' y1='138' x2='370' y2='270'/><line x1='370' y1='270' x2='540' y2='138'/><line x1='540' y1='138' x2='540' y2='270'/><line x1='540' y1='270' x2='710' y2='138'/><line x1='710' y1='138' x2='710' y2='270'/><line x1='710' y1='270' x2='880' y2='138'/><line x1='880' y1='138' x2='880' y2='270'/><line x1='880' y1='270' x2='1050' y2='138'/><line x1='1050' y1='138' x2='1050' y2='270'/><line x1='1050' y1='270' x2='1080' y2='240'/><line x1='200' y1='270' x2='1080' y2='270'/></g><g fill='%23ffffff' fill-opacity='0.85' stroke='none'><circle cx='180' cy='130' r='3'/><circle cx='1100' cy='130' r='3'/><circle cx='180' cy='530' r='3'/><circle cx='1100' cy='530' r='3'/><circle cx='370' cy='124' r='2.5'/><circle cx='540' cy='124' r='2.5'/><circle cx='710' cy='124' r='2.5'/><circle cx='880' cy='124' r='2.5'/><circle cx='1050' cy='124' r='2.5'/></g><g stroke-opacity='0.55'><line x1='160' y1='70' x2='1120' y2='70'/><line x1='160' y1='62' x2='160' y2='78'/><line x1='1120' y1='62' x2='1120' y2='78'/><line x1='100' y1='120' x2='100' y2='540'/><line x1='92' y1='120' x2='108' y2='120'/><line x1='92' y1='540' x2='108' y2='540'/></g><g stroke-opacity='0.55'><line x1='160' y1='590' x2='220' y2='590'/><line x1='190' y1='580' x2='190' y2='600'/><line x1='1060' y1='590' x2='1120' y2='590'/><line x1='1090' y1='580' x2='1090' y2='600'/></g></svg>");
}

/* — Headline metallic on dark — already inherited from default
   (services no longer in the [data-theme="light"] blue-headline list) — */

/* — Service cards on dark — translucent surfaces with white body, blue labels — */
[data-theme="light"] .section--services .service-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(2px);
}
[data-theme="light"] .section--services .service-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .section--services .service-card__media {
  background: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .section--services .service-card__title { color: #ffffff; }
[data-theme="light"] .section--services .service-card__body  { color: #ffffff; }
[data-theme="light"] .section--services .service-card__num   { color: #1b6cbe; }


/* ================================================================
   DARK NAVY SECTIONS — Services + Quality + Contact + Factory
   (Light mode)
   Per user palette:
     • Headlines  → metallic silver (pic 1) — handled by default rule
     • Body/cards → white                  (pic alternate)
     • Labels/mono → medium blue #1b6cbe   (pic 2)
   ================================================================ */

[data-theme="light"] .section--quality,
[data-theme="light"] .section--contact {
  background-color: #0d1630;
  color: #ffffff;
}

/* Scope CSS custom properties on dark sections so any var(--text-*) usage
   inside flips to the dark-bg palette automatically. */
[data-theme="light"] .section--services,
[data-theme="light"] .section--quality,
[data-theme="light"] .section--contact,
[data-theme="light"] .section--factory {
  --text-primary:   #ffffff;
  --text-secondary: #ffffff;
  --text-tertiary:  #1b6cbe;
}

/* All mono / label-styled text on dark sections → medium blue (pic 2) */
[data-theme="light"] .section--services .mono-text,
[data-theme="light"] .section--quality  .mono-text,
[data-theme="light"] .section--contact  .mono-text,
[data-theme="light"] .section--factory  .mono-text {
  color: #1b6cbe;
}

/* Section intros, paragraphs → solid white (alternate) */
[data-theme="light"] .section--quality  .section__intro,
[data-theme="light"] .section--contact  .section__intro,
[data-theme="light"] .section--services .section__intro,
[data-theme="light"] .section--factory  .section__intro {
  color: #ffffff;
}

/* Section labels (eg "008 / QUALITY") → medium blue */
[data-theme="light"] .section--services .section__label,
[data-theme="light"] .section--quality  .section__label,
[data-theme="light"] .section--contact  .section__label,
[data-theme="light"] .section--factory  .section__label {
  color: #1b6cbe;
}

/* ── ISO cards ─────────────────────────────────────────────── */
[data-theme="light"] .section--quality .iso-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .section--quality .iso-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
[data-theme="light"] .section--quality .iso-card__title    { color: #ffffff; }
[data-theme="light"] .section--quality .iso-card__body     { color: #ffffff; }
[data-theme="light"] .section--quality .iso-card__standard { color: #1b6cbe; }
[data-theme="light"] .section--quality .iso-card__details  {
  color: #ffffff;
  border-top-color: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .section--quality .iso-card__details dt { color: #1b6cbe; }

/* ── Approvals ─────────────────────────────────────────────── */
[data-theme="light"] .section--quality .approvals__title { color: #ffffff; }
[data-theme="light"] .section--quality .approvals__intro { color: #ffffff; }
[data-theme="light"] .section--quality .acard {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .section--quality .acard__logo {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .section--quality .acard__org   { color: #ffffff; }
[data-theme="light"] .section--quality .acard__scope { color: #ffffff; }

/* ── Partners ──────────────────────────────────────────────── */
[data-theme="light"] .section--quality .partners__title { color: #1b6cbe; }

/* ── Contact form ──────────────────────────────────────────── */
[data-theme="light"] .section--contact .form-label { color: #1b6cbe; }
[data-theme="light"] .section--contact .form-input,
[data-theme="light"] .section--contact .form-textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
[data-theme="light"] .section--contact .form-input::placeholder,
[data-theme="light"] .section--contact .form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme="light"] .section--contact .topic-option {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="light"] .section--contact .topic-option__label { color: #ffffff; }
[data-theme="light"] .section--contact .topic-option__sub   { color: #1b6cbe; }
[data-theme="light"] .section--contact .form-file-label {
  border-color: rgba(255, 255, 255, 0.20);
  color: #1b6cbe;
}
[data-theme="light"] .section--contact .form-file-text   { color: #1b6cbe; }
[data-theme="light"] .section--contact .contact-form__note { color: #1b6cbe; }

/* ── Office cards ──────────────────────────────────────────── */
[data-theme="light"] .section--contact .office-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .section--contact .office-card--primary {
  border-color: rgba(255, 255, 255, 0.22);
}
[data-theme="light"] .section--contact .office-card__city    { color: #ffffff; }
[data-theme="light"] .section--contact .office-card__region  { color: #1b6cbe; }
[data-theme="light"] .section--contact .office-card__details { color: #ffffff; }
[data-theme="light"] .section--contact .office-card__details dt { color: #1b6cbe; }

/* ── Contact location block ───────────────────────────────── */
[data-theme="light"] .section--contact .contact__location-title { color: #1b6cbe; }
[data-theme="light"] .section--contact .contact__address        { color: #ffffff; }


/* ================================================================
   FOOTER — Silver metallic text on dark background
   Applies the same brushed-silver gradient used for dark-section
   headlines and the hero "ENGINEERED" line.
   ================================================================ */

.footer__brand-desc,
.footer__location,
.footer__col-title,
.footer__nav-link,
.footer__group-name,
.footer__group-type,
.footer__group-label,
.footer__cert-list,
.footer__cert-list li,
.footer__cert-note,
.footer__legal,
.footer__legal-detail,
.footer__back-top {
  background-image: var(--gradient-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hover & active states need a solid colour so the change is visible —
   medium blue from the new palette. */
.footer__nav-link:hover,
.footer__group-item:hover .footer__group-name,
.footer__group-item--active .footer__group-name,
.footer__back-top:hover {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: #1b6cbe;
}

/* Group link arrow ("Part of Alusystems Group →") — keep readable, no gradient */
.footer__group-link {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: #1b6cbe;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .iso-grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__main-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .factory__layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .factory__scale { grid-template-columns: 1fr; }
  .projects__featured { grid-template-columns: repeat(2, 1fr); }
  .project-card--large { grid-column: auto; }
  .contact__layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .proj-modal__panel { grid-template-columns: 1fr; }
  .proj-modal__gallery { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .about__grid { grid-template-columns: 1fr; }
  .about__visual { position: static; }
}

@media (max-width: 767px) {
  .services__grid { grid-template-columns: 1fr; }
  .iso-grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr 1fr; }
  .footer__main-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer__bottom-inner { flex-direction: column; text-align: center; }
  .factory__scale { grid-template-columns: 1fr; }
  .projects__featured { grid-template-columns: 1fr; }
  .project-card--large { grid-column: auto; }
  .form-row { grid-template-columns: 1fr; }
  .contact__layout { gap: var(--sp-6); }
  .about__body { margin-bottom: var(--sp-6); }
  .about__grid { grid-template-columns: 1fr; }
  .about__visual { position: static; }
  .section--stats .container,
  .section--why .container { padding-inline: var(--container-pad); }
  .htimeline__badge { animation: none; }
}


/* ================================================================
   FLOATING CONTACT BUTTON (FAB)
   ================================================================ */
.fab {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  height: 56px;
  width: 56px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-accent);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  transition: width var(--dur-base) var(--ease-steel), background var(--dur-fast);
}
.fab__icon { width: 24px; height: 24px; flex-shrink: 0; margin: 0 16px; }
.fab__label {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  padding-right: 22px;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-steel);
}
.fab:hover, .fab:focus-visible { width: 188px; background: var(--accent-hover); }
.fab:hover .fab__label, .fab:focus-visible .fab__label { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fab { transition: background var(--dur-fast); } }


/* Nav logo — scale down on small screens */
@media (max-width: 640px) {
  :root { --nav-h: 74px; }
  .nav__logo-img { height: 30px; }
}


/* Mobile nav — collapse desktop links into the hamburger menu */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
}
@media (max-width: 520px) {
  .nav__cta { display: none; }
}


/* ================================================================
   CLIENT LOGO — per-logo optical scale
   Some supplied PNGs carry heavy internal whitespace, so they read
   smaller than neighbours even inside the same box. Boost those
   individually via --logo-scale (hover multiplies it, not replaces).
   ================================================================ */
.clients-strip__track-wrapper { padding-block: 16px; }
.client-logo__img { --logo-scale: 1; transform: scale(var(--logo-scale)); }
.client-logo:hover .client-logo__img { transform: scale(calc(var(--logo-scale) * 1.06)); }
.client-logo__img[src*="King%20Salman%20Park"] { --logo-scale: 1.32; }


/* ================================================================
   FORM VALIDATION — inline field errors + summary
   ================================================================ */
.section--contact { --form-error: #ff7a7a; }

.field-error {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--form-error, #e05555);
}

.form-input.has-error,
.form-input.has-error:focus {
  border-color: var(--form-error, #e05555);
  box-shadow: 0 0 0 3px rgba(255, 122, 122, 0.18);
}

.topic-selector.has-error .topic-option {
  border-color: var(--form-error, #e05555);
}

.form-error-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--form-error, #e05555);
  border-radius: var(--radius-md);
  background: rgba(255, 122, 122, 0.10);
  color: var(--form-error, #e05555);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.form-error-summary svg { flex-shrink: 0; margin-top: 1px; }


/* ================================================================
   MANAGEMENT TEAM — cinematic portrait cards (HUD / blueprint style)
   ================================================================ */
.section--team { background-color: var(--bg-section-alt); }

.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-5);
}

.team-card { position: relative; }

.team-card__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: #0d1630;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-steel),
              border-color var(--dur-base) var(--ease-steel),
              box-shadow var(--dur-base) var(--ease-steel);
}
.team-card:hover .team-card__frame {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 18px 44px rgba(14, 42, 88, 0.28);
}

/* Portrait: always full colour, gentle zoom on hover */
.team-card__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  display: block;
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-steel);
}
.team-card:hover .team-card__img { transform: scale(1.06); }

/* Bottom veil so the name always reads */
.team-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
      rgba(8, 16, 38, 0.94) 0%,
      rgba(8, 16, 38, 0.72) 26%,
      rgba(8, 16, 38, 0.10) 52%,
      rgba(8, 16, 38, 0.00) 72%);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-steel);
}

/* HUD corner brackets */
.team-card__bracket {
  position: absolute; width: 20px; height: 20px;
  border-color: var(--accent); pointer-events: none;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-steel),
                          transform var(--dur-base) var(--ease-steel);
}
.team-card__bracket--tl {
  top: 12px; left: 12px; border-top: 2px solid; border-left: 2px solid;
  transform: translate(-6px, -6px);
}
.team-card__bracket--br {
  bottom: 12px; right: 12px; border-bottom: 2px solid; border-right: 2px solid;
  transform: translate(6px, 6px);
}
.team-card:hover .team-card__bracket { opacity: 1; transform: translate(0, 0); }

/* Name plate */
.team-card__info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: 3px;
}
.team-card__unit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: #38bdf8;
}
.team-card__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
}
.team-card__role {
  font-size: var(--text-xs);
  color: #c2cdda;
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 560px) { .team__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }

/* ── Why cards: numbers removed (per request) ── */
.why-card__num { display: none; }

/* ── Factory location line: silver instead of blue ── */
.section--factory .factory__location,
.section--factory .factory__location .mono-text,
[data-theme="light"] .section--factory .factory__location { color: #c9d3e0; }

/* ================================================================
   FOOTER — silver metallic text for readability on the navy ground
   ================================================================ */
.footer,
[data-theme="light"] .footer { color: #cfd8e4; }

.footer__col-title,
[data-theme="light"] .footer .footer__col-title {
  background-image: var(--gradient-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.footer__brand-desc,
.footer__nav-link,
[data-theme="light"] .footer .footer__brand-desc,
[data-theme="light"] .footer .footer__nav-link { color: #c2cdda; }

.footer__location,
.footer__group-type,
.footer__group-label,
.footer__cert-note,
.footer__cert-list,
.footer__legal,
.footer__legal-detail,
.footer__back-top,
.footer__social-link,
[data-theme="light"] .footer .footer__location,
[data-theme="light"] .footer .footer__group-type,
[data-theme="light"] .footer .footer__group-label,
[data-theme="light"] .footer .footer__cert-note,
[data-theme="light"] .footer .footer__cert-list,
[data-theme="light"] .footer .footer__legal,
[data-theme="light"] .footer .footer__legal-detail,
[data-theme="light"] .footer .footer__back-top,
[data-theme="light"] .footer .footer__social-link { color: #9fabbb; }

.footer__group-name,
[data-theme="light"] .footer .footer__group-name { color: #e6ecf4; }
.footer__legal-detail { opacity: 1; }


/* ================================================================
   CONTACT — silver metallic type on the navy ground
   ================================================================ */
.section--contact,
[data-theme="light"] .section--contact { color: #cfd8e4; }

/* Headline keeps the chrome sweep; supporting copy goes silver */
.section--contact .section__intro,
[data-theme="light"] .section--contact .section__intro { color: #c2cdda; }

.section--contact .section__label,
[data-theme="light"] .section--contact .section__label {
  background-image: var(--gradient-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section--contact .form-label,
.section--contact .form-label span,
[data-theme="light"] .section--contact .form-label,
[data-theme="light"] .section--contact .form-label span { color: #c9d3e0; }

.section--contact .contact-form__note,
[data-theme="light"] .section--contact .contact-form__note { color: #9fabbb; }

.section--contact .topic-option__label,
[data-theme="light"] .section--contact .topic-option__label { color: #e6ecf4; }
.section--contact .topic-option__sub,
[data-theme="light"] .section--contact .topic-option__sub { color: #9fabbb; }

/* Office cards */
.section--contact .office-card__region,
[data-theme="light"] .section--contact .office-card__region { color: #9fabbb; }
.section--contact .office-card__city,
[data-theme="light"] .section--contact .office-card__city {
  background-image: var(--gradient-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.section--contact .office-card__details dt,
[data-theme="light"] .section--contact .office-card__details dt { color: #9fabbb; }
.section--contact .office-card__link,
[data-theme="light"] .section--contact .office-card__link { color: #c9d3e0; }
.section--contact .office-card__link:hover,
[data-theme="light"] .section--contact .office-card__link:hover { color: var(--accent); }
.section--contact .office-card__badge,
[data-theme="light"] .section--contact .office-card__badge { color: #c9d3e0; border-color: rgba(201,211,224,0.45); }


/* ================================================================
   OVERFLOW GUARD
   Wide carousel/marquee tracks must never stretch their grid or flex
   parents. Without min-width:0 a grid item defaults to min-width:auto
   and expands to its content width, pushing sibling content off-screen
   (this was hiding the factory scale figures on mobile).
   ================================================================ */
.factory__layout > *,
.factory__scale,
.factory__scale-item,
.factory__machinery,
.contact__layout > * { min-width: 0; max-width: 100%; }

.machinery-carousel,
.products-carousel,
.projects-rail__row,
.clients-strip__track-wrapper { max-width: 100%; min-width: 0; }


/* ================================================================
   MOBILE FIXES
   1. Hamburger pinned top-right
   2. Stat figures kept on a single readable row
   3. Timeline becomes a stacked, readable card list
   ================================================================ */

/* ── 1. Hamburger to the far right ──
   With .nav__links hidden the 3-column grid collapsed to 2 columns and
   the actions landed in the middle "auto" track. Drop to 2 columns so
   the actions sit hard right. */
@media (max-width: 900px) {
  .nav__container { grid-template-columns: 1fr auto; }
  .nav__actions { justify-self: end; }
}

/* ── 2. Stats: five figures on one line, scaled to fit ── */
@media (max-width: 700px) {
  .stats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stat-item {
    padding: var(--sp-6) 3px;
    min-width: 0;
  }
  .stat-item__value,
  .stat-item--featured .stat-item__value {
    font-size: clamp(0.7rem, 3.4vw, 1.15rem);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
  }
  .stat-item__label {
    font-size: 7.5px;
    letter-spacing: 0.03em;
    max-width: 100%;
    line-height: 1.3;
  }
}

/* ── 3. Timeline: stacked cards on small screens ── */
@media (max-width: 768px) {
  .htimeline { width: 100%; margin-inline: 0; }

  .htimeline__track {
    flex-direction: column;
    height: auto;
    min-height: 0;
    width: 100%;
    gap: var(--sp-6);
  }
  .htimeline__track::after { display: none; }      /* horizontal rail */
  .htimeline__dot-row      { display: none; }

  .htimeline__item { display: block; flex: 0 0 auto; width: 100%; }
  .htimeline__zone { position: static; }
  .htimeline__zone:empty { display: none; }

  /* Year label above each card */
  .htimeline__card-year,
  .htimeline__item--above .htimeline__zone--top .htimeline__card-year,
  .htimeline__item--below .htimeline__zone--bottom .htimeline__card-year {
    position: static;
    transform: none;
    bottom: auto; top: auto; left: auto;
    display: block;
    margin-bottom: 8px;
    font-size: var(--text-sm);
  }

  /* Card becomes a normal block with a fixed aspect */
  .htimeline__card,
  .htimeline__item--above .htimeline__card,
  .htimeline__item--below .htimeline__card {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: var(--radius-lg);
  }
  .htimeline__card:hover { transform: none; }

  /* No hover on touch — always show the caption */
  .htimeline__card-overlay {
    transform: none;
    opacity: 1;
    position: absolute;
    padding: 14px 14px 12px;
  }
  .htimeline__card-desc { font-size: var(--text-xs); }
}


/* ── iOS: inputs under 16px trigger forced page-zoom on focus ── */
@media (max-width: 768px) {
  .form-input, .form-textarea, select.form-input { font-size: 16px; }
}