/* ============================================================
   Engineering Power Solutions — Global Stylesheet
   Design language: technical drawing / industrial premium
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --navy-900: #d4cfca;  /* deepest surface (stone) */
  --navy-800: #e1ddd9;  /* panel surface */
  --navy-700: #ece9e6;  /* raised surface */
  --paper: #f7f6f4;  /* page base */
  --paper-raised: #ffffff;  /* cards */
  --ink: #25272b;  /* body text */
  --ink-soft: #55595f;  /* secondary text */
  --mist: #55595f;  /* tertiary text */
  --line-dark: rgba(37, 39, 43, 0.16);
  --line-light: rgba(37, 39, 43, 0.14);
  --accent: #c8102e;  /* EPS red */
  --accent-deep: #a60d27;  /* EPS red, deep (light backgrounds) */
  --amber: #c8102e;  /* primary CTA (EPS red) */
  --amber-deep: #990b22;  /* primary CTA hover */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --max-w: 1160px;
  --radius: 6px;
  --pad-section: clamp(4rem, 9vw, 7.5rem);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.6em; color: inherit; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--amber); color: #fff; padding: 0.6rem 1rem;
  z-index: 200; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }

/* ---------- Technical-drawing language ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.on-dark .eyebrow { color: var(--accent); }

/* dimension-line divider between sections */
.dim-rule {
  border: 0;
  height: 1px;
  background: var(--line-light);
  position: relative;
  margin: 0;
}
.dim-rule::before, .dim-rule::after {
  content: "";
  position: absolute; top: -4px;
  width: 1px; height: 9px;
  background: var(--line-light);
}
.dim-rule::before { left: 0; }
.dim-rule::after { right: 0; }

.mono-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.on-dark .mono-note { color: var(--mist); }

/* cards that open with a mono label get breathing room before the title */
.card .mono-note + h3 { margin-top: 0.9rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 20, 30, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; gap: 1rem;
}
.brand {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: #fff;
}
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 auto;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.02rem; line-height: 1.15;
}
.brand-name small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mist);
}
.main-nav { display: flex; align-items: center; gap: clamp(0.4rem, 1.6vw, 1.4rem); }
.main-nav a {
  color: #e8edf2; text-decoration: none;
  font-size: 0.95rem; font-weight: 500;
  padding: 0.45rem 0.35rem;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--accent); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--accent); color: #fff; }
.nav-cta {
  background: var(--amber); color: #fff !important;
  border-radius: var(--radius);
  padding: 0.55rem 1.05rem !important;
  font-weight: 600;
  border-bottom: none !important;
  transition: background 0.15s ease;
}
.nav-cta:hover { background: var(--amber-deep); color: #fff; }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: #fff; padding: 0.5rem 0.7rem; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em;
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-900);
    border-bottom: 1px solid var(--line-dark);
    padding: 0.5rem 1.2rem 1.2rem;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--line-dark); }
  .main-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
  .nav-cta { margin-top: 0.9rem; text-align: center; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(200, 16, 46, 0.14), transparent 60%),
    var(--navy-900);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  /* blueprint grid */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 85%);
  pointer-events: none;
}
.hero .container {
  position: relative;
  padding-top: clamp(4.5rem, 11vw, 8.5rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
  max-width: 1160px;
}
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  max-width: 19ch;
  margin-bottom: 1.1rem;
}
.hero h1 .accent { color: var(--accent); }
.hero .lede {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--mist);
  max-width: 62ch;
  margin-bottom: 2.2rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 3rem; }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600; font-size: 1rem;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 0.85rem 1.55rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--amber); color: #fff; }
