/* ══════════════════════════════════════════════════════════
   PTAE Engineering — Premium Enterprise Stylesheet
   Updated: Concept #4 Logo · Dark Navy #0D1B2A · Fire Red #E31E24
   Structure: Variables → Reset → Base → Utilities →
              Navbar → Hero → About → Services →
              Projects → Contact → Footer → Animations → Responsive
══════════════════════════════════════════════════════════ */

/* ─── Custom Properties ─────────────────────────────────── */
:root {
  /* ── Core brand palette ── */
  --navy:       #0D1B2A;   /* primary dark background      */
  --navy-mid:   #142233;   /* slightly lighter panels      */
  --navy-light: #1C3A5E;   /* borders, icon fills          */
  --navy-deep:  #060D18;   /* footer, darkest              */

  --red:        #E31E24;   /* fire red – primary accent    */
  --red-dark:   #B81018;   /* hover state                  */
  --red-soft:   rgba(227,30,36,0.12); /* tinted backgrounds */

  --white:      #FFFFFF;
  --gray-50:    #F7F9FC;
  --gray-100:   #EFF2F7;
  --gray-200:   #DDE3ED;
  --gray-300:   #C4CDD9;
  --gray-400:   #8B9CB6;
  --gray-500:   #64748b;
  --gray-600:   #48596E;
  --gray-700:   #2E3D52;
  --gray-800:   #1A2633;
  --gray-900:   #0F1A24;

  /* ── Typography ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Spacing & layout ── */
  --section-pad: 96px;
  --container:   1200px;
  --nav-h:       78px;

  /* ── Shape ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.10);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.14);
  --shadow-xl: 0 24px 56px rgba(0,0,0,0.18);

  /* ── Transitions ── */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   0.15s var(--ease);
  --t-normal: 0.28s var(--ease);
  --t-slow:   0.48s var(--ease);
}


/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; } /* prevent author-CSS from overriding HTML hidden attribute */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray-600);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg  { display: block; max-width: 100%; }
a         { text-decoration: none; color: inherit; }
ul        { list-style: none; }
button    { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }
address   { font-style: normal; }


/* ─── Utility: Container ─────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}

/* ─── Utility: Section Tag ───────────────────────────────── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.section-tag::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
  border-radius: 1px;
}

.section-tag--light { color: rgba(255,255,255,0.5); }
.section-tag--light::before { background: rgba(255,255,255,0.35); }

.section-tag--center {
  display: block;
  text-align: center;
}
.section-tag--center::before { display: none; }

/* ─── Utility: Section Header ────────────────────────────── */
.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px;
}

.section-title {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}

.section-subtitle {
  font-size: 16px;
  color: var(--gray-500);
  line-height: 1.75;
}

.text-white { color: var(--white) !important; }
.text-red   { color: var(--red); }


/* ─── Utility: Buttons ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1;
  transition: background var(--t-normal),
              color var(--t-normal),
              border-color var(--t-normal),
              box-shadow var(--t-normal),
              transform var(--t-normal);
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-lg    { padding: 14px 32px; font-size: 15px; }
.btn-block { width: 100%; padding: 15px; font-size: 15px; justify-content: center; }

/* Red (primary CTA) */
.btn-red { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-red:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(227,30,36,0.35);
}

/* Ghost (transparent, white border – for dark backgrounds) */
.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.35);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.65);
  transform: translateY(-2px);
}

/* Navy outline (for light backgrounds) */
.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline-navy:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}


/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  transition: background var(--t-normal), box-shadow var(--t-normal);
}

#navbar.nav-transparent { background: transparent; }

#navbar.nav-solid {
  background: rgba(13, 27, 42, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.3);
}

.nav-container {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  gap: 36px;
}

/* ── Logo — navbar (icon image + 2-line enterprise wordmark) ── */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 5px;                          /* fused enterprise lockup */
  flex-shrink: 0;
  text-decoration: none;
}

