/* ==========================================================================
   Marea AI — Design system (v3, business style)
   Navy + steel greys, one muted teal accent. Real photos + engineering line art.
   Plus Jakarta Sans (headings) + Inter (body). No glows, no gradient text,
   no decorative animation.
   ========================================================================== */

:root {
  /* Color — navy / steel / one accent */
  --navy-950: #081428;   /* footer, menu */
  --navy-900: #0B1B33;   /* dark sections, heroes */
  --navy-800: #13294A;
  --navy-700: #1D3A63;
  --ink: #1B2635;
  --ink-2: #33475F;      /* steel 700 */
  --muted: #4A5A6E;      /* steel 600 — 7:1 on white, 6.5:1 on --bg-soft */
  --steel-400: #8A9AAE;  /* decorative lines only (not text on white) */
  --line: #DCE3EC;
  --line-2: #C3CDD9;
  --bg: #FFFFFF;
  --bg-soft: #F4F6F9;
  --bg-tint: #EEF4F4;
  --accent: #1F9D8F;     /* decorative accent (bars, borders) */
  --accent-btn: #148277; /* button fill: white text 4.68:1 */
  --teal-700: #0F766E;   /* links, eyebrows, icons on light: 5.5:1 on white */
  --teal-tint: #EAF4F2;
  --on-dark: #E6ECF4;
  --on-dark-muted: #B7C4D4;
  --accent-on-dark: #7FD3C8; /* text accent on navy: 9.9:1 */
  --overlay: 8, 20, 40;      /* rgb of photo overlays */

  /* Type */
  --font-head: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shape & depth */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --shadow-sm: 0 1px 2px rgba(11, 27, 51, .06), 0 2px 6px rgba(11, 27, 51, .05);
  --shadow: 0 2px 4px rgba(11, 27, 51, .05), 0 8px 20px -6px rgba(11, 27, 51, .12);
  --shadow-lg: 0 18px 40px -18px rgba(8, 20, 40, .45);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;
  --section-y: clamp(64px, 9vw, 112px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 80px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.nav-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
/* Orphan control on wide screens only: on phones WebKit's pretty wrapping shortens every line of a paragraph */
@media (min-width: 641px) { p { text-wrap: pretty; } }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  color: inherit;
  text-wrap: balance;
}
h3, h4 { font-weight: 700; letter-spacing: -.01em; }
ul, ol { margin: 0; }
strong { font-weight: 600; }
::selection { background: #CDE9E5; color: var(--navy-900); }

:focus-visible {
  outline: 3px solid var(--teal-700);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--navy-900);
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Chinese (Simplified) ----------
   Latin web fonts first (for Latin words/numbers), then system CJK fonts.
   CJK text needs no negative tracking and a little more leading. */
html:lang(zh) {
  --font-head: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-body: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
}
html:lang(zh) body { line-height: 1.8; }
html:lang(zh) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3) { letter-spacing: 0; }
html:lang(zh) :is(h1, h2, h3, h4, .h1, .h2, .h3) { line-height: 1.3; }
html:lang(zh) .display { font-size: clamp(2.2rem, 1.35rem + 2.6vw, 3.3rem); line-height: 1.22; }
html:lang(zh) .lead { line-height: 1.85; }
html:lang(zh) :is(.eyebrow, .footer-col h2, .meta-box h3, .fc-label) { letter-spacing: .06em; }
/* Chinese has no letter case: uppercase would only distort Latin brand names (MLOps → MLOPS) */
html:lang(zh) :is(.eyebrow, .contact-list .label, .fc-label, .meta-box h3, .footer-col h2) { text-transform: none; }

/* Focus ring on dark surfaces */
:is(.site-header, .hero, .page-hero, .section--dark, .offer--highlight, .cta-band, .contact-card, .site-footer, .lang-toast) :focus-visible { outline-color: var(--accent-on-dark); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(860px + var(--gutter) * 2); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 88px); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--bg-tint); }
.section--dark {
  background: var(--navy-900);
  color: var(--on-dark);
  isolation: isolate;
  overflow: hidden;
}
.section--dark .lead,
.section--dark .muted { color: var(--on-dark-muted); }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.section-head--split > div { max-width: 720px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.split--reverse .split-media { order: -1; }
.split--top { align-items: start; } /* columns of very different height: align their tops */
.split-media img { width: 100%; }

/* ---------- Typography helpers ---------- */
.display {
  font-size: clamp(2.3rem, 1.4rem + 2.9vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 800;
}
.h1 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem); letter-spacing: -.028em; line-height: 1.1; }
.h2, .section-head h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -.024em; }
.h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); }
.lead {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--muted);
}
.muted { color: var(--muted); }
/* Former gradient text: now a solid accent colour */
.text-gradient { color: var(--teal-700); }
:is(.hero, .page-hero, .section--dark, .offer--highlight, .cta-band, .contact-card) .text-gradient { color: var(--accent-on-dark); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.section--dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.offer--highlight .eyebrow,
.cta-band .eyebrow { color: var(--accent-on-dark); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: .875rem;
  color: #D5DEEA;
  margin-bottom: 24px;
}
.pill b {
  flex: none;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  background: var(--accent-btn);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.3;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.tag--dark,
.section--dark .tag {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2);
  color: #D5DEEA;
}

/* ---------- Buttons & links ---------- */
.btn {
  --btn-h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--accent-btn); color: #fff; }
.btn-primary:hover { background: var(--teal-700); }
.btn-dark { background: var(--navy-900); color: #fff; }
.btn-dark:hover { background: var(--navy-700); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink-2); background: var(--bg-soft); }
.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-lg { --btn-h: 54px; padding: 0 26px; font-size: 1.0625rem; }
.btn-sm { --btn-h: 40px; padding: 0 16px; font-size: .9375rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--teal-700);
}
.link-arrow svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow:hover svg { transform: translateX(3px); }
.section--dark .link-arrow { color: var(--accent-on-dark); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
}
.site-header.is-scrolled {
  background: rgba(11, 27, 51, .95);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(255, 255, 255, .08);
}
/* No backdrop-filter while the menu is open: it would make the header the containing block
   of the position:fixed menu and clip it to the header's height. */
