.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  border-radius: var(--radius);
}

.menu-toggle span:not(.screen-reader-text) {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: var(--white);
}

/* Dark lockup shows only when the mobile menu is open (light context). */
.brand-logo--dark { display: none; }

.mobile-menu {
  padding: 8px 22px 28px;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-menu .m-flat {
  display: block;
  color: #0a0e12;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-menu .m-flat:hover {
  color: var(--signal);
}

.m-acc {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.m-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: #0a0e12;
}

.m-acc-ico {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-right: 2px solid #0a0e12;
  border-bottom: 2px solid #0a0e12;
  transform: rotate(45deg);
  transition: transform 0.28s ease;
}

.m-acc.is-open .m-acc-ico {
  transform: rotate(-135deg);
}

.m-acc-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s ease;
}

.m-acc.is-open .m-acc-body {
  max-height: 520px;
}

.m-acc-body .m-sub {
  display: block;
  padding: 10px 0 10px 14px;
  font-size: 0.92rem;
  color: #5a6672;
  text-decoration: none;
}

.m-acc-body .m-sub:hover {
  color: #0a0e12;
}

.m-acc-body .m-sub--all {
  color: var(--signal);
  font-weight: 600;
}

.m-acc-body .m-sub:last-child {
  padding-bottom: 16px;
}

.mobile-menu .button {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

/* Menu open → light header so the dark logo + toggle read on white. */
body.menu-open .site-header {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

body.menu-open .brand-logo--light {
  display: none;
}

body.menu-open .brand-logo--dark {
  display: inline-block;
}

body.menu-open .menu-toggle {
  border-color: rgba(0, 0, 0, 0.18);
}

body.menu-open .menu-toggle span:not(.screen-reader-text) {
  background: #0a0e12;
}

body.menu-open .contact-toggle {
  color: #0a0e12;
  border-color: rgba(0, 0, 0, 0.18);
}

/* ============================================================
   Mega-menu, header icon buttons, contact panel, search
   ============================================================ */

/* Header icon buttons (search + contact) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.icon-btn:hover {
  border-color: var(--signal);
  color: var(--white);
  background: rgba(254, 76, 28, 0.1);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* Contact toggle uses the brand accent as a solid tile (Fabrik-style) */
.contact-toggle {
  border-color: transparent;
  background: var(--signal);
  color: #10151b;
}

.contact-toggle:hover {
  background: #ff5a2e;
  color: #10151b;
}

/* Mega-menu — full-width panel under the header */
.nav-item.has-mega {
  position: static;
}

.mega {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  background: #0b0f14;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 2px solid var(--signal);
  box-shadow: 0 34px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  z-index: 55;
}

.nav-item.has-mega:hover .mega,
.nav-item.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mega-inner {
  width: var(--header-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.5fr 1fr;
  gap: 48px;
  padding: 40px 0 44px;
  align-items: start;
}

.mega-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--white);
}

.mega-lead p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 18px;
}

.mega-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--signal);
  font-weight: 750;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mega-viewall svg {
  width: 16px;
  height: 16px;
}

.mega-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 28px;
  align-content: start;
  padding-left: 48px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.mega-cols a {
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 140ms ease, padding-left 140ms ease;
}

.mega-cols a:hover {
  color: var(--white);
  padding-left: 8px;
}

.mega-feature {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.mega-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(9, 13, 18, 0.92);
  color: var(--white);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 160ms ease;
}

.mega-cta:hover {
  background: var(--signal);
  color: #10151b;
}

.mega-cta svg {
  width: 18px;
  height: 18px;
}

/* Shared overlay backdrop for panel + search */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 11, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 260ms;
  z-index: 90;
}

.overlay-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Contact slide-in panel (white, Fabrik-style) */
.contact-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  background: var(--white);
  color: var(--ink);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.3);
}

.contact-panel.is-open {
  transform: none;
}

.contact-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 48px);
}

.panel-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--radius);
}

.panel-close:hover {
  background: var(--surface);
}

.panel-mark {
  display: inline-block;
  margin-bottom: 30px;
  padding: 14px 18px;
  background: #0b0f14;
  border-radius: var(--radius);
}

.panel-mark img {
  height: 22px;
  width: auto;
  display: block;
}

.contact-panel .eyebrow {
  color: var(--signal);
}

.contact-panel h2 {
  margin: 10px 0 22px;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  line-height: 1.05;
}

.contact-panel .c-block {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  color: var(--steel);
  font-size: 0.95rem;
  line-height: 1.6;
}

.contact-panel .c-block a {
  color: var(--ink);
  font-weight: 600;
}

.contact-panel .c-block a:hover {
  color: var(--signal);
}

.panel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  background: #10151b;
  color: var(--white);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: background-color 160ms ease;
}

.panel-cta:hover {
  background: var(--signal);
  color: #10151b;
}

.panel-cta svg {
  width: 18px;
  height: 18px;
}

