/* ============================================================
   NEXON ENGINEERING & CONTROL — Design System
   Colors sampled directly from brand mark: ink #1F232D, signal blue #0F6BA4
   ============================================================ */

:root {
  /* Color */
  --ink: #1F232D;
  --ink-2: #14171F;
  --blue: #0F6BA4;
  --blue-light: #4A9FD6;
  --steel-50: #F7F8FA;
  --steel-100: #EEF1F4;
  --steel-200: #DDE2E8;
  --steel-400: #9AA5B1;
  --white: #FFFFFF;

  /* Type */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Scale */
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-3: clamp(2.25rem, 1.8rem + 2.25vw, 3.5rem);
  --step-4: clamp(2.75rem, 2rem + 3.4vw, 4.75rem);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-med: 500ms;
  --dur-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
  color: var(--ink);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

/* Visible keyboard focus, always */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--blue);
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.95em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary {
  background: var(--blue);
  color: var(--white);
}
.btn-primary:hover { background: var(--blue-light); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-outline.on-dark { color: var(--white); }
.btn-outline.on-dark:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.btn:hover svg { transform: translate(2px, -2px); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: background var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  z-index: -1;
}
.site-header.is-scrolled { padding-block: 0.7rem; box-shadow: 0 1px 0 var(--steel-200); }
.site-header.is-scrolled::before { opacity: 1; }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-main { display: flex; align-items: center; gap: 2.2rem; }
.nav-main a {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  position: relative;
  padding-bottom: 4px;
}
.site-header.is-scrolled .nav-main a,
.page-light .nav-main a { color: var(--ink); }
.nav-main a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--dur-fast) var(--ease);
}
.nav-main a:hover::after,
.nav-main a[aria-current="page"]::after { width: 100%; }

.lang-toggle {
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
  transition: border-color var(--dur-fast) var(--ease);
}
.site-header.is-scrolled .lang-toggle,
.page-light .lang-toggle { border-color: var(--steel-200); color: var(--ink); }
.lang-toggle button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0.45em 0.75em;
  cursor: pointer;
  opacity: 0.55;
}
.lang-toggle button[aria-pressed="true"] { opacity: 1; }
.site-header.is-scrolled .lang-toggle button[aria-pressed="true"],
.page-light .lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--white); opacity: 1; }
.lang-toggle button[aria-pressed="true"]:not(.dark-active) { background: rgba(255,255,255,0.15); }

.header-actions { display: flex; align-items: center; gap: 1.25rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 32px; height: 24px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--white);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.site-header.is-scrolled .nav-toggle span,
.site-header.is-scrolled .nav-toggle span::before,
.site-header.is-scrolled .nav-toggle span::after,
.page-light .nav-toggle span,
.page-light .nav-toggle span::before,
.page-light .nav-toggle span::after { background: var(--ink); }
.nav-toggle span { top: 11px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-main {
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.75rem;
    padding: 6rem var(--gutter) 3rem;
    background: var(--ink-2);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease);
  }
  .nav-main a,
  .page-light .nav-main a { color: var(--white); font-size: var(--step-1); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
  body.nav-open .nav-main { transform: translateX(0); }
  body.nav-open { overflow: hidden; }

  /* The open menu is a child of .site-header, so it shares the header's
     stacking context — its z-index:90 would otherwise paint over the
     close button and language switcher, trapping the user in the menu. */
  .header-actions { position: relative; z-index: 95; }

  /* Once open, the burger and the links sit on the dark overlay, so both must be
     white. These need to out-specify `.site-header.is-scrolled …` (0,3,1) and
     `.page-light …` (0,2,1), which otherwise paint them ink-on-ink after the
     user scrolls down and then opens the menu. */
  body.nav-open .site-header .nav-main a { color: var(--white); }
  body.nav-open .site-header .nav-toggle span::before,
  body.nav-open .site-header .nav-toggle span::after { background: var(--white); }
  /* While the menu is open the switcher sits on the dark overlay, so it must be
     white regardless of page theme or scroll state. When the menu is closed it
     must fall back to the normal theme rules — forcing white unconditionally
     rendered the inactive languages white-on-white over the scrolled header. */
  body.nav-open .header-actions .lang-toggle {
    border-color: rgba(255,255,255,0.4);
    color: var(--white);
  }
  body.nav-open .header-actions .lang-toggle button[aria-pressed="true"] {
    background: rgba(255,255,255,0.15);
    color: var(--white);
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-2);
  color: var(--white);
  padding-top: 4.5rem;
  padding-bottom: 0;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  /* cover + center: fills the hero with no letterboxing and no distortion.
     The clip is 16:9, so a portrait phone crops the sides — that is fine here
     because the framing is a centred logo reveal over a decorative circuit
     texture, and a dark gradient sits over all of it. */
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero-media video.is-loaded { opacity: 1; }
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,23,31,0.55) 0%, rgba(20,23,31,0.7) 55%, rgba(20,23,31,0.96) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.hero-content .eyebrow { color: var(--blue-light); margin-bottom: 1.1rem; }
.hero h1 {
  font-size: var(--step-4);
  max-width: 18ch;
  margin-bottom: 1.1rem;
  color: var(--white);
}
.hero-lede {
  font-size: var(--step-1);
  font-weight: 300;
  max-width: 46ch;
  color: var(--steel-200);
  margin-bottom: 1.85rem;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-400);
  writing-mode: vertical-rl;
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--blue-light), transparent);
}
@media (max-width: 720px) { .scroll-cue { display: none; } }