.btn-primary:hover { background: var(--amber-deep); }
.btn-ghost { border-color: rgba(255,255,255,0.35); color: #fff; background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost-dark { border-color: var(--line-light); color: var(--ink); background: transparent; }
.btn-ghost-dark:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

/* lifecycle diagram (verified sequence) */
.lifecycle {
  border-top: 1px solid var(--line-dark);
  padding-top: 1.6rem;
}
.lifecycle-label {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 1.1rem;
}
.lifecycle-track {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0;
  align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.lifecycle-track li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #dfe7ee;
  letter-spacing: 0.04em;
  display: flex; align-items: center;
  white-space: nowrap;
}
.lifecycle-track li::after {
  content: "";
  width: clamp(18px, 3vw, 44px); height: 1px;
  background: var(--accent);
  margin: 0 0.6rem;
  position: relative;
}
.lifecycle-track li:last-child::after { display: none; }
.lifecycle-track li::before {
  content: "";
  width: 7px; height: 7px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
  margin-right: 0.6rem;
  flex: 0 0 auto;
}
@media (max-width: 700px) {
  .lifecycle-track { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
  .lifecycle-track li::after { display: none; }
}

/* ---------- Sections ---------- */
.section { padding: var(--pad-section) 0; }
.section-dark { background: var(--navy-900); color: #fff; }
.section-panel { background: var(--navy-800); color: #fff; }
.section h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  letter-spacing: -0.01em;
  max-width: 26ch;
}
.section-intro { max-width: 66ch; color: var(--ink-soft); }
.on-dark .section-intro { color: var(--mist); }

/* capability strip */
.cap-strip {
  background: var(--navy-800);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.cap-strip .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
}
.cap-item {
  padding: 1.4rem 1.2rem;
  border-left: 1px solid var(--line-dark);
  color: #fff;
}
.cap-item:first-child { border-left: none; }
.cap-item .mono-note { display: block; margin-bottom: 0.3rem; color: var(--accent); }
.cap-item strong { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
@media (max-width: 700px) {
  .cap-item { border-left: none; border-top: 1px solid var(--line-dark); }
  .cap-item:first-child { border-top: none; }
}

/* ---------- Card grids ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  position: relative;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(12, 24, 36, 0.09);
}
.card h3 { font-size: 1.16rem; margin-bottom: 0.55rem; }
.card p, .card li { color: var(--ink-soft); font-size: 0.97rem; }
.card ul { margin: 0.6rem 0 0; padding-left: 1.1em; }
.card li { margin-bottom: 0.35rem; }
.card .card-link {
  font-weight: 600; font-size: 0.94rem;
  text-decoration: none; color: var(--accent-deep);
}
.card .card-link:hover { text-decoration: underline; }
.card-icon {
  width: 42px; height: 42px;
  margin-bottom: 1rem;
  color: var(--accent-deep);
}
.card-corner::before {
  /* registration mark */
  content: "";
  position: absolute; top: 12px; right: 12px;
  width: 12px; height: 12px;
  border-top: 1px solid var(--line-light);
  border-right: 1px solid var(--line-light);
}

.card-dark {
  background: var(--navy-700);
  border-color: var(--line-dark);
  color: #fff;
}
.card-dark h3 { color: #fff; }
.card-dark p, .card-dark li { color: var(--mist); }
.card-dark:hover { border-color: var(--accent); box-shadow: 0 14px 34px rgba(0,0,0,0.35); }

/* sector cards */
.sector-card {
  padding: 1.3rem 1.3rem 1.4rem;
  background:
    linear-gradient(180deg, rgba(200,16,46,0.04), transparent 55%),
    var(--paper-raised);
}
.sector-thumb {
  width: 100%;
  height: 156px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  border: 1px solid var(--line-light);
  margin-bottom: 1rem;
  filter: saturate(0.9) contrast(1.03);
  transition: transform 0.25s ease, filter 0.25s ease;
}
.sector-card { overflow: hidden; }
.sector-card:hover .sector-thumb {
  transform: scale(1.025);
  filter: saturate(1.02) contrast(1.04);
}
.sector-card h3 { margin: 0 0 0.3rem; font-size: 1.08rem; }
.sector-card p { margin: 0; font-size: 0.92rem; }
.sector-card .mono-note { display: block; margin-bottom: 0.35rem; }

/* hero skyline art */
.hero-art {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: max(100%, 1400px);
  opacity: 0.5;
  pointer-events: none;
}
.hero .container { z-index: 1; }

/* inner-page intros get a faint skyline for depth */
.page-intro { position: relative; overflow: hidden; }
.page-intro::after {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/illustrations/skyline.svg") bottom center / 1400px auto no-repeat;
  opacity: 0.22;
  pointer-events: none;
}
.page-intro .container { position: relative; z-index: 1; }

/* dark technical figures */
.figure-frame.dark { background: var(--navy-800); border-color: var(--line-dark); }
.figure-frame.dark figcaption { color: var(--mist); }

/* service line icons */
.service-icon {
  width: 40px; height: 40px;
  color: var(--accent-deep);
  margin-bottom: 0.8rem;
}

/* two-column media rows */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.figure-frame {
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 0.6rem;
  background: var(--paper-raised);
}
.figure-frame svg, .figure-frame img { border-radius: 3px; width: 100%; height: auto; }
.figure-frame figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding: 0.55rem 0.3rem 0.1rem;
}

/* checklist */
.checklist { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.checklist li {
  padding-left: 1.7rem; position: relative; margin-bottom: 0.7rem;
  color: var(--ink-soft);
}
.on-dark .checklist li { color: var(--mist); }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border: 1.5px solid var(--accent-deep);
  transform: rotate(45deg);
}
.on-dark .checklist li::before { border-color: var(--accent); }

/* process steps — a true sequence, so numbering is meaningful */
.process { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 0; }
.process li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.4rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-dark);
}
.process li:last-child { border-bottom: 1px solid var(--line-dark); }
.process .step-no {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  padding-top: 0.25rem;
}
.process h3 { font-size: 1.08rem; margin-bottom: 0.3rem; color: #fff; }
.process p { color: var(--mist); margin: 0; font-size: 0.97rem; max-width: 60ch; }
@media (max-width: 600px) { .process li { grid-template-columns: 52px 1fr; gap: 0.9rem; } }

/* location plates */
.locations { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; }
.loc-plate {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--navy-700);
  padding: 1.3rem 1.2rem;
  color: #fff;
}
.loc-plate .mono-note { color: var(--accent); display: block; margin-bottom: 0.6rem; }
.loc-plate h3 { font-size: 1.05rem; margin-bottom: 0.15rem; }
.loc-plate p { color: var(--mist); font-size: 0.88rem; margin: 0; }
.loc-plate.loc-hq { border-color: var(--accent); }
.loc-plate .coords {
  display: block; margin-top: 0.8rem;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--mist);
}

