/* ======================================================================
   CORPORATE SHOWCASE STYLES
   Al Modeer for Construction & Building — public-facing showcase layer.
   Ambient halo lighting, executive header, hero narrative, video reel,
   CEO spotlight, mega-project media, photo gallery + lightbox, sector
   index, and RFQ funnel. Layered on top of styles.css / construction.css.
====================================================================== */

:root {
  --halo-amber: #E5A93C;
  --halo-amber-deep: #C9821A;
  --halo-blueprint: #2541B2;
  --halo-blueprint-deep: #1B5FA8;
  --showcase-ink: #F4F5F7;
  --showcase-line: rgba(255, 255, 255, 0.12);
  --showcase-line-soft: rgba(255, 255, 255, 0.07);
}

/* ---------- ambient halo lighting ---------- */
.em-halo-stage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 65% 55% at 20% -10%, rgba(229, 169, 60, 0.19), transparent 62%),
    radial-gradient(ellipse 60% 60% at 85% -5%, rgba(37, 65, 178, 0.24), transparent 62%),
    linear-gradient(180deg, #0C1018 0%, #121927 45%, #182234 80%, #182234 100%);
  padding-top: 4px;
}

.em-halo-glow {
  position: absolute;
  inset: -25% -15% auto -15%;
  height: 135%;
  pointer-events: none;
  z-index: 0;
}

.em-halo-glow::before,
.em-halo-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.42;
  will-change: transform;
}

.em-halo-glow::before {
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  top: -10%;
  left: 8%;
  background: radial-gradient(circle, rgba(229, 169, 60, 0.85) 0%, rgba(201, 130, 26, 0.38) 48%, transparent 70%);
  animation: haloDriftA 24s ease-in-out infinite;
}

.em-halo-glow::after {
  width: 46vw;
  height: 46vw;
  max-width: 540px;
  max-height: 540px;
  top: 0%;
  right: 4%;
  background: radial-gradient(circle, rgba(37, 65, 178, 0.8) 0%, rgba(27, 95, 168, 0.38) 48%, transparent 70%);
  animation: haloDriftB 28s ease-in-out infinite;
}

@keyframes haloDriftA {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(3%, 4%) scale(1.05);
  }
}

@keyframes haloDriftB {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-3%, 3%) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {

  .em-halo-glow::before,
  .em-halo-glow::after {
    animation: none;
  }
}

.em-halo-noise {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- topbar on dark stage ---------- */
.em-halo-stage .em-topbar {
  position: relative;
  z-index: 2;
  background: transparent;
  border-bottom: 1px solid var(--showcase-line-soft);
}

.em-halo-stage .em-topbar-left,
.em-halo-stage .em-topbar-right {
  color: rgba(244, 245, 247, 0.78);
}

.em-halo-stage .em-slogan-primary {
  color: var(--halo-amber);
}

.em-halo-stage .em-topbar-link {
  color: rgba(244, 245, 247, 0.78);
}

.em-halo-stage .em-topbar-link:hover {
  color: #fff;
}

.em-halo-stage .em-badge-est {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(244, 245, 247, 0.8);
}

/* PWA install button in topbar */
.em-topbar-link.em-pwa-install-link {
  background: rgba(229, 169, 60, 0.14);
  border: 1px solid rgba(229, 169, 60, 0.32);
  color: var(--halo-amber);
  border-radius: 99px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s ease;
  direction: rtl;
}

.em-topbar-link.em-pwa-install-link:hover {
  background: rgba(229, 169, 60, 0.26);
  border-color: var(--halo-amber);
  color: #fff;
  transform: translateY(-1px);
}

.em-topbar-link.em-pwa-install-link svg {
  color: var(--halo-amber);
  width: 12px;
  height: 12px;
}

body.portal-mode .em-topbar-link.em-pwa-install-link {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

body.portal-mode .em-topbar-link.em-pwa-install-link svg {
  color: var(--halo-amber);
}

/* ---------- executive header on dark stage ---------- */
.em-halo-stage .app-header {
  position: relative;
  z-index: 2;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid var(--showcase-line-soft);
}

.em-halo-stage .em-company-ar {
  color: #fff;
}

.em-halo-stage .em-company-en {
  color: rgba(244, 245, 247, 0.55);
}

.em-halo-stage .header-status {
  color: rgba(244, 245, 247, 0.6);
}

.em-brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--showcase-line);
  flex-shrink: 0;
}