/* ============================================================
   Sections
   ============================================================ */
section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-light { background: var(--white); }
.section-steel { background: var(--steel-50); }
.section-dark { background: var(--ink-2); color: var(--white); }
.section-dark h2, .section-dark h3 { color: var(--white); }

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head h2 { font-size: var(--step-3); margin-top: 0.6rem; }
.section-head .eyebrow { margin-bottom: 0; }
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Reveal-on-scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Cards / Grids
   ============================================================ */
.grid { display: grid; gap: 1px; background: var(--steel-200); border: 1px solid var(--steel-200); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.card-filler { background: var(--steel-50); margin: -1px; }
@media (max-width: 900px) { .card-filler { display: none; } }

.card {
  background: var(--white);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: background var(--dur-fast) var(--ease);
}
.card-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--blue);
}
.card h3 { font-size: var(--step-1); }
.card p { color: var(--ink); opacity: 0.75; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}
.card-link svg { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease); }
.card:hover .card-link svg { transform: translate(3px, -3px); }

/* Service list rows (used on services.html) */
.svc-block { border-top: 1px solid var(--steel-200); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.svc-block:last-child { border-bottom: 1px solid var(--steel-200); }
.svc-grid { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: clamp(1.5rem, 4vw, 4rem); }
@media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.split-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 760px) { .split-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.split-grid p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

.split-grid-even { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 760px) { .split-grid-even { grid-template-columns: 1fr; gap: 1.5rem; } }
.split-grid-even p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Company-overview figure. Same treatment as .svc-head-img (full-width,
   site radius, lazy) but without the 4/3 crop — this image carries fine
   detail (the labelled discipline list) that object-fit: cover would clip. */
.overview-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.svc-head .eyebrow { margin-bottom: 0.9rem; }
.svc-head h3 { font-size: var(--step-2); }
.svc-head-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: 1.75rem;
}
.svc-lede { color: var(--ink); opacity: 0.75; margin-top: 1rem; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.svc-sub { margin-bottom: 1.75rem; }
.svc-sub:last-child { margin-bottom: 0; }
.svc-sub h4 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--blue);
  font-weight: 500;
  margin-bottom: 0.85rem;
}
.svc-sub p { opacity: 0.8; margin-bottom: 0.85rem; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.tag-list li {
  font-size: 0.85rem;
  padding: 0.45em 0.9em;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  color: var(--ink);
}

/* Process steps */
.process-list { counter-reset: step; display: grid; gap: 0; }
.process-item {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(255,255,255,0.12);
  align-items: baseline;
}
.process-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.process-item::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--blue-light);
}
.process-item h3 { font-size: var(--step-1); margin-bottom: 0.5rem; text-transform: none; }
.process-item p { opacity: 0.7; max-width: 55ch; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 640px) { .process-item { grid-template-columns: 1fr; gap: 0.5rem; } }