/* CTA band */
.cta-band {
  background:
    radial-gradient(700px 300px at 15% 120%, rgba(200,16,46,0.16), transparent 65%),
    var(--navy-800);
  color: #fff;
  text-align: left;
}
.cta-band .container {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.6rem;
}
.cta-band h2 { margin-bottom: 0.4rem; }
.cta-band p { color: var(--mist); margin: 0; max-width: 52ch; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-900);
  color: var(--mist);
  border-top: 1px solid var(--line-dark);
  padding: 3.6rem 0 2rem;
  font-size: 0.94rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.4rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h3 {
  font-size: 0.8rem; font-family: var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; margin-bottom: 1rem; font-weight: 500;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: var(--mist); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  justify-content: space-between;
  font-size: 0.82rem;
}

/* ---------- Page intro (inner pages) ---------- */
.page-intro {
  background:
    radial-gradient(900px 380px at 90% -20%, rgba(200,16,46,0.12), transparent 60%),
    var(--navy-900);
  color: #fff;
  padding: clamp(3.4rem, 7vw, 5.5rem) 0;
  border-bottom: 1px solid var(--line-dark);
}
.page-intro h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); max-width: 22ch; margin-bottom: 0.8rem; }
.page-intro .lede { color: var(--mist); max-width: 64ch; font-size: 1.08rem; margin: 0; }
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 1.6rem; color: var(--mist);
}
.breadcrumb a { color: var(--mist); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-current] { color: var(--accent); }