.site-header.nav-open {
  background: var(--navy-950);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, .08);
}
html:not(.js) .site-header { background: var(--navy-900); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  /* Latin-only wordmark: same font stack and line height in every language (the Chinese pages
     redefine --font-head and the body line height, which would change it while fonts load) */
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.03em;
  color: #fff;
}
.brand img { width: 34px; height: 34px; }
.brand-name span { margin-left: 3px; color: var(--accent-on-dark); }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.main-nav a:not(.btn) {
  display: block;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: .9625rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  transition: color .2s, background-color .2s;
}
.main-nav a:not(.btn):hover { color: #fff; background: rgba(255, 255, 255, .08); }
.main-nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .12); }
.main-nav .mobile-only { display: none; }

/* "Solutions" dropdown: a button + a list of links (.nav-sub). Desktop: panel under the button,
   shown while the button is aria-expanded (main.js). Below 1180px: a group heading inside the menu. */
.has-sub { position: relative; }
.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: .9625rem;
  font-weight: 500;
  line-height: 24px;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.nav-sub-toggle::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease), margin .2s var(--ease);
}
.nav-sub-toggle:hover,
.nav-sub-toggle[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-sub-toggle.is-current { color: #fff; background: rgba(255, 255, 255, .12); }
.nav-sub-toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.main-nav .nav-sub { display: block; list-style: none; padding: 0; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.lang-switch a,
.lang-switch span { width: 40px; padding: 6px 0; border-radius: var(--radius-xs); line-height: 1; text-align: center; white-space: nowrap; }
/* Fixed widths (third item: 中文) so the switch is the same size on every language version */
.lang-switch > :nth-child(3) { width: 50px; }
.lang-switch a { color: rgba(255, 255, 255, .75); transition: color .2s; }
.lang-switch a:hover { color: #fff; }
.lang-switch [aria-current] { background: #fff; color: var(--navy-900); }

.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
.nav-open .nav-toggle span:first-child { top: 21px; transform: rotate(45deg); }
.nav-open .nav-toggle span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- Heroes: flat navy, or photo + navy overlay ---------- */
.hero,
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
  color: #fff;
}
.hero { padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(64px, 8vw, 112px); }

/* Retired decoration: glows, grid backgrounds, waves, floating cards, hero line art */
.hero-bg,
.glow,
.hero-wave,
.hero-visual,
.page-hero-art { display: none; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.hero-copy { max-width: 680px; }
.hero .lead { color: #C9D4E3; max-width: 600px; margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  color: var(--on-dark-muted);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 18px; height: 18px; color: var(--accent-on-dark); flex: none; }

/* Photo backgrounds (decorative <img> as first child) */
.hero-photo,
.page-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.hero--photo::before,
.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--overlay), .72) 0, rgba(var(--overlay), 0) 200px),
    linear-gradient(90deg, rgba(var(--overlay), .94) 0%, rgba(var(--overlay), .84) 45%, rgba(var(--overlay), .32) 100%);
}

/* Home hero with photo: copy block, then a facts bar pinned to the bottom */
.hero--photo {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
/* Copy column stays left-aligned with the facts bar; the free height centres it above the bar */
.hero--photo > .container { margin-block: auto; padding-bottom: clamp(56px, 7vw, 96px); }
.hero--photo .hero-copy,
.hero--photo > .container:not(.hero-grid) > * { max-width: 680px; }

.facts-bar {
  position: relative;
  background: rgba(var(--overlay), .82);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact {
  padding: 22px 24px 24px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.fact:first-child { border-left: 0; padding-left: 0; }
.fact strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1rem + .55vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: #fff;
}
.fact span { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.45; color: var(--on-dark-muted); }

/* Home hero on desktop: same height, photo framing, copy start and facts bar in EN, ES and 中文,
   so switching language doesn't move them. Title, lead and buttons flow naturally below the fixed
   start (their length differs by language). min-height so enlarged text can still grow the hero. */
@media (min-width: 961px) {
  .hero--photo {
    min-height: 800px;
    padding-top: calc(var(--header-h) + 80px);
  }
  .hero--photo > .container { margin-block: 0; padding-bottom: 48px; }
  .hero--photo > .container > .hero-copy { max-width: 760px; }
  .hero--photo .pill { height: 36px; line-height: 20px; margin-bottom: 24px; white-space: nowrap; }
  .hero--photo .display {
    margin: 0;
    font-size: 3.25rem;
    line-height: 1.08;
  }
  html:lang(zh) .hero--photo .display { font-size: 3.5rem; line-height: 1.3; } /* Chinese titles are short (2 lines): a little larger */
  .hero--photo .lead {
    margin-top: 24px;
    font-size: 1.1875rem;
    line-height: 1.6;
  }
  html:lang(zh) .hero--photo .lead { line-height: 1.85; }
  .hero--photo .hero-actions { height: 54px; margin-top: 32px; flex-wrap: nowrap; }
  .hero--photo .facts-bar { margin-top: auto; }
}
/* Facts bar: the Spanish captions need two lines below the full container width; reserve them in every language */
@media (min-width: 961px) and (max-width: 1263px) {
  .hero--photo .fact span { min-height: 2.9em; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(56px, 7vw, 96px); }
.page-hero h1 { max-width: 880px; }
.page-hero .lead { color: #C9D4E3; max-width: 680px; margin-top: 18px; }
.page-hero .hero-actions { margin-top: 30px; }
.page-hero--photo { padding-bottom: clamp(64px, 8vw, 112px); }
.page-hero--photo h1 { max-width: 760px; }
.page-hero--photo .lead { max-width: 640px; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  font-size: .875rem;
  color: #C9D4E3;
}
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb [aria-current] { color: #fff; }

/* Sticky in-page navigation (equipment) */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.subnav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: block;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background-color .2s, color .2s;
}
.subnav a:hover { background: var(--bg-soft); color: var(--ink); }
.subnav a.is-active { background: var(--navy-900); color: #fff; }

/* ---------- Capability list (former marquee): static, wrapped, centred ---------- */
.marquee {
  position: relative;
  padding: 22px 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.marquee-toggle,
.marquee-group[aria-hidden] { display: none; }
.marquee-track { display: block; width: auto; animation: none; }
.marquee-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
}
.marquee-group li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink-2);
}
.marquee-group li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--accent);
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  transition: box-shadow .25s, border-color .25s;
}
.card:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.card--static:hover { box-shadow: none; border-color: var(--line); }
.card h3 { font-size: 1.2rem; margin-bottom: .55em; }
.card p { color: var(--muted); }
.card .tag-list { margin-top: 20px; }
.card .link-arrow { margin-top: auto; padding-top: 20px; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.card--soft { background: var(--bg-soft); }
/* Feature card: light, with a teal top rule (may hold line art) */
.card--feature { border-top: 3px solid var(--accent); }
.card--feature h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); }
.card--cta { background: var(--bg-soft); border-color: var(--line); }
.grid > .card--wide { grid-column: span 2; } /* e.g. the closing CTA card in a 3-column grid of five */

.icon-tile {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 8px;
  background: var(--teal-tint);
  color: var(--teal-700);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .16);
}
.icon-tile svg { width: 24px; height: 24px; }
.icon-tile--dark,
.section--dark .icon-tile,
.offer--highlight .icon-tile,
.contact-card .icon-tile {
  background: rgba(127, 211, 200, .1);
  color: var(--accent-on-dark);
  box-shadow: inset 0 0 0 1px rgba(127, 211, 200, .26);
}
.icon-tile--sm { width: 40px; height: 40px; border-radius: 7px; margin-bottom: 0; }
.icon-tile--sm svg { width: 20px; height: 20px; }

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.bento > * { grid-column: span 2; }
.bento > .span-3 { grid-column: span 3; }
.bento > .span-4 { grid-column: span 4; }
.bento > .span-6 { grid-column: span 6; }

.feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  height: 100%;
}