/* Credentials strip */
.creds-strip {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  justify-content: space-between;
}
.cred {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  flex: 1 1 220px;
}
.cred svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--blue); margin-top: 0.15rem; }
.cred strong { display: block; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.02em; margin-bottom: 0.3rem; text-transform: uppercase; }
.cred span { font-size: 0.88rem; opacity: 0.65; }

/* CTA band */
.cta-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2 { font-size: var(--step-3); max-width: 16ch; }
.cta-band p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  color: var(--steel-400);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/world-map-dots.png');
  background-repeat: no-repeat;
  background-position: 85% center;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 1.75rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid img { height: 42px; width: auto; margin-bottom: 1.25rem; }
.footer-grid p { max-width: 34ch; font-size: 0.92rem; }
.footer-info p { margin-bottom: 0.9rem; line-height: 1.5; }
.footer-address { max-width: 46ch !important; }
.footer-info p strong { color: var(--steel-200); font-weight: 500; margin-right: 0.35em; }
.footer-info a { transition: color var(--dur-fast) var(--ease); }
.footer-info a:hover { color: var(--white); }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.footer-col h4::after {
  content: '';
  display: block;
  width: 26px;
  height: 2px;
  background: var(--blue);
  margin-top: 0.75rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { font-size: 0.92rem; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; }

/* Sitemap chevron list */
.footer-col ul.footer-sitemap { display: block; list-style: none; padding: 0; margin: 1.5rem 0 0; gap: 0; }
.footer-sitemap li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-sitemap li:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.footer-sitemap a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-block: 0.7rem;
  font-size: 0.92rem;
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.footer-sitemap a svg { width: 11px; height: 11px; color: var(--blue); flex-shrink: 0; }
.footer-sitemap a:hover { color: var(--white); padding-left: 0.35rem; }
.footer-sitemap a[aria-current="page"] { color: var(--white); font-weight: 600; }

/* Working hours */
.footer-col ul.footer-hours { display: block; list-style: none; padding: 0; margin: 1.5rem 0 2.75rem; gap: 0; }
.footer-hours li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.88rem;
}
.footer-hours li:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.footer-hours .hours-value { color: var(--white); font-weight: 600; }

