/* ==========================================================================
   HN InfraTech — Shared Styles
   Base resets + small enhancements on top of the Tailwind utility classes
   used throughout the markup. Design tokens (colors, spacing, type) are
   configured in js/tailwind-config.js and applied via Tailwind's CDN build.
   ========================================================================== */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overscroll-behavior: none;
}

main > :first-child {
  margin-top: 0 !important;
}

main > :last-child {
  margin-bottom: 0 !important;
}

/* Hide scrollbars while keeping the page scrollable, matching the original
   Stitch prototype's chrome-free viewport style. */
::-webkit-scrollbar {
  display: none;
}

html {
  scrollbar-width: none;
  scroll-behavior: smooth;
}

/* Mobile navigation panel: collapsed by default, toggled open by js/main.js */
#mobile-menu.hidden {
  display: none;
}

/* Active navigation link, applied by js/main.js based on the current page */
.nav-link.is-active {
  color: #0050cb;
  font-weight: 700;
}

.nav-link.is-active.is-desktop {
  border-bottom: 2px solid #0050cb;
}

/* Basic focus visibility for keyboard users, since some interactive
   elements rely only on hover/group-hover utility classes */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

/* Contact form feedback state, used by js/main.js */
.form-status {
  display: none;
}

.form-status.is-visible {
  display: block;
}

/* ==========================================================================
   Tech Stack Marquee (used on index.html — "The platforms our team
   builds, deploys, and runs.")
   Each row is a duplicated track that scrolls continuously via CSS
   animation and pauses on hover/focus — no JS required.
   ========================================================================== */

.marquee-rows {
  --marquee-duration: 42s;
}

.marquee-row {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.375rem;
  flex-shrink: 0;
}

.marquee-left {
  animation: marquee-scroll-left var(--marquee-duration) linear infinite;
}

.marquee-right {
  animation: marquee-scroll-right var(--marquee-duration) linear infinite;
}

/* Slight per-row speed variation, matching the reference layout where
   rows drift at visibly different offsets */
.marquee-row:nth-child(2n) .marquee-track {
  animation-duration: calc(var(--marquee-duration) * 1.15);
}

.marquee-row:nth-child(3n) .marquee-track {
  animation-duration: calc(var(--marquee-duration) * 0.85);
}

.marquee-row:hover .marquee-track,
.marquee-row:focus-within .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-scroll-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  border-radius: 0.4rem;
  background: #2a2f3a;
  color: #e2e8f0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.marquee-row:hover .tech-pill:hover {
  background: #363c4a;
  border-color: rgba(0, 102, 255, 0.4);
  transform: translateY(-2px);
}

.tech-pill--label {
  background: transparent;
  border: 1px solid #ba1a1a;
  color: #ff6b6b;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
}

.marquee-row:hover .tech-pill--label:hover {
  background: transparent;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-left,
  .marquee-right {
    animation: none;
  }
}


/* ==========================================================================
   HN InfraTech Brand System
   Logo-aligned palette:
   Navy #061A3A · Cobalt #0050CB · Electric Blue #0066FF · Sky #00A8FF
   ========================================================================== */

:root {
  --hn-navy: #061a3a;
  --hn-navy-deep: #031127;
  --hn-cobalt: #0050cb;
  --hn-electric: #0066ff;
  --hn-sky: #00a8ff;
  --hn-ice: #eaf5ff;
  --hn-light: #f6f9ff;
  --hn-border: #cbd9ee;
  --hn-dark-surface: #071a35;
  --hn-dark-card: #0b2345;
  --hn-dark-muted: #9fb4d0;
  --hn-dark-text: #f2f7ff;
}

/* Compact brand mark used in the shared header. */
header img[alt*="Brand logo"] {
  width: auto;
  height: 2.55rem;
  max-width: 3.6rem;
  object-fit: contain;
}

/* Exact HN InfraTech brand lockup shown above the homepage hero headline.
   Uses the supplied master logo so the HN InfraTech wordmark,
   BUILDING SMARTER TOMORROW, and service line keep the original design. */
.hero-brand-lockup {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
}
.hero-brand-logo {
  display: block;
  width: min(330px, 70vw);
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 8px 18px rgba(0, 80, 203, 0.12));
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.hero-background-image {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 28%, rgba(0, 168, 255, 0.12), transparent 28%),
    radial-gradient(circle at 92% 78%, rgba(0, 80, 203, 0.10), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(234,245,255,0.82) 48%, rgba(255,255,255,0.94));
  opacity: 1;
}