.logo img {
  display: block;
  height: 62px;                      /* brandmark slightly enlarged for dominance */
  width: auto;                       /* preserve aspect ratio + composition */
  object-fit: contain;
  background: transparent;
  flex-shrink: 0;
  opacity: 0.95;                     /* tones down pure-white flame to soft enterprise white */
  -webkit-user-drag: none;
  user-select: none;
  /* Atmospheric integration: soft depth shadow + faint ambient red bloom.
     No contrast/saturate boost, no crisp-edges — browser default AA only. */
  filter:
    drop-shadow(0 2px 7px rgba(0,0,0,0.22))
    drop-shadow(0 0 14px rgba(227,30,36,0.05));
  transition: opacity var(--t-normal), filter var(--t-normal);
}

/* Navbar-only wordmark (scoped — footer .nav-logo lockup unchanged) */
.logo .logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  transform: translateY(1px);        /* optical alignment with icon centre */
}

.logo .logo-main {
  font-size: 13.5px;                 /* pulled back so icon reads dominant */
  font-weight: 700;
  color: rgba(255,255,255,0.92);     /* softer enterprise white — not pure #FFF */
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.logo .logo-sub {
  font-size: 8px;
  font-weight: 500;
  color: rgba(255,255,255,0.48);     /* restrained secondary */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 3px;
}

/* ── Shared wordmark (used by navbar .logo and footer .nav-logo) ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-icon { flex-shrink: 0; }

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-main {
  font-size: 21px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.02em;
}

.logo-amp { color: var(--red); }

.logo-sub {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* ── Nav Links ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-link {
  padding: 7px 13px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  border-radius: var(--r-xs);
  transition: color var(--t-fast);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 13px;
  right: 13px;
  height: 2px;
  background: var(--red);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform var(--t-normal);
}

.nav-link:hover,
.nav-link.active { color: var(--white); }

.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(0.6); }

.nav-cta { margin-left: 6px; }

/* ── Hamburger ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--t-normal);
  transform-origin: center;
}

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


/* ── Mobile Menu ── */
.mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateX(100%);
  transition: transform var(--t-slow);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.mobile-menu.open { transform: translateX(0); }

.mobile-menu ul { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }

.mobile-link {
  display: block;
  padding: 13px 40px;
  font-size: 19px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  text-align: center;
  width: 100%;
  transition: color var(--t-fast);
}
.mobile-link:hover { color: var(--white); }

.mobile-cta { margin-top: 20px; }

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,0.55);
}
.mobile-overlay.show { display: block; }


/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  background:
    /* left-to-right scrim: strong under the text, fades to reveal equipment */
    linear-gradient(to right,
      rgba(7,26,51,0.92) 0%,
      rgba(7,26,51,0.88) 28%,
      rgba(7,26,51,0.55) 52%,
      rgba(7,26,51,0.20) 74%,
      rgba(7,26,51,0.08) 100%),
    /* hero background image — now a visible feature */
    url("assets/images/hero-bg.jpg"),
    var(--navy);                       /* fallback colour */
  background-size: auto, cover, auto;
  background-position: center, center, center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Two-column inner layout */
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 48px) 40px 80px;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh; /* excludes mobile browser chrome */
}

/* ── Hero text (left column) ── */
.hero-text { padding-top: 20px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
  margin-bottom: 28px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2.2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.6; }
}

.hero-title {
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.hero-subtitle {
  font-size: clamp(15px, 1.6vw, 17px);
  color: rgba(255,255,255,0.52);
  line-height: 1.78;
  max-width: 480px;
  margin-bottom: 40px;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* ── Hero stats ── */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.09);
  max-width: 440px;
}

.hero-stat { flex: 1; }

.hero-stat-num {
  display: block;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}

.hero-stat-sup {
  font-size: 0.55em;
  color: var(--red);
  font-weight: 700;
}

.hero-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
}

.hero-stat-divider {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.09);
  margin: 0 24px;
  flex-shrink: 0;
}