/* Social icons */
.footer-social-links { display: flex; gap: 0.75rem; margin-top: 1rem; }
.footer-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  color: var(--steel-400);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.footer-social-links a svg { width: 16px; height: 16px; }
.footer-social-links a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* Back-to-top */
.back-to-top {
  position: fixed;
  right: clamp(1.25rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  z-index: 80;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: var(--blue); }
.back-to-top svg { width: 18px; height: 18px; }

/* ============================================================
   Page hero (interior pages)
   ============================================================ */
.page-hero {
  background: var(--ink-2);
  color: var(--white);
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.page-hero.contact-hero,
.page-hero.about-hero,
.page-hero.services-hero {
  min-height: 616px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(255,193,64,0.94) 0%, rgba(255,193,64,0.55) 28%, rgba(255,193,64,0.18) 38%, rgba(255,193,64,0) 46%),
    url('../assets/img/contact-hero-bms-engineers.jpg');
  background-size: cover, cover;
  background-position: left center, 76% 14%;
  background-repeat: no-repeat, no-repeat;
}
.page-hero.about-hero {
  background-image:
    linear-gradient(90deg, rgba(255,193,64,0.94) 0%, rgba(255,193,64,0.55) 28%, rgba(255,193,64,0.18) 38%, rgba(255,193,64,0) 46%),
    url('../assets/img/about-hero-engineers.jpg');
  background-position: left center, 78% 18%;
}
.page-hero.services-hero {
  background-image:
    linear-gradient(90deg, rgba(255,193,64,0.94) 0%, rgba(255,193,64,0.55) 28%, rgba(255,193,64,0.18) 38%, rgba(255,193,64,0) 46%),
    url('../assets/img/services-hero-engineers.jpg');
  background-position: left center, 76% 14%;
}
.page-hero.contact-hero > .container,
.page-hero.about-hero > .container,
.page-hero.services-hero > .container { position: relative; z-index: 1; width: 100%; }
.page-hero.contact-hero .content-inner,
.page-hero.about-hero .content-inner,
.page-hero.services-hero .content-inner { max-width: 480px; }
.page-hero.contact-hero .eyebrow,
.page-hero.about-hero .eyebrow,
.page-hero.services-hero .eyebrow { color: var(--blue); }
.page-hero.contact-hero .eyebrow::before,
.page-hero.about-hero .eyebrow::before,
.page-hero.services-hero .eyebrow::before { background: var(--blue); }
.page-hero.contact-hero h1,
.page-hero.about-hero h1,
.page-hero.services-hero h1 { color: var(--ink); }
.page-hero.contact-hero .page-hero-lede,
.page-hero.about-hero .page-hero-lede,
.page-hero.services-hero .page-hero-lede { color: var(--ink); opacity: 0.78; }
.page-hero .eyebrow { color: var(--blue-light); margin-bottom: 1rem; }
.page-hero h1 { font-size: var(--step-3); max-width: 20ch; color: var(--white); }
.page-hero-lede { max-width: 50ch; color: var(--steel-200); font-weight: 300; margin-top: 1.25rem; font-size: var(--step-0); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

@media (max-width: 1000px) and (min-width: 641px) {
  .page-hero.contact-hero,
  .page-hero.services-hero { background-position: left center, 38% 12%; }
  .page-hero.about-hero { background-position: left center, 40% 16%; }
  .page-hero.contact-hero .content-inner,
  .page-hero.about-hero .content-inner,
  .page-hero.services-hero .content-inner { max-width: 265px; }
}

@media (max-width: 640px) {
  .page-hero.contact-hero,
  .page-hero.about-hero,
  .page-hero.services-hero {
    min-height: 460px;
  }
  .page-hero.contact-hero {
    background-image:
      linear-gradient(100deg, rgba(255,193,64,0.97) 0%, rgba(255,193,64,0.93) 44%, rgba(255,193,64,0.5) 64%, rgba(255,193,64,0.05) 82%),
      url('../assets/img/contact-hero-bms-engineers.jpg');
    background-position: left center, 36% center;
  }
  .page-hero.about-hero {
    background-image:
      linear-gradient(100deg, rgba(255,193,64,0.97) 0%, rgba(255,193,64,0.93) 44%, rgba(255,193,64,0.5) 64%, rgba(255,193,64,0.05) 82%),
      url('../assets/img/about-hero-engineers.jpg');
    background-position: left center, 70% 10%;
  }
  .page-hero.services-hero {
    background-image:
      linear-gradient(100deg, rgba(255,193,64,0.97) 0%, rgba(255,193,64,0.93) 44%, rgba(255,193,64,0.5) 64%, rgba(255,193,64,0.05) 82%),
      url('../assets/img/services-hero-engineers.jpg');
    background-position: left center, 36% center;
  }
  .page-hero.contact-hero .content-inner,
  .page-hero.about-hero .content-inner,
  .page-hero.services-hero .content-inner { max-width: 220px; }
}

.page-hero.hero-yellow { background: #FFC940; min-height: 616px; display: flex; align-items: center; }
.hero-yellow .eyebrow { color: var(--blue); }
.hero-yellow .eyebrow::before { background: var(--blue); }
.hero-yellow h1 { color: var(--ink); }
.hero-yellow .page-hero-lede { color: var(--ink); opacity: 0.72; }

.section-dark.hero-yellow { background: #FFC940; color: var(--ink); }
.section-dark.hero-yellow h2, .section-dark.hero-yellow h3 { color: var(--ink); }
.section-dark.hero-yellow .process-item { border-top-color: rgba(31,35,45,0.15); }
.section-dark.hero-yellow .process-item:last-child { border-bottom-color: rgba(31,35,45,0.15); }
.section-dark.hero-yellow .process-item::before { color: var(--blue); }
.section-dark.hero-yellow .process-item p { color: var(--ink); opacity: 0.75; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-item { display: flex; gap: 1rem; margin-bottom: 1.75rem; }
.contact-item svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; margin-top: 0.2rem; }
.contact-item strong { display: block; font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); opacity: 0.55; margin-bottom: 0.3rem; }
.contact-item a, .contact-item span { font-size: 1.05rem; }
.map-frame { width: 100%; border: 0; border-radius: var(--radius); filter: grayscale(0.4) contrast(1.05); }
/* The map sits outside .container as a direct child of its section, so it is
   already full-bleed at width:100% — no 100vw/negative-margin hack needed.
   (100vw includes the scrollbar while the layout does not, which is what was
   pushing ~15px of horizontal overflow onto the page.) */
.map-frame-full {
  display: block;
  height: 550px;
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: 0;
}
@media (max-width: 640px) { .map-frame-full { height: 380px; } }

.form-field { margin-bottom: 1.4rem; }
.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  font: inherit;
  padding: 0.85em 1em;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--blue);
  outline: none;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 520px) { .form-grid-2 { grid-template-columns: 1fr; } }
.form-note { font-size: 0.82rem; opacity: 0.55; margin-top: 1rem; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--blue);
  color: var(--white);
  padding: 1em 1.5em;
  z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ============================================================
   Mobile ergonomics — touch targets
   ============================================================
   Interactive controls need a ~44px tap area on touch screens
   (WCAG 2.5.8 / platform HIG). The extra area comes from padding and
   hit-box growth, not from scaling the design up — visual weight,
   type sizes, and spacing rhythm are unchanged. */
@media (max-width: 860px) {
  .lang-toggle button { padding: 0.75em 0.85em; min-height: 44px; }

  /* Grow the burger's hit box to 44px while keeping the bars the same
     size and optically centred where they were. */
  .nav-toggle { width: 44px; height: 44px; }
  .nav-toggle span { top: 21px; left: 6px; right: 6px; }
  .nav-toggle span::before { top: -8px; }
  .nav-toggle span::after { top: 8px; }

  /* Inline links that act as primary actions on touch */
  .card-link { padding-block: 0.75rem; }
  .contact-item a { display: inline-block; padding-block: 0.5rem; }
  /* Padding grows the hit box; the negative margin claws back most of the
     layout cost so the footer's line rhythm stays as designed. */
  .footer-info a { display: inline-block; padding-block: 0.7rem; margin-block: -0.45rem; }
  .footer-social-links a { width: 44px; height: 44px; }
}

/* ============================================================
   Arabic (RTL) localization
   ============================================================
   CSS Grid and Flexbox already re-flow automatically once `dir="rtl"`
   is set on <html> (main-axis / auto-placement follow inline direction),
   so most component layouts (nav, cards, footer columns, forms, hero
   text vs. image placement) mirror with no extra rules. What's left is:
   physically-positioned elements (left/right/margin-left etc.), the
   hand-tuned hero background-position + gradient direction per photo,
   directional icons, and Latin-only type treatments (letter-spacing,
   the display font) that don't suit Arabic script. */

html[lang="ar"] body,
html[lang="ar"] .eyebrow,
html[lang="ar"] .btn,
html[lang="ar"] .nav-main a,
html[lang="ar"] .page-light .nav-main a,
html[lang="ar"] .lang-toggle,
html[lang="ar"] .scroll-cue,
html[lang="ar"] .card-link,
html[lang="ar"] .svc-sub h4,
html[lang="ar"] .cred strong,
html[lang="ar"] .footer-col h4,
html[lang="ar"] .contact-item strong,
html[lang="ar"] .form-field label,
html[lang="ar"] .form-field input,
html[lang="ar"] .form-field textarea,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  letter-spacing: normal;
}