/* ---------- Pillars / value ---------- */
.pillar { padding-top: 24px; border-top: 1px solid var(--line); position: relative; }
.pillar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--accent);
}
.pillar h3 { font-size: 1.15rem; }
.pillar p { color: var(--muted); }

/* ---------- Process steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: var(--line-2);
}
.section--dark .steps::before { background: rgba(255, 255, 255, .18); }
.step { position: relative; }
.step-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  background: var(--navy-900);
  box-shadow: 0 0 0 8px var(--bg);
}
.section--soft .step-num { box-shadow: 0 0 0 8px var(--bg-soft); }
.section--dark .step-num { background: var(--accent-btn); box-shadow: 0 0 0 8px var(--navy-900); }
.step h3 { font-size: 1.2rem; }
.step p { color: var(--muted); font-size: 1rem; }
.section--dark .step p { color: var(--on-dark-muted); }
.step-meta {
  display: inline-flex;
  margin-top: 14px;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  font-size: .8125rem;
  font-weight: 600;
  background: var(--teal-tint);
  color: var(--teal-700);
}
.section--dark .step-meta { background: rgba(127, 211, 200, .12); color: var(--accent-on-dark); }

/* Five-step variant (equipment page) */
@media (min-width: 961px) { .steps.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; } }

/* ---------- Tiles ---------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  transition: background-color .25s, box-shadow .25s, border-color .25s;
}
.tile:hover { background: #fff; box-shadow: var(--shadow); border-color: var(--line-2); }
.tile-head { display: flex; align-items: center; gap: 14px; }
.tile h3 { font-size: 1.1rem; margin: 0; }
.tile p { color: var(--muted); font-size: .975rem; margin: 0; }

/* Industry detail cards */
.industry {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid var(--line);
}
.industry + .industry { margin-top: 24px; }
.industry h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.industry .lead { font-size: 1.0625rem; }
.usecases { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.usecase {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.usecase h3 { font-size: 1.05rem; margin-bottom: .3em; }
.usecase p { color: var(--muted); font-size: .9625rem; margin: 0; }

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 16px; list-style: none; padding: 0; margin: 28px 0 0; }
.checklist li { position: relative; padding-left: 38px; color: var(--muted); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat, var(--teal-tint);
}
.checklist strong { display: block; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; margin-bottom: 2px; }
.checklist--compact { gap: 10px; margin-top: 18px; }
.checklist--compact li { padding-left: 32px; font-size: .975rem; }
.checklist--compact li::before { width: 22px; height: 22px; background-size: 12px, auto; top: 2px; }
.section--dark .checklist li,
.offer--highlight .checklist li { color: var(--on-dark-muted); }
.section--dark .checklist strong,
.offer--highlight .checklist strong { color: #fff; }
.section--dark .checklist li::before,
.offer--highlight .checklist li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FD3C8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat, rgba(127, 211, 200, .12);
}
.section--dark .checklist--compact li::before,
.offer--highlight .checklist--compact li::before { background-size: 12px, auto; }

/* ---------- Media frames ---------- */
.media-frame {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.media-frame img { width: 100%; height: auto; }
.media-frame--dark { background: var(--navy-900); border-color: rgba(255, 255, 255, .08); }
/* Photograph: cropped to 3:2 */
.media-frame--photo {
  aspect-ratio: 3 / 2;
  background: var(--line);
  border: 0;
}
.media-frame--photo img { width: 100%; height: 100%; object-fit: cover; }
/* Engineering line art with a numbered legend */
.media-frame--diagram {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
}
.media-frame--diagram figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Service rows (equipment page) ---------- */
.service-row { padding-block: clamp(52px, 7vw, 96px); border-top: 1px solid var(--line); }
.service-row:first-of-type { border-top: 0; }
.service-row .h2 { margin-bottom: .4em; }
.service-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.meta-box { padding: 20px; border-radius: 8px; background: var(--bg-soft); border: 1px solid var(--line); }
.meta-box h3 {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 10px;
}
@media (min-width: 641px) { .meta-box li { text-wrap: pretty; } }
.meta-box ul { padding-left: 1.1em; color: var(--ink-2); font-size: .95rem; display: grid; gap: 4px; }

/* ---------- KPI / stat row ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.kpi { padding: 22px 0; border-top: 1px solid var(--line); position: relative; }
.kpi::before { content: ""; position: absolute; top: -1px; left: 0; width: 32px; height: 3px; background: var(--accent); }
.section--dark .kpi { border-top-color: rgba(255, 255, 255, .14); }
.kpi-value {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1rem + 1.3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--navy-900);
}
.section--dark .kpi-value { color: #fff; }
.kpi-label { margin-top: 6px; color: var(--muted); font-size: .95rem; }
.section--dark .kpi-label { color: var(--on-dark-muted); }

/* ---------- Offers / engagement models ---------- */
.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 34px);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
}
.offer h3 { font-size: 1.3rem; margin-bottom: .35em; }
.offer > p { color: var(--muted); }
.offer-duration {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-size: .8125rem;
  font-weight: 600;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.offer-duration svg { width: 15px; height: 15px; }
.offer .checklist { margin-bottom: 32px; }
.offer .btn { margin-top: auto; }
.offer--highlight {
  background: var(--navy-900);
  color: var(--on-dark);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.offer--highlight h3 { color: #fff; }
.offer--highlight > p { color: var(--on-dark-muted); }
.offer--highlight .offer-duration { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #D5DEEA; }
.offer-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  font-size: .75rem;
  font-weight: 700;
  background: var(--accent-btn);
  color: #fff;
}

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin-inline: auto; display: grid; gap: 10px; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 22px;
  transition: box-shadow .25s, border-color .25s;
}
.faq details[open] { box-shadow: var(--shadow-sm); border-color: var(--line-2); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .25s var(--ease), background-color .25s;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--teal-tint); }
.faq-body { padding: 0 0 22px; color: var(--muted); max-width: 760px; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 28px 48px;
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  border-left: 4px solid var(--accent);
  color: #fff;
}
.cta-band h2 { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem); margin-bottom: .35em; }
.cta-band p { color: var(--on-dark-muted); max-width: 620px; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

/* ---------- Forms ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.form-card {
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field label,
.field legend {
  display: block;
  margin-bottom: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: var(--teal-700); margin-left: 2px; }
.field .optional { color: var(--muted); font-weight: 400; }
.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #7C8BA1;
  border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.input::placeholder, .textarea::placeholder { color: #64748B; opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--teal-700);
  box-shadow: 0 0 0 1px var(--teal-700), 0 0 0 4px rgba(15, 118, 110, .18);
}
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: #DC2626; }
.field-error { display: none; margin-top: 6px; font-size: .85rem; color: #B91C1C; }
.field.has-error .field-error { display: block; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: .925rem; color: var(--ink-2); }
.field .check { display: flex; margin-bottom: 0; font-size: .925rem; font-weight: 400; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--teal-700); }
.check a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--muted); }
.form-status { display: none; padding: 14px 18px; border-radius: 8px; font-size: .95rem; }
.form-status.is-visible { display: block; }
.form-status[data-state="success"] { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.form-status[data-state="error"] { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.form-status[data-state="info"] { background: var(--teal-tint); color: var(--teal-700); border: 1px solid rgba(15, 118, 110, .25); }

.contact-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(26px, 4vw, 38px);
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  border-top: 3px solid var(--accent);
  color: var(--on-dark);
}
.contact-card h2, .contact-card h3 { color: #fff; }
.contact-list { display: grid; gap: 20px; list-style: none; padding: 0; margin: 24px 0 0; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-muted); font-weight: 600; }
.contact-list a, .contact-list .value { color: #fff; font-weight: 600; word-break: break-word; }
.contact-list a:hover { color: var(--accent-on-dark); }
.contact-list .office-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 14px 0 0; font-size: .925rem; }
.contact-list .office-list li { display: block; }
.contact-list .office-list strong { display: block; color: #fff; font-weight: 600; }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); margin: 2.2em 0 .6em; letter-spacing: -.015em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; display: grid; gap: 6px; }
.prose ol { padding-left: 1.75em; }
.prose a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.prose .callout {
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
  font-size: .95rem;
  margin-bottom: 2em;
}
.prose .updated { color: var(--muted); font-size: .9rem; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding: clamp(56px, 7vw, 88px) 0 32px;
  background: var(--navy-950);
  color: #A9B8CB;
  font-size: .95rem;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 40px; }
.footer-brand p { max-width: 340px; margin-top: 18px; }
.footer-col h2 {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.footer-col ul { display: grid; gap: 11px; list-style: none; padding: 0; }
.footer-col a { transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .875rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Floating WhatsApp & language toast ---------- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(8, 20, 40, .45);
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float[hidden] { display: none; }

.lang-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 18px;
  border-radius: var(--radius);
  background: var(--navy-900);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow-lg);
  font-size: .925rem;
  transform: translate(-50%, 0);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lang-toast.is-visible { opacity: 1; }
.lang-toast .btn { --btn-h: 38px; padding: 0 14px; font-size: .875rem; }
.lang-toast button.close {
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--on-dark-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.lang-toast button.close:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------- 404 ---------- */
.error-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 48px) var(--gutter) 64px;
}
.error-page img { width: min(420px, 80vw); margin: 0 auto 32px; }
.error-page .hero-actions { justify-content: center; }
.error-page .lang-block + .lang-block { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .12); }

