/* Ensemblix — design system
   Palette: built from the brand mark blue (#071C82), layered into a
   deep navy ink, a mid brand blue, and a brighter accent blue. */

:root {
  --brand: #071c82;
  --brand-dark: #050f4d;
  --brand-mid: #14309e;
  --ink: #0a1030;
  --ink-soft: #4c5372;
  --surface: #ffffff;
  --surface-alt: #eef1fa;
  --surface-tint: #e4e9fa;
  --border: #dbe1f2;
  --accent: #2d54e0;
  --accent-light: #8fa6ff;
  --accent-ink: #ffffff;
  --radius: 14px;
  --max-width: 1120px;
  --shadow: 0 1px 2px rgba(7, 28, 130, 0.05), 0 8px 24px rgba(7, 28, 130, 0.08);
  --shadow-lg: 0 20px 50px rgba(5, 15, 77, 0.45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 0.9rem; font-weight: 700; }

p { margin: 0 0 1em; color: var(--ink-soft); }

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  z-index: 50;
  transition: background-color 0.25s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-header.scrolled {
  box-shadow: 0 1px 0 rgba(15, 17, 21, 0.02), 0 12px 24px -18px rgba(15, 17, 21, 0.25);
}

/* On the homepage, the header used to sit directly on the dark hero as a
   solid white bar — a hard seam between two unrelated designs. .hero-dark
   is pulled up underneath the header via negative margin (see above), so
   the header can go genuinely transparent here and reveal the actual hero
   background (gradient + grid + glow) through it, rather than merely
   matching its color — the header visually becomes part of the hero
   instead of a bar sitting on top of it. It solidifies back to the normal
   white bar via .scrolled the moment you scroll past it. Browsers without
   :has() just keep the always-safe solid header (graceful fallback, not
   broken). Every rule below only matches on that specific page/scroll
   combination, not light-hero pages like Services/About/Utilities. */
.site-header:has(~ main .hero-dark):not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.site-header:has(~ main .hero-dark):not(.scrolled) .brand {
  color: #fff;
}

/* The hamburger icon itself sits directly in the transparent header bar at
   every width, so it needs to go light regardless of viewport — unlike the
   rules below, this one is NOT desktop-only. */
.site-header:has(~ main .hero-dark):not(.scrolled) .nav-toggle span {
  background: #fff;
}

.site-header:has(~ main .hero-dark):not(.scrolled) .brand-mark-dark {
  display: none;
}

.site-header:has(~ main .hero-dark):not(.scrolled) .brand-mark-light {
  display: inline-flex;
}

/* Below the mobile breakpoint, .nav-links only ever renders as the
   full-panel dropdown (see the max-width: 720px block), which always has
   its own solid white background regardless of the header's state above —
   so its contents (links, Contact button, Products toggle) must keep their
   normal dark styling there, or white text on that white panel disappears
   entirely. These overrides are desktop-only for exactly that reason. */
@media (min-width: 721px) {
  /* Scoped to .nav-links > .nav-item-dropdown (child combinator), not the
     plain descendant version — the Academics toggle nested inside the
     Products flyout is also a .nav-drop-toggle, and it must keep its
     normal dark color since it lives inside the always-solid-white
     flyout panel. */
  .site-header:has(~ main .hero-dark):not(.scrolled) .nav-links a,
  .site-header:has(~ main .hero-dark):not(.scrolled) .nav-links > .nav-item-dropdown > .nav-drop-toggle {
    color: #fff;
  }

  .site-header:has(~ main .hero-dark):not(.scrolled) .nav-links a:hover,
  .site-header:has(~ main .hero-dark):not(.scrolled) .nav-links > .nav-item-dropdown:hover > .nav-drop-toggle,
  .site-header:has(~ main .hero-dark):not(.scrolled) .nav-links > .nav-item-dropdown > .nav-drop-toggle:focus-visible,
  .site-header:has(~ main .hero-dark):not(.scrolled) .nav-links > .nav-item-dropdown.open > .nav-drop-toggle {
    color: var(--accent-light);
  }

  .site-header:has(~ main .hero-dark):not(.scrolled) .nav-cta {
    background: #fff;
    color: var(--brand-dark) !important;
  }

  .site-header:has(~ main .hero-dark):not(.scrolled) .nav-cta:hover {
    background: var(--accent-light);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--brand-dark);
  transition: color 0.2s ease;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: inline-flex;
}

.brand-name {
  font-size: 1.35rem;
  display: inline-block;
  /* Very subtle one-time reveal on load — the wordmark wipes in left-to-
     right from the EX mark, as if it's unfolding out of it, with a slight
     fade alongside. clip-path (not width/max-width) so it doesn't depend on
     guessing the text's rendered width at this font size. */
  animation: brand-name-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes brand-name-reveal {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-name {
    animation: none;
  }
}

.brand-mark.small {
  width: 24px;
  height: 24px;
}

.brand-mark-light {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-size: 0.95rem;
}

.nav-links a {
  color: var(--ink-soft);
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--brand);
}

.nav-cta {
  background: var(--brand);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.nav-cta:hover {
  background: var(--accent) !important;
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--brand-dark);
  display: block;
}

/* ---------- Nav dropdown (Academics) ---------- */

.nav-item-dropdown {
  position: relative;
}

.nav-drop-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}