/* ---------- Service detail blocks ---------- */
.service-block {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  padding: 2.6rem 0;
  border-top: 1px solid var(--line-light);
}
.service-block:last-of-type { border-bottom: 1px solid var(--line-light); }
.service-block h3 { font-size: 1.35rem; }
.service-block .mono-note { display: block; margin-top: 0.4rem; }
@media (max-width: 780px) { .service-block { grid-template-columns: 1fr; gap: 0.8rem; } }

/* ---------- Forms ---------- */
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 0.92rem; }
.form-field .req { color: var(--amber-deep); }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 3px solid rgba(200,16,46,0.35);
  outline-offset: 0;
  border-color: var(--accent-deep);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-error { color: #b3261e; font-size: 0.85rem; display: none; }
.form-field.invalid .form-error { display: block; }
.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea { border-color: #b3261e; }
.form-status { margin-top: 1rem; font-weight: 600; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Reveal animation ---------- */
/* .reveal animates only when JS is running (html.js set inline in <head>);
   without JS all content stays fully visible */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* utility */
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }

/* ---------- Print ---------- */
@media print {
  /* everything on white, ink-friendly */
  body, .section-dark, .section-panel, .cta-band, .hero, .page-intro,
  .cap-strip, .card-dark, .loc-plate, .site-footer, .site-header {
    background: #fff !important;
    color: #14202c !important;
  }
  .hero h1, .hero .lede, .page-intro h1, .page-intro .lede,
  .process h3, .process p, .on-dark .section-intro, .on-dark .checklist li,
  .cap-item, .loc-plate h3, .loc-plate p, .loc-plate .coords,
  .card-dark h3, .card-dark p, .cta-band p, .site-footer, .site-footer a,
  .lifecycle-track li, .lifecycle-label, .brand-name, .brand-name small {
    color: #14202c !important;
  }
  /* content must be visible even if never scrolled into view */
  .reveal { opacity: 1 !important; transform: none !important; }
  /* drop screen-only chrome */
  .nav-toggle, .main-nav, .hero-art, .hero::before, .page-intro::after,
  .skip-link, .hero-ctas, .btn { display: none !important; }
  .site-header { position: static; border-bottom: 1px solid #ccc; }
  .card, .loc-plate, .figure-frame { border: 1px solid #bbb; box-shadow: none; break-inside: avoid; }
  .service-block, .process li { break-inside: avoid; }
  a { text-decoration: none; }
  /* show where footer links point on paper */
  .footer-bottom a[href]::after { content: ""; }
}

/* ---------- Hero background video (activates when a media file exists) ---------- */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.hero-video.ready { opacity: 0.28; }
.hero .hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,21,25,0.55), rgba(19,21,25,0.85));
  pointer-events: none;
  display: none;
}
.hero.has-video .hero-scrim { display: block; }

/* ---------- Recruitment banner ---------- */
.hire-band {
  background: var(--navy-800);
  border-bottom: 1px solid var(--line-dark);
  color: #fff;
}
.hire-band .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  padding-top: 1.05rem; padding-bottom: 1.05rem;
}
.hire-band .mono-note {
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0.18rem 0.55rem;
  letter-spacing: 0.12em;
}
.hire-band p { margin: 0; font-weight: 500; }
.hire-band .btn { margin-left: auto; padding: 0.55rem 1.15rem; font-size: 0.93rem; }
@media (max-width: 700px) { .hire-band .btn { margin-left: 0; } }