/* ---------- Reveal on scroll (fade only) ---------- */
.js .reveal {
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.js .reveal.is-visible { opacity: 1; }
.js .reveal[data-delay="1"] { transition-delay: .06s; }
.js .reveal[data-delay="2"] { transition-delay: .12s; }
.js .reveal[data-delay="3"] { transition-delay: .18s; }
.js .reveal[data-delay="4"] { transition-delay: .24s; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0 !important; }
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 32px; }
.mt-lg { margin-top: 56px; }
.mb-0 { margin-bottom: 0 !important; }
.center { margin-inline: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.actions--center { justify-content: center; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .hero-copy { max-width: 720px; }
  .feature-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Desktop header (>= 1180px): every item sits in a fixed-width slot, so the logo, the four links,
   the language switch and the CTA keep exactly the same x position in EN, ES and 中文, and when the
   web fonts swap in. Slot widths fit the longest label of the three languages ("Equipos"/"设备与服务",
   "Soluciones" + caret, "Nosotros", "Solicitar cotización") with spare room; labels are centred in their slot. */
@media (min-width: 1180px) {
  .main-nav > ul { gap: 0; }
  .main-nav > ul > li { flex: none; text-align: center; }
  .main-nav > ul > li:nth-child(1),
  .main-nav > ul > li:nth-child(3),
  .main-nav > ul > li:nth-child(4) { width: 112px; }
  .main-nav > ul > li:nth-child(2) { width: 136px; }
  .main-nav a:not(.btn) { display: inline-block; padding: 8px 12px; line-height: 24px; white-space: nowrap; }
  .header-cta { width: 184px; padding-inline: 8px; white-space: nowrap; }

  /* Dropdown panel: same width in every language, centred under "Solutions" */
  .main-nav .nav-sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 60;
    width: 272px;
    margin-left: -136px;
    padding: 8px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
  }
  /* hover bridge over the 10px gap, so the pointer can travel from the button to the panel */
  .main-nav .nav-sub::before { content: ""; position: absolute; inset: -11px 0 auto 0; height: 11px; }
  .nav-sub-toggle[aria-expanded="true"] + .nav-sub,
  html:not(.js) .has-sub:hover > .nav-sub,
  html:not(.js) .has-sub:focus-within > .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s;
  }
  .main-nav .nav-sub a:not(.btn) {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-xs);
    line-height: 1.4;
    color: var(--ink);
    white-space: nowrap;
  }
  .main-nav .nav-sub a:not(.btn):hover { color: var(--teal-700); background: var(--bg-soft); }
  .main-nav .nav-sub a[aria-current="page"] { color: var(--teal-700); background: var(--teal-tint); font-weight: 600; }
  .main-nav .nav-sub :focus-visible { outline-color: var(--teal-700); }
}