/* portal switch pill in header */
.em-portal-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--showcase-line);
  border-radius: 99px;
  padding: 4px;
}

.em-portal-switch-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(244, 245, 247, 0.65);
  font-family: var(--body);
  transition: background .15s ease, color .15s ease;
}

.em-portal-switch-btn svg {
  width: 14px;
  height: 14px;
}

.em-portal-switch-btn.active {
  background: linear-gradient(135deg, var(--halo-amber-deep), var(--halo-blueprint-deep));
  color: #fff;
}

.em-portal-switch-btn .em-portal-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
  margin-inline-start: 2px;
}

/* Header navigation links in showcase mode */
.em-header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.em-header-nav-link {
  color: rgba(244, 245, 247, 0.72);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: color .15s ease;
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}

.em-header-nav-link:hover {
  color: #fff;
}

.em-header-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--halo-amber);
  transition: width .2s ease;
}

.em-header-nav-link:hover::after {
  width: 100%;
}

body.portal-mode .em-header-nav {
  display: none !important;
}

@media (max-width:980px) {
  .em-header-nav {
    display: none;
  }
}

/* light (non-halo) variant when portal mode toggled — the stage itself
   (topbar + header + portal switch) stays visible and mounted so the
   switch-back button is always reachable; only the hero/glow beneath it
   is hidden further down. */

/* ---------- showcase mode: no header above the hero ----------
   The topbar + executive header used to sit in normal flow above the hero,
   which meant ~255px of plain page scroll had to happen before the pinned
   hero reached the top and GlyphPortal's zoom could start. In showcase mode
   the whole stage is now taken out of the layout. It is only hidden, never
   removed from the DOM, because portal mode (body.portal-mode) reuses the
   very same header and its switch buttons. The site's own section links
   still exist as in-page anchors, and the phone/WhatsApp/RFQ actions are
   covered by the mobile floating CTA and the RFQ section. */
body:not(.portal-mode) #haloStage {
  display: none;
}

/* Small fixed shortcut to the operations portal. It is the only way back
   into portal mode now that the header switch is hidden in showcase mode. */
.em-portal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font: 600 12.5px/1 var(--body);
  color: #F4F5F7;
  background: rgba(18, 24, 36, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.em-showcase-fab {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  inset-inline-start: 14px;
  z-index: 98;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.em-showcase-fab [hidden] {
  display: none !important;
}

body.portal-mode .em-showcase-fab {
  display: none !important;
}

@media print {
  .em-showcase-fab {
    display: none !important;
  }
}

.em-pwa-pill {
  color: var(--halo-amber);
}

.em-portal-pill:hover {
  background: rgba(18, 24, 36, 0.9);
  border-color: rgba(229, 169, 60, 0.6);
}

.em-portal-pill:focus-visible {
  outline: 2px solid var(--halo-amber);
  outline-offset: 3px;
}

.em-portal-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.em-portal-pill .em-portal-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
}

body.portal-mode .em-portal-pill {
  display: none !important;
}

@media print {
  .em-portal-pill {
    display: none !important;
  }
}

/* ---------- hero (GlyphPortal mount shell) ----------
   #showcaseHero is a plain-width mount point; GlyphPortal (em-hero-portal)
   owns its own pinned/scroll layout and sizes itself to 100% of this shell. */
.em-hero {
  position: relative;
  z-index: 2;
  width: 100%;
}

.em-hero-portal {
  width: 100%;
  background: #182234;
  /* matches the tail of .em-halo-stage's gradient, avoids a seam */
}

.em-hero-to-page-fade {
  width: 100%;
  height: 64px;
  background: linear-gradient(180deg, #182234 0%, #F4F5F7 100%);
}

@media (max-width:640px) {
  .em-hero-to-page-fade {
    height: 40px;
  }
}

.em-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 54px clamp(16px, 4vw, 32px) 58px;
  box-sizing: border-box;
  /* .em-hero-portal (GlyphPortal's own root) is pinned to direction:ltr in
     hero-entry.jsx so its internal SVG glyph math (always LTR canvas
     coordinates) matches what's painted on screen. This content block is
     real Arabic copy nested inside that same root, so it needs its RTL
     back explicitly rather than inheriting the ltr meant only for the
     glyph/art layers above it. */
  direction: rtl;
}

.em-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(244, 245, 247, 0.8);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  padding: 6px 16px;
  margin-bottom: 20px;
}

.em-hero-badge .em-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--halo-amber);
  box-shadow: 0 0 10px var(--halo-amber);
}