/* ---------- Client wall ---------- */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.client-plate {
  background: var(--paper-raised);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  min-height: 96px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 1.1rem 1rem;
  text-align: center;
  transition: border-color 0.18s ease;
}
.client-plate:hover { border-color: var(--accent-deep); }
.client-plate img {
  max-height: 52px; width: auto; max-width: 86%;
  object-fit: contain;
  filter: grayscale(1) contrast(0.9);
  opacity: 0.85;
  transition: filter 0.18s ease, opacity 0.18s ease;
}
.client-plate:hover img { filter: none; opacity: 1; }
.client-plate .client-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ---------- Job openings ---------- */
.job-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: center;
  background: var(--paper-raised);
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
}
.job-card h3 { margin: 0.35rem 0 0.4rem; font-size: 1.25rem; }
.job-card p { margin: 0; color: var(--ink-soft); }
@media (max-width: 640px) { .job-card { grid-template-columns: 1fr; } }

/* ---------- Real-photo hero fallback ---------- */
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.30;
  filter: saturate(0.72) contrast(1.08);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(19,21,25,0.94) 0%, rgba(19,21,25,0.76) 52%, rgba(19,21,25,0.38) 100%);
  pointer-events: none;
}
.hero.has-video .hero-photo { opacity: 0; }
.hero .hero-art { opacity: 0.10; }
.hero .container { z-index: 3; }
.hero-video, .hero-scrim { z-index: 1; }
.hero::after { z-index: 2; }

/* ============================================================
   Light-theme component overrides (warm stone + EPS red).
   Colour tokens all live in the single :root block at the top.
   ============================================================ */

/* Keep the official horizontal logo at its natural ratio (~2.9:1). */
.brand-mark {
  width: auto;
  height: 38px;
  max-width: 112px;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}