/* ── Scroll indicator ── */
.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.scroll-bar {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.25), transparent);
  position: relative;
  overflow: hidden;
}

.scroll-bar::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--red));
  animation: scroll-drip 2.2s ease-in-out infinite;
}

@keyframes scroll-drip {
  0%   { top: -100%; }
  100% { top:  100%; }
}

/* ── Hero entry animations ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.75s var(--ease) forwards;
}
.reveal-d1 { animation-delay: 0.12s; }
.reveal-d2 { animation-delay: 0.24s; }
.reveal-d3 { animation-delay: 0.38s; }
.reveal-d4 { animation-delay: 0.52s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}


/* ══════════════════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════════════════ */
#about {
  padding: var(--section-pad) 0;
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 72px;
  align-items: start;
}

/* ── Left column narrative ── */
.about-content .about-title { margin-bottom: 18px; }

.about-title {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.about-title-rule {
  display: block;
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  margin: 0 0 26px;
}

.about-lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--gray-700);
  margin-bottom: 16px;
}

.about-body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--gray-500);
  margin-bottom: 40px;
}

/* ── Feature list ── */
.about-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform var(--t-normal);
}

.feature-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  background: var(--navy);
  color: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(13,27,42,0.18);
  transition: background var(--t-normal), transform var(--t-normal),
              box-shadow var(--t-normal);
}

.feature-divider {
  width: 1px;
  height: 40px;
  flex-shrink: 0;
  background: var(--gray-200);
  transition: background var(--t-normal);
}

.feature-text strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--gray-800);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}

.feature-text p {
  font-size: 13.5px;
  color: var(--gray-500);
  line-height: 1.55;
}

/* Hover: navy icon warms to red + lifts, divider tints */
.feature-item:hover .feature-icon {
  background: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(227,30,36,0.28);
}
.feature-item:hover .feature-divider { background: var(--red); }

/* ══════════════════════════════════════════════════════════
   Stat cards (2×2 premium grid)
══════════════════════════════════════════════════════════ */
.about-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-card {
  position: relative;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 26px 24px 22px;
  min-height: 198px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  transition: transform var(--t-normal), box-shadow var(--t-normal),
              border-color var(--t-normal);
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}
.stat-card:not([class*="--"]):hover { border-color: var(--gray-300); }

.stat-card--red   { background: var(--red);        border-color: var(--red); }
.stat-card--navy  { background: var(--navy-light);  border-color: var(--navy-light); }
.stat-card--dark  { background: var(--navy);        border-color: var(--navy); }

.stat-card--red   .stat-card-num,
.stat-card--red   .stat-card-label,
.stat-card--navy  .stat-card-num,
.stat-card--navy  .stat-card-label,
.stat-card--dark  .stat-card-num,
.stat-card--dark  .stat-card-label { color: var(--white); }

/* number + unit block */
.stat-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-card-num {
  font-size: 50px;
  font-weight: 800;
  color: var(--navy);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.stat-card-unit {
  font-size: 26px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  margin-top: 4px;
}
.stat-card-unit:empty { display: none; }

.stat-card--red  .stat-card-unit { color: rgba(255,255,255,0.78); }
.stat-card--navy .stat-card-unit { color: rgba(255,255,255,0.55); }
.stat-card--dark .stat-card-unit { color: rgba(255,255,255,0.55); }

/* thin rule under the figure */
.stat-card-rule {
  width: 100%;
  height: 1px;
  background: var(--gray-200);
  margin: 16px 0 12px;
}
.stat-card--red  .stat-card-rule { background: rgba(255,255,255,0.28); }
.stat-card--navy .stat-card-rule,
.stat-card--dark .stat-card-rule { background: rgba(255,255,255,0.16); }

.stat-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.35;
}