.em-hero-title {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.24;
  color: #fff;
  margin: 0 0 18px 0;
  max-width: 24ch;
}

.em-hero-lede {
  font-size: clamp(14.5px, 1.5vw, 17px);
  line-height: 1.75;
  color: rgba(244, 245, 247, 0.78);
  max-width: 62ch;
  margin: 0 0 32px 0;
}

.em-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.em-hero-ctas .btn {
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all .15s ease;
}

.btn-hero-primary {
  background: linear-gradient(135deg, var(--halo-amber-deep), #B5701A);
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(229, 169, 60, 0.3);
}

.btn-hero-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.btn-hero-ghost {
  background: transparent;
  color: rgba(244, 245, 247, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.btn-hero-ghost:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* authentic client trust strip */
.em-hero-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  max-width: 760px;
}

.em-hero-trust-title {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(244, 245, 247, 0.52);
}

.em-hero-trust-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}

.em-hero-trust-item {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(244, 245, 247, 0.85);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 99px;
  padding: 5px 14px;
  transition: all .15s ease;
}

.em-hero-trust-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(229, 169, 60, 0.35);
  color: #fff;
}


/* ---------- section shells shared by showcase blocks ---------- */
.em-showcase-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 52px clamp(16px, 4vw, 40px);
}

.em-showcase-section+.em-showcase-section {
  border-top: 1px solid var(--line);
}

.em-showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.em-showcase-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--em-blueprint);
  margin: 0 0 6px 0;
  font-weight: 600;
}

.em-showcase-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 0;
  color: var(--ink);
  max-width: 26ch;
}

/* ---------- video showcase ---------- */
.em-video-showcase {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width:800px) {
  .em-video-showcase {
    grid-template-columns: 1fr;
  }
}

.em-video-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0D1219;
  box-shadow: 0 0 0 1px rgba(20, 23, 31, 0.08), 0 24px 48px -20px rgba(20, 23, 31, 0.35);
}

.em-video-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  padding: 2px;
  background: linear-gradient(135deg, var(--halo-amber-deep), var(--halo-blueprint-deep));
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.em-video-frame video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}

.em-video-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #0D1219;
}

.em-video-controls-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.em-video-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  flex-shrink: 0;
}

.em-video-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.em-video-ctrl-btn svg {
  width: 16px;
  height: 16px;
}

.em-video-caption {
  font-size: 12px;
  color: rgba(244, 245, 247, 0.6);
  font-family: var(--mono);
}

.em-video-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.em-video-tab {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}

[dir="rtl"] .em-video-tab {
  text-align: right;
}

.em-video-tab.active {
  border-color: var(--halo-blueprint-deep);
  background: var(--em-blueprint-soft);
}

.em-video-tab-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.em-video-tab.active .em-video-tab-num {
  color: var(--em-blueprint);
}

.em-video-tab-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.em-video-tab-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* fullscreen cinema modal */
.em-cinema-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 13, 20, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.em-cinema-overlay[hidden] {
  display: none;
}

.em-cinema-modal {
  width: 100%;
  max-width: 1100px;
}

.em-cinema-modal video {
  width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  background: #000;
}

.em-cinema-close {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
}

[dir="rtl"] .em-cinema-close {
  margin: 0 auto 14px 0;
}

/* ---------- CEO spotlight ---------- */
.em-ceo-spotlight {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start;
}

@media (max-width:760px) {
  .em-ceo-spotlight {
    grid-template-columns: 1fr;
  }
}

.em-ceo-portrait-wrap {
  position: relative;
}

.em-ceo-portrait {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -18px rgba(20, 23, 31, 0.3);
}

.em-ceo-tag {
  position: absolute;
  bottom: -14px;
  right: 16px;
  background: var(--em-slate);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  box-shadow: 0 10px 24px -10px rgba(20, 23, 31, 0.4);
}

[dir="rtl"] .em-ceo-tag {
  right: 16px;
  left: auto;
}

.em-ceo-tag strong {
  display: block;
  font-family: var(--display);
  font-size: 14px;
  margin-bottom: 2px;
}

.em-ceo-quote {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 20px 0;
  border-right: 3px solid var(--halo-amber-deep);
  padding-right: 18px;
}

[dir="ltr"] .em-ceo-quote {
  border-right: none;
  border-left: 3px solid var(--halo-amber-deep);
  padding-right: 0;
  padding-left: 18px;
}