/* Header: light, clean and compatible with the red/charcoal logo. */
.site-header {
  background: rgba(247, 246, 244, 0.94);
  border-bottom-color: var(--line-dark);
}
.brand { color: var(--ink); }
.brand-name small { color: var(--ink-soft); }
.main-nav a { color: #36393d; }
.main-nav a:hover { color: var(--accent-deep); }
.main-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.nav-toggle { color: var(--ink); border-color: var(--line-dark); }
@media (max-width: 900px) {
  .main-nav { background: var(--paper-raised); border-bottom-color: var(--line-dark); }
  .main-nav a { border-bottom-color: var(--line-dark); }
}

/* Lighter alternating surfaces. */
.section-dark,
.section-panel,
.cap-strip,
.hire-band,
.cta-band,
.page-intro,
.site-footer {
  color: var(--ink);
}
.section-dark { background: var(--navy-900); }
.section-panel { background: var(--navy-800); }
.cap-strip { background: var(--navy-800); border-color: var(--line-dark); }
.hire-band { background: var(--navy-900); border-color: var(--line-dark); }
.cta-band {
  background:
    radial-gradient(700px 300px at 15% 120%, rgba(200,16,46,0.10), transparent 65%),
    var(--navy-800);
}
.page-intro {
  background:
    radial-gradient(900px 380px at 90% -20%, rgba(200,16,46,0.10), transparent 60%),
    var(--navy-900);
  border-bottom-color: var(--line-dark);
}
.site-footer { background: #cbc5bf; border-top-color: var(--line-dark); }

.on-dark .eyebrow { color: var(--accent-deep); }
.on-dark .mono-note,
.on-dark .section-intro,
.on-dark .checklist li { color: var(--ink-soft); }
.on-dark .checklist li::before { border-color: var(--accent-deep); }

.cap-item { color: var(--ink); border-color: var(--line-dark); }
.cap-item .mono-note { color: var(--accent-deep); }
@media (max-width: 700px) { .cap-item { border-color: var(--line-dark); } }

.hire-band .mono-note { color: var(--accent-deep); border-color: var(--accent-deep); }
.hire-band p { color: var(--ink); }

/* Hero keeps the industrial photograph, but uses a light stone wash instead of black. */
.hero {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(200,16,46,0.10), transparent 60%),
    var(--navy-800);
  color: var(--ink);
}
.hero-photo {
  opacity: 0.55;
  filter: saturate(0.86) contrast(1.02) brightness(1.03);
}
/* Overlay is near-opaque across the text column, then clears to reveal the
   photograph on the right. Keeps hero body copy above the 4.5:1 WCAG AA
   threshold at every viewport width. */
.hero::after {
  background: linear-gradient(90deg,
    rgba(243,241,238,0.97) 0%,
    rgba(243,241,238,0.95) 42%,
    rgba(238,235,231,0.80) 60%,
    rgba(228,223,218,0.30) 100%);
}
@media (max-width: 900px) {
  /* No room for a clear column on narrow screens — wash the whole frame. */
  .hero::after {
    background: linear-gradient(180deg,
      rgba(243,241,238,0.96) 0%,
      rgba(243,241,238,0.93) 70%,
      rgba(238,235,231,0.90) 100%);
  }
  .hero-photo { opacity: 0.45; }
}
.hero .lede { color: #3a4048; }
.lifecycle-label,
.lifecycle-track li { color: #3f454d; }
.hero::before { opacity: 0.18; }
.btn-ghost { border-color: rgba(37,39,43,0.28); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.hero .hero-scrim {
  background: linear-gradient(90deg, rgba(241,238,234,0.78), rgba(225,220,215,0.44));
}
.hero-video.ready { opacity: 0.30; }

/* Light-theme typography for formerly dark blocks. */
.process h3 { color: var(--ink); }
.process p { color: var(--ink-soft); }
.process .step-no { color: var(--accent-deep); }
.loc-plate {
  background: rgba(255,255,255,0.58);
  border-color: var(--line-dark);
  color: var(--ink);
}
.loc-plate .mono-note { color: var(--accent-deep); }
.loc-plate p,
.loc-plate .coords { color: var(--ink-soft); }
.loc-plate.loc-hq { border-color: var(--accent-deep); }
.cta-band p { color: var(--ink-soft); }

.card-dark {
  background: rgba(255,255,255,0.50);
  border-color: var(--line-dark);
  color: var(--ink);
}
.card-dark h3 { color: var(--ink); }
.card-dark p,
.card-dark li { color: var(--ink-soft); }
.card-dark:hover { border-color: var(--accent-deep); box-shadow: 0 14px 34px rgba(37,39,43,0.10); }

.page-intro .lede,
.breadcrumb,
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb span[aria-current] { color: var(--accent-deep); }

.site-footer,
.site-footer a { color: #4f5358; }
.site-footer h3 { color: var(--ink); }
.site-footer a:hover { color: var(--accent-deep); }
.footer-bottom { border-top-color: var(--line-dark); }

/* Keep contained technical drawings deliberately deeper for contrast,
   while the surrounding sections remain light. */
.figure-frame.dark {
  background: #3f4145;
  border-color: rgba(255,255,255,0.14);
}
.figure-frame.dark figcaption { color: #d2d5d8; }

/* Ensure section imagery remains crisp against the softer palette. */
.sector-thumb { filter: saturate(0.94) contrast(1.03); }
.sector-card:hover .sector-thumb { filter: saturate(1.04) contrast(1.04); }

/* ---------- Language switcher ---------- */
.site-header .container { max-width: 1340px; }
.main-nav { margin-left: auto; }
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.25rem;
  border: 1px solid rgba(37,39,43,0.16);
  background: rgba(255,255,255,0.55);
  border-radius: 999px;
  flex: 0 0 auto;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font: 600 0.72rem/1 var(--font-body);
}
.lang-btn .flag { font-size: 1.05rem; line-height: 1; }
.lang-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(28,31,36,0.10); }
.lang-btn:hover { color: var(--accent-deep); }

/* Direct consultation details */
.consult-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin-top: -1.7rem;
  margin-bottom: 2.4rem;
  font-size: 0.93rem;
  font-weight: 600;
  position: relative;
  z-index: 4;
}
.consult-contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(37,39,43,.28); }
.consult-contact a:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.consult-contact-light { margin: 0 0 1.6rem; padding: 0.8rem 1rem; background: rgba(200,16,46,.055); border-left: 3px solid var(--accent-deep); font-weight: 500; }
.consult-contact-light span:first-child { color: var(--ink-soft); }
.resource-secondary { margin: .7rem 0 0; font-size: .86rem; }
.resource-secondary a { color: var(--ink-soft); }
.brochure-card { border-top: 3px solid var(--accent-deep); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-block; margin-left: auto; }
  .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-900);
    border-bottom: 1px solid var(--line-dark);
    padding: 0.5rem 1.2rem 1.2rem;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--line-dark); }
  .main-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
  .nav-cta { margin-top: 0.9rem; text-align: center; }
  .lang-switcher { margin-left: 0.15rem; }
}
@media (max-width: 560px) {
  .brand-name { font-size: .88rem; }
  .brand-name small { display: none; }
  .lang-code { display: none; }
  .lang-btn { padding: .3rem .4rem; }
  .consult-contact { margin-top: -1.6rem; }
}

