/* Generated by build.js — do not edit directly. Edit the source files listed below and re-run `node build.js`. */
/* ---- variables.css ---- */
/* =========================================================================
   ALB MECHANICAL — DESIGN TOKENS
   Signature concept: the "temperature arc" from the logo (blue → red sweep)
   is the recurring device used across dividers, gauges, and progress states.
   ========================================================================= */

:root {
  /* ---- Brand palette (from logo) -------------------------------------- */
  --navy-950: #050f21;
  --navy-900: #0a1f3d;
  --navy-800: #102a52;
  --navy-700: #173a6b;

  --cool-500: #1e7fe0;   /* cooling blue   */
  --cool-400: #4aa0ec;
  --cool-100: #e4f1fd;

  --heat-500: #e8352b;   /* heating red    */
  --heat-400: #f15b4f;
  --heat-100: #fde7e5;

  --white: #ffffff;
  --gray-50:  #f5f7fa;
  --gray-100: #eef1f5;
  --gray-200: #dde3ea;
  --gray-400: #9aa5b5;
  --gray-600: #667085;
  --gray-800: #333d4f;

  --success-500: #1e9e6b;
  --warning-500: #e0a51c;
  --danger-500:  #e8352b;

  /* ---- Gradients (the arc signature) ------------------------------------ */
  --arc-gradient: linear-gradient(90deg, var(--cool-500) 0%, var(--cool-400) 35%, var(--heat-400) 65%, var(--heat-500) 100%);
  --navy-gradient: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);

  /* ---- Typography -------------------------------------------------------
     Display: Space Grotesk  — geometric/industrial, echoes duct & metal forms
     Body:    Inter          — high legibility for dense operational UI
     Data:    IBM Plex Mono  — gauge/readout numerals for stats & metrics
  --------------------------------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  /* ---- Spacing scale ----------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ---- Shape / elevation --------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 31, 61, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 31, 61, 0.10);
  --shadow-lg: 0 20px 48px rgba(10, 31, 61, 0.16);

  --transition-fast: 150ms ease;
  --transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 520ms cubic-bezier(0.22, 1, 0.36, 1);

  --header-height: 76px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- global.css ---- */
/* =========================================================================
   ALB MECHANICAL — GLOBAL BASE
   ========================================================================= */

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--gray-800);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

/* ---- Scrollbars — themed to match the brand instead of the OS default ---- */
html { scrollbar-width: thin; scrollbar-color: var(--cool-500) var(--gray-100); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--gray-100); }
*::-webkit-scrollbar-thumb { background: var(--arc-gradient); border-radius: var(--radius-pill); border: 2px solid var(--gray-100); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--cool-500); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* Dark surfaces (sidebar, auth panel) get a track that matches their own background */
.app-sidebar, .auth-brand {
  scrollbar-color: var(--cool-400) rgba(255,255,255,0.08);
}
.app-sidebar::-webkit-scrollbar-track, .auth-brand::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); }
.app-sidebar::-webkit-scrollbar-thumb, .auth-brand::-webkit-scrollbar-thumb { background: var(--cool-400); border: 2px solid transparent; background-clip: padding-box; }

/* ---- Logo badge — logo mark wrapper, no chip background ---- */
.logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
}
.logo-badge img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--navy-900);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.font-data { font-family: var(--font-data); letter-spacing: -0.02em; }

a { color: var(--cool-500); text-decoration: none; }
a:hover { color: var(--navy-900); }

:focus-visible {
  outline: 2px solid var(--cool-500);
  outline-offset: 2px;
}

.eyebrow {
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cool-500);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--heat-500);
  display: inline-block;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding: 0.7rem 1.4rem; transition: all var(--transition-base); border: none; }