/* corner icon, pinned bottom-left */
.stat-card-icon {
  margin-top: auto;
  padding-top: 16px;
  color: var(--gray-300);
  display: flex;
  transition: transform var(--t-normal);
}
.stat-card--red  .stat-card-icon { color: rgba(255,255,255,0.62); }
.stat-card--navy .stat-card-icon,
.stat-card--dark .stat-card-icon { color: rgba(255,255,255,0.42); }
.stat-card:not([class*="--"]) .stat-card-icon { color: var(--gray-300); }
.stat-card:hover .stat-card-icon { transform: translateY(-2px) scale(1.04); }

/* ══════════════════════════════════════════════════════════
   Mission / CTA panel
══════════════════════════════════════════════════════════ */
.about-mission {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 28px;
  padding: 30px 38px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-normal), border-color var(--t-normal);
}
.about-mission:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--gray-300);
}

/* Mission brandmark — refined to the navbar brandmark's design language:
   soft neutral depth (no red glow), gentle red-tinted tile, restrained AA. */
.mission-icon {
  width: 86px;
  height: 86px;
  flex-shrink: 0;
  position: relative;                         /* anchor for the absolutely-sized mark */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;                                /* sizing handled on the mark itself */
  overflow: hidden;                          /* clip the logo's transparent side-margins */
  border-radius: 20px;                       /* squircle-style rounded square */
  background: linear-gradient(155deg,
    rgba(227,30,36,0.075) 0%,
    rgba(227,30,36,0.035) 100%);             /* softer tint — lower contrast */
  border: 1px solid rgba(227,30,36,0.10);    /* quieter edge */
  box-shadow:
    0 4px 14px rgba(13,27,42,0.08),          /* neutral premium depth (no glow) */
    inset 0 1px 0 rgba(255,255,255,0.45);    /* faint top highlight */
  transition: transform var(--t-normal), box-shadow var(--t-normal),
              border-color var(--t-normal);
}

/* logo3 is a portrait mark (578×715) centred inside a 1536×1024 transparent
   canvas with ~31% empty margin each side. We size by the visible MARK, not the
   canvas: scale the whole canvas up past the tile and let overflow clip the
   empty transparent margins. The mark is centred, so it stays centred.
   88px canvas height renders the mark at ~73% of the tile — slightly lighter,
   cleaner optical weight matching the navbar brandmark. */
.mission-icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);          /* centre the oversized canvas */
  height: 88px;                              /* slightly thinner visual weight */
  width: auto;                               /* preserve aspect ratio, never stretch */
  max-width: none;                           /* defeat any global img{max-width:100%} */
  opacity: 0.95;                             /* same softening as navbar brandmark */
  -webkit-user-drag: none;
  user-select: none;
  /* Matches navbar: soft neutral depth shadow only — no red bloom, no boost. */
  filter: drop-shadow(0 2px 6px rgba(13,27,42,0.16));
}

/* Subtle hover — gentle lift only, no glow (mirrors navbar restraint) */
.about-mission:hover .mission-icon {
  transform: scale(1.03);
  border-color: rgba(227,30,36,0.16);
  box-shadow:
    0 6px 18px rgba(13,27,42,0.11),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

.mission-text { flex: 1; }

.mission-text strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}

.mission-text p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gray-500);
  max-width: 620px;
}

.mission-divider {
  width: 1px;
  align-self: stretch;
  background: var(--gray-200);
  flex-shrink: 0;
}

.mission-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color var(--t-fast);
}
.mission-cta span {
  transition: transform var(--t-normal);
}
.mission-cta:hover { color: var(--red-dark); }
.mission-cta:hover span { transform: translateX(5px); }


/* ══════════════════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════════════════ */
#services {
  padding: var(--section-pad) 0;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), #ff5f64);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-normal);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.service-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-xl);
  transform: translateY(-5px);
}

.service-card:hover::before { transform: scaleX(1); }

.service-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: var(--r-lg);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-normal), border-color var(--t-normal);
}

.service-card:hover .service-icon-wrap {
  background: var(--navy);
  border-color: var(--navy-light);
}

