:root {
  /* Ink scale tightened for a calmer, more deliberate reading order.
     --ink is reserved for headings and primary copy only; body copy sits on
     --ink-2 so the headline/body contrast ratio stays clearly separated. */
  --ink: #0C1526;
  --ink-2: #36455C;
  --muted: #5E6B80;
  --paper: #FFFFFF;
  --paper-2: #F5F7F9;
  --line: color-mix(in srgb, var(--ink) 9%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 16%, transparent);
  --brand: #c51b1f;
  --brand-deep: #9e1114;
  --ok: #1e9e6a;
  --radius-xl: 1.6rem;
  --radius-lg: 1.2rem;
  --radius-md: 0.9rem;
  /* Single transition token so every hover in the theme shares one tempo. */
  --t-fast: 0.22s;
  --t-mid: 0.34s;
  --shadow-soft: 0 24px 60px -24px color-mix(in srgb, var(--ink) 16%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--ink) 7%, transparent);
  --shadow-hover: 0 32px 80px -28px color-mix(in srgb, var(--ink) 25%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--ink) 10%, transparent);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px color-mix(in srgb, var(--brand) 55%, transparent);
  --font-display: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --header-h: 76px;
  --topbar-h: 40px;
  --gap: 1.4rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Visually hidden but accessible to screen readers (used for hero H1 on
   pages that render their own visible heading further down the body). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 75%);
}

main { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }

/* ============================================================
   Keyboard focus. The theme previously styled :focus on inputs
   only, leaving every link and button with no visible focus ring.
   :focus-visible gives keyboard users a clear brand-coloured ring
   while staying invisible for mouse clicks.
   ============================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Pill-shaped controls need the ring inset, otherwise it detaches
   from the rounded edge and reads as a floating rectangle. */
.btn:focus-visible,
.top-link:focus-visible,
.sn26-float-btn:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
/* Inputs already carry their own box-shadow focus treatment; a second
   ring on top of it doubles up visually. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.search-form input[type="search"]:focus-visible {
  outline: none;
}

/* Text cursor only where the target is genuinely text entry; every other
   interactive element keeps the pointer so hit targets stay obvious. */
a[href],
button,
summary,
label,
[role="button"] { cursor: pointer; }
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
textarea,
select { cursor: text; }
select,
input[type="checkbox"],
input[type="radio"] { cursor: pointer; }
/* Do not advertise a pointer on disabled controls. */
button:disabled,
.btn:disabled,
[aria-disabled="true"] { cursor: not-allowed; }

/* ============================================================
   Shared hover surface. Colour shifts on hover are the cheapest
   way to add tactility without touching layout; transitions are
   restricted to paint properties so nothing reflows on hover.
   ============================================================ */
a,
.btn,
.chip,
.top-link { transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 0.55em;
  text-wrap: balance;
  font-weight: 800;
}
/* Headline sizes eased off slightly: the previous ramp pushed h1 to 4.1rem,
   which read as "screaming" next to a 16px body. Pulling the top end down
   lets weight and colour carry the hierarchy instead of raw scale. */
h1 { font-size: clamp(2.35rem, 4.7vw, 3.7rem); font-weight: 900; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.8rem, 3.05vw, 2.68rem); }
h3 { font-size: clamp(1.22rem, 1.9vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.06rem; font-weight: 700; }
p { margin: 0 0 1.15em; color: var(--ink-2); }
.lead { font-size: clamp(1.02rem, 1.55vw, 1.22rem); color: var(--ink-2); max-width: 46ch; }

.container { width: min(1200px, calc(100% - 3rem)); margin-inline: auto; }
/* Section rhythm opened up ~12% to add breathing room between blocks
   without changing how many sections the page has. */
section { padding-block: clamp(5rem, 10vw, 9rem); position: relative; }
section.tight { padding-block: clamp(3.25rem, 6.5vw, 5.5rem); }


/* ============================================================
   Eyebrow. Was a fully-bordered pill with a rotated red square
   inside it — border + geometric marker + brand colour all at
   once, which is the loudest tell in the set. Now it is plain
   small-caps text in brand red with a short leading rule, so it
   still labels the section but stops competing with the headline
   beneath it.
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  padding: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: 0.55;
}


.nav-wrap {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--ink) 35%, transparent);
}

/* ============================================================
   Overlay header on full-bleed hero pages (everything but the
   front page). At the top of the page the bar is nearly clear so
   the carousel image reads straight through it; text is white for
   contrast. Once scrolled it condenses to the solid light bar.
   ============================================================ */
body:not(.home-page) .nav-wrap {
  background: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  color: #fff;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease), backdrop-filter 0.45s var(--ease);
}
body:not(.home-page) .nav-wrap .brand,
body:not(.home-page) .nav-wrap .brand small,
body:not(.home-page) .nav-wrap .nav-links a.top-link,
body:not(.home-page) .nav-wrap .burger { color: #fff; }
body:not(.home-page) .nav-wrap .brand img {
  filter: brightness(0) invert(1);
  transition: filter 0.45s var(--ease);
}
body:not(.home-page) .nav-wrap .nav-links a.top-link:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
body:not(.home-page) .nav-wrap .nav-links a.top-link[aria-current="page"] { color: #fff; }
body:not(.home-page) .nav-wrap .burger i { background: #fff; }
body:not(.home-page) .nav-wrap .burger {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
}
body:not(.home-page) .nav-wrap .dropdown { background: #fff; }
body:not(.home-page) .nav-wrap .dropdown a { color: var(--ink-2); }

/* scrolled: solid light bar with the normal dark type */
body:not(.home-page) .nav-wrap.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--ink) 35%, transparent);
}
body:not(.home-page) .nav-wrap.is-scrolled .brand,
body:not(.home-page) .nav-wrap.is-scrolled .brand small,
body:not(.home-page) .nav-wrap.is-scrolled .nav-links a.top-link,
body:not(.home-page) .nav-wrap.is-scrolled .burger { color: var(--ink); }
body:not(.home-page) .nav-wrap.is-scrolled .brand img { filter: none; }
body:not(.home-page) .nav-wrap.is-scrolled .nav-links a.top-link:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); color: var(--brand); }
body:not(.home-page) .nav-wrap.is-scrolled .nav-links a.top-link[aria-current="page"] { color: var(--brand); }
body:not(.home-page) .nav-wrap.is-scrolled .burger i { background: var(--ink); }
body:not(.home-page) .nav-wrap.is-scrolled .burger { background: #fff; border-color: var(--line-strong); }
.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: min(1220px, calc(100% - 2rem));
  margin-inline: auto;
  min-height: 72px;
  padding: 0.4rem 0;
}
.nav .brand {
  display: flex; align-items: center; gap: 0.6rem;
  margin-right: auto;
}
.nav .brand img { height: 42px; width: auto; }
.nav .brand small {
  font-family: var(--font-body); font-weight: 700;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  border-left: 1px solid var(--line-strong);
  padding-left: 0.6rem;
  line-height: 1.4;
}
.nav-links { display: flex; align-items: center; gap: 0.1rem; margin-right: 0.6rem; }
.nav-links > .nav-item { position: relative; }
.nav-links a.top-link {
  display: inline-block;
  padding: 0.55rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 14px; font-weight: 700;
  color: var(--ink-2);
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.nav-links a.top-link:hover,
.nav-links .nav-item:hover > a.top-link { background: color-mix(in srgb, var(--brand) 6%, transparent); color: var(--brand); }
.nav-links a.top-link[aria-current="page"] { color: var(--brand); }

.dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 330px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.dropdown a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 0.7rem;
  font-size: 14px; font-weight: 700; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.dropdown a span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.dropdown a:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); color: var(--brand); transform: translateX(3px); }