/* Keep the exact logo artwork on light mode and make the complete logo
   readable in dark mode without changing its proportions or alignment. */
html.theme-dark .hero-brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0, 168, 255, 0.20));
}

@media (max-width: 640px) {
  .hero-brand-logo {
    width: min(285px, 82vw);
  }
}

/* Theme-aware HN InfraTech logos: blue on light mode, white on dark mode. */
.theme-logo {
  transition: filter 0.25s ease, opacity 0.25s ease;
}
html.theme-dark .theme-logo {
  filter: brightness(0) invert(1) !important;
}

/* Logo-aligned light accents. */
.brand-gradient {
  background: linear-gradient(135deg, var(--hn-navy) 0%, var(--hn-cobalt) 52%, var(--hn-sky) 100%);
}
.brand-gradient-text {
  background: linear-gradient(90deg, var(--hn-cobalt), var(--hn-sky));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-glow {
  box-shadow: 0 16px 44px rgba(0, 102, 255, 0.16);
}

/* Dark-mode palette. The existing Tailwind utilities are intentionally
   overridden here so every page can use the same light/dark brand system. */
html.theme-dark,
html.theme-dark body {
  background: var(--hn-navy-deep) !important;
  color: var(--hn-dark-text) !important;
}

html.theme-dark header {
  background: #061a3a !important;
  border-color: rgba(125, 180, 255, 0.18) !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.22) !important;
}

html.theme-dark .bg-surface,
html.theme-dark .bg-surface-container-lowest {
  background-color: var(--hn-dark-surface) !important;
}
html.theme-dark .bg-surface-container-low {
  background-color: #0a2141 !important;
}
html.theme-dark .bg-surface-container {
  background-color: #0d294f !important;
}
html.theme-dark .bg-surface-container-high {
  background-color: #12345f !important;
}
html.theme-dark .bg-surface-container-highest {
  background-color: #194272 !important;
}
html.theme-dark .text-on-surface,
html.theme-dark .text-on-background {
  color: var(--hn-dark-text) !important;
}
html.theme-dark .text-on-surface-variant {
  color: #b5c7df !important;
}
html.theme-dark .text-outline {
  color: #9bb0ca !important;
}
html.theme-dark .border-outline-variant\/30,
html.theme-dark .border-outline-variant\/40,
html.theme-dark .border-outline-variant\/50 {
  border-color: rgba(155, 188, 226, 0.2) !important;
}
html.theme-dark .bg-surface-variant {
  background-color: #183b67 !important;
}
html.theme-dark .bg-primary-fixed,
html.theme-dark .bg-primary-fixed\/40 {
  background-color: rgba(0, 102, 255, 0.22) !important;
}
html.theme-dark .bg-secondary-fixed\/50 {
  background-color: rgba(0, 168, 255, 0.18) !important;
}
html.theme-dark .bg-primary-container {
  background-color: var(--hn-electric) !important;
}
html.theme-dark .text-primary,
html.theme-dark .text-primary-container {
  color: #4aa7ff !important;
}
html.theme-dark .text-on-primary-container,
html.theme-dark .text-on-primary {
  color: #ffffff !important;
}
html.theme-dark .theme-toggle {
  background: #0d294f !important;
  color: #f2f7ff !important;
  border-color: rgba(155, 188, 226, 0.28) !important;
}
html.theme-dark .tech-pill {
  background: #102b50;
  color: #e6f1ff;
  border-color: rgba(106, 169, 255, 0.16);
}
html.theme-dark .tech-pill--label {
  background: transparent;
  color: #55b7ff;
  border-color: #187bdb;
}

/* Keep the mobile menu visually connected to the header in dark mode. */
html.theme-dark #mobile-menu {
  background: #061a3a !important;
  border-color: rgba(125, 180, 255, 0.18) !important;
}

/* Theme toggle polish. */
.theme-toggle {
  flex-shrink: 0;
  cursor: pointer;
}
.theme-toggle .material-symbols-outlined {
  transition: transform 0.2s ease;
}
.theme-toggle:hover .material-symbols-outlined {
  transform: rotate(-12deg) scale(1.05);
}