/* SVG service icons (logo4–logo9), recoloured to brand red via mask */
.service-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: var(--red);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Fire Pump hydrant (logo6) is a solid filled glyph — trim slightly for optical balance */
.service-icon--pump {
  width: 33px;
  height: 33px;
}

.service-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}

.service-card p {
  font-size: 13.5px;
  color: var(--gray-500);
  line-height: 1.72;
  flex: 1;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  margin-top: 2px;
  transition: gap var(--t-fast), color var(--t-fast);
}

.service-link span { transition: transform var(--t-fast); display: inline-block; }

.service-link:hover           { color: var(--red-dark); gap: 9px; }
.service-link:hover span      { transform: translateX(2px); }


/* ══════════════════════════════════════════════════════════
   PROJECTS
══════════════════════════════════════════════════════════ */
#projects {
  padding: var(--section-pad) 0;
  background: var(--white);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
}

.project-card {
  border-radius: var(--r-xl);
  overflow: hidden;
}

.project-card--large {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.project-img {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 250px;
  overflow: hidden;
  cursor: pointer;
}

.project-card--large .project-img { min-height: 520px; }

/* Project image backgrounds – rich dark engineering palette */
.proj-img--1 {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(227,30,36,0.2)  0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(28,58,94,0.35)  0%, transparent 55%),
    linear-gradient(150deg, #0D1B2A 0%, #142233 50%, #0a1520 100%);
}

.proj-img--2 {
  background:
    radial-gradient(ellipse at 70% 25%, rgba(227,30,36,0.18)  0%, transparent 50%),
    radial-gradient(ellipse at 20% 75%, rgba(13,27,42,0.6)    0%, transparent 50%),
    linear-gradient(150deg, #09131e 0%, #0f1e2e 60%, #0D1B2A 100%);
}

.proj-img--3 {
  background:
    radial-gradient(ellipse at 25% 60%, rgba(28,58,94,0.5)   0%, transparent 60%),
    radial-gradient(ellipse at 75% 25%, rgba(227,30,36,0.14)  0%, transparent 50%),
    linear-gradient(150deg, #0D1B2A 0%, #112030 70%, #0a1828 100%);
}

.proj-img--4 {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(28,58,94,0.3)   0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(227,30,36,0.12)  0%, transparent 50%),
    linear-gradient(150deg, #060d18 0%, #0d1b2a 60%, #091525 100%);
}

/* Subtle dot grid texture on project cards */
.proj-texture {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 1;
}

/* Project overlay */
.project-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: linear-gradient(
    to top,
    rgba(6, 13, 24, 0.94) 0%,
    rgba(6, 13, 24, 0.45) 55%,
    transparent 100%
  );
  transition: background var(--t-normal);
}

.project-img:hover .project-overlay {
  background: linear-gradient(
    to top,
    rgba(6, 13, 24, 0.97) 0%,
    rgba(6, 13, 24, 0.65) 60%,
    rgba(6, 13, 24, 0.15) 100%
  );
}

.project-tag {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 100px;
  margin-bottom: 11px;
  width: fit-content;
}

.project-overlay h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 8px;
}

.project-card--large .project-overlay h3 { font-size: 24px; }

.project-overlay p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  margin-bottom: 14px;
}

.project-meta {
  display: flex;
  gap: 18px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.38);
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.projects-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--gray-200);
}

.projects-footer p {
  font-size: 14px;
  color: var(--gray-400);
}


/* ══════════════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════════════ */
#contact {
  position: relative;
  padding: var(--section-pad) 0;
  background:
    radial-gradient(ellipse 60% 50% at 12% 18%, rgba(28,58,94,0.30) 0%, transparent 60%),
    linear-gradient(160deg, #0A2345 0%, var(--navy) 55%, #071A33 100%);
  overflow: hidden;
}

.contact-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 56px 56px;
}

#contact .section-title { color: var(--white); }
#contact .section-tag   { color: rgba(255,255,255,0.5); }