.dropdown-components,
.dropdown-capabilities {
  width: min(660px, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding: 0.75rem;
}
.dropdown-group {
  min-width: 0;
  padding: 0.15rem;
}
.dropdown-title {
  display: block;
  min-height: 2.9rem;
  margin: 0 0.45rem 0.4rem;
  padding: 0.35rem 0 0.65rem;
  border-bottom: 2px solid var(--brand);
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}
.dropdown-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.15rem;
  padding: 0.45rem 0.35rem 0;
  border-top: 1px solid var(--line);
}
.dropdown-footer a {
  flex: 1;
  color: var(--brand);
}
.dropdown-company { min-width: 230px; }


/* 42px sat just under the 44px minimum target size in WCAG 2.5.8, so the
   menu button was harder to hit on a phone than it needs to be. 44px
   still fits the fixed header without changing its height. */
.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 0.6rem;
  border: 1px solid var(--line-strong);
  background: #fff;
  cursor: pointer;
  position: relative;
}
.burger i {
  position: absolute; left: 12px; right: 12px; height: 1.8px;
  background: var(--ink);
  transition: transform 0.55s var(--ease), top 0.55s var(--ease), opacity 0.3s;
}
/* Percentage offsets instead of the previous fixed top:15/20/25px. The
   button grew from 42px to 44px, which left the bar group sitting 2px
   above centre. Percentages keep the three bars centred and evenly
   spaced regardless of whatever height the button ends up at. */