/* Accessibility: reduce motion for theme/brand effects when requested. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .material-symbols-outlined {
    transition: none;
  }
}


/* ==========================================================================
   About page hero alignment — V5
   Keeps the hero content safely below the fixed/sticky header and prevents
   the text/image columns from visually drifting out of alignment.
   ========================================================================== */
.about-hero {
  position: relative;
  isolation: isolate;
  scroll-margin-top: 5rem;
}

.about-hero-grid {
  position: relative;
  z-index: 10;
  align-items: start;
}

.about-hero-copy {
  min-width: 0;
  padding-top: 0.25rem;
}

.about-hero-copy h1 {
  max-width: 760px;
}

.about-hero-copy > p {
  max-width: 700px;
}

.about-hero-media {
  width: 100%;
  align-self: start;
}

.about-hero-media > div {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .about-hero {
    min-height: 650px;
    display: flex;
    align-items: center;
  }

  .about-hero-grid {
    width: 100%;
  }

  .about-hero-copy,
  .about-hero-media {
    align-self: start;
  }

  .about-hero-copy {
    padding-top: 0.5rem;
  }

  .about-hero-media {
    padding-top: 0.5rem;
  }
}

@media (max-width: 1023px) {
  .about-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .about-hero-media {
    margin-top: 0.5rem;
  }
}

/* ========================================================================
   About page hero — V7 alignment fix
   The hero is intentionally top-aligned so no content can sit underneath
   the sticky header. Text, CTAs, metrics and the image occupy independent
   grid areas and never overlap.
   ======================================================================== */
.about-hero {
  min-height: 0 !important;
  display: block !important;
  padding-top: 5.5rem !important;
  padding-bottom: 4.5rem !important;
}

.about-hero-grid {
  align-items: start !important;
  min-height: 0 !important;
}

.about-hero-copy {
  align-self: start !important;
  padding-top: 0 !important;
  min-width: 0;
}

.about-hero-copy h1,
.about-hero-copy > p {
  position: relative;
  z-index: 2;
}

.about-hero-copy > p {
  margin-bottom: 2rem !important;
}

.about-hero-copy .flex.flex-wrap {
  position: relative;
  z-index: 2;
}

/* Keep the three metrics strictly inside the left content column. */
.about-hero-copy > .w-full.grid {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 2rem !important;
  padding-top: 0 !important;
  gap: 1rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.about-hero-copy > .w-full.grid > div {
  min-width: 0;
  min-height: 92px;
}

.about-hero-media {
  align-self: start !important;
  width: 100% !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.about-hero-media > div:first-child {
  margin-top: 0 !important;
}

.about-hero-media > div:first-child img {
  display: block;
  width: 100%;
  height: 430px !important;
  object-fit: cover;
}

.about-hero-media > .absolute.-bottom-6 {
  bottom: -1.5rem !important;
  left: -1.5rem !important;
  z-index: 20;
}

@media (max-width: 1023px) {
  .about-hero {
    padding-top: 4rem !important;
    padding-bottom: 3.5rem !important;
  }

  .about-hero-copy > .w-full.grid {
    grid-template-columns: 1fr !important;
  }

  .about-hero-media {
    margin-top: 2rem !important;
  }

  .about-hero-media > div:first-child img {
    height: 360px !important;
  }
}

@media (max-width: 639px) {
  .about-hero {
    padding-top: 3rem !important;
  }

  .about-hero-copy > .w-full.grid {
    gap: 0.75rem !important;
  }
}

/* V9: Keep the homepage hero background consistent with the brand in dark mode.
   The light-mode gradient must not wash the dark hero into a pale purple/blue. */
html.theme-dark .hero-background-image {
  background:
    radial-gradient(circle at 78% 28%, rgba(0, 168, 255, 0.12), transparent 28%),
    radial-gradient(circle at 92% 78%, rgba(0, 80, 203, 0.14), transparent 30%),
    linear-gradient(135deg, #061a3a 0%, #071a35 52%, #031127 100%);
  opacity: 1;
}

/* V9: Preserve the navy hero even when the dotted overlay is present. */
html.theme-dark main .hero-background-image + .absolute {
  opacity: 0.28 !important;
}

/* V9: the Why Choose Us hero uses the standard light/dark surface, not a purple wash. */
html.theme-dark .why-choose-hero-surface {
  background-color: var(--hn-dark-surface) !important;
}