/* ---------- Directional (physically-positioned) elements ---------- */
html[dir="rtl"] .nav-main a::after { left: auto; right: 0; }
html[dir="rtl"] .scroll-cue { right: auto; left: var(--gutter); }
html[dir="rtl"] .back-to-top { right: auto; left: clamp(1.25rem, 3vw, 2rem); }
html[dir="rtl"] .skip-link { left: auto; right: -999px; }
html[dir="rtl"] .skip-link:focus { right: 1rem; left: auto; }
html[dir="rtl"] .site-footer::before { background-position: 15% center; }
html[dir="rtl"] .footer-info p strong { margin-right: 0; margin-left: 0.35em; }
html[dir="rtl"] .footer-sitemap a:hover { padding-left: 0; padding-right: 0.35rem; }

/* ---------- Directional icons (arrows / chevrons only — object icons like
   pins, phones, and brand marks stay as drawn) ---------- */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .card-link svg,
html[dir="rtl"] .footer-sitemap a svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translate(2px, -2px); }
html[dir="rtl"] .card:hover .card-link svg { transform: scaleX(-1) translate(3px, -3px); }

/* ---------- Hero photo + gradient mirroring ----------
   The gradient scrim always sits on the text side; in RTL the text
   moves to the right (flex auto-mirrors), so the scrim direction and
   each photo's tuned crop position are mirrored to match. */