.burger i:nth-child(1) { top: calc(50% - 5px); }
.burger i:nth-child(2) { top: 50%; }
.burger i:nth-child(3) { top: calc(50% + 5px); }
body.menu-open .burger i:nth-child(1) { top: 50%; transform: rotate(45deg); }
body.menu-open .burger i:nth-child(2) { opacity: 0; }
body.menu-open .burger i:nth-child(3) { top: 50%; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(247, 248, 249, 0.94);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 6rem 1.75rem 3.5rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  font-weight: 800; color: var(--ink);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.mobile-menu a.small { font-size: 1.02rem; font-family: var(--font-body); font-weight: 700; color: var(--ink-2); }
.mobile-group {
  width: 100%;
  border-bottom: 1px solid var(--line);
}
.mobile-group summary {
  position: relative;
  padding: 0.75rem 2rem 0.75rem 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  font-weight: 800;
  list-style: none;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.mobile-group summary::-webkit-details-marker { display: none; }
.mobile-group summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  color: var(--brand);
  font-weight: 400;
  transition: transform 0.45s var(--ease);
}
.mobile-group[open] summary::after { transform: rotate(45deg); }
.mobile-group a {
  padding: 0.55rem 0.25rem 0.55rem 1rem;
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
}
.mobile-subtitle {
  display: block;
  margin: 0.7rem 0 0.2rem 1rem;
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mobile-group a.mobile-all {
  margin-top: 0.4rem;
  padding: 0.7rem 0.25rem 0.5rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--brand);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.menu-open .mobile-menu a,
body.menu-open .mobile-menu summary { opacity: 1; transform: translateY(0); }
body.menu-open .mobile-menu a:nth-child(1) { transition-delay: 0.06s; }
body.menu-open .mobile-menu a:nth-child(2) { transition-delay: 0.1s; }
body.menu-open .mobile-menu a:nth-child(3) { transition-delay: 0.14s; }
body.menu-open .mobile-menu a:nth-child(4) { transition-delay: 0.18s; }
body.menu-open .mobile-menu a:nth-child(5) { transition-delay: 0.22s; }
body.menu-open .mobile-menu a:nth-child(6) { transition-delay: 0.26s; }
body.menu-open .mobile-menu a:nth-child(7) { transition-delay: 0.3s; }
body.menu-open .mobile-menu a:nth-child(8) { transition-delay: 0.34s; }
body.menu-open .mobile-menu a:nth-child(9) { transition-delay: 0.38s; }
body.menu-open .mobile-menu a:nth-child(10) { transition-delay: 0.42s; }
body.menu-open .mobile-menu a:nth-child(11) { transition-delay: 0.46s; }
body.menu-open .mobile-menu a:nth-child(12) { transition-delay: 0.5s; }
body.menu-open .mobile-menu a:nth-child(13) { transition-delay: 0.54s; }


.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1.35rem;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
  white-space: nowrap;
  /* Buttons sit on their own surface, so text should not inherit the
     anchor underline-on-hover behaviour from the global a rule. */
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn .disc {
  width: 34px; height: 34px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--t-mid) var(--ease);
  flex: none;
}
.btn:hover .disc { transform: translateX(2px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--brand) 60%, transparent); }
.btn-primary:hover { background: var(--brand-deep); color: #fff; box-shadow: 0 20px 44px -16px rgba(158,17,20, 0.65); }
.btn-primary .disc { background: rgba(0, 0, 0, 0.22); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-dark .disc { background: rgba(255, 255, 255, 0.14); color: #fff; }
.btn-ghost { background: rgba(255, 255, 255, 0.75); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn-ghost .disc { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand-deep); }

.btn-amber { background: #fff; color: var(--brand); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5); }
.btn-amber:hover { background: #f3f3f3; color: var(--brand-deep); }
.btn-amber .disc { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-deep); }


/* ============================================================
   Card surfaces. The outer .shell previously carried a 6%-ink
   border stacked directly under a 70%-white inner border on
   .core — two hairlines one pixel apart, reading as a smudged
   double edge. The shell now relies on the tinted background alone
   to separate from the page, and only .core keeps a single
   highlight edge. Lift is a 3px nudge instead of 5px so the card
   responds without appearing to detach.
   ============================================================ */
.shell {
  background: color-mix(in srgb, var(--ink) 3.5%, transparent);
  border-radius: var(--radius-xl);
  padding: 0.45rem;
}
.core {
  background: var(--paper);
  border-radius: calc(var(--radius-xl) - 0.45rem);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), var(--shadow-soft);
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
  height: 100%;
  transition: box-shadow var(--t-mid) var(--ease);
}
.shell.lift { transition: transform var(--t-mid) var(--ease); }
.shell.lift:hover { transform: translateY(-3px); }
.shell.lift:hover .core { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), var(--shadow-hover); }


.core.dark {
  background: linear-gradient(160deg, #17263F 0%, var(--ink) 55%, #0a1322 100%);
  border-color: rgba(255, 255, 255, 0.08);
  color: #d6d6d6;
}
.core.dark h2, .core.dark h3, .core.dark h4 { color: #fff; }
.core.dark p { color: #c3c3c3; }
/* Dark surfaces need the same text-colour overrides the base rules give
   on light. .lead, list copy and blockquotes were inheriting the light
   #36455C on a #0C1526 background, which drops to roughly 2:1 contrast
   and makes the copy effectively invisible.
   Note: .check-list li has its own dark rule further down (it also
   recolours the tick badge), so it is intentionally not listed here. */
.core.dark .lead,
.core.dark li,
.core.dark blockquote,
.core.dark figcaption { color: #c3c3c3; }
/* On dark surfaces the eyebrow keeps the same borderless treatment and
   only swaps the ink colour, so the label never re-introduces a box. */
.eyebrow.on-dark {
  background: none;
  border: 0;
  padding: 0;
  color: #ff9d9d;
}

.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }


.frame {
  margin: 0;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: var(--radius-lg);
  padding: 0.4rem;
}
.frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 0.4rem);
}
.frame .media { border-radius: calc(var(--radius-lg) - 0.4rem); overflow: hidden; height: 100%; }
.frame.cap-photo .media {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}
.frame.cap-photo .media img,
.frame.cap-photo .media picture {
  width: 65%;
  max-width: 65%;
  height: auto;
  object-fit: contain;
}
.frame.cap-photo .media picture img {
  width: 100%;
  max-width: 100%;
}
.frame figcaption {
  font-size: 12.5px; color: var(--muted);
  padding: 0.55rem 0.6rem 0.25rem;
  letter-spacing: 0.02em;
}

/* Page-level disclosure on application pages: states up front that the images
   are technical visualisations, so the status is known before any figure. */
.app-disclosure {
  display: block;
  margin: 0 0 2rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-left: 3px solid var(--ink);
  border-radius: 0.5rem;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.65;
}
.app-disclosure strong { color: var(--ink); font-weight: 700; }

/* Increase the tap area for links that are only as tall as their text.
   Inline links inside paragraphs are deliberately left alone. */
@media (pointer: coarse) {
  .inox-spec-table td a,
  .inox-spec-table th a,
  .wp-block-table td a,
  .wp-block-table th a {
    display: inline-block;
    padding: 0.55rem 0.15rem;
  }
  .wp-block-heading a {
    display: inline-block;
    padding: 0.3rem 0;
  }
}

@media (max-width: 768px) {
  .inox-spec-table td a,
  .inox-spec-table th a,
  .wp-block-table td a,
  .wp-block-table th a {
    display: inline-block;
    padding: 0.5rem 0.15rem;
  }
  .wp-block-heading a {
    display: inline-block;
    padding: 0.25rem 0;
  }
}

/* Related products / articles band.
   Two markup shapes are in use across the site: some pages wrap each column in
   a .wp-block-group, others emit a bare <h3> + <ul> pair. Both are handled so
   the band reads as two columns instead of a long single stack. */
.rel-sec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
  align-items: start;
}
/* Intro sentence spans the full width. */
.rel-sec > p:first-child { grid-column: 1 / -1; margin-top: 0; }

/* Each column is a .wp-block-group, or a heading immediately followed by a list. */
.rel-sec > .wp-block-group,
.rel-sec > h3.wp-block-heading { min-width: 0; }

.rel-sec > h3.wp-block-heading {
  margin: 0;
  padding: 0 0 0.4rem;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.3;
}
.rel-sec > h3.wp-block-heading + ul { margin-top: 0.9rem; }

/* A group wraps heading + list together; make it look like the same card. */
.rel-sec > .wp-block-group {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.rel-sec > .wp-block-group > h3.wp-block-heading,
.rel-sec > .wp-block-group > .wp-block-group__inner-container > h3.wp-block-heading {
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.3;
}

/* Some pages ship a single group that holds two heading+list pairs. Use CSS
   columns here so the pairs flow side by side regardless of how many child
   elements each one carries (a grid would place them in rows instead). */
.rel-sec > .wp-block-group.inx-related-grid {
  /* This one already contains both columns internally, so let it span the
     full grid width instead of being squeezed into a single column. */
  grid-column: 1 / -1;
  column-count: 2;
  column-gap: clamp(1.25rem, 2.6vw, 2rem);
  display: block;
}
.rel-sec > .wp-block-group.inx-related-grid > .wp-block-group__inner-container {
  display: contents;
}
.rel-sec > .wp-block-group.inx-related-grid h3.wp-block-heading {
  break-after: avoid;
  margin-top: 0;
}
.rel-sec > .wp-block-group.inx-related-grid .wp-block-list {
  break-inside: avoid;
}
@media (max-width: 900px) {
  .rel-sec > .wp-block-group.inx-related-grid { column-count: 1; }
}

/* Small caps label that heads some columns. */
.inx-band-sublabel {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.rel-sec .wp-block-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rel-sec .wp-block-list li { margin: 0; min-width: 0; }
.rel-sec .wp-block-list a {
  display: inline;
  padding: 0.2rem 0;
  border-radius: 0.3rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.rel-sec .wp-block-list a:hover {
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  color: var(--brand);
}
/* The short spec after each link is useful context, but it must not make the
   list twice as tall — clamp it to one line. */
.rel-sec .wp-block-list li > :not(a) {
  display: inline;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.rel-sec .wp-block-list li:empty { display: none; }

/* Reset the block-editor margins on direct children so the grid gap is the
   only vertical spacing. WordPress core ships spacer margins on these blocks,
   so this needs !important to win. */
.rel-sec > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.rel-sec > p:first-child { margin-bottom: 0.2rem !important; }

.rel-sec hr {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 !important;
  border: 0;
  border-top: 1px solid var(--line);
  opacity: 1;
}
.rel-sec .wp-block-buttons { grid-column: 1 / -1; gap: 0.75rem; margin: 0 !important; }
.rel-sec > p:last-child:not(:first-child) {
  grid-column: 1 / -1;
  margin-top: 0.2rem !important;
}

@media (max-width: 900px) {
  .rel-sec { grid-template-columns: 1fr; }
  .rel-sec .wp-block-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rel-sec .wp-block-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Floating contact button (Zalo + phone).
   Sits above the page content but below the fixed header (z 60) and
   the mobile menu (z 55), so it never covers navigation.
   ============================================================ */
.sn26-float-contact {
  position: fixed;
  right: clamp(0.9rem, 2vw, 1.5rem);
  bottom: clamp(0.9rem, 2vw, 1.5rem);
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}

.sn26-float-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.55rem 1.1rem 0.55rem 0.6rem;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--ink) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 12%, transparent);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background 0.35s var(--ease);
}
.sn26-float-zalo { background: var(--brand); }
.sn26-float-zalo:hover {
  background: var(--brand-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--ink) 50%, transparent), 0 3px 8px color-mix(in srgb, var(--ink) 14%, transparent);
}

.sn26-float-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

/* Small screens hide the number for space, so the icon needs a word under it.
   Put the label inside the button (not below it) so it can never fall off the
   bottom edge of the viewport. */
.sn26-float-tag {
  position: absolute;
  inset: auto 0 -1px;
  padding-bottom: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  pointer-events: none;
  display: none;
}

.sn26-float-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.sn26-float-text small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.sn26-float-text b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
}

/* Keyboard focus must be clearly visible. */
.sn26-float-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: 3px;
}

/* Very small screens: icon-only pill to free up space, number stays in
   aria-label, and a small "Zalo" tag under the icon keeps it self-explanatory. */
@media (max-width: 480px) {
  .sn26-float-btn {
    position: relative;
    padding: 0.45rem 0.45rem 0.7rem;
    min-height: 58px;
    gap: 0;
  }
  .sn26-float-text { display: none; }
  .sn26-float-icon { width: 38px; height: 38px; }
  .sn26-float-tag { display: block; }
}

/* The footer already carries bottom padding (see the `footer` rule) to keep the
   floating button clear, so nothing extra is needed here. */

/* Touch devices get a slightly larger target. Declared after the max-width
   block on purpose so it wins on touch phones (where the Zalo label is shown
   and the button therefore needs the extra height). */
@media (hover: none) {
  .sn26-float-btn { min-height: 58px; }
}

/* Application-page image block.
   Rendered illustrations are labelled with an on-image badge plus a caption so
   the "not a photo of a finished SANON job" status travels with the image even
   if it is screenshotted or shared. */
.inox-page-img {
  position: relative;
  margin: 1.8rem 0;
}
.inox-page-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper-2);
}
/* Badge sits on the image itself so the label cannot be cropped away. */
.inox-page-img .illus-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.7rem;
  border-radius: 99px;
  background: rgba(9, 15, 28, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  pointer-events: none;
}
.inox-page-img .illus-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffcf5c;
  flex: none;
}
.inox-page-img figcaption {
  display: block;
  margin-top: 0.7rem;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.inox-page-img figcaption strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
/* Small outlined tag that repeats the status inside the caption. */
.inox-page-img figcaption .illus-tag {
  display: inline-block;
  padding: 0.1rem 0.44rem;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 0.3rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.inox-page-img figcaption span { color: var(--muted); }

/* Reserved slot for a real finished-project photo. */
.inox-page-img--pending {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 2rem 1.5rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}
.inox-page-img--pending strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 0.35rem;
}

.ph {
  margin: 0;
  border-radius: var(--radius-lg);
  border: 1.5px dashed color-mix(in srgb, var(--ink) 28%, transparent);
  background:
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent), color-mix(in srgb, var(--ink) 2%, transparent));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.6rem 1.4rem;
  text-align: center;
  min-height: 200px;
  color: var(--ink-2);
}
.ph svg { width: 30px; height: 30px; opacity: 0.55; }
.ph .tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--brand);
}
.ph .desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 34ch; }
.ph.on-dark {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  color: #c3c3c3;
}
.ph.on-dark .tag { color: #ff9d9d; }
.ph.on-dark .desc { color: #c3c3c3; }


.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.stats-3 { grid-template-columns: repeat(3, 1fr); }
/* ============================================================
   Stat block. A 3px brand-coloured left rule on all four cells ran
   together into one continuous red band across the row, so the
   brand colour stopped reading as a single accent and became
   decoration repeated four times. The rule is now a faint hairline
   and the number carries the emphasis on its own.
   ============================================================ */
.stat {
  border-left: 1px solid var(--line-strong);
  padding: 0.3rem 0 0.3rem 1.1rem;
  transition: border-color var(--t-mid) var(--ease);
}
.stats:hover .stat { border-left-color: color-mix(in srgb, var(--brand) 40%, var(--line-strong)); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.028em;
}
.stat span { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: 0.01em; }


.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.2rem; align-items: stretch; }
.ba .arrow {
  align-self: center;
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--brand) 70%, transparent);
  font-size: 20px;
}
.ba ul { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.ba li {
  display: flex; align-items: baseline; gap: 0.65rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 15px; font-weight: 600; color: var(--ink-2);
}
.ba li:last-child { border-bottom: 0; }
.ba li b { font-family: var(--font-display); font-size: 1.25rem; min-width: 2.2ch; letter-spacing: -0.02em; font-weight: 900; }
.ba .before li b { color: var(--brand); }
.ba .after li b { color: var(--ok); }
.chip {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px;
}
.chip.red { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand); }
.chip.green { background: rgba(30, 158, 106, 0.12); color: var(--ok); }