.btn-primary { background: var(--navy-900); color: var(--white); }
.btn-primary:hover { background: var(--navy-800); transform: translateY(-2px); box-shadow: var(--shadow-md); color:var(--white); }
.btn-cool { background: var(--cool-500); color: var(--white); }
.btn-cool:hover { background: #1568b8; color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-heat { background: var(--heat-500); color: var(--white); }
.btn-heat:hover { background: #c22921; color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline-light { border: 1.5px solid rgba(255,255,255,0.5); color: var(--white); background: transparent; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.btn-lg { padding: 0.95rem 2rem; font-size: var(--fs-md); }
.btn:active, .btn-primary:active, .btn-cool:active, .btn-heat:active { transform: translateY(0); box-shadow: none; }

/* ---- Section rhythm ------------------------------------------------------ */
.section { padding: var(--space-24) 0; }
.section-tight { padding: var(--space-16) 0; }
.section-navy {
  background: var(--navy-gradient);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.section-navy::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('/assets/images/backgrounds/cta.webp');
  background-size: cover; background-position: center;
}
.section-navy::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(5,15,33,0.72) 0%, rgba(10,31,61,0.56) 60%, rgba(16,42,82,0.48) 100%);
}
.section-navy .container { position: relative; z-index: 2; }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-gray { background: var(--gray-50); }

/* ---- Signature: the Arc -------------------------------------------------
   A thin gradient sweep from cooling blue to heating red — the recurring
   visual signature echoing the logo's dual arc.
   ---------------------------------------------------------------------- */
.arc-divider {
  height: 4px;
  width: 100%;
  background: var(--arc-gradient);
  border-radius: var(--radius-pill);
}
.arc-rule {
  position: relative;
  height: 3px;
  background: var(--gray-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.arc-rule::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--arc-gradient);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.in-view .arc-rule::after { transform: scaleX(1); }

/* ---- Cards --------------------------------------------------------------- */
.card-elevated {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-elevated:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---- Stat / counter -------------------------------------------------------- */
.stat-number {
  font-family: var(--font-data);
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--navy-900);
}
.stat-label { font-size: var(--fs-sm); color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- Utility -------------------------------------------------------------- */
.text-cool { color: var(--cool-500) !important; }
.text-heat { color: var(--heat-500) !important; }
.bg-navy { background: var(--navy-900) !important; }
.rounded-xl { border-radius: var(--radius-lg) !important; }
.img-zoom { overflow: hidden; border-radius: var(--radius-md); }
.img-zoom img { transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); display:block; width:100%; height:100%; object-fit:cover; }
.img-zoom:hover img { transform: scale(1.08); }

/* ---- Page loader ------------------------------------------------------------ */
#page-loader {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 420ms ease, visibility 420ms ease;
}
#page-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-arc {
  width: 56px; height: 56px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: var(--cool-500);
  border-right-color: var(--heat-500);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Scroll reveal base --------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1); }
[data-reveal].in-view { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal="slide-left"] { transform: translateX(-32px); }
[data-reveal="slide-left"].in-view { transform: translateX(0); }
[data-reveal="slide-right"] { transform: translateX(32px); }
[data-reveal="slide-right"].in-view { transform: translateX(0); }

/* ---- public.css ---- */
/* =========================================================================
   ALB MECHANICAL — PUBLIC SITE
   ========================================================================= */

/* ---- Navbar --------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1060;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base),
    height var(--transition-base);
}
.site-header.is-scrolled {
  background: rgba(10, 31, 61, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  height: 66px;
}
.site-header .navbar-brand img {
  height: 70px;
  margin: 10px 0px;
  transition: height var(--transition-base);
}
.site-header.is-scrolled .navbar-brand img {
  height: 50px;
}
.site-header .nav-link {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
  font-size: var(--fs-sm);
  margin: 0 var(--space-3);
  position: relative;
  padding: 0.4rem 0 !important;
}
.site-header .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--arc-gradient);
  transition: width var(--transition-base);
}
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
  width: 100%;
}
.site-header .nav-link:hover,
.site-header .nav-link.active {
  color: var(--white);
}
.site-header .btn-request {
  background: #d42a21;
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.25rem;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.site-header .btn-request:hover {
  background: #b8231b;
  color: var(--white);
}
.site-header .navbar-toggler {
  border: none;
  color: var(--white);
}
.site-header .navbar-close {
  display: none;
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 1.25rem;
  line-height: 1;
}

/* Non-transparent variant for interior pages (e.g. auth) */
.site-header.header-solid {
  background: var(--navy-900);
  box-shadow: var(--shadow-sm);
}