/* Below 1180px the fixed slots no longer fit: compact header (logo · language switch · menu button) */
@media (max-width: 1179px) {
  :root { --header-h: 64px; }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .nav-toggle { display: inline-block; }
  .header-cta { display: none; }
  .header-actions { margin-left: auto; } /* the nav leaves the flow (fixed) on small screens */
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    padding: 24px var(--gutter) 40px;
    background: var(--navy-950);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .nav-open .main-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
  }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .main-nav a:not(.btn) {
    padding: 16px 4px;
    border-radius: 0;
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .main-nav a:not(.btn):hover,
  .main-nav a[aria-current="page"] { background: transparent; color: var(--accent-on-dark); }
  .main-nav .mobile-only { display: block; margin-top: 24px; }
  .main-nav .mobile-only .btn { width: 100%; }
  /* "Solutions" becomes a group heading; its two links are always listed, indented */
  .main-nav .nav-sub-toggle,
  .main-nav .nav-sub-toggle:hover,
  .main-nav .nav-sub-toggle[aria-expanded="true"],
  .main-nav .nav-sub-toggle.is-current {
    display: block;
    width: 100%;
    padding: 22px 4px 6px;
    border-radius: 0;
    background: transparent;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--on-dark-muted);
    cursor: default;
  }
  html:lang(zh) .main-nav .nav-sub-toggle { letter-spacing: .06em; text-transform: none; }
  .main-nav .nav-sub-toggle::after { display: none; }
  .main-nav .nav-sub { padding-left: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .main-nav .nav-sub a:not(.btn) { padding: 12px 4px; font-size: 1.2rem; }
  .main-nav .nav-sub li:last-child a:not(.btn) { border-bottom: 0; }
}