/* Search slide-down overlay */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #0b0f14;
  border-bottom: 2px solid var(--signal);
  transform: translateY(-100%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-overlay.is-open {
  transform: none;
}

.search-inner {
  width: var(--header-w);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 22px;
}

.search-inner svg {
  width: 22px;
  height: 22px;
  color: var(--signal);
  flex: 0 0 auto;
}

.search-inner input {
  flex: 1 1 auto;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1.4vw, 2rem);
  padding: 8px 0;
}

.search-inner input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.search-close {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.search-close:hover {
  border-color: var(--signal);
}

@media (max-width: 980px) {
  .mega {
    display: none;
  }
  .icon-btn.contact-toggle,
  .icon-btn.search-toggle {
    display: none;
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg img,
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

/* Black legibility overlay (no navy) — darker on the left where the copy sits. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.7) 46%, rgba(0, 0, 0, 0.35) 100%);
}

/* Blueprint grid removed per direction. */
.hero-grid {
  display: none;
}

.section {
  padding-block: clamp(52px, 6vw, 92px);
}

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

.section-dark {
  background: var(--ink);
  color: var(--white);
}

.section-heading,
.split-heading {
  margin-bottom: 34px;
}

.section-heading p,
.split-heading p {
  margin-top: 12px;
}

.section-heading h2,
.split-heading h2,
.cta-panel h2,
.quality-section h2,
.nearshore-section h2 {
  max-width: 760px;
  margin: 0;
  font-size: var(--h2);
  line-height: 1;
  letter-spacing: 0;
}

.section-heading p,
.split-heading p {
  max-width: 650px;
  color: var(--steel);
}

.section-dark .section-heading p,
.section-dark .component-card p {
  color: rgba(255, 255, 255, 0.68);
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.7fr);
  gap: 48px;
  align-items: end;
}

.trust-bar {
  background: #080b0f;
  color: var(--white);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-item {
  padding: 24px 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-item strong,
.trust-item span {
  display: block;
}

.trust-item span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.card-grid {
  display: grid;
  gap: 20px;
}

.card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* every card the same height */
}

.info-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 1px 0 rgba(8, 12, 18, 0.04);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, box-shadow 240ms ease;
}

/* Minimalist hover: gentle lift, sharpen the border, zoom the media. */
.info-card:hover {
  transform: translateY(-5px);
  border-color: rgba(17, 57, 84, 0.4);
  box-shadow: 0 22px 50px rgba(8, 12, 18, 0.13);
}

.section-dark .info-card:hover {
  border-color: rgba(254, 76, 28, 0.5);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4);
}

.info-card .text-link {
  margin-top: auto;
  padding-top: 16px;
}

.section-dark .info-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.info-card h2,
.info-card h3 {
  margin: 12px 0;
  font-size: var(--h4);
  line-height: 1.1;
}

.info-card p {
  color: var(--steel);
}

.card-kicker,
.component-card span {
  color: var(--steel);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.component-card span {
  color: rgba(255, 255, 255, 0.5);
}

.card-media {
  height: 200px;
  margin: -26px -26px 24px;
  overflow: hidden;
  background: linear-gradient(45deg, #12171d, #262e37);
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.info-card:hover .card-media img {
  transform: scale(1.06);
}

.text-link {
  color: var(--signal);
  font-weight: 800;
}

/* ---- Horizontal carousel rail (capabilities + component families) ---- */
.rail-wrap {
  position: relative;
}

.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.rail-head .section-heading {
  margin-bottom: 0;
}

.rail-nav {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.rail-btn {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.section-dark .rail-btn {
  border-color: rgba(255, 255, 255, 0.22);
}

.rail-btn:hover {
  border-color: var(--signal);
  background: rgba(254, 76, 28, 0.12);
}

.rail-btn svg {
  width: 18px;
  height: 18px;
}

.rail-btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

.card-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 340px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 4px 18px;
  margin: -4px -4px 0;
  scrollbar-width: none;
  cursor: grab;
}

/* Drag-to-scroll (mouse). Touch uses native swipe. */
.card-rail.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

.card-rail.is-dragging a,
.card-rail.is-dragging img {
  pointer-events: none;
}

.card-rail::-webkit-scrollbar {
  display: none;
}

.card-rail > * {
  scroll-snap-align: start;
}

.component-card {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    #0e151d;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease;
}

.component-card:hover {
  transform: translateY(-5px);
  border-color: rgba(254, 76, 28, 0.5);
}

.component-card .card-media {
  height: 160px;
  margin: -24px -24px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.component-card:hover .card-media img {
  transform: scale(1.06);
}

.component-card h3 {
  font-size: var(--h4);
  line-height: 1.05;
  margin: 6px 0 10px;
}

.component-card p {
  flex: 1 1 auto;
}

.component-card a[href] {
  margin-top: auto;
  color: var(--signal);
  font-weight: 750;
}

.two-col,
.storytelling,
.rfq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 44px;
  align-items: start;
}

.content-card,
.story-panel,
.cta-panel,
.rfq-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: clamp(24px, 3.4vw, 38px);
  box-shadow: var(--shadow);
}

/* Force dark text inside the white content card even on dark sections. */
.content-card {
  color: var(--ink);
}

.content-card p {
  color: var(--steel);
}

.check-list {
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 24px;
  margin: 12px 0;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  background: var(--signal);
}

.story-panel {
  min-height: 420px;
  display: grid;
  align-content: center;
  gap: 14px;
  background:
    linear-gradient(135deg, rgba(254, 76, 28, 0.16), transparent 45%),
    #101820;
  color: var(--white);
}

.story-panel span {
  display: block;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--h5);
  font-weight: 800;
}

.cta-rfq {
  background: var(--ink);
  color: var(--white);
}

.cta-panel {
  background:
    linear-gradient(90deg, rgba(254, 76, 28, 0.18), transparent),
    #111923;
  border-color: rgba(255, 255, 255, 0.12);
}

.page-hero {
  background:
    radial-gradient(120% 120% at 100% 0, rgba(254, 76, 28, 0.12), transparent 42%),
    radial-gradient(130% 130% at 88% 10%, #10161d 0%, #05080b 46%, #000 100%);
  color: var(--white);
}

.page-hero .lead {
  color: rgba(255, 255, 255, 0.72);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-top: 8px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.content-body {
  font-size: var(--text-lead);
}

.content-body a {
  color: var(--signal);
  font-weight: 700;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.process-grid div {
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.process-grid span {
  color: var(--signal);
  font-weight: 850;
}

.rfq-layout {
  background: var(--surface);
}

.rfq-form {
  display: grid;
  gap: 13px;
}

.form-row {
  display: grid;
  gap: 13px;
}

.form-row.two {
  grid-template-columns: repeat(2, 1fr);
}

label {
  display: grid;
  gap: 6px;
  color: #3a4652;
  font-weight: 600;
  font-size: 0.82rem;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(254, 76, 28, 0.12);
}

textarea {
  resize: vertical;
}

.checkbox-row {
  display: flex;
  align-items: start;
}

.checkbox-row input {
  width: auto;
  min-height: auto;
  margin-top: 6px;
}

.hp-field {
  position: absolute;
  left: -9999px;
}

.form-error {
  padding: 12px 14px;
  background: #fff0e8;
  border: 1px solid #f3b899;
  color: #782a0b;
}

.site-footer {
  background: #070a0e;
  color: rgba(255, 255, 255, 0.66);
  padding-block: 56px 22px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 30px 40px;
  align-items: start;
}

.footer-grid > div:first-child {
  max-width: 380px;
}

.footer-grid > div:first-child p {
  font-size: 0.9rem;
  line-height: 1.55;
}

.site-footer h2 {
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.site-footer a {
  display: block;
  margin: 9px 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.9rem;
  transition: color 140ms ease;
}

.site-footer a:hover {
  color: var(--white);
}

.validation-note {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  margin-top: 16px;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.7);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-social a:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: #10151b;
  transform: translateY(-3px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  margin-top: 38px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-credit span {
  color: var(--red);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Interior page components (real theme components, reused in preview) ---- */

.page-hero {
  position: relative;
  overflow: clip;
  padding-top: calc(var(--header-h) + clamp(36px, 6vw, 72px));
}

.page-hero .breadcrumbs {
  padding-top: 0;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.55);
}

.page-hero .breadcrumbs a {
  color: rgba(255, 255, 255, 0.72);
}

.page-hero .breadcrumbs a:hover {
  color: var(--white);
}

/* Blueprint grid layer */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 100% at 100% 0, #000 20%, transparent 72%);
  mask-image: radial-gradient(130% 100% at 100% 0, #000 20%, transparent 72%);
  pointer-events: none;
}

/* Technical crosshair + corner-bracket markers */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none' stroke='%23FE4C1C' stroke-width='1.4'%3E%3Cpath d='M27 4v15M27 35v15M4 27h15M35 27h15'/%3E%3Ccircle cx='27' cy='27' r='7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none' stroke='%23ffffff' stroke-opacity='0.28' stroke-width='1.4'%3E%3Cpath d='M37 1H1v36'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none' stroke='%23ffffff' stroke-opacity='0.28' stroke-width='1.4'%3E%3Cpath d='M1 37h36V1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8% top 30%, left 34px top 84px, right 34px bottom 34px;
}

.page-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(58%, 760px);
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%);
  mask-image: linear-gradient(90deg, transparent, #000 58%);
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
}

@media (max-width: 820px) {
  .page-hero-media {
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 80%);
    mask-image: linear-gradient(180deg, transparent, #000 80%);
  }
  .page-hero-media img {
    opacity: 0.2;
  }
  .page-hero::after {
    background-position: right 6% top 22%, left 20px top 68px, right 20px bottom 20px;
    background-size: 44px, 30px, 30px;
  }
  .lead-in > div:first-child::after {
    max-width: 220px;
    height: 84px;
  }
}

.page-hero .container {
  position: relative;
  z-index: 3;
}

/* Orange accent bar on the eyebrow inside heroes */
.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.page-hero .eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--signal);
}

.page-hero .lead {
  margin-top: 18px;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.prose {
  max-width: 760px;
}

.prose p {
  margin: 0 0 18px;
  color: var(--steel);
  font-size: var(--text-lead);
}

.section-dark .prose p {
  color: rgba(255, 255, 255, 0.72);
}

.lead-in {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}

.lead-in > div:first-child {
  position: relative;
}

/* Blueprint-style technical motif fills the heading column */
.lead-in > div:first-child::after {
  content: "";
  display: block;
  margin-top: 36px;
  width: 100%;
  max-width: 280px;
  height: 104px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='104' viewBox='0 0 280 104' fill='none'%3E%3Cg stroke='%23aab2ba' stroke-width='1.2'%3E%3Cpath d='M4 22h190M4 15v14M194 15v14'/%3E%3Crect x='84' y='9' width='30' height='26'/%3E%3Cpath d='M70 74h206' stroke-dasharray='4 6'/%3E%3C/g%3E%3Cg stroke='%23FE4C1C' stroke-width='1.5'%3E%3Ccircle cx='32' cy='74' r='14'/%3E%3Cpath d='M32 52v44M10 74h44'/%3E%3C/g%3E%3C/svg%3E") left top / contain no-repeat;
  opacity: 0.9;
}

.section-dark .lead-in > div:first-child::after {
  filter: brightness(1.6);
  opacity: 0.55;
}

/* Same blueprint motif fills the empty heading column of two-col sections */
.two-col > div:first-child {
  position: relative;
}

.two-col > div:first-child::after {
  content: "";
  display: block;
  margin-top: 32px;
  width: 100%;
  max-width: 260px;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='104' viewBox='0 0 280 104' fill='none'%3E%3Cg stroke='%23aab2ba' stroke-width='1.2'%3E%3Cpath d='M4 22h190M4 15v14M194 15v14'/%3E%3Crect x='84' y='9' width='30' height='26'/%3E%3Cpath d='M70 74h206' stroke-dasharray='4 6'/%3E%3C/g%3E%3Cg stroke='%23FE4C1C' stroke-width='1.5'%3E%3Ccircle cx='32' cy='74' r='14'/%3E%3Cpath d='M32 52v44M10 74h44'/%3E%3C/g%3E%3C/svg%3E") left top / contain no-repeat;
  opacity: 0.85;
}

.section-dark .two-col > div:first-child::after {
  filter: brightness(1.6);
  opacity: 0.5;
}

@media (max-width: 980px) {
  .two-col > div:first-child::after {
    display: none;
  }
}

.lead-in .prose p:first-child {
  color: var(--ink);
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.45;
}

/* .lead defaults to light (for dark heroes) — force dark on light contexts. */
.section-light .lead,
.rfq-layout .lead,
.rfq-intro .lead {
  color: var(--steel);
}

/* Alternating image + text feature */
.feature-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.feature-split.reverse .media-frame {
  order: 2;
}

.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame.tall {
  aspect-ratio: 3 / 4;
}

.feature-copy h2,
.feature-copy h3 {
  margin: 10px 0 14px;
}

.feature-copy p {
  color: var(--steel);
}

.section-dark .feature-copy p {
  color: rgba(255, 255, 255, 0.72);
}

/* Pills (materials / applications / tags) */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.pill-list li {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
}

.section-dark .pill-list li {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

/* Spec table */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.spec-table th {
  width: 34%;
  color: var(--ink-2);
  font-weight: 750;
}

.spec-table td {
  color: var(--steel);
}

/* Numbered process steps */
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: step;
}

.step-card {
  position: relative;
  padding: 28px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 220ms ease;
}

/* Top accent bar that fills on hover */
.step-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 34px;
  background: var(--signal);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(254, 76, 28, 0.5);
  box-shadow: 0 18px 40px rgba(8, 12, 18, 0.1);
}

.section-dark .step-card:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.step-card:hover::before {
  width: 100%;
}

.section-dark .step-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.step-card .step-num {
  display: block;
  color: var(--signal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 14px;
  -webkit-text-stroke: 0;
}

.step-card h3 {
  font-size: var(--h5);
  margin: 0 0 8px;
}

.step-card p {
  margin: 0;
  color: var(--steel);
  font-size: var(--text-sm);
}

.section-dark .step-card p {
  color: rgba(255, 255, 255, 0.66);
}

/* Floating hero stat card (depth over the hero image) */
.hero-stat-card {
  position: absolute;
  right: clamp(16px, 5vw, 72px);
  bottom: clamp(24px, 6vh, 72px);
  z-index: 3;
  display: flex;
  gap: clamp(20px, 3vw, 36px);
  padding: 22px 28px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--signal);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
}

.hero-stat-card .hs {
  display: block;
}

.hero-stat-card .hs strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--white);
}

.hero-stat-card .hs span {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 780px) {
  .hero-stat-card {
    display: none;
  }
}

/* Big-number stats band */
.stats-band .stat strong {
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.5rem);
  color: var(--white);
}

.stats-band .stat strong .u {
  color: var(--signal);
}

.stats-band .stat span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stats-band .stat {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 24px;
}

/* Stat row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1;
  color: var(--ink);
}

.section-dark .stat strong,
.trust-bar .stat strong {
  color: var(--white);
}

.trust-bar .stat span {
  color: rgba(255, 255, 255, 0.6);
}

.stat span {
  display: block;
  margin-top: 8px;
  color: var(--steel);
  font-size: var(--text-sm);
}

/* Related links grid */
/* Technical dimension strip above the related cards */
.related-deco {
  position: relative;
  height: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 44px);
  background-position: left bottom;
  background-size: 100% 8px;
  background-repeat: repeat-x;
}

.related-deco::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--signal);
  border-radius: 50%;
  background: var(--surface);
}