.em-ceo-msg {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 12px 0;
  max-width: 62ch;
}

/* ---------- mega project media strips ---------- */
.em-project-media-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}

@media (max-width:640px) {
  .em-project-media-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.em-project-media-strip img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: transform .2s ease;
}

.em-project-media-strip img:hover {
  transform: scale(1.02);
}

/* ---------- photo gallery ---------- */
.em-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.em-gallery-pill {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 8px 16px;
}

.em-gallery-pill.active {
  background: var(--em-slate);
  color: #fff;
  border-color: var(--em-slate);
}

.em-gallery-grid {
  columns: 4 220px;
  column-gap: 10px;
}

@media (max-width:640px) {
  .em-gallery-grid {
    columns: 2 130px;
    column-gap: 8px;
  }
}

@media (max-width:380px) {
  .em-gallery-grid {
    columns: 1;
  }
}

.em-gallery-item {
  break-inside: avoid;
  margin-bottom: 10px;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
}

.em-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .25s ease;
}

.em-gallery-item:hover img {
  transform: scale(1.04);
}

.em-gallery-item-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(10, 13, 20, 0.82), transparent);
  color: #fff;
  font-size: 11.5px;
  padding: 18px 10px 8px;
  opacity: 0;
  transition: opacity .2s ease;
}

.em-gallery-item:hover .em-gallery-item-cap {
  opacity: 1;
}

/* lightbox */
.em-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(8, 10, 15, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}

.em-lightbox-overlay[hidden] {
  display: none;
}

.em-lightbox-img {
  max-width: 88vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
}

.em-lightbox-cap {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  text-align: center;
  max-width: 70vw;
}

.em-lightbox-close,
.em-lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

.em-lightbox-close {
  top: 20px;
  left: 20px;
}

.em-lightbox-nav svg,
.em-lightbox-close svg {
  width: 20px;
  height: 20px;
}

.em-lightbox-prev {
  inset-inline-start: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.em-lightbox-next {
  inset-inline-end: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- PWA Install Fallback Modal ---------- */
.em-pwa-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 14, 22, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: emFadeIn .2s ease-out;
}

.em-pwa-modal-overlay[hidden] {
  display: none !important;
}

.em-pwa-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #141B28;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(229, 169, 60, 0.18);
  padding: 32px 24px 28px;
  text-align: center;
  color: #fff;
  animation: emScaleIn .22s cubic-bezier(0.16, 1, 0.3, 1);
}

.em-pwa-modal-close {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 245, 247, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
}

.em-pwa-modal-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.em-pwa-modal-close svg {
  width: 18px;
  height: 18px;
}

.em-pwa-modal-icon img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  margin: 0 auto 16px;
  display: block;
}

.em-pwa-modal h3 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  margin: 0 0 8px;
}

.em-pwa-modal-note {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244, 245, 247, 0.7);
  margin: 0 0 20px;
}

.em-pwa-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: start;
}

.em-pwa-steps[hidden] {
  display: none !important;
}

.em-pwa-step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: rgba(244, 245, 247, 0.88);
  line-height: 1.45;
}

.em-pwa-step span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--halo-amber), var(--halo-amber-deep));
  color: #0C1018;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.em-pwa-step strong {
  color: var(--halo-amber);
  margin: 0 3px;
}

@keyframes emFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes emScaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- sector index (this content IS a numbered sequence) ---------- */
.em-sector-index {
  display: flex;
  flex-direction: column;
}

.em-sector-index-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.em-sector-index-row:last-child {
  border-bottom: 1px solid var(--line);
}

.em-sector-index-num {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--em-blueprint);
  font-weight: 600;
}

.em-sector-index-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 6px 0;
  color: var(--ink);
}

.em-sector-index-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 70ch;
  margin: 0;
}

/* fleet chips reuse .em-capability-chip from construction.css */

/* ---------- RFQ funnel ---------- */
.em-rfq-block {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 0;
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(37, 65, 178, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(229, 169, 60, 0.14), transparent 55%),
    linear-gradient(160deg, #16202F 0%, var(--em-slate) 60%, #182234 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 24px 60px -20px rgba(10, 14, 24, 0.55);
}

@media (max-width:820px) {
  .em-rfq-block {
    grid-template-columns: 1fr;
  }
}

.em-rfq-copy {
  padding: clamp(28px, 4vw, 48px);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width:820px) {
  .em-rfq-copy {
    border-inline-end: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

.em-rfq-copy-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--halo-amber);
  margin: 0 0 10px 0;
  letter-spacing: 0.03em;
}

.em-rfq-copy-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.3;
  margin: 0 0 14px 0;
  max-width: 18ch;
}