/* ---- Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: var(--navy-gradient);
  overflow: hidden;
  padding-top: var(--header-height);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(5, 15, 33, 0.72) 0%,
    rgba(10, 31, 61, 0.56) 60%,
    rgba(16, 42, 82, 0.48) 100%
  );
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 4.5vw, var(--fs-4xl));
  line-height: 1.08;
}
.hero p.lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-md);
  max-width: 560px;
}

/* Gauge visual (signature hero device) */
.gauge-wrap {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto;
}
.gauge-wrap svg {
  width: 100%;
  height: 100%;
}
.gauge-needle {
  transform-origin: 160px 160px;
  animation: gaugeSweep 5s ease-in-out infinite;
}
@keyframes gaugeSweep {
  0%,
  100% {
    transform: rotate(-58deg);
  }
  50% {
    transform: rotate(58deg);
  }
}
.gauge-readout {
  font-family: var(--font-data);
  text-anchor: middle;
}

/* Page inner hero (for interior pages) */
.page-hero {
  background: var(--navy-gradient);
  padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(5, 15, 33, 0.72) 0%,
    rgba(10, 31, 61, 0.56) 60%,
    rgba(16, 42, 82, 0.48) 100%
  );
}
.page-hero .container {
  position: relative;
  z-index: 2;
}
.page-hero h1,
.page-hero h2,
.page-hero h3,
.page-hero h4 {
  color: var(--white);
}
.page-hero .breadcrumb-item,
.page-hero .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.7);
}
.page-hero .breadcrumb-item.active {
  color: var(--white);
}

/* ---- Service cards ----------------------------------------------------------- */
.service-card {
  padding: var(--space-6);
  height: 100%;
}
.service-card .icon-badge {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}
.icon-badge.cool {
  background: var(--cool-100);
  color: var(--cool-500);
}
.icon-badge.heat {
  background: var(--heat-100);
  color: var(--heat-500);
}

/* ---- Process steps ------------------------------------------------------------ */
.process-step {
  position: relative;
  padding-left: var(--space-16);
}
.process-step .step-index {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-data);
  font-weight: 600;
}

/* ---- Google Reviews carousel ---------------------------------------------------- */
.google-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}
.google-rating-badge-text {
  text-align: left;
}
.google-rating-badge .rating-score {
  font-family: var(--font-data);
  font-size: var(--fs-xl);
  color: var(--navy-900);
  line-height: 1;
}
.google-rating-badge .rating-count {
  display: block;
  font-size: var(--fs-xs);
  color: var(--gray-600);
  margin-top: 2px;
}
.review-stars {
  color: #fbbc04;
  letter-spacing: 1px;
  font-size: var(--fs-sm);
}

.btn-google {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--navy-900);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}
.btn-google svg {
  flex: 0 0 auto;
}
.btn-google:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--gray-400);
  color: var(--navy-900);
}
.btn-google:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.review-carousel {
  position: relative;
}
.review-carousel-viewport {
  overflow: hidden;
  max-width: 100%;
}
.review-carousel-track {
  display: flex;
  gap: var(--space-6);
  will-change: transform;
  transition: transform 0.45s ease;
}

.review-card {
  flex: 0 0 100%;
  max-width: 100%;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
@media (min-width: 576px) {
  .review-card {
    flex-basis: calc((100% - var(--space-6)) / 2);
    max-width: calc((100% - var(--space-6)) / 2);
  }
}
@media (min-width: 992px) {
  .review-card {
    flex-basis: calc((100% - (2 * var(--space-6))) / 3);
    max-width: calc((100% - (2 * var(--space-6))) / 3);
  }
}

.review-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.review-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 600;
  font-size: var(--fs-md);
}
.review-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.review-time {
  font-size: var(--fs-xs);
  color: var(--gray-600);
}
.review-text {
  color: var(--gray-800);
  font-size: var(--fs-sm);
  margin: 0;
}

.review-carousel-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.review-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--transition-base);
}
.review-nav-btn:hover {
  background: var(--navy-900);
  color: var(--white);
  border-color: var(--navy-900);
}

/* ---- Footer --------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.65);
  padding: var(--space-16) 0 var(--space-6);
}
.site-footer h2 {
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}
.site-footer a {
  color: rgba(255, 255, 255, 0.65);
}
.site-footer a:hover {
  color: var(--cool-400);
}
.site-footer .social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}
.site-footer .social-icon:hover {
  background: var(--arc-gradient);
  border-color: transparent;
  color: var(--white);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  font-size: var(--fs-xs);
}

/* ---- Emergency strip --------------------------------------------------------------- */
.emergency-strip {
  background: var(--heat-500);
  color: var(--white);
  font-size: var(--fs-sm);
  padding: var(--space-2) 0;
}
.emergency-strip a {
  color: var(--white);
  font-weight: 700;
}