.related-deco::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  width: 6px;
  height: 6px;
  background: var(--signal);
}

.section-dark .related-deco {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 44px);
}

.section-dark .related-deco::before {
  background: #0e151d;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.related-card {
  position: relative;
  display: block;
  padding: 26px 52px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: border-color 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}

/* Top accent bar that fills on hover */
.related-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 38px;
  background: var(--signal);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.related-card:hover {
  border-color: rgba(254, 76, 28, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(8, 12, 18, 0.12);
}

.related-card:hover::before {
  width: 100%;
}

.rc-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--signal);
  margin-bottom: 14px;
}

.rc-arrow {
  position: absolute;
  top: 22px;
  right: 20px;
  width: 24px;
  height: 24px;
  color: var(--steel);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
}

.rc-arrow svg {
  width: 100%;
  height: 100%;
}

.related-card:hover .rc-arrow {
  transform: translate(3px, -3px);
  color: var(--signal);
}

.related-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
  margin-bottom: 7px;
}

.rc-copy {
  color: var(--steel);
  font-size: var(--text-sm);
}

/* FAQ */
.faq-list {
  max-width: 820px;
  margin-inline: auto;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h5);
  color: var(--ink);
}

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--signal);
  border-radius: 2px;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

.faq-icon::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.faq-icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-item.is-open .faq-icon::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a > div {
  overflow: hidden;
}