.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 56px;
  align-items: start;
}

.contact-title {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 0;
}

.contact-lead {
  font-size: 15.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin-top: 20px;
  margin-bottom: 38px;
  max-width: 440px;
}

/* ── Contact info items (circular icons) ── */
.contact-items { display: flex; flex-direction: column; }

.contact-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.contact-item:first-child { padding-top: 0; }

.contact-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(227,30,36,0.10);
  border: 1px solid rgba(227,30,36,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-normal), border-color var(--t-normal);
}
.contact-item:hover .contact-icon-box {
  background: rgba(227,30,36,0.18);
  border-color: rgba(227,30,36,0.4);
}

.contact-item-body { padding-top: 2px; }

.contact-item strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.contact-item p,
.contact-item a {
  font-size: 14px;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
  transition: color var(--t-fast);
}
.contact-item a:hover { color: var(--red); }

/* ── Google Maps preview card ── */
.contact-map {
  display: block;
  margin-top: 28px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.30);
  text-decoration: none;
  transition: transform var(--t-normal), box-shadow var(--t-normal),
              border-color var(--t-normal);
}
.contact-map:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 52px rgba(0,0,0,0.40);
  border-color: rgba(227,30,36,0.30);
}

.contact-map-embed {
  display: block;
  height: 168px;
  position: relative;
}
.contact-map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(0.2) contrast(1.02);
}

.contact-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(7,26,51,0.85);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.contact-map-pin {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.contact-map-ext {
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  transition: color var(--t-fast), transform var(--t-normal);
}
.contact-map:hover .contact-map-ext {
  color: var(--red);
  transform: translate(2px, -2px);
}

/* ══════════════════════════════════════════════════════════
   Contact form card
══════════════════════════════════════════════════════════ */
.contact-form-wrap {
  background: var(--white);
  border-radius: 20px;
  padding: 40px 40px 32px;
  box-shadow: var(--shadow-xl);
}

/* Card header */
.form-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.form-head-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(227,30,36,0.28);
}
.form-head-text h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.1;
}
.form-head-rule {
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  margin: 18px 0 14px;
}
.form-head-sub {
  font-size: 15px;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 28px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-group label {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
  letter-spacing: 0;
}

.req { color: var(--red); }

/* Input with leading icon */
.input-wrap { position: relative; }
.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.input-wrap input { padding-left: 42px; }

.form-group input,
.form-group select,
.form-group textarea {
  padding: 13px 15px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: 14.5px;
  font-family: var(--font);
  color: var(--gray-800);
  background: var(--white);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  width: 100%;
  line-height: 1.5;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-400); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(227,30,36,0.1);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-group select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238B9CB6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 36px;
  cursor: pointer;
}

#submitBtn {
  position: relative;
  overflow: hidden;
  margin-top: 4px;
  gap: 10px;
}
#submitBtn .btn-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-spinner svg { animation: spin 0.9s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.form-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--gray-500);
}

.form-success {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #15803d;
}


/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
#footer {
  background: var(--navy-deep);
  padding: 68px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 44px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer-logo { margin-bottom: 18px; }

.footer-brand p {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  line-height: 1.75;
  max-width: 270px;
  margin-bottom: 22px;
}

.footer-cert-badges { display: flex; gap: 7px; flex-wrap: wrap; }

.footer-cert-badges span {
  padding: 3px 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.07em;
}

.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin-bottom: 18px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 9px; }

.footer-col a {
  font-size: 13px;
  color: rgba(255,255,255,0.38);
  transition: color var(--t-fast);
}
.footer-col a:hover { color: rgba(255,255,255,0.78); }

.footer-contact-col address p,
.footer-contact-col address a {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.38);
  line-height: 1.6;
  margin-bottom: 6px;
  transition: color var(--t-fast);
}
.footer-contact-col address a:hover { color: rgba(255,255,255,0.78); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  gap: 12px;
}