.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.55rem 0;
  color: var(--ink-2); font-size: 15px;
}
.check-list li::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 9%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c51b1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E") center/11px no-repeat;
}
.check-list li b { color: var(--ink); }
.core.dark .check-list li { color: #c3c3c3; }
.core.dark .check-list li b { color: #fff; }
.core.dark .check-list li::before { background-color: rgba(255, 255, 255, 0.1); }


.steps { counter-reset: step; display: grid; gap: 1rem; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.1rem;
  padding: 1.15rem 1.3rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--ink) 14%, transparent);
}
.step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--brand) 40%, transparent);
  letter-spacing: -0.03em;
}
.step h4 { margin-bottom: 0.2rem; }
.step p { margin: 0; font-size: 14.5px; }


.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th {
  text-align: left;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line-strong);
}
.tbl td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}
.tbl td:first-child { font-weight: 700; color: var(--ink); }


.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.field label small { color: var(--muted); font-weight: 600; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 0.95rem;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent);
}
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 0.35rem; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.choice {
  display: flex; align-items: center; gap: 0.55rem;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 0.7rem;
  padding: 0.6rem 0.8rem;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.choice:hover { border-color: var(--brand); }
.choice input { accent-color: var(--brand); width: 16px; height: 16px; }
.upload {
  border: 1.5px dashed color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--brand) 3%, transparent);
  padding: 1.6rem;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.4s var(--ease);
}
.upload:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.upload b { color: var(--brand); }
.rfq-file-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.25rem;
}
.rfq-file-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rfq-file-choose-btn {
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.rfq-file-name {
  font-size: 13px;
  color: var(--ink-2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rfq-file-note {
  margin: 0.35rem 0 0.9rem;
  font-size: 13px;
  color: var(--muted);
}
.rfq-upload-progress-wrap {
  display: none;
  margin: 0.75rem 0 1rem;
}
.rfq-upload-progress-wrap.is-active {
  display: block;
}
.rfq-upload-progress-track {
  height: 10px;
  background: var(--paper-2);
  border-radius: 999px;
  overflow: hidden;
}
.rfq-upload-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--ink);
  border-radius: 999px;
  transition: width 0.12s ease-out;
}
.rfq-upload-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
  font-size: 12px;
  color: var(--muted);
}


.tabs {
  display: inline-flex;
  gap: 0.3rem;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--line);
  padding: 0.3rem;
  border-radius: 999px;
}
.tabs button {
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14.5px; font-weight: 700;
  color: var(--ink-2);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.tabs button.active {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ink) 30%, transparent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }


.hero.quote-hero {
  padding-top: clamp(4.5rem, 6vw, 5.25rem);
  padding-bottom: 0.5rem;
}
.quote-hero h1 { margin-bottom: 0; }
.quote-flow .container { max-width: 1200px; }
.quote-gate { max-width: 1200px; margin-inline: auto; }
.quote-gate .core { padding: clamp(1.6rem, 4vw, 2.8rem); }
.quote-gate h3 { margin-top: 0.55rem; }
#rfq-next { scroll-margin-top: 92px; }
.form-step {
  display: inline-block;
  color: var(--brand);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.gate-note {
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}
.form-status {
  display: inline-block;
  margin-left: 0.7rem;
  color: var(--muted);
  font-size: 13px;
}
.form-message {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.7rem;
  font-size: 13.5px;
}
.form-message.error {
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  color: var(--brand-deep);
}
.form-message.success {
  border: 1px solid rgba(30, 158, 106, 0.25);
  background: rgba(30, 158, 106, 0.07);
  color: #14764f;
}
.form-retry {
  margin-left: 0.65rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: 800 12px var(--font-body);
  text-decoration: underline;
  cursor: pointer;
}
.quote-confirmation {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
}
.quote-confirmation .form-step { margin-right: auto; }
.quote-confirmation button {
  border: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font: 700 12px var(--font-body);
}
.quote-after {
  margin-top: 2rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--line-strong);
}
.quote-after > p { max-width: 68ch; }
.assembly-intro { margin: 0.35rem 0 1.25rem; color: var(--ink-2); }
.form-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.25rem 0 1.8rem;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.form-divider::before,
.form-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line-strong);
}
.detailed-form-title { margin-bottom: 1.25rem; }


.welding-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 34%),
    linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
}
.weld-cycle-hero {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
.weld-cycle-hero .weld-cycle-step {
  min-height: 0;
  padding: 1rem 0.85rem 1.05rem;
}
.weld-cycle-hero .weld-cycle-step p {
  font-size: 13px;
}
.weld-cycle-section,
.welding-video-section { background: var(--paper-2); }
.weld-cycle {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
.weld-cycle-step {
  position: relative;
  min-height: 190px;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.weld-cycle-step b {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--brand);
  font: 900 2rem/1 var(--font-display);
}
.weld-cycle-step h4 { margin-bottom: 0.45rem; }
.weld-cycle-step p { margin: 0; font-size: 14px; }
.negative-list li::before { content: "\00d7"; }
.welding-tech-grid .shell { overflow: hidden; }
.welding-tech-media {
  overflow: hidden;
  aspect-ratio: 1;
  background: #e8edf0;
}
.welding-tech-media picture,
.welding-tech-media img {
  display: block;
  width: 100%;
  height: 100%;
}
.welding-tech-media img { object-fit: cover; }
.welding-video {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink);
  box-shadow: var(--shadow-soft);
}
.welding-video-grid > * { min-width: 0; }
.welding-video video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #090a0b;
  object-fit: cover;
}
.welding-video figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.2rem;
  color: #fff;
}
.welding-video figcaption span { color: #aeb2b8; font-size: 13px; }
.welding-video-copy {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
}
.welding-video-copy .btn { align-self: flex-start; }
.media-credit { margin: 1rem 0 0; color: var(--muted); font-size: 12.5px; }


.provencell-step-card .core {
  height: 100%;
}
.provencell-step-icon {
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 1.25rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  color: var(--ink);
}
.provencell-step-icon svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.provencell-step-icon .accent {
  stroke: var(--brand);
}
.production-cells { background: var(--paper-2); }
.production-cell-grid { align-items: stretch; }
.production-cell-card {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.production-cell-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #090a0b;
  object-fit: cover;
}
.production-cell-card--portrait video {
  aspect-ratio: 17 / 30;
  object-fit: cover;
}
.production-cell-portrait-grid {
  max-width: 820px;
  margin: clamp(1rem, 2.5vw, 1.5rem) auto 0;
  align-items: start;
}
.production-cell-card figcaption { padding: clamp(1.25rem, 2.4vw, 1.8rem); }
.production-cell-card figcaption .eyebrow { margin-bottom: 0.65rem; }
.production-cell-card h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}
.production-cell-card p { margin: 0; font-size: 14.5px; }
.production-cell-card p a { font-weight: 800; }


.hero {
  padding-top: clamp(8rem, 13vw, 10.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.hero .lead { max-width: 88ch; }
.hero .kicker-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

.hero-home {
  padding-top: clamp(7.5rem, 11vw, 10rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 34%),
    linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
}
.home-page main > section:not(.hero-home) {
  padding-block: clamp(2rem, 3.5vw, 3rem);
}
.home-page main > section[style*="padding-top:0"] {
  padding-top: 0 !important;
}
.home-page .sec-head {
  margin-bottom: clamp(1.65rem, 2.8vw, 2.4rem);
}
.home-consolidation-photo {
  display: block;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.home-consolidation-photo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .home-consolidation .grid-2 {
    grid-template-columns: 1fr;
  }
}
.home-process-card {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-align: center;
}
.home-process-card .core {
  padding: 0.85rem 0.85rem 1.05rem;
}
.home-process-card picture {
  display: flex;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--paper-2);
}
.home-process-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-process-card-cover img {
  object-fit: cover;
  object-position: center;
}
.home-process-card-text {
  padding: 0.85rem 0.5rem 0.2rem;
}
.home-process-card-text h4 { margin-bottom: 0.35rem; }
.home-process-card-text p { margin: 0; }
.hero-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero-home-copy h1 {
  max-width: 22ch;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 1.04;
}
.hero-home-copy .lead {
  max-width: 42ch;
  margin-top: 1.15rem;
}
/* Hero CTA: equal-height buttons + breathing room from surrounding copy */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem 1.1rem;
  margin-top: 2.25rem;
  margin-bottom: 1.5rem;
}
.hero-cta .btn { flex: 0 1 auto; min-height: 3.25rem; }

/* ============================================================
   Full-bleed hero carousel (inner pages)
   Structure mirrors wp-inox-child .inx-hero--full/--band:
   an absolutely-positioned stage behind the copy, plus a
   gradient scrim so overlaid text stays readable.
   ============================================================ */
.hero-full {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 62svh, 44rem);
  padding: clamp(7rem, 12vw, 9.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  background: var(--ink);
  overflow: hidden;
}
.hero-full[data-hero-variant="full"] { min-height: clamp(34rem, 74svh, 52rem); }

.hero-full-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-full-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.85s ease;
}
.hero-full-slide.is-active { opacity: 1; z-index: 1; }
.hero-full-slide picture,
.hero-full-slide img,
.hero-full-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Scrim: dark at edges + left-weighted so overlaid copy reads clearly */
.hero-full-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 15, 28, 0.82) 0%, rgba(9, 15, 28, 0.62) 38%, rgba(9, 15, 28, 0.28) 72%, rgba(9, 15, 28, 0.14) 100%),
    linear-gradient(180deg, rgba(9, 15, 28, 0.72) 0%, rgba(9, 15, 28, 0.46) 18%, rgba(9, 15, 28, 0.22) 34%, rgba(9, 15, 28, 0.30) 68%, rgba(9, 15, 28, 0.66) 100%);
}