.faq-a p {
  margin: 0;
  padding-bottom: 22px;
  color: var(--steel);
  max-width: 720px;
}

/* Video gallery */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.video-item figcaption {
  margin-top: 12px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
}

.section-dark .video-item figcaption {
  color: rgba(255, 255, 255, 0.6);
}

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}

.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===================== Blog / Insights ===================== */
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}

.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-filter button {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--steel);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.blog-filter button:hover {
  border-color: var(--ink-2);
  color: var(--ink);
}

.blog-filter button.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.blog-count {
  color: var(--steel);
  font-size: 0.85rem;
}

.post-card.is-hidden {
  display: none;
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
}

.blog-pagination button {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-weight: 650;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.blog-pagination button:hover:not(:disabled) {
  border-color: var(--signal);
  color: var(--signal);
}

.blog-pagination button.is-active {
  background: var(--signal);
  border-color: var(--signal);
  color: #10151b;
}

.blog-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---- Single post ---- */
.post-single-hero {
  position: relative;
  overflow: clip;
  color: var(--white);
  background:
    radial-gradient(120% 120% at 100% 0, rgba(254, 76, 28, 0.16), transparent 46%),
    radial-gradient(130% 130% at 82% -10%, #10161d 0%, #05080b 50%, #000 100%);
  padding-top: calc(var(--header-h) + clamp(34px, 5.5vw, 70px));
  padding-bottom: clamp(30px, 5vw, 56px);
  border-bottom: 2px solid var(--signal);
}

.post-single-hero .post-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(56%, 720px);
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 62%);
  mask-image: linear-gradient(90deg, transparent, #000 62%);
}

.post-single-hero .post-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.post-single-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 100% at 100% 0, #000 20%, transparent 72%);
  mask-image: radial-gradient(130% 100% at 100% 0, #000 20%, transparent 72%);
}

.post-single-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none' stroke='%23FE4C1C' stroke-width='1.4'%3E%3Cpath d='M27 4v15M27 35v15M4 27h15M35 27h15'/%3E%3Ccircle cx='27' cy='27' r='7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9% top 32%;
}