.footer-bottom p {
  font-size: 12px;
  color: rgba(255,255,255,0.2);
}


/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════════════ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --section-pad: 72px; }

  .container     { padding: 0 28px; }
  .nav-container { padding: 0 28px; }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 60px;
  }
  .hero-text   { max-width: 680px; }

  .hero-stats { max-width: 100%; }

  .about-grid        { grid-template-columns: 1fr; gap: 52px; }
  .about-stats-grid  { grid-template-columns: repeat(4, 1fr); }
  .stat-card         { min-height: 174px; padding: 22px 20px 20px; }
  .stat-card-num     { font-size: 44px; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .projects-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .project-card--large         { grid-column: 1 / 3; grid-row: 1 / 2; }
  .project-card--large .project-img { min-height: 360px; }

  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-lead { max-width: none; }
  .contact-map  { max-width: 460px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --section-pad: 56px; }

  .container     { padding: 0 20px; }
  .nav-container { padding: 0 20px; gap: 0; }

  .nav-links,
  .nav-cta { display: none; }
  .hamburger { display: flex; }

  .logo            { gap: 5px; }
  .logo img        { height: 50px; }            /* mobile icon height */
  .logo .logo-main { font-size: 11.5px; }
  .logo .logo-sub  { font-size: 6.8px; letter-spacing: 0.16em; margin-top: 2px; }

  /* Single-column on mobile: scrim runs top→bottom so stacked text stays readable */
  #hero {
    background:
      linear-gradient(to bottom,
        rgba(7,26,51,0.78) 0%,
        rgba(7,26,51,0.70) 45%,
        rgba(7,26,51,0.55) 100%),
      url("assets/images/hero-bg.jpg"),
      var(--navy);
    background-size: auto, cover, auto;
    background-position: center, center, center;
    background-repeat: no-repeat;
  }

  .hero-inner { padding: calc(var(--nav-h) + 32px) 20px 60px; }
  .hero-text  { padding-top: 0; }

  .hero-actions          { flex-direction: column; }
  .hero-actions .btn     { width: 100%; justify-content: center; }

  .hero-stats            { flex-wrap: wrap; gap: 20px; border-top: none; padding-top: 0; }
  .hero-stat             { flex: none; min-width: 100px; }
  .hero-stat-divider     { display: none; }

  .about-stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card        { min-height: 168px; }

  /* Mission panel stacks vertically */
  .about-mission   { flex-direction: column; align-items: flex-start; gap: 20px; padding: 26px 24px; }
  .mission-divider { display: none; }
  .mission-text p  { max-width: none; }

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

  .projects-grid            { grid-template-columns: 1fr; }
  .project-card--large      { grid-column: 1; grid-row: auto; }
  .project-card--large .project-img { min-height: 300px; }
  .project-img              { min-height: 240px; }

  .projects-footer {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .contact-form-wrap { padding: 28px 22px; }
  .form-row          { grid-template-columns: 1fr; gap: 0; }
  .contact-map       { max-width: none; }
  .form-head-icon    { width: 46px; height: 46px; }
  .form-head-text h3 { font-size: 20px; }

  .footer-grid   { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .section-header { margin-bottom: 36px; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤ 480px)
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-title { font-size: 34px; }
  .about-stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card        { min-height: 150px; padding: 20px 18px 18px; border-radius: 16px; }
  .stat-card-num    { font-size: 40px; }
  .stat-card-unit   { font-size: 22px; }
  .stat-card-icon svg { width: 22px; height: 22px; }

  .feature-item    { gap: 15px; }
  .feature-icon    { width: 48px; height: 48px; }
  .feature-divider { height: 36px; }

  /* Logo lockup — tightest scaling for small phones, still nowrap */
  .logo            { gap: 4px; }
  .logo img        { height: 44px; }
  .logo .logo-main { font-size: 10.5px; letter-spacing: 0.012em; }
  .logo .logo-sub  { font-size: 6px; letter-spacing: 0.13em; margin-top: 1px; }
}