/* ---- Service area map block --------------------------------------------------------- */
.area-tag {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  font-size: var(--fs-sm);
  display: inline-block;
  margin: 0.2rem;
  transition: all var(--transition-fast);
}
.area-tag:hover {
  border-color: var(--cool-500);
  color: var(--cool-500);
}

/* ---- animations.css ---- */
/* =========================================================================
   ALB MECHANICAL — ANIMATION LIBRARY
   ========================================================================= */

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform: translateY(24px);} to {opacity:1; transform:translateY(0);} }
@keyframes slideInLeft { from { opacity:0; transform: translateX(-30px);} to {opacity:1; transform:translateX(0);} }
@keyframes slideInRight { from { opacity:0; transform: translateX(30px);} to {opacity:1; transform:translateX(0);} }
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

.animate-fade-in { animation: fadeIn 900ms ease both; }
.animate-slide-up { animation: slideUp 700ms cubic-bezier(0.22,1,0.36,1) both; }
.animate-float { animation: floatY 4.5s ease-in-out infinite; will-change: transform; }

.stagger-1 { animation-delay: 80ms; }
.stagger-2 { animation-delay: 160ms; }
.stagger-3 { animation-delay: 240ms; }
.stagger-4 { animation-delay: 320ms; }
.stagger-5 { animation-delay: 400ms; }
.stagger-6 { animation-delay: 480ms; }

.pulse-cta { position: relative; isolation: isolate; }
.pulse-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(232, 53, 43, 0.45);
  animation: pulseRing 2.4s ease-out infinite;
  pointer-events: none;
}

/* Page transition overlay (used by app.js on internal link navigation) */
#page-transition {
  position: fixed; inset: 0; z-index: 2500;
  background: var(--navy-900);
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
}
#page-transition.enter { transform: scaleY(1); transform-origin: bottom; transition: transform 420ms cubic-bezier(0.76,0,0.24,1); }
#page-transition.leave { transform: scaleY(0); transform-origin: top; transition: transform 420ms cubic-bezier(0.76,0,0.24,1); }

/* ---- responsive.css ---- */
/* =========================================================================
   ALB MECHANICAL — RESPONSIVE OVERRIDES  (mobile-first; Bootstrap handles
   most grid behavior — this file covers the custom components)
   ========================================================================= */

/* ---- Mobile (<576px) ---- */
@media (max-width: 575.98px) {
  .hero { min-height: auto; padding-bottom: var(--space-16); text-align: center; }
  .gauge-wrap { width: 220px; height: 220px; margin-bottom: var(--space-6); }
  .section { padding: var(--space-16) 0; }
  .stat-number { font-size: var(--fs-2xl); }
  .btn-lg { width: 100%; }
  .emergency-strip { text-align: center; }
}

/* ---- Tablet (576–991px) ---- */
@media (min-width: 576px) and (max-width: 991.98px) {
  .hero { min-height: 80vh; }
  .gauge-wrap { width: 260px; height: 260px; }
  .section { padding: var(--space-16) 0; }
}

/* ---- Offcanvas mobile menu polish ---- */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 84vw);
    background: var(--navy-950);
    padding: var(--space-16) var(--space-6) var(--space-6);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 1050;
  }
  .site-header .navbar-collapse.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .site-header .navbar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
  }
  .site-header .nav-link { margin: var(--space-2) 0; font-size: var(--fs-md); }
  .mobile-menu-backdrop { position: fixed; inset:0; background: rgba(5,15,33,0.6); z-index:1040; opacity:0; pointer-events:none; transition: opacity var(--transition-base); }
  .mobile-menu-backdrop.show { opacity: 1; pointer-events: auto; }
}

/* ---- Desktop refinements ---- */
@media (min-width: 1400px) {
  .container { max-width: 1280px; }
}

/* ---- Touch targets ---- */
@media (pointer: coarse) {
  .btn, .nav-link, .form-control, .form-select { min-height: 44px; }
}