.post-single-hero .container {
  position: relative;
  z-index: 3;
}

.post-single-hero .breadcrumbs a {
  color: rgba(255, 255, 255, 0.6);
}

.post-single-hero .breadcrumbs a:hover {
  color: var(--white);
}

.post-single-hero .eyebrow {
  color: var(--signal);
  letter-spacing: 0.14em;
}

.post-single-hero h1 {
  max-width: 900px;
  margin: 12px 0 0;
  font-size: clamp(1.95rem, 1.4rem + 2.3vw, 3rem);
  line-height: 1.08;
}

.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.post-byline > span + span {
  position: relative;
  padding-left: 15px;
}

.post-byline > span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.post-byline .post-cat {
  color: var(--signal);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-byline .post-cat::before {
  display: none;
}

@media (max-width: 760px) {
  .post-single-hero .post-hero-media {
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 78%);
    mask-image: linear-gradient(180deg, transparent, #000 78%);
  }

  .post-single-hero .post-hero-media img {
    opacity: 0.22;
  }

  .post-single-hero::after {
    background-position: right 6% top 20%;
    background-size: 40px;
  }
}

.post-prose {
  max-width: 720px;
  margin-inline: auto;
}

.post-prose h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  margin: 40px 0 14px;
}

.post-prose p {
  margin: 0 0 20px;
  color: #33404c;
  font-size: 1.08rem;
  line-height: 1.72;
}