.em-rfq-copy-desc {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(244, 245, 247, 0.68);
  margin: 0 0 28px 0;
  max-width: 46ch;
}

.em-rfq-contact-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.em-rfq-contact-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 13px 15px;
  color: #fff;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

a.em-rfq-contact-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(229, 169, 60, 0.4);
  transform: translateY(-1px);
}

.em-rfq-contact-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(229, 169, 60, 0.22), rgba(37, 65, 178, 0.22));
}

.em-rfq-contact-card-icon svg {
  width: 17px;
  height: 17px;
  color: var(--halo-amber);
}

.em-rfq-contact-card-lbl {
  font-size: 11px;
  color: rgba(244, 245, 247, 0.5);
  margin-bottom: 2px;
}

.em-rfq-contact-card-val {
  font-size: 13.5px;
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
}

.em-rfq-form-side {
  padding: clamp(28px, 4vw, 48px);
  background: rgba(0, 0, 0, 0.14);
}

.em-rfq-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.em-rfq-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.em-rfq-form .form-field label {
  color: rgba(244, 245, 247, 0.7);
  font-size: 12.5px;
  font-weight: 500;
}

.em-rfq-form input,
.em-rfq-form select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-family: var(--body);
  transition: border-color .15s ease, background .15s ease;
}

.em-rfq-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5A93C' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 14px;
  padding-inline-start: 36px;
}

[dir="rtl"] .em-rfq-form select {
  background-position: left 12px center;
}

/* Native <option> list is rendered by the OS/browser outside our theme's
   control — without this, options default to light system colors and the
   white text above becomes unreadable against a white dropdown. */
.em-rfq-form select option {
  background: #1F2A3D;
  color: #FFFFFF;
  padding: 8px;
}

.em-rfq-form input::placeholder {
  color: rgba(244, 245, 247, 0.38);
}

.em-rfq-form input:hover,
.em-rfq-form select:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.em-rfq-form input:focus-visible,
.em-rfq-form select:focus-visible {
  outline: 2px solid var(--halo-amber);
  outline-offset: 1px;
  border-color: var(--halo-amber);
}