@media (max-width: 960px) {
  /* Photo heroes: text spans the full width, so darken the whole photo */
  .hero--photo::before,
  .page-hero--photo::before {
    background: linear-gradient(180deg, rgba(var(--overlay), .88) 0%, rgba(var(--overlay), .80) 45%, rgba(var(--overlay), .90) 100%);
  }

  .grid-3, .grid-4, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > *, .bento > .span-3 { grid-column: span 1; }
  .bento > .span-4, .bento > .span-6 { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .steps::before { display: none; }
  .section--dark .step-num { box-shadow: none; }
  .split, .industry, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .split .split-media { order: -1; }
  .service-row.split .split-media { order: 0; } /* phones: text before photo so it doesn't sit right under the page-head photo */
  .split-media { max-width: 620px; }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .cta-actions { flex-direction: row; flex-wrap: wrap; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .subnav .container { padding-inline: 0; }
  .subnav ul {
    padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  }
}

/* Facts bar: 2 × 2 below tablet width */
@media (max-width: 720px) {
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { padding: 16px 0 18px 16px; }
  .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .fact span { font-size: .8125rem; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .grid-2, .grid-3, .grid-4, .bento, .form-row, .service-meta { grid-template-columns: minmax(0, 1fr); }
  .grid > .card--wide { grid-column: auto; }
  .bento > * { grid-column: auto !important; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .hero-actions .btn, .page-hero .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .hero-trust { gap: 8px 20px; font-size: .875rem; }
  .hero--photo::before,
  .page-hero--photo::before { background: rgba(var(--overlay), .86); }
  .hero--photo > .container { padding-bottom: 44px; }
  .media-frame--diagram { padding: 12px; }
  .cta-band { padding: 30px 20px; border-left-width: 3px; }
  .cta-actions .btn { padding-inline: 18px; }
  .industry { padding: 24px 20px; }
  .usecase { flex-direction: column; gap: 12px; padding: 18px; }
  .lang-switch a, .lang-switch span { width: 36px; padding: 6px 0; }
  .lang-switch > :nth-child(3) { width: 44px; }
  .header-inner { gap: 12px; }
  .header-actions { gap: 8px; }
  .brand { font-size: 1.15rem; }
  .brand img { width: 30px; height: 30px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faq details { padding: 0 16px; }
  .lang-toast { left: 16px; right: 16px; transform: none; flex-wrap: wrap; }
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

@media (max-width: 380px) {
  .brand-name { font-size: 1.05rem; }
  .brand { gap: 8px; }
  .lang-switch { font-size: .75rem; }
  .lang-switch a, .lang-switch span { width: 30px; padding: 6px 0; }
  .lang-switch > :nth-child(3) { width: 40px; }
  .nav-toggle { width: 40px; height: 40px; }
  .nav-toggle span { left: 10px; }
  .nav-toggle span:first-child { top: 15px; }
  .nav-toggle span:last-child { top: 23px; }
  .nav-open .nav-toggle span:first-child,
  .nav-open .nav-toggle span:last-child { top: 19px; }
  .fact strong { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .wa-float, .lang-toast, .hero-bg, .hero-wave, .subnav, .hero-photo, .page-hero-photo { display: none !important; }
  .hero, .page-hero, .section--dark, .site-footer, .cta-band, .facts-bar { background: #fff !important; color: #000 !important; }
  .hero--photo::before, .page-hero--photo::before { display: none; }
}

/* ==========================================================================
   Fruit processing page (fruit-processing.html and its es/zh counterparts)
   Capacity chips · fruit section header · products · process flow · equipment
   spec cards · general systems (dark) · commercial terms
   ========================================================================== */
.fp-capacity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; }
.fp-capacity-label { margin-right: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); }
.page-hero .fp-capacity-label { color: var(--accent-on-dark); }
.fp-capacity-note { color: var(--muted); font-size: .875rem; }
.page-hero .fp-capacity-note { color: var(--on-dark-muted); }
.fp-index { list-style: none; padding: 0; margin: 0; gap: 14px; }
.fp-index .tile { padding: 20px; gap: 10px; }

.fp-fruit-top { display: grid; gap: 40px; align-items: start; }
.fp-fruit-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.fp-fruit-head .icon-tile { width: 60px; height: 60px; margin: 0; border-radius: 10px; }
.fp-fruit-head .icon-tile svg { width: 30px; height: 30px; }
.fp-fruit-head .eyebrow { margin-bottom: 6px; }
.fp-fruit-head .h2 { margin: 0; }
.fp-block { margin-top: clamp(40px, 5vw, 60px); }

/* Shared surface: light grey on white sections, white on soft sections */
.fp-products li, .flow li, .spec-card { background: var(--bg-soft); border: 1px solid var(--line); }
.section--soft .fp-products li, .section--soft .flow li, .section--soft .spec-card { background: #fff; }

.fp-products { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fp-products li { padding: 12px 16px; border-radius: 8px; }
.fp-products strong { display: block; font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.fp-products span { display: block; font-size: .9rem; line-height: 1.45; color: var(--muted); }

/* Process flow: numbered chips joined by arrows; branch lines below */
.flow { list-style: none; padding: 0 28px 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 34px; counter-reset: flow; }
.flow li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  counter-increment: flow;
}
.flow li::before {
  content: counter(flow);
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-xs);
  background: var(--navy-900);
  color: #fff;
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 800;
}
.flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 50%;
  width: 20px;
  height: 12px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%238A9AAE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h17M13 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.flow-branches { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.flow-branches li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .925rem; color: var(--ink-2); }
.flow-branches svg { width: 18px; height: 18px; flex: none; color: var(--teal-700); }
.flow-branches [aria-hidden] { color: var(--steel-400); }
.flow-branches strong { padding: 2px 10px; border-radius: var(--radius-xs); background: var(--teal-tint); box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .2); color: var(--teal-700); }

/* Main equipment cards */
.spec-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); counter-reset: spec; }
.spec-card { display: flex; flex-direction: column; padding: 20px 22px; border-radius: var(--radius); counter-increment: spec; }
.spec-card::before { content: counter(spec, decimal-leading-zero); margin-bottom: 10px; font-family: var(--font-head); font-size: .75rem; font-weight: 800; letter-spacing: .1em; color: var(--teal-700); }
.spec-card h4 { font-size: 1.0625rem; margin-bottom: .35em; }
.spec-card p { margin: 0 0 14px; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.spec-card .spec-card-spec { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--line-2); color: var(--ink-2); font-size: .9rem; font-weight: 600; }
.spec-card-spec span { display: block; margin-bottom: 2px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); }

/* General systems (on .section--dark) */
.sys-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sys-item { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); }
.sys-item h3 { font-size: 1.0625rem; margin: 0 0 .3em; color: #fff; }
.sys-item p { margin: 0; color: var(--on-dark-muted); font-size: .925rem; line-height: 1.5; }

/* Commercial terms */
.terms { display: grid; gap: 16px; margin: 0; }
.terms-item { padding: 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.terms-item dt { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); }
.terms-item dd { margin: 0; font-family: var(--font-head); font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
.terms-item .terms-sub { display: block; margin-top: 6px; font-family: var(--font-body); font-size: .925rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--muted); }
.fp-note { max-width: 860px; margin: 28px 0 0; padding: 14px 18px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: #fff; color: var(--ink-2); font-size: .95rem; }

@media (min-width: 641px) {
  .fp-products, .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 961px) {
  .fp-fruit-top { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 72px); }
  .terms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sys-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fp-fruit-head .icon-tile { width: 52px; height: 52px; border-radius: 8px; }
  .flow { flex-direction: column; align-items: flex-start; gap: 22px; padding: 0; }
  .flow li { font-size: .9rem; }
  .flow li:not(:last-child)::after { right: auto; top: auto; left: 8px; bottom: -17px; transform: rotate(90deg); }
  .spec-card, .sys-item { padding: 16px; }
  .fp-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fp-index .tile { padding: 14px; gap: 8px; }
  .fp-index .tile-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fp-index .tile h3 { font-size: 1rem; }
  .fp-index .tile p, .sys-item p { font-size: .85rem; }
}

/* ==========================================================================
   Inner page heads (v5) — lighter and distinct from the home hero
   .page-hero--split (equipment, fruit) · --editorial (about) · --light (contact, privacy)
   The home hero (.hero) and the 404 page keep their dark styles.
   ========================================================================== */
/* Inner pages: the fixed header is solid navy from the start (the heads below it are light) */
.site-header--solid { background: var(--navy-900); border-bottom-color: rgba(255, 255, 255, .08); }

.page-hero--split,
.page-hero--editorial,
.page-hero--light {
  background: var(--bg-soft);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: calc(var(--header-h) + clamp(28px, 3.6vw, 48px)) 0 clamp(40px, 4.8vw, 60px);
}
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) h1 {
  color: var(--navy-900);
  font-size: clamp(2rem, 1.45rem + 1.7vw, 2.75rem);
}
/* No accent second line on inner titles */
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .text-gradient { color: inherit; }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .eyebrow { color: var(--teal-700); margin-bottom: 12px; }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .lead { color: var(--muted); margin-top: 14px; }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .hero-actions { margin-top: 26px; }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) :focus-visible { outline-color: var(--teal-700); }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .breadcrumb { margin-bottom: 18px; color: var(--muted); }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .breadcrumb a { color: var(--teal-700); }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .breadcrumb a:hover { color: var(--teal-700); }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .breadcrumb [aria-current] { color: var(--ink-2); }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .breadcrumb li + li::before { color: var(--steel-400); opacity: 1; }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .hero-trust { margin-top: 24px; color: var(--ink-2); }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .hero-trust svg { color: var(--teal-700); }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .tag { background: #fff; }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .fp-capacity { margin-top: 18px; }
:is(.page-hero--split, .page-hero--editorial, .page-hero--light) .fp-capacity-label { color: var(--teal-700); }

/* Split: copy left, full-colour photo right */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* same columns as .split, so photo edges line up down the page */
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.page-hero--split h1 { max-width: 620px; }
.page-hero--split .lead { max-width: 600px; }
.page-hero-media,
.page-hero-banner {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line);
}
.page-hero-media { aspect-ratio: 4 / 3; }
.page-hero-media img,
.page-hero-banner img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Fruit quick links under the lead */
.page-hero-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 22px 0 0; max-width: 620px; }
.page-hero-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 12px 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
}
.page-hero-links a:hover { border-color: var(--teal-700); color: var(--teal-700); }
.page-hero-links svg { width: 20px; height: 20px; flex: none; color: var(--teal-700); }