.hero-full-inner {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero-full-copy { max-width: 44rem; }
.hero-full-copy .breadcrumb {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.7rem;
  border-radius: 0.4rem;
  background: rgba(9, 15, 28, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.86);
}
.hero-full-copy .breadcrumb a { color: rgba(255, 255, 255, 0.86); }
.hero-full-copy .breadcrumb a:hover { color: #fff; text-decoration: underline; }
/* Rank Math nests the trail in a <p>; its default margin would inflate the
   pill and push the hero copy down. */
.hero-full-copy .breadcrumb p,
.hero-full-copy .breadcrumb .rank-math-breadcrumb { margin: 0; }
/* Keep the crumb on one line so it never spills onto a brighter area. */
@media (max-width: 768px) {
  .hero-full-copy .breadcrumb {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Rank Math wraps the trail in a <p> whose margin would otherwise inflate
     the pill and push the hero copy down. */
  .hero-full-copy .breadcrumb p { margin: 0; }
  .hero-full-copy .breadcrumb .rank-math-breadcrumb { margin: 0; }
}
.hero-full-copy .eyebrow { color: rgba(255, 255, 255, 0.86); }
.hero-full-copy h1 {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  text-wrap: balance;
}
.hero-full-copy .lead,
.hero-full-copy .hint { color: rgba(255, 255, 255, 0.88); }
.hero-full-copy .lead { max-width: 40ch; }
/* ghost button must be legible on a dark image */
.hero-full-copy .btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  backdrop-filter: blur(6px);
}
.hero-full-copy .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #fff;
  color: #fff;
}
.hero-full-copy .kicker-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }

.hero-full-dots {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(1.5rem, 3vw, 2.4rem);
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
}
/* The visual bar is 4px tall, but the hit area is padded out to a
   comfortable touch target (WCAG 2.5.8) without changing the look. */
.hero-full-dots button {
  position: relative;
  width: 2.4rem;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: background 0.4s ease, width 0.4s ease;
}
.hero-full-dots button::before {
  content: "";
  position: absolute;
  inset: -18px -6px;
}
.hero-full-dots button:hover { background: rgba(255, 255, 255, 0.72); }
.hero-full-dots button.is-active { background: #fff; width: 3.4rem; }

@media (max-width: 768px) {
  .hero-full { min-height: clamp(26rem, 72svh, 34rem); }
  .hero-full[data-hero-variant="full"] { min-height: clamp(30rem, 82svh, 40rem); }
  .hero-full-copy .lead { max-width: none; }
  .hero-full-copy .kicker-row .btn { flex: 1 1 100%; justify-content: center; }
}
.hero-home-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.4rem;
  margin-top: 2.2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero-home-metrics .stat {
  border-left: 0;
  padding: 0;
}
.hero-home-metrics .stat b {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}
.hero-home-metrics .stat span {
  display: block;
  max-width: 16ch;
  line-height: 1.35;
}

.hero-showcase {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(15, 17, 20, 0.08);
  border-radius: var(--radius-lg);
  background: #101214;
  box-shadow: var(--shadow-deep);
}
.hero-showcase-caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  margin: 0;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(12, 14, 16, 0.72);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.hero-showcase.showing-process-grid .hero-showcase-caption {
  opacity: 0;
  pointer-events: none;
}
.hero-carousel-slides { position: relative; width: 100%; height: 100%; }
.hero-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.hero-carousel-slide.is-active { opacity: 1; z-index: 1; }
.hero-carousel-slide,
.hero-carousel-slide picture,
.hero-carousel-slide img,
.hero-carousel-slide video {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-carousel-slide img,
.hero-carousel-slide video { object-fit: cover; }
.hero-process-slide { background: #17191c; }
.hero-process-grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: #fff;
}
.hero-process-intro {
  display: flex;
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  flex-direction: column;
  justify-content: center;
  background: var(--ink);
  color: #fff;
}
.hero-process-intro span {
  margin-bottom: 0.55rem;
  color: #ff9d9d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-process-intro strong {
  font: 900 clamp(1.2rem, 2.5vw, 1.75rem)/1.05 var(--font-display);
  letter-spacing: -0.025em;
}
.hero-process-intro small {
  max-width: 24ch;
  margin-top: 0.7rem;
  color: #c4c7ca;
  font-size: 11px;
  line-height: 1.4;
}
.hero-process-tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  background: #292c30;
}
.hero-process-tile::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 8, 0.88));
}
.hero-process-tile picture,
.hero-process-tile img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-process-tile img {
  object-fit: cover;
  transition: transform 5s ease;
}
.hero-carousel-slide.is-active .hero-process-tile img { transform: scale(1.035); }
.hero-process-tile figcaption {
  position: absolute;
  right: 0.7rem;
  bottom: 0.65rem;
  left: 0.7rem;
  z-index: 1;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.hero-process-tile figcaption strong {
  display: block;
  font-size: clamp(11px, 1.3vw, 14px);
}
.hero-process-tile figcaption span {
  display: block;
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(8px, 0.95vw, 10.5px);
}
.hero-carousel-dots {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 4;
  display: flex;
  gap: 0.45rem;
}
.hero-carousel-dots button {
  width: 24px;
  height: 24px;
  padding: 8px;
  background-clip: content-box;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.hero-carousel-dots button.is-active {
  background: #fff;
  transform: scale(1.15);
}


.logo-strip {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center;
  opacity: 0.85;
}
.logo-strip .frame { padding: 0.25rem; }
.logo-strip img {
  height: 44px; width: auto;
  border-radius: 0.6rem;
  filter: grayscale(0.5) contrast(0.95);
}
.customers-section { background: var(--paper-2); }
.customer-logo-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.75rem;
}
.customer-logo {
  display: flex;
  min-width: 0;
  min-height: 88px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: #fff;
}
.customer-logo img {
  display: block;
  width: 100%;
  max-width: 138px;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.25) contrast(0.98);
}