.em-rfq-submit {
  margin-top: 6px;
  background: linear-gradient(135deg, var(--halo-amber-deep), #B5701A);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}

.em-rfq-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.em-rfq-submit:active {
  transform: translateY(0);
}

.em-rfq-success {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(19, 128, 102, 0.16);
  color: #5FD9B9;
  border: 1px solid rgba(19, 128, 102, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13.5px;
}

.em-rfq-success.visible {
  display: flex;
}

.em-rfq-success svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #5FD9B9;
}

.em-rfq-success strong {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {

  .em-project-media-strip img,
  .em-gallery-item img {
    transition: none;
  }
}

/* ---------- Mode Switching: Showcase vs Engineering Portal ---------- */
body:not(.portal-mode) #primaryTabs,
body:not(.portal-mode) .dashboard,
body:not(.portal-mode) .em-project-switcher,
body:not(.portal-mode) .header-status,
body:not(.portal-mode) #downloadTemplatesBtn,
body:not(.portal-mode) #columnsPanelToggle,
body:not(.portal-mode) #printBtn {
  display: none !important;
}

body.portal-mode .em-showcase-container,
body.portal-mode #showcaseHero,
body.portal-mode .em-mobile-floating-cta {
  display: none !important;
}

body.portal-mode .em-halo-stage {
  display: block;
  background: var(--surface);
  padding-top: 0;
  border-bottom: 1px solid var(--line);
  overflow: visible !important;
  position: relative;
  z-index: 90;
}

body.portal-mode .em-halo-glow,
body.portal-mode .em-halo-noise {
  display: none !important;
}

body.portal-mode .em-halo-stage .em-topbar {
  background: var(--em-slate);
  border-bottom: none;
}

body.portal-mode .em-halo-stage .app-header {
  background: rgba(244, 245, 247, 0.92);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 95;
  overflow: visible !important;
}

body.portal-mode .em-project-switcher {
  position: relative;
  z-index: 100;
}

body.portal-mode .em-project-switcher-menu {
  z-index: 9999 !important;
}

body.portal-mode .em-halo-stage .em-company-ar {
  color: var(--ink);
}

body.portal-mode .em-halo-stage .em-company-en {
  color: var(--ink-faint);
}

body.portal-mode .em-halo-stage .header-status {
  color: var(--ink-soft);
}

/* Portal switch pill must stay legible on the light portal header too */
body.portal-mode .em-portal-switch {
  background: rgba(20, 23, 31, 0.05);
  border-color: var(--line-strong);
}

body.portal-mode .em-portal-switch-btn {
  color: var(--ink-soft);
}

body.portal-mode .em-portal-switch-btn.active {
  background: linear-gradient(135deg, var(--halo-amber-deep), var(--halo-blueprint-deep));
  color: #fff;
}

/* ---------- Mobile Floating Quick Contact Capsule Pill ---------- */
.em-mobile-floating-cta {
  display: none;
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  right: 12px;
  width: auto;
  max-width: 380px;
  margin: 0 auto;
  z-index: 99;
  background: rgba(18, 24, 36, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  padding: 5px 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

@media (max-width:768px) {
  .em-mobile-floating-cta {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

.em-mobile-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  border: none;
  cursor: pointer;
  min-height: 36px;
  height: 36px;
  transition: transform .12s ease, filter .12s ease;
}

.em-mobile-cta-btn:active {
  transform: scale(0.97);
}

.em-mobile-cta-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.em-mobile-cta-wa {
  background: #25D366;
  color: #fff;
}

.em-mobile-cta-wa:hover {
  filter: brightness(1.08);
}

.em-mobile-cta-call {
  background: linear-gradient(135deg, var(--halo-amber-deep), #B5701A);
  color: #fff;
}

.em-mobile-cta-rfq {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ---------- Mobile High-DPI & Responsive Polish ---------- */
@media (max-width:820px) {

  .em-topbar-dot-phone,
  .em-topbar-link-phone {
    display: none !important;
  }
}

@media (max-width:640px) {
  .em-halo-stage .em-topbar {
    padding: 5px 0;
  }

  .em-halo-stage .em-topbar-inner {
    padding: 0 12px;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .em-halo-stage .em-topbar-left {
    display: flex;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    gap: 6px;
  }

  .em-halo-stage .em-topbar-left .em-topbar-dot,
  .em-halo-stage .em-topbar-left .em-badge-est {
    display: none;
  }

  .em-halo-stage .em-slogan-primary {
    font-size: 11px;
    white-space: nowrap;
  }

  .em-halo-stage .em-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    width: auto;
    font-size: 11px;
  }

  .em-topbar-dot-phone,
  .em-topbar-link-phone,
  .em-topbar-dot-rfq,
  .em-topbar-link-rfq {
    display: none !important;
  }

  .em-topbar-link-profile {
    font-size: 11px;
    white-space: nowrap;
  }

  .em-topbar-link-profile span {
    display: inline;
  }

  .app-header-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
  }

  .brand {
    gap: 8px;
    min-width: 0;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-text .em-company-ar {
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-text .em-company-en {
    display: none;
  }

  .em-brand-logo {
    width: 32px;
    height: 32px;
  }

  .em-portal-switch {
    width: auto;
    order: unset;
    padding: 3px;
    flex-shrink: 0;
  }

  .em-portal-switch-btn {
    flex: unset;
    padding: 5px 9px;
    font-size: 11px;
    gap: 4px;
  }

  .em-portal-switch-btn svg {
    width: 12px;
    height: 12px;
  }

  body.portal-mode .app-header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.portal-mode .app-header-inner .brand {
    justify-content: space-between;
  }

  body.portal-mode .em-portal-switch {
    width: 100%;
  }

  body.portal-mode .em-portal-switch-btn {
    flex: 1;
    justify-content: center;
  }

  body.portal-mode .em-project-switcher {
    width: 100%;
  }

  body.portal-mode .em-project-switcher-trigger {
    max-width: 100%;
    width: 100%;
    justify-content: space-between;
  }

  body.portal-mode .header-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .em-hero {
    padding: 0;
  }

  .em-hero-badge {
    font-size: 10.5px;
    padding: 4px 12px;
    margin-bottom: 14px;
  }

  .em-hero-title {
    font-size: clamp(20px, 5.8vw, 26px);
    line-height: 1.24;
    max-width: 100%;
    margin-bottom: 12px;
  }

  .em-hero-lede {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 100%;
  }

  .em-hero-ctas {
    flex-direction: column;
    width: 100%;
    gap: 8px;
    margin-bottom: 20px;
  }

  .em-hero-ctas .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    font-size: 13.5px;
  }

  .em-hero-trust-list {
    gap: 6px 8px;
  }

  .em-hero-trust-item {
    font-size: 11.5px;
    padding: 4px 10px;
  }

  .em-halo-glow {
    inset: -15% -20% auto -20%;
    height: 115%;
  }

  .em-halo-glow::before {
    width: 70vw;
    height: 70vw;
    filter: blur(65px);
    opacity: 0.35;
  }

  .em-halo-glow::after {
    width: 65vw;
    height: 65vw;
    filter: blur(65px);
    opacity: 0.35;
  }

  .em-showcase-section {
    padding: 36px 14px;
  }

  .em-showcase-head {
    margin-bottom: 20px;
  }

  .em-showcase-title {
    font-size: 22px;
  }

  .em-video-showcase {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .em-video-tab {
    padding: 10px 12px;
  }

  .em-video-tab-name {
    font-size: 13.5px;
  }

  .em-ceo-spotlight {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .em-ceo-portrait {
    max-height: 360px;
  }

  .em-ceo-quote {
    font-size: 17px;
  }

  .em-ceo-msg {
    font-size: 13.5px;
  }

  .em-project-card {
    padding: 16px;
  }

  .em-gallery-grid {
    columns: 2 135px;
    column-gap: 6px;
  }

  .em-gallery-item {
    margin-bottom: 6px;
  }

  .em-rfq-block {
    border-radius: 16px;
  }

  .em-rfq-copy,
  .em-rfq-form-side {
    padding: 22px 16px;
  }

  .em-rfq-copy-title {
    font-size: 20px;
  }

  .em-rfq-form input,
  .em-rfq-form select {
    font-size: 16px;
    /* Prevents auto-zoom on mobile safari */
    padding: 11px 12px;
  }

  .em-rfq-submit {
    min-height: 46px;
    font-size: 15px;
  }

  /* Leave space for mobile floating CTA capsule pill at bottom */
  body:not(.portal-mode) {
    padding-bottom: 76px;
  }
}

/* ======================================================================
   HERO TRUST METRICS COUNTER BAR
====================================================================== */
.em-hero-metrics-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--showcase-line);
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 28px;
  backdrop-filter: blur(10px);
}

.em-hero-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 120px;
}

.em-hero-metric-num {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--halo-amber);
  line-height: 1.2;
}

.em-hero-metric-lbl {
  font-size: 12px;
  color: rgba(244, 245, 247, 0.72);
  margin-top: 3px;
}

.em-hero-metric-div {
  width: 1px;
  height: 32px;
  background: var(--showcase-line);
}

@media (max-width:768px) {
  .em-hero-metrics-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px;
  }

  .em-hero-metric-div {
    display: none;
  }

  .em-hero-metric {
    min-width: auto;
  }
}

/* ======================================================================
   INTERACTIVE QUICK CONSTRUCTION ESTIMATOR
====================================================================== */
.em-estimator-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  background: linear-gradient(155deg, #151D2A 0%, #0F1622 100%);
  border: 1px solid rgba(229, 169, 60, 0.3);
  box-shadow: 0 18px 44px -10px rgba(10, 14, 24, 0.35);
  border-radius: 18px;
  padding: 28px;
  margin-top: 16px;
  color: #FFFFFF;
}

.em-estimator-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.em-estimator-form .form-field label {
  color: rgba(244, 245, 247, 0.92);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 6px;
  display: block;
}

.em-est-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 11px 14px;
  color: #FFFFFF;
  font-family: var(--body);
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}

.em-est-input:focus {
  border-color: var(--halo-amber);
  background: rgba(255, 255, 255, 0.12);
}

.em-est-input option {
  background: #151D2A;
  color: #FFFFFF;
}

.em-est-val-bubble {
  background: rgba(229, 169, 60, 0.18);
  border: 1px solid rgba(229, 169, 60, 0.4);
  color: var(--halo-amber);
  padding: 3px 12px;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

.em-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  outline: none;
  margin: 10px 0 4px;
}

.em-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--halo-amber);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(229, 169, 60, 0.8);
  transition: transform .1s ease;
}

.em-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.em-estimator-results {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.em-est-res-head {
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 16px;
}

.em-est-res-badge {
  font-size: 11.5px;
  color: rgba(244, 245, 247, 0.7);
  font-family: var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.em-est-price {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  color: var(--halo-amber);
  margin: 8px 0 3px;
  text-shadow: 0 0 20px rgba(229, 169, 60, 0.3);
}

.em-est-sub {
  font-size: 12px;
  color: rgba(244, 245, 247, 0.65);
}

.em-est-breakdown {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.em-est-break-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 12.5px;
  gap: 8px;
}

.em-est-break-lbl {
  color: rgba(244, 245, 247, 0.7);
  flex-shrink: 0;
}

.em-est-break-val {
  color: #FFFFFF;
  text-align: left;
  font-size: 12.5px;
}

@media (max-width:850px) {
  .em-estimator-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

/* ======================================================================
   GEOGRAPHIC COVERAGE & REGIONAL FOOTPRINT
====================================================================== */
.em-showcase-head .em-badge-est {
  background: #FFFFFF;
  color: #334155;
  border: 1px solid #CBD5E1;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 99px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.em-coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
  margin-top: 16px;
}

@media (max-width:640px) {
  .em-coverage-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.em-coverage-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.em-coverage-card:hover {
  transform: translateY(-3px);
  border-color: var(--halo-amber);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

.em-coverage-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(229, 169, 60, 0.14);
  border: 1px solid rgba(229, 169, 60, 0.32);
  color: #B5701A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.em-coverage-icon svg {
  width: 20px;
  height: 20px;
}

.em-coverage-card h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 8px 0;
}

.em-coverage-card p {
  font-size: 13px;
  color: #475569;
  line-height: 1.65;
  margin: 0 0 16px 0;
}

.em-coverage-tag {
  display: inline-block;
  background: rgba(37, 65, 178, 0.07);
  border: 1px solid rgba(37, 65, 178, 0.18);
  color: #1E3A8A;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--mono);
}

/* ---------- company locations / branch maps ---------- */
.em-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 20px;
  margin-top: 16px;
}

.em-location-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.em-location-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.em-location-card-head h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.em-location-card>p {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 14px 0;
}

.em-location-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  background: #F1F5F9;
}

.em-location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* map-less variant: this branch's address isn't a verified Google Maps pin,
   so it gets a plain address panel in place of the iframe instead of an
   embed that could point at the wrong spot. */
.em-location-noaddr {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px dashed #E2E8F0;
  background: #F8FAFC;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
  padding: 20px;
  box-sizing: border-box;
}

.em-location-noaddr svg {
  flex-shrink: 0;
  color: #94A3B8;
}

@media (max-width:640px) {
  .em-locations-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ---------- secure portal sign-in ---------- */
.em-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 12, 22, .72);
  backdrop-filter: blur(8px);
}

.em-auth-overlay[hidden] { display: none; }

.em-auth-modal {
  position: relative;
  width: min(100%, 420px);
  padding: 32px;
  border: 1px solid rgba(229, 169, 60, .35);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}

.em-auth-logo { width: 52px; height: 52px; object-fit: contain; }
.em-auth-eyebrow { margin: 16px 0 3px; color: var(--halo-amber-deep); font-size: 12px; font-weight: 700; }
.em-auth-modal h2 { font-size: 22px; }
.em-auth-modal > p:not(.em-auth-eyebrow) { margin: 8px 0 20px; color: var(--ink-soft); font-size: 13px; }
.em-auth-modal form { display: grid; gap: 8px; }
.em-auth-modal label { margin-top: 6px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.em-auth-modal input { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-alt); }
.em-auth-modal input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.em-auth-modal .btn { width: 100%; justify-content: center; margin-top: 12px; }
.em-auth-close { position: absolute; top: 12px; left: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 27px; line-height: 1; }
.em-auth-close:hover { background: var(--surface-alt); color: var(--ink); }
.em-auth-error { margin: 4px 0 0; color: var(--signal-coral); font-size: 12px; }

/* ---------- company team ---------- */
.em-team-intro {
  max-width: 720px;
  margin: -2px 0 24px;
  color: var(--ink-soft);
}

.em-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.em-team-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.em-team-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  background: var(--surface-alt);
}

.em-team-card div { padding: 16px; }
.em-team-card h3 { font-size: 17px; }
.em-team-card p { margin: 5px 0 0; color: var(--ink-soft); font-size: 13px; }

@media (max-width: 720px) {
  .em-team-grid { grid-template-columns: 1fr; }
  .em-team-card { display: grid; grid-template-columns: 120px 1fr; align-items: center; }
  .em-team-card img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 4;
  }
}