.post-prose ul {
  margin: 0 0 22px;
  padding-left: 22px;
  color: #33404c;
  line-height: 1.7;
}

.post-prose li {
  margin: 8px 0;
}

.post-share {
  max-width: 720px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.post-back {
  color: var(--signal);
  font-weight: 750;
  font-size: 0.9rem;
}

/* Certifications */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cert-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color 220ms ease, transform 220ms ease;
}

.cert-card:hover {
  transform: translateY(-3px);
  border-color: rgba(254, 76, 28, 0.5);
}

.cert-seal {
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at 50% 35%, #1a2530, #0b0f14);
  border: 3px solid var(--signal);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.04);
}

.cert-seal strong {
  font-family: var(--font-display);
  font-size: 0.82rem;
  line-height: 1.05;
  color: var(--white);
}

.cert-seal span {
  display: block;
  margin-top: 3px;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
}

.cert-card h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.cert-card p {
  margin: 0;
  color: var(--steel);
  font-size: 0.9rem;
  line-height: 1.5;
}

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

/* Blog / insights post grid */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, box-shadow 240ms ease;
}

.post-card:hover {
  transform: translateY(-5px);
  border-color: rgba(17, 57, 84, 0.4);
  box-shadow: 0 22px 50px rgba(8, 12, 18, 0.13);
}

.post-media {
  display: block;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(45deg, #12171d, #262e37);
}

.post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.post-card:hover .post-media img {
  transform: scale(1.06);
}

.post-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px;
}