/* ---------- Header fit: intermediate widths ----------
   Between roughly 1080px and 1320px the brand block, seven nav items, the
   CTA and the language switcher no longer fit on one row. Tighten the
   brand block and CTA there rather than letting items wrap. */
@media (max-width: 1320px) {
  .brand-name { font-size: 0.92rem; }
  .brand-name small { display: none; }
  .main-nav { gap: 0.7rem; }
  .main-nav a { font-size: 0.9rem; white-space: nowrap; }
  .nav-cta { padding: 0.5rem 0.8rem !important; }
}
@media (max-width: 1180px) {
  /* Drop to the mobile menu before anything can wrap. */
  .nav-toggle { display: inline-block; margin-left: auto; }
  .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--line-dark);
    padding: 0.5rem 1.2rem 1.2rem;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--line-dark); font-size: 0.98rem; }
  .nav-cta { margin-top: 0.9rem; text-align: center; }
  .brand-name { font-size: 1rem; }
  .brand-name small { display: block; }
}

/* Language switcher: text-only EN | RO. Regional-indicator flag emoji do not
   render on Windows, and a national flag is a poor proxy for a language. */
.lang-btn .lang-code { letter-spacing: 0.06em; }
.lang-btn { min-width: 34px; justify-content: center; }

/* The lifecycle strip spans wider than the text column, so it can reach the
   cleared part of the hero photograph. Give it its own backing plate so its
   small type keeps a consistent, AA-compliant background at any width. */
.hero .lifecycle {
  position: relative;
  background: linear-gradient(90deg, rgba(243,241,238,0.94), rgba(243,241,238,0.86));
  border-top: 1px solid rgba(37,39,43,0.16);
  border-radius: 0 0 4px 4px;
  padding: 1.4rem 1.1rem 1.1rem;
  margin-left: -1.1rem;
  margin-right: -1.1rem;
  display: inline-block;
  max-width: calc(100% + 2.2rem);
}
.hero .lifecycle-label { color: #3f454d; }
.hero .lifecycle-track li { color: #33383f; }

/* Direct-contact line: guarantee spacing around the separator even where
   flex `gap` is unsupported. */
.consult-contact span[aria-hidden="true"] { margin: 0 0.15rem; }
.consult-contact a { padding: 0 0.1rem; }

/* Language switcher links (static /ro/ pages, no JS) */
.lang-switcher a.lang-btn { text-decoration: none; }
.lang-btn[aria-current="true"],
.lang-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(28,31,36,0.10); }
.lang-btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }


/* Flag icons in the language switcher — local SVGs, so they render on every
   platform (Windows does not draw regional-indicator flag emoji at all). */
.lang-btn .flag {
  width: 20px; height: 14px;
  display: block;
  border-radius: 2px;
  flex: 0 0 auto;
}
.lang-btn { gap: 0.35rem; min-width: 0; padding: 0.28rem 0.55rem; }
@media (max-width: 560px) {
  .lang-code { display: none; }
  .lang-btn { padding: 0.3rem 0.4rem; }
}