/* Editorial: text block, then a wide banner that steps down onto the white section below */
.page-hero--editorial {
  border-bottom: 0;
  padding-bottom: 0;
  background: linear-gradient(180deg, var(--bg-soft) 0, var(--bg-soft) calc(100% - clamp(72px, 9vw, 150px)), var(--bg) calc(100% - clamp(72px, 9vw, 150px)));
}
.page-hero--editorial .page-hero-copy { max-width: 760px; }
.page-hero-banner { margin-top: clamp(32px, 4vw, 48px); aspect-ratio: 21 / 9; }

/* Light: no photo, compact */
.page-hero--light { padding-bottom: clamp(36px, 4.2vw, 52px); }
.page-hero--light h1 { max-width: 820px; }

@media (max-width: 960px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-hero-media { aspect-ratio: 16 / 9; max-width: 720px; }
  .page-hero-banner { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .page-hero-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero-links a { width: 100%; }
}

/* ==========================================================================
   Offices (v8) — about #offices (13-hour band + photo cards), home strip,
   contact-card office list. Clocks ([data-tz], .office-clock) are filled by
   main.js; without JS they stay [hidden] and only the UTC offset shows.
   ========================================================================== */

/* Shared: small label and the clock line */
.office-tag {
  align-self: flex-start;
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.office-tag--main { background: var(--teal-tint); border-color: rgba(15, 118, 110, .28); color: var(--teal-700); }
.office-time { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .875rem; line-height: 1.2; }
.office-time-icon { width: 16px; height: 16px; flex: none; color: var(--teal-700); }
.office-clock { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.office-zone { font-weight: 600; }

/* About: "13 hours apart" band */
.tz-band {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(24px, 3vw, 32px);
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--radius);
  border-top: 3px solid var(--accent);
  background: var(--navy-900);
  color: var(--on-dark);
  --tz-clock: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
}
.tz-band h3 { margin-bottom: .45em; color: #fff; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); }
.tz-copy p { color: var(--on-dark-muted); }
.tz-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(84px, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end; /* clocks and offsets share a baseline row even when a city label wraps */
  padding-top: 6px;
}
.tz-end { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tz-end--east { align-items: flex-end; text-align: right; }
.tz-place { color: var(--on-dark-muted); font-size: .78rem; font-weight: 700; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; }
.tz-band .tz-clock { color: #fff; font-size: var(--tz-clock); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.tz-offset { color: var(--accent-on-dark); font-size: .95rem; font-weight: 600; line-height: 1.2; }
.tz-link { position: relative; display: flex; align-items: center; justify-content: center; align-self: end; height: var(--tz-clock); margin-bottom: calc(.95rem * 1.2 + 6px); color: var(--accent-on-dark); }
.tz-link svg { display: block; width: 100%; height: auto; max-height: 28px; opacity: .85; }
.tz-gap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3px 10px;
  border: 1px solid rgba(127, 211, 200, .55);
  border-radius: var(--radius-xs);
  background: var(--navy-900);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}

/* About: office cards (photo on top) */
.office-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.office-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.office-card--main { border-top: 3px solid var(--accent); }
.office-photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-soft); }
.office-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.office-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.office-card h3 { margin-bottom: .4em; font-size: 1.2rem; }
.office-card p:not(.office-tag) { color: var(--muted); }
.office-card .office-time { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }

/* Home: compact offices strip (inside "Why Marea AI") */
.offices-strip { margin-top: clamp(40px, 5vw, 56px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.offices-strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.offices-strip-title { margin: 0; font-size: 1.05rem; }
.offices-strip-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 0; background: var(--line); list-style: none; }
.offices-strip-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 24px 20px; background: #fff; }
.offices-strip-list li.is-main { box-shadow: inset 0 3px 0 var(--accent); }
.offices-strip-list .office-tag { margin-bottom: 6px; }
.offices-strip-list strong { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.offices-strip-role { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.offices-strip-list .office-time { margin-top: auto; padding-top: 10px; }

/* Contact card (navy): office rows with local time on the right */
.contact-offices { flex: 1; min-width: 0; }
.contact-list .office-list--clock { gap: 0; margin-top: 8px; }
.contact-list .office-list--clock li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(183, 196, 212, .2);
}
.contact-list .office-list--clock li:first-child { padding-top: 6px; border-top: 0; }
.office-list-city { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.contact-list .office-list--clock strong { display: inline; color: #fff; font-weight: 600; }
.office-list-tag { padding: 1px 6px; border: 1px solid rgba(183, 196, 212, .4); border-radius: var(--radius-xs); color: var(--on-dark-muted); font-size: .68rem; font-weight: 700; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.office-list-tag--main { border-color: rgba(127, 211, 200, .55); color: var(--accent-on-dark); }
.office-list-role { grid-column: 1; color: var(--on-dark-muted); font-size: .9rem; line-height: 1.45; }
.contact-list .office-time { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.contact-list .office-clock { color: #fff; font-size: 1.15rem; }
.contact-list .office-zone { color: var(--accent-on-dark); font-size: .78rem; }
.office-list-note { margin: 10px 0 0; color: var(--on-dark-muted); font-size: .85rem; }

@media (max-width: 1080px) {
  .office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offices-strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .tz-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tz-map { grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); gap: 10px; }
  .tz-place { font-size: .7rem; letter-spacing: .06em; }
  .tz-band { --tz-clock: 1.9rem; }
  .tz-gap { padding: 2px 6px; font-size: .78rem; }
  /* phones: one office per row, photo on the left */
  .office-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .office-card { flex-direction: row; }
  .office-card--main { border-top: 1px solid var(--line); border-left: 3px solid var(--accent); }
  .office-photo { flex: 0 0 36%; aspect-ratio: auto; min-height: 140px; }
  .office-body { padding: 14px 16px 16px; }
  .office-card h3 { font-size: 1.08rem; }
  .office-card p:not(.office-tag) { font-size: .925rem; margin-bottom: .75em; }
  .office-card .office-time { padding-top: 10px; }
  .offices-strip-head { padding: 16px 18px; }
  .offices-strip-list li { padding: 16px 16px 18px; }
}
@media (max-width: 380px) {
  .offices-strip-list { grid-template-columns: minmax(0, 1fr); }
}