.nav-drop-toggle svg {
  transition: transform 0.15s ease;
}

.nav-item-dropdown:hover .nav-drop-toggle,
.nav-drop-toggle:focus-visible,
.nav-item-dropdown.open .nav-drop-toggle {
  color: var(--brand);
}

.nav-item-dropdown.open .nav-drop-toggle svg,
.nav-item-dropdown:hover .nav-drop-toggle svg {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  transform: translateY(6px);
  min-width: 240px;
  max-width: min(320px, calc(100vw - 48px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink) !important;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s ease;
}

.nav-dropdown-link span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-dropdown-link small {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.nav-dropdown-link:hover {
  background: var(--surface-alt);
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* Nested dropdown — Academics flyout inside Products */

.nav-dropdown .nav-drop-toggle {
  width: 100%;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}

.nav-dropdown .nav-drop-toggle svg {
  transform: rotate(90deg);
}

/* Pin nested chevrons at the flyout-direction angle unconditionally. The
   generic rotate(180deg) rule (.nav-item-dropdown:hover .nav-drop-toggle svg)
   is a plain descendant selector, so it also matches these svgs merely
   because they sit inside a hovered/open Products panel — same specificity
   (0,3,1), so this rule (later in source) wins the tie and overrides it,
   regardless of whether the ancestor or the nested item itself is hovered. */
.nav-dropdown .nav-item-dropdown .nav-drop-toggle svg {
  transform: rotate(90deg);
}

.nav-dropdown .nav-item-dropdown:hover > .nav-drop-toggle,
.nav-dropdown .nav-item-dropdown.open > .nav-drop-toggle {
  background: var(--surface-alt);
}

.nav-dropdown .nav-item-dropdown > .nav-dropdown {
  top: -8px;
  right: 100%;
  left: auto;
  transform: translateX(-4px);
  margin-right: 6px;
  /* Override the generic descendant rule below, which would otherwise also
     match this nested panel merely because it sits inside a hovered/open
     Products panel — it must only show when ITS OWN toggle is hovered/open. */
  opacity: 0;
  visibility: hidden;
}

.nav-dropdown .nav-item-dropdown:hover > .nav-dropdown,
.nav-dropdown .nav-item-dropdown.open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* ---------- Dark hero ---------- */

.hero-dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
  /* Pulled up underneath the sticky header (72px) via negative margin, with
     padding-top increased by the same amount so the actual heading/copy
     lands in the exact same visual spot as before — only the section's own
     background (gradient + grid + glow) extends into that overlap, so a
     transparent header actually reveals real hero art there instead of
     empty page background. See .site-header's :has() override below. */
  margin-top: -72px;
  padding: 168px 0 88px;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.hero-glow-1 {
  width: 480px;
  height: 480px;
  top: -180px;
  left: -100px;
  background: radial-gradient(circle, rgba(45, 84, 224, 0.5), transparent 70%);
}

.hero-glow-2 {
  width: 420px;
  height: 420px;
  top: -80px;
  right: -140px;
  background: radial-gradient(circle, rgba(143, 166, 255, 0.35), transparent 70%);
}

.hero-cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.hero-copy {
  max-width: 560px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
}

.eyebrow-dark {
  color: var(--accent-light);
}

.hero-dark h1 {
  color: #fff;
}

.hero-sub {
  font-size: 1.15rem;
  max-width: 620px;
}

.hero-sub-dark {
  color: rgba(255, 255, 255, 0.68);
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
}

.hero-trust strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.hero-trust .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.page-hero {
  padding: 72px 0 48px;
  border-bottom: 1px solid var(--border);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn svg {
  transition: transform 0.15s ease;
}

.btn:hover svg {
  transform: translateX(2px);
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.btn-primary:hover {
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(45, 84, 224, 0.55);
}

.btn-ghost {
  background: transparent;
  color: var(--brand-dark);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--brand);
}

.btn-ghost-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-ghost-dark:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

.btn-sm {
  padding: 10px 18px;
  font-size: 0.88rem;
}

/* ---------- Sections ---------- */

.section {
  padding: 88px 0;
}

.section-alt {
  background: var(--surface-alt);
}

.section-head {
  max-width: 560px;
  margin-bottom: 44px;
}

.section-head p {
  margin-bottom: 0;
}

.section-cta {
  margin-top: 32px;
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow);
  border-color: transparent;
  transform: translateY(-3px);
}

.card:hover .card-link {
  color: var(--accent);
  gap: 8px;
}

.card h3 {
  margin-top: 18px;
}

.card p {
  margin-bottom: 16px;
  font-size: 0.95rem;
  flex: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: gap 0.15s ease, color 0.15s ease;
}

/* ---------- Testimonials ---------- */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.testimonial-card:hover {
  box-shadow: var(--shadow);
  border-color: transparent;
  transform: translateY(-3px);
}

.testimonial-quote-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-alt);
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.testimonial-quote {
  margin: 18px 0 24px;
  font-size: 0.98rem;
  flex: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-author strong {
  display: block;
  font-size: 0.92rem;
}

.testimonial-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--brand-dark);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.testimonial-role {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ---------- Icons ---------- */

.card-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--surface-alt);
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.service-row-icon .card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
}

.stat-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface);
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 10px;
}