.post-cat {
  color: var(--signal);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-card h3 {
  font-size: 1.08rem;
  line-height: 1.25;
  margin: 10px 0;
}

.post-card h3 a:hover {
  color: var(--signal);
}

.post-card p {
  flex: 1 1 auto;
  color: var(--steel);
  font-size: 0.9rem;
}

.post-date {
  margin-top: 16px;
  color: var(--steel);
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .video-grid,
  .post-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .video-grid,
  .post-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA band */
.cta-band {
  background:
    radial-gradient(circle at 80% 20%, rgba(254, 76, 28, 0.16), transparent 40%),
    var(--ink);
  color: var(--white);
  text-align: center;
}

.cta-band h2 {
  max-width: 720px;
  margin: 0 auto 16px;
}

.cta-band p {
  max-width: 620px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.72);
}

.cta-band .cta-row {
  justify-content: center;
}

@media (max-width: 980px) {
  .lead-in,
  .feature-split,
  .step-grid,
  .stat-row,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .feature-split.reverse .media-frame {
    order: 0;
  }

  .step-grid,
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .step-grid,
  .stat-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 980px) {
  .section-light,
  .resources-preview,
  .quality-section {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }
}

@media (max-width: 980px) {
  .menu-toggle {
    display: block;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .card-grid.three,
  .split-heading,
  .two-col,
  .storytelling,
  .rfq-grid,
  .process-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row.two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  :root {
    --container: min(100vw - 28px, 1120px);
  }

  .header-inner {
    min-height: 66px;
  }

  .button-small {
    display: none;
  }

  /* Keep the clamp scale in charge on mobile — no fixed-px override. */
  .hero-content {
    padding-block: 112px 84px;
  }

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

/* ============================================================
   404
   ============================================================ */
.error-404 {
  min-height: 66vh;
  display: flex;
  align-items: center;
}

.error-404 .lead {
  max-width: 620px;
}

.e404-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 32px;
  font-size: 0.9rem;
}

.e404-links span {
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}

.e404-links a {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 2px;
}

.e404-links a:hover {
  color: var(--signal);
  border-color: var(--signal);
}

/* RFQ form states */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-alert {
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.form-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  color: #991b1b;
}
.rfq-form label.is-invalid { color: #991b1b; }
.rfq-form label.is-invalid input,
.rfq-form label.is-invalid textarea,
.rfq-form label.is-invalid select {
  border-color: #dc2626;
  background: #fffafa;
}
.rfq-form label.is-invalid input:focus-visible,
.rfq-form label.is-invalid textarea:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--steel, #55606d);
  font-weight: 400;
}
.cf-turnstile { margin: 4px 0 8px; }

/* ============================================================
   Responsive typography & control refinements
   ============================================================ */

/* --- Breadcrumbs: always a single line --- */
.breadcrumbs {
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
}

.breadcrumbs a,
.breadcrumbs > span[aria-hidden="true"] {
  flex: 0 0 auto;
}

.breadcrumbs .crumb-current,
.breadcrumbs > span:last-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The home crumb is the first thing to give up room on narrow screens. */
@media (max-width: 520px) {
  .breadcrumbs {
    font-size: 0.72rem;
    gap: 6px;
  }
}

/* --- Headings and body: no orphan words --- */
h1, h2, h3, h4,
.page-hero h1,
.hero-industrial h1 {
  text-wrap: balance;
}

p, .lead, .page-hero .lead, .prose p {
  text-wrap: pretty;
}

/* --- Buttons: complete labels, matched widths --- */
.button {
  padding-block: 15px;
  line-height: 1.25;
  text-align: left;
  text-wrap: balance;
}

/* ============================================================
   BUTTON SYSTEM
   Two families, deliberately different:

   1. Full CTAs (.button-primary / .button-accent / .button-dark)
      Solid fill at rest. On hover the fill retracts from the right,
      uncovering the base colour and an arrow chip. Needs reserved
      padding on the right so the label never sits on the exposed strip.

   2. Compact CTA (.button-small, used in the header)
      No chip, no reserved padding, so the retracting fill would clip
      its label. Explicitly excluded — it just changes colour.
   ============================================================ */

/* ---- 1. Full CTAs ---- */
.button-primary:not(.button-small),
.button-accent:not(.button-small) {
  color: #10151b;
  background-color: #10151b;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

.button-dark:not(.button-small) {
  color: var(--white);
  background-color: var(--orange);
  background-image: linear-gradient(#10151b, #10151b);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

/* The chip carries only the arrow; the retracting fill exposes the base. */
.button-primary:not(.button-small)::after,
.button-accent:not(.button-small)::after,
.button-dark:not(.button-small)::after {
  background-color: transparent;
  opacity: 0;
}

.button-dark:not(.button-small)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310151b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* critical.css sets a `background` shorthand on :hover, which would reset
   background-image to none. Every hover state re-declares the fill. */
.button-primary:not(.button-small):hover,
.button-accent:not(.button-small):hover,
.button-primary:not(.button-small):focus-visible,
.button-accent:not(.button-small):focus-visible {
  color: #10151b;
  background-color: #10151b;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(100% - 52px) 100%;
}

.button-dark:not(.button-small):hover,
.button-dark:not(.button-small):focus-visible {
  color: var(--white);
  background-color: var(--orange);
  background-image: linear-gradient(#10151b, #10151b);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(100% - 52px) 100%;
}

.button-primary:not(.button-small):hover::after,
.button-accent:not(.button-small):hover::after,
.button-dark:not(.button-small):hover::after,
.button-primary:not(.button-small):focus-visible::after,
.button-accent:not(.button-small):focus-visible::after,
.button-dark:not(.button-small):focus-visible::after {
  opacity: 1;
}

/* ---- 2. Compact header CTA: solid, legible, no fill mechanics ---- */
.button-small.button-primary,
.button-small.button-accent {
  background-image: none;
  background-size: auto;
  background-color: var(--orange);
  color: #10151b;
}

.button-small.button-primary:hover,
.button-small.button-accent:hover,
.button-small.button-primary:focus-visible,
.button-small.button-accent:focus-visible {
  background-image: none;
  background-size: auto;
  background-color: #ff5a2e;
  color: #10151b;
}

.button-small.button-dark {
  background-image: none;
  background-size: auto;
  background-color: #10151b;
  color: var(--white);
}

.button-small.button-dark:hover,
.button-small.button-dark:focus-visible {
  background-image: none;
  background-size: auto;
  background-color: #000;
  color: var(--white);
}

/* ---- CTA rows: share a line when the labels fit, wrap to full width when not ---- */
.hero-cta-row {
  flex-wrap: wrap;
  align-items: stretch;
}

/* Desktop: buttons size to their label. Growing is a small-screen behaviour
   only, where two CTAs should share the row evenly. */
.hero-cta-row .button {
  flex: 0 0 auto;
  justify-content: flex-start;
}

/* ---- Small screens: a pair of CTAs always shares one row ----
   Below this width the arrow chip costs more than it adds, so it is dropped
   and the two buttons split the row exactly in half. Labels wrap and centre
   inside their half rather than pushing the second button onto a new line. */
@media (max-width: 620px) {
  .hero-cta-row,
  .cta-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .hero-cta-row > .button,
  .cta-row > .button {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    line-height: 1.3;
    padding-inline: 12px;
  }

  /* A single CTA keeps its natural width instead of stretching edge to edge. */
  .hero-cta-row > .button:only-child,
  .cta-row > .button:only-child {
    flex: 0 1 auto;
    justify-content: flex-start;
    text-align: left;
    padding-inline: 20px;
  }

  /* No chip at this size: it would eat half the label. */
  .hero-cta-row > .button-primary,
  .hero-cta-row > .button-accent,
  .hero-cta-row > .button-dark,
  .cta-row > .button-primary,
  .cta-row > .button-accent,
  .cta-row > .button-dark {
    padding-right: 12px;
    background-size: 100% 100%;
  }

  .hero-cta-row > .button::after,
  .cta-row > .button::after {
    display: none;
  }

  .hero-cta-row > .button:hover,
  .cta-row > .button:hover,
  .hero-cta-row > .button:focus-visible,
  .cta-row > .button:focus-visible {
    background-size: 100% 100%;
  }

  .button-small {
    padding-inline: 16px;
  }
}

/* Touch devices never hover, so the chip is dead weight: drop it and let two
   CTAs share a row. Tap gives a brief press instead. */
@media (hover: none) {
  .button-primary:not(.button-small),
  .button-accent:not(.button-small),
  .button-dark:not(.button-small) {
    padding-right: 20px;
  }

  .button-primary:not(.button-small)::after,
  .button-accent:not(.button-small)::after,
  .button-dark:not(.button-small)::after {
    display: none;
  }

  .button:active {
    filter: brightness(0.92);
  }
}

@media (max-width: 380px) {
  .button {
    font-size: 0.72rem;
    padding-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover {
    transform: none;
  }
}

/* ---- Footer credit ---- */
.footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms ease;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--orange);
}

/* ============================================================
   Unified card + closing-CTA treatment
   ============================================================ */

/* Card media scales with the column instead of a fixed strip. */
.post-media {
  aspect-ratio: 16 / 10;
  height: auto;
  min-height: 200px;
}

.card-grid.three .post-card,
.post-grid .post-card {
  display: flex;
  flex-direction: column;
}

/* ---- CTA labels: full wording on wide screens, short on narrow ---- */
.cta-label-short {
  display: none;
}

/* ---- Closing CTA band ---- */
.cta-band .cta-row {
  justify-content: center;
}

@media (max-width: 620px) {
  .cta-label-full {
    display: none;
  }

  .cta-label-short {
    display: inline;
  }

  /* The closing band is the one place a stacked layout reads better: a single
     full-width primary action, with the phone number as plain text beneath. */
  .cta-band .cta-row {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
  }

  .cta-band .cta-row > .button-primary,
  .cta-band .cta-row > .button-accent {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Phone CTA stops being a button and becomes a centred text link. */
  .cta-band .cta-row > .button-outline,
  .cta-band .cta-row > .button-outline-dark {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--white);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .cta-band .cta-row > .button-outline:hover,
  .cta-band .cta-row > .button-outline-dark:hover {
    background: none;
    border: 0;
    color: var(--orange);
    transform: none;
  }

  .cta-band .cta-row > .button-outline::after,
  .cta-band .cta-row > .button-outline-dark::after {
    display: none;
  }
}

/* ============================================================
   Scrollbars
   Thin, brand-tinted, and unobtrusive. The thumb is inset with a
   transparent border so it reads as a floating bar rather than a
   full-height gutter, and it picks up the signal colour on hover.
   .card-rail keeps its hidden scrollbar — that rule is more
   specific and still wins.
   ============================================================ */

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 113, 127, 0.55) var(--surface);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(102, 113, 127, 0.55);
  border: 2px solid var(--surface);
  border-radius: 8px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--orange);
}

::-webkit-scrollbar-thumb:active {
  background-color: #ff5a2e;
}

::-webkit-scrollbar-corner {
  background: var(--surface);
}

/* Dark surfaces need the inverse treatment or the bar punches a light
   hole through the panel. */
.contact-panel-body,
.mobile-menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.contact-panel-body::-webkit-scrollbar-track,
.mobile-menu::-webkit-scrollbar-track,
.contact-panel-body::-webkit-scrollbar-corner,
.mobile-menu::-webkit-scrollbar-corner {
  background: transparent;
}

.contact-panel-body::-webkit-scrollbar-thumb,
.mobile-menu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.28);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.contact-panel-body::-webkit-scrollbar-thumb:hover,
.mobile-menu::-webkit-scrollbar-thumb:hover {
  background-color: var(--orange);
}

/* Touch platforms draw their own overlay scrollbars; leave those alone. */
@media (hover: none) {
  html {
    scrollbar-width: auto;
  }
}