.sec-head { max-width: 1200px; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.sec-head .lead { max-width: 88ch; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow { margin-inline: auto; }


/* Factory section: "Xem nội dung video" + "Xem quy trinh nha may" read as one
   centred action row under the centred heading. Was a span-8 / span-4 pair,
   which left-aligned the two and dropped the button off the text baseline.
   Same visual pattern as .cta-band .actions.

   Both triggers are siblings in one centred flex row, which is what keeps them
   on a single line and centred. The <details> must wrap the panel too, so the
   panel is absolutely positioned against its own <details> instead of sitting
   in the row: left in flow it would either stretch the details column and push
   the CTA down a line, or be crushed to the button's width.

   Two things that bite here and are handled explicitly below:
   - an absolutely positioned child escapes the UA rule that hides a closed
     <details>, so `:not([open])` has to hide it by hand;
   - the panel is out of flow, so the <details> grows by the panel's height via
     a bottom margin, which is what keeps the next section from colliding.
   `display: contents` is NOT used on the <details> -- it removes the element's
   own box and the panel's width then feeds back into track sizing, blowing the
   row out to thousands of pixels. */
.factory-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  /* Pull the row closer to the heading block it belongs to; .sec-head's own
     bottom margin is sized for a following content block and is too airy. */
  margin-top: -1.2rem;
}

/* Opt out of the legacy `section details` card styling: border, background and
   a 1rem top margin that pushed the summary 16px below the CTA baseline. */
.factory-cta {
  /* Anchor for the out-of-flow panel: must be the full-width row, not the
     narrow <details>, or the panel centres on the button instead of the page. */
  position: relative;
}
.factory-cta-toggle {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.factory-cta-toggle > summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  /* legacy `section details summary` sets its own padding/font; .btn must win */
  padding: 0.5rem 0.5rem 0.5rem 1.35rem;
  font-size: 15px;
}
/* Hide the native disclosure triangle on every engine. */
.factory-cta-toggle > summary::-webkit-details-marker { display: none; }
.factory-cta-toggle > summary::marker { content: ""; }
/* Disclosure affordance matching the .btn .disc treatment. */
.factory-cta-toggle > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--brand-deep);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: transform var(--t-mid) var(--ease);
}
.factory-cta-toggle[open] > summary::after { transform: rotate(45deg); }
/* Reserve the panel's height on the ROW. It has to be the row and not the
   <details>: the details is a flex item, so its own bottom margin never grows
   the line box and the following section still collides with the panel. */
/* Reserve the panel's height on the SECTION, not on the row. The panel is out
   of flow, so nothing between it and the next section can grow to hold space
   for it; the section's own box is the only thing that pushes the next one
   down, so that is where the space has to be reserved. */
.factory-cta:has(.factory-cta-toggle[open]) { margin-bottom: 11rem; }

/* An absolutely positioned child escapes the browser's own "hide a closed
   details" rule, so the closed state has to be enforced explicitly. */
details.factory-cta-toggle:not([open]) > .factory-cta-body { display: none; }
.factory-cta-body {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: min(44rem, calc(100% - 2rem));
  margin: 0;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-deep);
  color: var(--ink-2);
  font-size: 15px;
}
.factory-cta-body p { margin: 0; color: var(--ink-2); font-size: 15px; }

@media (max-width: 560px) {
  .factory-cta { flex-direction: column; align-items: stretch; }
  .factory-cta-toggle[open] { margin-bottom: 0; }
  .factory-cta:has(.factory-cta-toggle[open]) { margin-bottom: 17rem; }
  .factory-cta > .btn,
  .factory-cta-toggle > summary { width: 100%; justify-content: center; }
  .factory-cta-body { width: calc(100% - 2rem); }
}

.case-card { display: flex; flex-direction: column; height: 100%; }
.case-card .metrics { display: flex; gap: 1.4rem; margin: 1rem 0 1.2rem; flex-wrap: wrap; }
.case-card .metrics div b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--brand);
  letter-spacing: -0.02em;
}
.case-card .metrics div span { font-size: 12px; color: var(--muted); font-weight: 600; }
.case-card .link-more { margin-top: auto; font-weight: 700; font-size: 14.5px; }


.process-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.process-card {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-align: center;
}
.process-card picture {
  display: flex;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.process-card img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
}
.process-card h4 { margin: 0; padding: 1rem 0.75rem 1.1rem; }


.qc-test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.qc-test-card {
  overflow: hidden;
  color: var(--ink);
}
.qc-test-card picture {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.qc-test-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qc-test-card-copy { padding: 1.1rem 1.15rem 1.2rem; }
.qc-test-card-copy h4 { margin-bottom: 0.55rem; }
.qc-test-card-copy p { margin: 0; font-size: 14px; }

.part-value-grid .core { height: 100%; }
.quote-layout > * { min-width: 0; }
.quote-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}
.quote-detail {
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.quote-detail > span {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--brand);
  font: 800 11px/1 var(--font-display);
  letter-spacing: 0.14em;
}
.quote-detail h4 { margin-bottom: 0.4rem; }
.quote-detail p { margin: 0; font-size: 13.5px; }
.quote-resources {
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--brand);
  background: var(--paper-2);
}
.quote-resources b { display: block; margin-bottom: 0.55rem; }
.quote-resources div { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; }
.quote-resources a { font-size: 13.5px; font-weight: 700; }
.quote-machining-photo picture,
.quote-machining-photo img { display: block; width: 100%; height: auto; }


.about-team-photo,
.company-building-photo,
.leadership-photo {
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.about-team-photo {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.about-team-photo img,
.company-building-photo img,
.leadership-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.company-building-photo {
  width: min(100%, 420px);
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.leadership-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.35rem;
  align-items: start;
}
.leadership-photo {
  width: 120px;
  border-radius: 50%;
}
.leadership-card h4 { margin-top: 0.25rem; }


.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.fact {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
}
.fact span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fact b { display: block; font-size: 15.5px; color: var(--ink); margin-top: 0.25rem; }


.cta-band .core.dark { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem); }
.cta-band .actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }


footer {
  position: relative; z-index: 1;
  background: var(--ink);
  color: #c3c3c3;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  /* Extra room at the bottom so the floating Zalo button never covers the
     last line of footer text. */
  padding-bottom: 5.5rem;
  font-size: 14.5px;
  border-top: 4px solid var(--brand);
}
footer h3,
footer .foot-col-title { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1rem; }
.cta-band-title { color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 700; line-height: 1.25; margin: 0.25rem 0 0.65rem; }
.post-nav-title { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 0.35rem 0 0; }
footer p { color: #c3c3c3; }
footer strong { color: #fff; }
footer .stat b { color: #fff; }
footer .stat span { color: #a8adb4; }
footer .stat { border-left-color: var(--brand); }
footer a { color: #b9b9b9; display: block; padding: 0.22rem 0; }
footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.25fr 1.1fr 0.9fr 1fr; gap: 2rem; }
.foot-brand img { height: 40px; width: auto; background: none; padding: 0; border-radius: 0; margin-bottom: 1rem; }
.foot-bottom {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 13px; color: #8f8f8f;
}


/* ============================================================
   Reveal-on-scroll. This runs 47 times on the homepage alone, so
   it is the single most-seen transition in the theme. The old
   values (38px travel, 6px blur, 0.9s, up to 0.32s stagger) made
   every section arrive late and slightly smeared. Travel and blur
   are cut hard, the curve is shortened, and the stagger is halved
   so content settles faster and reads crisply.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(3px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), filter 0.55s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal.d1 { transition-delay: 0.05s; }
.reveal.d2 { transition-delay: 0.1s; }
.reveal.d3 { transition-delay: 0.15s; }
.reveal.d4 { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  /* The shared hover transitions added for this pass are colour-only,
     but users who ask for reduced motion should get instant feedback
     across the board rather than a mix of some-animated states. */
  a,
  .btn,
  .btn .disc,
  .chip,
  .top-link,
  .shell,
  .shell.lift,
  .core,
  .shell.lift:hover .core {
    transition-duration: 0.01ms !important;
  }
  .shell.lift:hover,
  .btn:hover .disc,
  .btn:active { transform: none; }
  /* The mobile menu is the largest movement on the site: three bars
     rotate into an X, then all 13 links stagger in one by one. Neither
     was covered, so users requesting reduced motion still got a full
     choreographed animation. */
  .burger i {
    transition-duration: 0.01ms !important;
  }
  .mobile-menu a {
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}


@media (max-width: 1020px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .process-card-grid { grid-template-columns: repeat(3, 1fr); }
  .qc-test-grid { grid-template-columns: repeat(2, 1fr); }
  .customer-logo-grid { grid-template-columns: repeat(6, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
  .nav .brand small { display: none; }
  .weld-cycle { grid-template-columns: repeat(2, 1fr); }
  .hero-home-layout { grid-template-columns: 1fr; gap: 2rem; }
  .hero-home-copy h1 { max-width: 18ch; }
}
@media (max-width: 768px) {
  body { font-size: 15.5px; }
  .container { width: calc(100% - 2rem); }
  .nav-links { display: none; }
  .nav .btn { display: none; }
  .burger { display: block; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .ba { grid-template-columns: 1fr; }
  .ba .arrow { transform: rotate(90deg); margin-inline: auto; }
  .facts { grid-template-columns: 1fr 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .process-card-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .qc-test-grid { grid-template-columns: 1fr; }
  .quote-detail-grid { grid-template-columns: 1fr; }
  .customer-logo-grid { grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
  .quote-confirmation { align-items: flex-start; flex-wrap: wrap; }
  .quote-confirmation .form-step { width: 100%; }
  .leadership-card { grid-template-columns: 88px 1fr; gap: 1rem; }
  .leadership-photo { width: 88px; }
  .weld-cycle { grid-template-columns: 1fr; }
  .weld-cycle-step { min-height: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero { padding-top: 7rem; }
  .hero-home-metrics { grid-template-columns: 1fr 1fr; }
  .hero-showcase { width: 100%; max-width: 640px; margin-inline: auto; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero-cta .btn { justify-content: center; }
}

/* ---- Knowledge archive: topic chips ---- */
/* The chips and product-link band were all built around a gold
   accent (#b8860b / #fdfaf2) that existed nowhere else in the theme.
   That is a second visual focus competing with the brand red, so the
   whole band now reads from --brand. Hover also shifts to a tint of
   the background instead of a colour swap, which is quieter. */
.topic-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.75rem;padding:0;list-style:none}
.topic-chips .chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border:1px solid rgba(0,0,0,.12);border-radius:999px;font-size:.92rem;line-height:1.2;color:#333;text-decoration:none;background:#fff;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.topic-chips .chip:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);background:color-mix(in srgb,var(--brand) 5%,#fff)}
.topic-chips .chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.topic-chips .chip-n{font-size:.78rem;opacity:.7}
.topic-chips .chip.is-active .chip-n{opacity:.9}
@media (max-width:600px){.topic-chips{gap:.4rem}}

/* ---- Product link band (content -> product bridge) ---- */
.product-link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin:1.5rem 0 0;padding:0;list-style:none}
.product-link-grid li{margin:0}
.product-link-grid a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;height:100%;padding:.9rem 1.1rem;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:#fff;font-size:.95rem;line-height:1.35;color:#222;text-decoration:none;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.product-link-grid a:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);background:color-mix(in srgb,var(--brand) 5%,#fff);transform:translateY(-2px)}
.product-link-grid .disc{flex:0 0 auto;color:var(--brand);font-size:1.05rem;transition:transform var(--t-fast) var(--ease)}
.product-link-grid a:hover .disc{transform:translateX(3px)}
@media (max-width:980px){.product-link-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.product-link-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}.product-link-grid a{padding:.75rem .85rem;font-size:.9rem}}
@media (max-width:420px){.product-link-grid{grid-template-columns:1fr}}

/* ---- Dark photo hero (knowledge archive) ---- */
.hero-dark{position:relative;background-color:#0e1116;color:#fff;overflow:hidden}
.hero-dark::before{content:"";position:absolute;inset:0;background-image:var(--hero-bg);background-size:cover;background-position:center;opacity:.42}
.hero-dark::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,13,18,.86) 0%,rgba(10,13,18,.62) 52%,rgba(10,13,18,.5) 100%)}
.hero-dark > .container{position:relative;z-index:2}
.hero-dark h1{color:#fff}
.hero-dark .lead{color:#d8dde3}
/* Was #e6b45c (amber). A second accent inside one page breaks the
   single-accent rule, so the dark hero now uses a lighter tint of
   the same brand red instead of introducing a new hue. */
.hero-dark .eyebrow.on-dark{color:#ff9d9d}

/* ---- In-content gallery carousel ---- */
.inx-gallery-sec{padding:3rem 0 2.5rem}
.inx-gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem}
.inx-gallery-title{margin:0 0 .4rem;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.25}
.inx-gallery-intro{margin:0;max-width:62ch;font-size:.92rem;line-height:1.55;color:#5b6470}
.inx-gallery-nav{display:flex;gap:.5rem;flex:0 0 auto}
.inx-gallery-btn{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:1px solid rgba(0,0,0,.14);border-radius:50%;background:#fff;color:#222;font-size:1.05rem;line-height:1;cursor:pointer;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.inx-gallery-btn:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);background:color-mix(in srgb,var(--brand) 5%,#fff);color:var(--brand)}
.inx-gallery-btn:disabled{opacity:.35;cursor:default}
.inx-gallery-btn:disabled:hover{border-color:rgba(0,0,0,.14);background:#fff;color:#222}
.inx-gallery-track-wrap{margin:0}
.inx-gallery-track{display:flex;gap:1rem;margin:0;padding:0 1.5rem 1rem;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.inx-gallery-track:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.inx-gallery-track::-webkit-scrollbar{height:8px}
.inx-gallery-track::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:99px}
.inx-gallery-track::-webkit-scrollbar-track{background:rgba(0,0,0,.05);border-radius:99px}
.inx-gallery-item{flex:0 0 auto;width:min(78vw,520px);margin:0;scroll-snap-align:start}
.inx-gallery-item figure{margin:0}
.inx-gallery-item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid rgba(0,0,0,.10);background:#f4f5f7}
.inx-gallery-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.5rem}
.inx-gallery-dots button{width:26px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(0,0,0,.18);cursor:pointer;transition:background var(--t-mid) var(--ease),width var(--t-mid) var(--ease)}
.inx-gallery-dots button.is-active{background:var(--brand);width:40px}
@media (max-width:768px){.inx-gallery-item{width:min(84vw,420px)}.inx-gallery-head{flex-direction:column;align-items:flex-start;gap:1rem}.inx-gallery-track{padding-inline:1rem}}
@media (prefers-reduced-motion:reduce){.inx-gallery-track{scroll-behavior:auto}}