.info-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface);
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

/* ---------- Process ---------- */

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}

.process-step {
  position: relative;
  padding-top: 8px;
}

.process-num {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.process-step h3 {
  margin-bottom: 8px;
}

.process-step p {
  font-size: 0.92rem;
  margin-bottom: 0;
}

/* ---------- Band / stats ---------- */

.band {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-soft);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.14;
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.band-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.band .band-stats {
  grid-template-columns: 1fr 1fr;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
}

.stat-num {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
}

.stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ---------- Service list (services page) ---------- */

.service-list {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.service-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border);
}

.service-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ---------- Product list (products page) ---------- */

.product-list {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.product-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border);
}

.product-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.product-row-icon .card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
}

.product-tag {
  display: inline-flex;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

/* ---------- Academics cards ---------- */

.card-academics h3 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-academics h3 svg {
  color: var(--ink-soft);
}

/* ---------- CTA ---------- */

.cta-section-dark {
  text-align: center;
  background: linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
}

.cta-section-dark h2 {
  color: #fff;
}

.cta-section-dark p {
  color: rgba(255, 255, 255, 0.6);
}

.cta-inner {
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.form-field label {
  font-weight: 600;
  font-size: 0.9rem;
}

.form-field input,
.form-field textarea {
  font: inherit;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.contact-form .btn {
  align-self: flex-start;
}

.contact-info {
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 32px;
  height: fit-content;
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.contact-info a {
  color: var(--accent);
  font-weight: 500;
}

/* ---------- Utilities (file conversion tools) ---------- */

.page-hero-center {
  text-align: center;
  padding: 44px 0 24px;
}

.page-hero-center .hero-sub {
  margin-left: auto;
  margin-right: auto;
}

.section-tool {
  padding: 24px 0 72px;
}

.utility-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  margin: 32px auto 0;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 0.15s ease;
}

.utility-search:focus-within {
  border-color: var(--accent);
}

.utility-search-icon {
  display: inline-flex;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.utility-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font: inherit;
  background: transparent;
  color: var(--ink);
}

.utility-search input::-webkit-search-cancel-button {
  cursor: pointer;
}

.utility-card-category {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.utility-card h3 {
  margin-top: 10px;
}

/* Extremely subtle pastel tint per category — just enough to help the eye
   scan the grid, not enough to compete with the brand blue elsewhere. */
.utility-card-word .card-icon {
  background: #eef1fb;
  color: #7386c7;
}

.utility-card-pdf .card-icon {
  background: #fbeeee;
  color: #cf8f8f;
}

.utility-card-image .card-icon {
  background: #eaf6f1;
  color: #74ac97;
}

.utility-empty {
  text-align: center;
  padding: 24px 0 0;
}

.utility-tool {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.upload-form .form-field {
  text-align: left;
}

.upload-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.upload-drop:hover,
.upload-drop.dragover {
  border-color: var(--accent);
  background: var(--surface-tint);
}

.upload-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--surface);
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.upload-text {
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
}

.upload-hint {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.format-choice {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.format-choice-option {
  position: relative;
}

.format-choice-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.format-choice-option span {
  display: inline-flex;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.format-choice-option input:checked + span {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.format-choice-option input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.upload-form .btn {
  align-self: center;
}

.upload-form select {
  font: inherit;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--ink);
}

.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- Page-wide drop zone ---------- */

.page-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 15, 77, 0.88);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.page-drop-overlay.active {
  display: flex;
}

.page-drop-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 64px;
  border: 3px dashed rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
}

.page-drop-overlay-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* ---------- Flash messages ---------- */

.flash-wrap {
  padding-top: 20px;
}

.flash {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.flash-success {
  background: #e7f8ee;
  color: #147a4a;
}

.flash-error {
  background: #fdecec;
  color: #b3261e;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--brand-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 48px;
}

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

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 14px;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  margin: 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-contact {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copy {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .band,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .service-row,
  .product-row {
    grid-template-columns: 56px 1fr;
  }
}

@media (max-width: 720px) {
  .hero-dark {
    /* margin-top: -72px (set above) pulls the section underneath the
       72px sticky header, so padding-top must clear that height plus
       some breathing room, or the copy starts hidden behind the header. */
    padding: 104px 0 48px;
  }

  .section {
    padding: 56px 0;
  }

  .page-hero {
    padding: 48px 0 32px;
  }

  .section-head {
    margin-bottom: 32px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    min-height: calc(100vh - 72px);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-cta {
    display: inline-block;
    margin-top: 8px;
  }

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

  .nav-item-dropdown {
    width: 100%;
  }

  .nav-drop-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
    min-height: 44px;
  }

  .nav-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    padding: 4px 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  /* Desktop centers the top-level panel with translateX(-50%); on mobile
     it's an inline accordion, so that offset must be cancelled or the
     whole panel (and everything inside it) renders shifted off-screen. */
  .nav-item-dropdown:hover .nav-dropdown,
  .nav-item-dropdown.open .nav-dropdown {
    transform: none;
  }

  /* Scoped to the outer li's own direct-child panel only — the plain
     descendant version also matched the nested panels, expanding them
     merely because Products was open, without them being toggled.
     Sized to fit both Academics and Utilities open at once (worst case),
     since either nested accordion can be expanded independently. */
  #navLinks > .nav-item-dropdown.open > .nav-dropdown {
    max-height: 1100px;
  }

  .nav-dropdown-link {
    padding: 12px 0;
    min-height: 44px;
  }

  .nav-dropdown .nav-item-dropdown > .nav-dropdown {
    position: static;
    left: auto;
    top: auto;
    margin-left: 0;
    transform: none;
  }

  .nav-dropdown .nav-item-dropdown.open > .nav-dropdown {
    max-height: 320px;
  }

  .nav-dropdown .nav-drop-toggle {
    padding: 12px 0;
    min-height: 44px;
  }

  .nav-dropdown .nav-dropdown-link {
    padding: 12px 0 12px 16px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}