html[dir="rtl"] .page-hero.contact-hero,
html[dir="rtl"] .page-hero.about-hero,
html[dir="rtl"] .page-hero.services-hero {
  background-position: right center, 24% 14%;
}
html[dir="rtl"] .page-hero.contact-hero {
  background-image:
    linear-gradient(270deg, rgba(255,193,64,0.94) 0%, rgba(255,193,64,0.55) 28%, rgba(255,193,64,0.18) 38%, rgba(255,193,64,0) 46%),
    url('../assets/img/contact-hero-engineers-ar.jpg');
}
html[dir="rtl"] .page-hero.services-hero {
  background-image:
    linear-gradient(270deg, rgba(255,193,64,0.94) 0%, rgba(255,193,64,0.55) 28%, rgba(255,193,64,0.18) 38%, rgba(255,193,64,0) 46%),
    url('../assets/img/services-hero-engineers-ar.jpg');
}
html[dir="rtl"] .page-hero.about-hero {
  background-image:
    linear-gradient(270deg, rgba(255,193,64,0.94) 0%, rgba(255,193,64,0.55) 28%, rgba(255,193,64,0.18) 38%, rgba(255,193,64,0) 46%),
    url('../assets/img/about-hero-engineers-ar.jpg');
  background-position: right center, 22% 18%;
}

@media (max-width: 1000px) and (min-width: 641px) {
  html[dir="rtl"] .page-hero.contact-hero,
  html[dir="rtl"] .page-hero.services-hero { background-position: right center, 62% 12%; }
  html[dir="rtl"] .page-hero.about-hero { background-position: right center, 60% 16%; }
}

@media (max-width: 640px) {
  html[dir="rtl"] .page-hero.contact-hero {
    background-image:
      linear-gradient(260deg, rgba(255,193,64,0.97) 0%, rgba(255,193,64,0.93) 44%, rgba(255,193,64,0.5) 64%, rgba(255,193,64,0.05) 82%),
      url('../assets/img/contact-hero-engineers-ar.jpg');
    background-position: right center, 64% center;
  }
  html[dir="rtl"] .page-hero.about-hero {
    background-image:
      linear-gradient(260deg, rgba(255,193,64,0.97) 0%, rgba(255,193,64,0.93) 44%, rgba(255,193,64,0.5) 64%, rgba(255,193,64,0.05) 82%),
      url('../assets/img/about-hero-engineers-ar.jpg');
    background-position: right center, 30% 10%;
  }
  html[dir="rtl"] .page-hero.services-hero {
    background-image:
      linear-gradient(260deg, rgba(255,193,64,0.97) 0%, rgba(255,193,64,0.93) 44%, rgba(255,193,64,0.5) 64%, rgba(255,193,64,0.05) 82%),
      url('../assets/img/services-hero-engineers-ar.jpg');
    background-position: right center, 64% center;
  }
}