.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: var(--white);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-menu .m-flat {
  display: block;
  color: var(--ink);
  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: var(--ink);
}

.m-acc-ico {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  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: var(--ink);
}

.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. */
/* Open menu: the header stays on the dark ground the sheet continues. */
body.menu-open .site-header {
  background: var(--ink) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ============================================================
   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: var(--ink);
}

.contact-toggle:hover {
  background: #ff5a2e;
  color: var(--ink);
}

/* 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: var(--ink);
  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;
}

/* Title, links, description: three steps down in size, weight and contrast,
   so the panel reads as a hierarchy instead of three blocks of equal text. */
.mega-title {
  position: relative;
  margin: 0 0 14px;
  padding-top: 16px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}

.mega-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--signal);
}

.mega-lead p {
  max-width: 32ch;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.8rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.mega-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--signal);
  font-weight: 750;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  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: 11px 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.35;
  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: var(--ink);
}

.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: var(--ink);
  border-radius: var(--radius);
}

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


.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: var(--ink);
  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: var(--ink);
}

.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: var(--ink);
  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:not(.eyebrow) {
  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:not(.eyebrow) {
  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: var(--ink);
  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, var(--ink), #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)),
    var(--ink);
  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%),
    var(--ink);
  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),
    var(--ink);
  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%, var(--ink) 0%, var(--ink) 46%, var(--ink) 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 {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--ground-dark);
  color: rgba(255, 255, 255, 0.6);
  padding-block: clamp(48px, 6vw, 72px) 22px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.75fr;
  gap: 36px clamp(28px, 4vw, 56px);
  align-items: start;
}

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

.footer-grid > div:first-child p {
  margin: 18px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
}

.site-footer h2 {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer a {
  display: block;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.76rem;
  line-height: 1.45;
  transition: color 180ms ease;
}

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

.validation-note {
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.72rem;
  margin-top: 12px;
}

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

.footer-social a {
  width: 34px;
  height: 34px;
  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: var(--ink);
  transform: translateY(-3px);
}

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

.footer-bottom {
  margin-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Legal line: small tracked capitals, quieter than every link above it. */
.footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.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;
    gap: 8px;
  }
  .footer-credit {
    font-size: 0.64rem;
  }
}

/* ---- 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, var(--ink) 20%, transparent 72%);
  mask-image: radial-gradient(130% 100% at 100% 0, var(--ink) 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, var(--ink) 58%);
  mask-image: linear-gradient(90deg, transparent, var(--ink) 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, var(--ink) 80%);
    mask-image: linear-gradient(180deg, transparent, var(--ink) 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;
  }
}

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

/* Orange accent bar on the eyebrow inside heroes */

.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 */


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



@media (max-width: 980px) {
}

.lead-in .prose p:first-child {
  color: var(--ink);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  line-height: 1.55;
}

/* .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(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  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: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 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: var(--ink);
}

.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: var(--ink);
}

.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: var(--ink);
}

.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%, var(--ink) 0%, var(--ink) 50%, var(--ink) 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, var(--ink) 62%);
  mask-image: linear-gradient(90deg, transparent, var(--ink) 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, var(--ink) 20%, transparent 72%);
  mask-image: radial-gradient(130% 100% at 100% 0, var(--ink) 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: rgba(255, 255, 255, 0.5);
}

.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, var(--ink) 78%);
    mask-image: linear-gradient(180deg, transparent, var(--ink) 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, var(--ink));
  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, var(--ink), #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: var(--ground-dark);
  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);
  }

  /* Everything measured from the header uses the phone height. */
  :root {
    --header-h: 66px;
  }

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

  /* Only the header CTA gives way on phones; the menu carries it. */
  .header-actions .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: var(--ink);
  background-color: var(--ink);
  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(var(--ink), var(--ink));
  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: var(--ink);
  background-color: var(--ink);
  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(var(--ink), var(--ink));
  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: var(--ink);
}

.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: var(--ink);
}

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

.button-small.button-dark:hover,
.button-small.button-dark:focus-visible {
  background-image: none;
  background-size: auto;
  background-color: var(--ink);
  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 {
  font-size: 0.66rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.46);
}

.footer-credit a {
  display: inline;
  margin: 0;
  font-size: inherit;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  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;
  }
}

/* ============================================================
   Customer marquee
   Two identical tracks scroll left together; when the first has
   moved its own width the second sits exactly where it began, so
   the loop has no seam. Each logo carries its own optical height
   (--logo-h) so wide wordmarks and square emblems weigh the same.
   ============================================================ */

.client-marquee {
  display: flex;
  overflow: hidden;
  margin-top: 34px;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 9%, var(--ink) 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--ink) 9%, var(--ink) 91%, transparent);
}

.client-track {
  flex: none;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: client-scroll 46s linear infinite;
}

.client-marquee:hover .client-track {
  animation-play-state: paused;
}

.client-track li {
  flex: none;
  display: grid;
  place-items: center;
  width: 210px;
  height: 108px;
  padding: 0 28px;
}

.client-track img {
  height: var(--logo-h, 36px);
  width: auto;
  max-width: 142px;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.client-track li:hover img {
  opacity: 1;
  filter: none;
}

/* Brand without licensed artwork: set in type, in the same optical box. */
.client-wordmark {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--steel);
  opacity: 0.8;
  transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.client-track li:hover .client-wordmark {
  color: var(--ink-2);
  opacity: 1;
}

.client-note {
  margin: 18px 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--steel);
  max-width: 62ch;
}

@keyframes client-scroll {
  to {
    transform: translateX(-100%);
  }
}

@media (max-width: 620px) {
  .client-track {
    animation-duration: 34s;
  }
  .client-track li {
    width: 156px;
    height: 84px;
    padding: 0 18px;
  }
  .client-track img {
    height: calc(var(--logo-h, 36px) * 0.78);
    max-width: 112px;
  }
  .client-wordmark {
    font-size: 0.86rem;
  }
}

/* No motion requested: one static, centred row set instead of a loop. */
@media (prefers-reduced-motion: reduce) {
  .client-marquee {
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .client-track {
    flex-wrap: wrap;
    justify-content: center;
    animation: none;
  }
  .client-track[aria-hidden="true"] {
    display: none;
  }
}

/* ============================================================
   Industries carousel
   Image-led slides on a snap rail. No card box and no drop
   shadow: the photograph is the card. Hover answers with a slow
   push into the image, an orange rule drawn under it and the
   arrow stepping forward.
   ============================================================ */

.industry-showcase .section-heading {
  max-width: 640px;
  margin-bottom: 0;
}

.industry-showcase {
  padding-block: clamp(56px, 7vh, 80px);
  background: var(--white);
}

.industry-showcase .rail-head {
  margin-bottom: 26px;
}

.industry-showcase .section-heading h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.industry-showcase .section-heading p:not(.eyebrow) {
  font-size: 0.95rem;
}

.industry-rail {
  --slides: 3;
  --gap: 22px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--slides) - 1) * var(--gap)) / var(--slides));
  gap: var(--gap);
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}

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

.industry-rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.industry-slide {
  min-width: 0;
  scroll-snap-align: start;
}

.industry-slide > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.industry-slide-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.industry-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-user-drag: none;
}

.industry-slide-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.industry-slide-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 2px 0;
}

.industry-slide-index {
  margin: 0 0 8px;
  color: var(--steel);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.industry-slide-index span {
  color: var(--signal);
}

.industry-slide h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(0.96rem, 0.92rem + 0.2vw, 1.06rem);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  transition: color 260ms ease;
}

.industry-slide-copy {
  margin: 0 0 14px;
  color: var(--steel);
  font-size: 0.84rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.industry-slide-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  color: var(--signal);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.industry-slide-link svg {
  width: 16px;
  height: 16px;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .industry-slide > a:hover .industry-slide-media img {
    transform: scale(1.055);
  }
  .industry-slide > a:hover .industry-slide-media::after {
    transform: scaleX(1);
  }
  .industry-slide > a:hover h3 {
    color: var(--ink-2);
  }
  .industry-slide > a:hover .industry-slide-link svg {
    transform: translateX(5px);
  }
}

.industry-slide > a:focus-visible .industry-slide-media {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.industry-slide > a:focus-visible .industry-slide-media::after {
  transform: scaleX(1);
}

.rail-foot {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 24px;
}

.rail-progress {
  position: relative;
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: var(--line);
}

.rail-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: var(--signal);
  transition: transform 160ms linear, width 160ms linear;
}

.rail-foot .button {
  flex: none;
}

.industry-showcase .rail-btn:disabled {
  opacity: 0.32;
  cursor: default;
}

@media (max-width: 980px) {
  .industry-rail {
    --slides: 2.1;
    --gap: 20px;
  }
}

@media (max-width: 620px) {
  .industry-rail {
    --slides: 1.14;
    --gap: 16px;
  }
  .industry-showcase .rail-nav {
    display: none;
  }
  .industry-slide-copy {
    font-size: 0.95rem;
  }
  .rail-foot {
    gap: 18px;
    margin-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industry-rail {
    scroll-behavior: auto;
  }
  .industry-slide-media img,
  .industry-slide-media::after,
  .industry-slide-link svg,
  .rail-progress span {
    transition: none;
  }
}

/* ============================================================
   Capabilities showcase
   A vertical tab list drives a sticky stage: the capability's
   photograph with a light specification sheet floating over it,
   the way a product screen sits in a UI. The active tab's orange
   line is a CSS animation that doubles as the autoplay timer, so
   pausing the animation pauses the carousel with it.
   ============================================================ */

.cap-showcase {
  --cap-line: rgba(255, 255, 255, 0.1);
  background-color: var(--ground-dark);
}

.cap-showcase {
  padding-block: clamp(56px, 7vh, 80px);
}

.cap-heading {
  margin-bottom: 26px;
}

.cap-heading h2 {
  font-size: clamp(1.35rem, 1.12rem + 0.75vw, 1.72rem);
}

.cap-heading p:not(.eyebrow) {
  font-size: 0.95rem;
}

.cap-tabs {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 56px;
  align-items: center;
}

.cap-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--cap-line);
}

.cap-tab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  padding: 14px 18px 14px 22px;
  border: 0;
  border-bottom: 1px solid var(--cap-line);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 300ms ease, background-color 300ms ease;
}

/* The resting rail the progress line runs along. */
.cap-tab::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--cap-line);
}

.cap-tab-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--signal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cap-tab-index {
  grid-row: 1 / span 2;
  padding-top: 5px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease;
}

.cap-tab-title {
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.12rem);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.cap-tab-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cap-tab-copy {
  min-height: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.86rem;
  line-height: 1.5;
  text-wrap: pretty;
  transition: padding-top 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cap-tab[aria-selected="true"] {
  color: var(--white);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 70%);
}

.cap-tab[aria-selected="true"] .cap-tab-index {
  color: var(--signal);
}

.cap-tab[aria-selected="true"] .cap-tab-body {
  grid-template-rows: 1fr;
}

.cap-tab[aria-selected="true"] .cap-tab-copy {
  padding-top: 6px;
}

.cap-tab[aria-selected="true"] .cap-tab-progress {
  transform: scaleY(1);
}

/* Autoplay: the line fills over the dwell time, then JS moves on. */
.cap-tabs.is-playing .cap-tab[aria-selected="true"] .cap-tab-progress {
  animation: cap-progress 7s linear forwards;
}

.cap-tabs.is-paused .cap-tab-progress {
  animation-play-state: paused;
}

@keyframes cap-progress {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@media (hover: hover) {
  .cap-tab:hover:not([aria-selected="true"]) {
    color: rgba(255, 255, 255, 0.84);
  }
}

.cap-tab:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

.cap-all {
  margin-top: 22px;
}


/* ---- Stage ---- */

.cap-stage {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.cap-panel {
  position: relative;
  outline: none;
}

.cap-panel:not([hidden]) {
  animation: cap-in 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cap-panel:focus-visible .cap-shot {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

@keyframes cap-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cap-shot {
  margin: 0;
  aspect-ratio: 4 / 3;
  max-height: calc(100vh - var(--header-h) - 120px);
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--cap-line);
  border-radius: var(--radius);
  background: var(--ink);
}

.cap-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cap-panel:not([hidden]) .cap-shot img {
  animation: cap-settle 1600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cap-settle {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

.cap-sheet {
  position: absolute;
  left: 22px;
  bottom: 22px;
  width: min(64%, 430px);
  padding: 16px 20px 18px;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.cap-sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--steel);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cap-sheet-head span:first-child {
  color: var(--ink);
}

.cap-sheet-head span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cap-sheet-copy {
  display: none;
}

.cap-sheet-rows {
  margin: 0;
}

.cap-sheet-rows div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.cap-sheet-rows dt {
  padding-top: 2px;
  color: var(--steel);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cap-sheet-rows dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.45;
}

.cap-sheet-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.cap-sheet-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-sheet-pills li {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-2);
  font-size: 0.68rem;
  font-weight: 600;
}

.cap-sheet-link {
  margin-left: auto;
}

@media (max-width: 1100px) {
  .cap-tabs {
    gap: 0 36px;
  }
  .cap-sheet {
    width: min(74%, 430px);
  }
}

/* Narrow screens: the list becomes a row of chips above the stage, and the
   sheet stops floating so nothing covers the photograph. */
@media (max-width: 900px) {
  .cap-heading {
    margin-bottom: 30px;
  }
  .cap-tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .cap-list {
    flex-direction: row;
    gap: 8px;
    padding: 2px 0 4px;
    overflow-x: auto;
    border-top: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .cap-list::-webkit-scrollbar {
    display: none;
  }
  .cap-tab {
    flex: none;
    grid-template-columns: auto;
    width: auto;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    scroll-snap-align: start;
  }
  .cap-tab::before,
  .cap-tab-progress,
  .cap-tab-body {
    display: none;
  }
  .cap-tab-index {
    grid-row: auto;
    padding-top: 0;
    font-size: 0.66rem;
  }
  .cap-tab-title {
    font-size: 0.88rem;
    white-space: nowrap;
  }
  .cap-tab[aria-selected="true"] {
    border-color: var(--white);
    background: var(--white);
    color: var(--ink);
  }
  .cap-all {
    display: none;
  }
  .cap-stage {
    position: static;
  }
  .cap-sheet {
    position: static;
    width: auto;
    margin-top: 12px;
    box-shadow: none;
  }
  .cap-sheet-copy {
    display: block;
    margin: 12px 0 4px;
    color: var(--steel);
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

@media (max-width: 620px) {
  .cap-shot {
    aspect-ratio: 4 / 3;
  }
  .cap-sheet {
    padding: 14px 16px 16px;
  }
  .cap-sheet-rows div {
    grid-template-columns: 84px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cap-panel:not([hidden]),
  .cap-panel:not([hidden]) .cap-shot img {
    animation: none;
  }
  .cap-tab,
  .cap-tab-body,
  .cap-tab-copy,
  .cap-tab-progress {
    transition: none;
  }
}

/* ============================================================
   Component families
   A drafting-table grid: dashed outlines offset into the gaps
   meet halfway, so the tiles sit on one continuous guide grid.
   ============================================================ */

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

.family-head {
  max-width: 620px;
  margin-bottom: 40px;
}

.family-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 10px;
  list-style: none;
}

.family-grid > li {
  outline: 1px dashed rgba(16, 21, 27, 0.14);
  outline-offset: 10px;
}

.family-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 218px;
  padding: 24px 26px 22px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.family-index {
  position: absolute;
  top: 22px;
  right: 24px;
  color: var(--steel);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.family-icon {
  width: 68px;
  height: 68px;
  margin: -4px 0 0 -8px;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.family-tile h3 {
  margin: auto 0 0;
  padding-top: 26px;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}

.family-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--signal);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1), margin 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

.family-go svg {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  .family-tile:hover {
    background: var(--white);
  }
  .family-tile:hover .family-icon {
    transform: translateY(-4px);
  }
  .family-tile:hover .family-go {
    height: 18px;
    margin-top: 10px;
    opacity: 1;
  }
}

.family-tile:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.family-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 218px;
  padding: 24px 26px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
}

.family-cta-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.family-cta h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.family-icon--small {
  width: 44px;
  height: 44px;
  margin: 0;
}

.family-cta-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.family-cta-foot p {
  max-width: 24ch;
  margin: 0;
  color: var(--steel);
  font-size: 0.86rem;
  line-height: 1.5;
}

.family-cta-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 220ms ease, color 220ms ease;
}

.family-cta-link:hover,
.family-cta-link:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

@media (max-width: 900px) {
  .family-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .family-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 7px;
  }
  .family-grid > li {
    outline-offset: 7px;
  }
  .family-tile {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding: 16px 44px 16px 14px;
  }
  .family-icon {
    flex: none;
    width: 46px;
    height: 46px;
    margin: 0;
  }
  .family-tile h3 {
    margin: 0;
    padding: 0;
  }
  .family-index {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }
  .family-go {
    display: none;
  }
  .family-cta {
    min-height: 0;
    gap: 18px;
  }
  .family-cta-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   How we work
   Four steps on one ruled line. Nodes sit on the rule, the rule
   draws itself in once when the section arrives.
   ============================================================ */

.process-section {
  background: var(--white);
}

.process-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: 56px;
}

.process-head .section-heading {
  margin: 0;
}

.process-lead {
  max-width: 52ch;
  margin: 0;
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.65;
}

.process-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-line::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 20px;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--signal), rgba(254, 76, 28, 0.25) 60%, var(--line));
  transform-origin: left;
}

html.motion .process-line::before {
  transform: scaleX(0);
  transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

html.motion .process-line.is-visible::before {
  transform: scaleX(1);
}

.process-line li {
  position: relative;
}

.process-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.process-line li:first-child .process-node {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--white);
}

.process-line h3 {
  margin: 22px 0 8px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
}

.process-line p {
  max-width: 30ch;
  margin: 0;
  color: var(--steel);
  font-size: 0.92rem;
  line-height: 1.55;
}

.process-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}


@media (max-width: 900px) {
  .process-head {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 40px;
  }
  .process-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding-left: 58px;
  }
  .process-line::before {
    top: 20px;
    bottom: 20px;
    left: 19px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--signal), var(--line));
    transform-origin: top;
  }
  html.motion .process-line::before {
    transform: scaleY(0);
  }
  html.motion .process-line.is-visible::before {
    transform: scaleY(1);
  }
  .process-node {
    position: absolute;
    top: 0;
    left: -58px;
  }
  .process-line h3 {
    margin-top: 8px;
  }
  .process-line p {
    max-width: none;
  }
}

/* ============================================================
   Resources
   Three latest articles in tall frames, the middle one set on a
   brand tile, and a quiet tile that opens the archive.
   ============================================================ */

.news-section {
  background: var(--white);
}

.news-head {
  margin-bottom: 32px;
}

.news-head h2 {
  max-width: none;
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem);
}

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

.news-card > a {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.news-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card--brand .news-media {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 24px;
  background: var(--signal);
  color: var(--ink);
}

.news-card--brand .news-media::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(11, 14, 19, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 36px rgba(11, 14, 19, 0.04);
}

.news-logo {
  width: 130px;
  height: auto;
}

.news-brand-cat {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  font-weight: 600;
  line-height: 1.1;
}

.news-brand-date {
  margin-top: 14px;
  color: rgba(11, 14, 19, 0.64);
  font-size: 0.86rem;
}

.news-cat {
  display: block;
  margin-top: 16px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
}

.news-card h3 {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
  transition: color 240ms ease;
}

.news-all {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms ease;
}

.news-all span {
  max-width: 8ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
}

.news-all svg {
  align-self: flex-end;
  width: 28px;
  height: 28px;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .news-card > a:hover .news-media img {
    transform: scale(1.05);
  }
  .news-card > a:hover h3 {
    color: var(--ink-2);
  }
  .news-all:hover {
    border-color: var(--signal);
    background: var(--white);
  }
  .news-all:hover svg {
    transform: translate(4px, 4px);
    color: var(--signal);
  }
}

.news-card > a:focus-visible .news-media,
.news-all:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
  .news-all {
    aspect-ratio: auto;
    min-height: 180px;
  }
}

@media (max-width: 560px) {
  .news-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .news-media {
    aspect-ratio: 16 / 10;
  }
  .news-all {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    padding: 22px 24px;
  }
  .news-all span {
    max-width: none;
    font-size: 1.3rem;
  }
  .news-all svg {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .family-tile,
  .family-icon,
  .family-go,
  .news-media img,
  .news-all,
  .news-all svg {
    transition: none;
  }
}

/* ============================================================
   Cookie consent
   A small card in the lower-left corner: equal-weight choices,
   no page overlay, slides in once and stays out of the way.
   ============================================================ */

.consent {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;
  width: min(330px, calc(100vw - 40px));
  padding: 16px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 14px 36px rgba(8, 12, 18, 0.16);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.consent.is-open {
  opacity: 1;
  transform: none;
}

.consent-title {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.consent-copy {
  margin: 0 0 12px;
  color: var(--steel);
  font-size: 0.8rem;
  line-height: 1.5;
}

.consent-actions {
  display: flex;
  gap: 8px;
}

.consent-btn {
  flex: 1 1 0;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.consent-btn:hover {
  background: var(--surface);
}

.consent-btn--accept {
  background: var(--ink);
  color: var(--white);
}

.consent-btn--accept:hover {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--ink);
}

.consent-btn:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.footer-consent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit; /* buttons reset these; the legal line sets them */
  cursor: pointer;
  transition: color 180ms ease;
}

/* Same register as the legal line it sits in. */
.footer-bottom .footer-consent {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-consent:hover,
.footer-consent:focus-visible {
  color: var(--white);
}

@media (max-width: 560px) {
  .consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent {
    transition: none;
  }
}

/* ============================================================
   Brand guides
   Two hairlines outside the content column, with a gutter so no
   text ever touches them. Mid-grey at low alpha reads on both the
   light and the dark sections, so one pair runs the whole page.
   ============================================================ */

.site-main {
  position: relative;
}

.site-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(var(--guide), var(--guide)), linear-gradient(var(--guide), var(--guide));
  background-size: 1px 100%, 1px 100%;
  background-repeat: no-repeat;
  background-position: calc(50% - var(--guide-x)) 0, calc(50% + var(--guide-x)) 0;
}

@media (max-width: 1240px) {
  .site-main::before {
    display: none;
  }
}

/* ============================================================
   Home rhythm: white, then the one grey, then the one black.
   ============================================================ */

.client-section {
  background: var(--white);
  text-align: center;
}

.client-section .section-heading,
.client-section .section-heading h2,
.client-section .section-heading p,
.client-note {
  margin-inline: auto;
}

.news-section {
  border-top: 1px solid var(--line);
}

.news-card--brand .news-logo {
  width: 132px;
  height: auto;
  object-fit: contain;
}

/* The logo strip runs between the brand guides, not across them. */
@media (min-width: 1241px) {
  .client-marquee {
    width: calc(var(--guide-x) * 2);
    margin-inline: auto;
  }
}

@media (min-width: 1241px) {
  .page-hero::after {
    background-position:
      right 8% top 30%,
      calc(50% - var(--guide-x) + 19px) 100px,
      calc(50% + var(--guide-x) - 19px) calc(100% - 34px);
  }
}

/* Header CTA: one line, always. .button clips overflow, which lets a flex
   item shrink below its label, and text-wrap: balance on buttons resets the
   wrap mode, so both are restated here. */
.header-actions .button-small {
  flex: none;
  white-space: nowrap;
  text-wrap: nowrap;
}

/* Narrow desktops: the contact panel stays reachable from the menu, and the
   column keeps room for six items and the CTA. */
@media (min-width: 901px) and (max-width: 1180px) {
  .header-inner {
    gap: 16px;
  }
  .header-actions .contact-toggle {
    display: none;
  }
}

/* ============================================================
   Interior pages
   The home's components carried to every template: labels,
   image-led cards, ruled process line, spec rows, tiles.
   ============================================================ */

/* Labels on dark grounds. */
.section-dark .eyebrow,
.page-hero .eyebrow,
.contact-panel .eyebrow,
.hero-industrial .eyebrow,
.cap-showcase .eyebrow,
.cta-band .eyebrow {
  color: rgba(255, 255, 255, 0.5);
}

/* Headings carry no second colour; the closing band keeps its one accent. */
.hl {
  color: inherit;
}

.cta-band .hl {
  color: var(--signal);
}

/* Image-led cards, as in the home's industry carousel. */
.info-card {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}

.info-card:hover,
.section-dark .info-card,
.section-dark .info-card:hover {
  transform: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.info-card:not(:has(.card-media)) {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.info-card .card-media {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 10;
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.info-card .card-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.info-card .card-media img {
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .info-card:hover .card-media img {
    transform: scale(1.055);
  }
  .info-card:hover .card-media::after {
    transform: scaleX(1);
  }
}

.card-kicker {
  display: block;
  margin: 0 0 8px;
  color: var(--steel);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.info-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(0.96rem, 0.92rem + 0.2vw, 1.06rem);
  line-height: 1.2;
}

.info-card p {
  margin: 0 0 14px;
  font-size: 0.84rem;
  line-height: 1.55;
}

.info-card .text-link {
  margin-top: auto;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Pills: quiet tags. */
.pill-list li {
  padding: 5px 10px;
  border-color: var(--line);
  background: var(--surface);
  font-size: 0.72rem;
}

.section-light .pill-list li {
  background: var(--white);
}

/* Spec sheet: ruled rows, no floating card. */
.two-col .content-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.spec-table tr:first-child th,
.spec-table tr:first-child td {
  border-top: 1px solid var(--line);
}

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

.spec-table th {
  width: 34%;
  padding-right: 20px;
  color: var(--steel);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.spec-table td {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Related: tiles, as in the home's component families. */
.related-card {
  padding: 22px 52px 22px 22px;
  border: 0;
  background: var(--surface-2);
  box-shadow: none;
  transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.related-card::before {
  display: none;
}

.related-card:hover {
  border: 0;
  background: var(--white);
  transform: none;
  box-shadow: none;
}

.rc-num {
  margin-bottom: 12px;
  color: var(--steel);
  font-family: var(--font-body);
  font-size: 0.66rem;
}

.related-card strong {
  font-size: 1rem;
  font-weight: 600;
}

.rc-copy {
  font-size: 0.84rem;
}

/* Process line in interior sections, with however many steps it has. */
.process-line {
  grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
}

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

/* Certifications: the code set in type, rows ruled like the spec sheet. */
.cert-grid {
  gap: 0 48px;
}

.cert-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 22px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cert-code {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
}

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

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

@media (max-width: 900px) {
  .process-line {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .cert-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* One consistent step from label to heading. */
.eyebrow + h1,
.eyebrow + h2 {
  margin-top: 14px;
}

/* ============================================================
   Cards everywhere: the whole product in frame, a quiet hover.
   Scoped one step deeper than motion.css so its lift and shadow
   no longer apply.
   ============================================================ */

body .info-card .card-media {
  background: var(--white);
  border: 1px solid var(--line);
}

body .info-card .card-media img {
  object-fit: contain;
  padding: 12px;
}

body .info-card:hover,
body .info-card:active,
body .info-card:focus-within {
  transform: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.info-card:not(:has(.card-media)):hover {
  border-top-color: var(--line);
}

@media (hover: hover) {
  body .info-card:hover .card-media img {
    transform: scale(1.03);
  }
  body .info-card:hover h3 {
    color: var(--ink);
  }
}

/* Blog cards: the home's Resources register on the index, search and
   an article's related reading. */
body .post-card {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body .post-card:hover,
body .post-card:active,
body .post-card:focus-within {
  transform: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body .post-card .post-media {
  border-radius: var(--radius);
}

body .post-card .post-body {
  padding: 14px 0 0;
}

body .post-card .post-cat {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body .post-card h3 {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.35;
}

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

body .post-card .post-date {
  margin-top: 10px;
  font-size: 0.72rem;
}

@media (hover: hover) {
  body .post-card:hover .post-media img {
    transform: scale(1.04);
  }
}

/* ============================================================
   Insights index
   One featured article per page, the rest in the home's
   Resources register; square filter chips.
   ============================================================ */

.blog-toolbar {
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.blog-filter button {
  border-radius: var(--radius);
  font-size: 0.74rem;
  font-weight: 600;
}

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

.blog-count {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-blog] .post-grid {
  gap: 44px 24px;
}

[data-blog] .post-card p {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--steel);
  font-size: 0.84rem;
  line-height: 1.55;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

[data-blog] .post-card.is-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}

[data-blog] .post-card.is-featured .post-media {
  aspect-ratio: 16 / 9;
}

[data-blog] .post-card.is-featured .post-body {
  padding: 0;
}

[data-blog] .post-card.is-featured h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

[data-blog] .post-card.is-featured p {
  margin-top: 14px;
  font-size: 0.95rem;
  -webkit-line-clamp: 4;
}

.blog-pagination {
  margin-top: 56px;
}

.blog-pagination button {
  border-radius: var(--radius);
}

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

/* ============================================================
   Article
   ============================================================ */

.reading-progress {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 60;
  height: 2px;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  height: 100%;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
}

.post-single-hero h1 {
  max-width: 22ch;
  margin-bottom: 18px;
}

.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-body-section {
  background: var(--white);
}

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.post-aside {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.post-toc ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.post-toc a {
  position: relative;
  display: block;
  padding: 7px 0 7px 16px;
  color: var(--steel);
  font-size: 0.8rem;
  line-height: 1.4;
  transition: color 200ms ease;
}

.post-toc a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--signal);
  transform: scaleY(0);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.post-toc a:hover,
.post-toc a.is-active {
  color: var(--ink);
}

.post-toc a.is-active::before {
  transform: scaleY(1);
}

.post-quote-card {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
}

.post-quote-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
}

.post-quote-card p:not(.post-quote-title) {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.8rem;
  line-height: 1.5;
}

.post-share-links {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.post-share-links a,
.post-share-links button {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.post-share-links a:hover,
.post-share-links button:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.post-share-links svg {
  width: 15px;
  height: 15px;
}

.post-copied {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-size: 0.64rem;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Reading column */
.post-prose {
  max-width: 70ch;
  color: rgba(11, 14, 19, 0.82);
  font-size: 1.04rem;
  line-height: 1.75;
}

.post-prose > p:first-of-type {
  color: var(--ink);
  font-size: clamp(1.12rem, 1.04rem + 0.3vw, 1.26rem);
  line-height: 1.6;
}

.post-prose p {
  margin: 0 0 1.3em;
}

.post-prose h2 {
  margin: 2.2em 0 0.6em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem);
  line-height: 1.2;
  scroll-margin-top: calc(var(--header-h) + 28px);
}

.post-prose h3 {
  margin: 1.8em 0 0.5em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.3;
}

.post-prose strong {
  color: var(--ink);
}

.post-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}

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

.post-prose ul,
.post-prose ol {
  margin: 0 0 1.4em;
  padding-left: 1.2em;
}

.post-prose ul {
  list-style: none;
  padding-left: 0;
}

.post-prose ul li {
  position: relative;
  padding-left: 20px;
}

.post-prose ul li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 2px;
  width: 5px;
  height: 5px;
  background: var(--signal);
}

.post-prose ol li::marker {
  color: var(--steel);
  font-weight: 600;
}

.post-prose li {
  margin-bottom: 0.5em;
}

.post-prose blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--signal);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.45;
}

.post-prose img,
.post-prose figure {
  margin: 2em 0;
  border-radius: var(--radius);
}

.post-prose table {
  width: 100%;
  margin: 2em 0;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.post-prose th,
.post-prose td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.post-prose th {
  color: var(--steel);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-end {
  max-width: 70ch;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.post-related {
  background: var(--surface);
}

@media (max-width: 980px) {
  .post-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-aside {
    position: static;
    order: 2;
  }
  .post-toc {
    display: none;
  }
  [data-blog] .post-card.is-featured {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-toc a::before {
    transition: none;
  }
}

/* The byline carries its own separators. */
.post-byline span::before,
.post-byline span::after {
  content: none;
}

.post-prose > :first-child {
  margin-top: 0;
}

/* ============================================================
   Legal page and privacy links
   ============================================================ */

.post-prose > p.legal-updated {
  margin-bottom: 18px;
  color: var(--steel);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.post-prose > p.legal-intro {
  color: var(--ink);
  font-size: clamp(1.08rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.6;
}

.legal-section .post-prose h2 {
  font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.4rem);
}

.legal-inline-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.legal-inline-button:hover {
  color: var(--signal);
}

.footer-bottom .footer-legal-link {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  transition: color 180ms ease;
}

.footer-bottom .footer-legal-link:hover {
  color: var(--white);
}

.consent-copy a,
.checkbox-row a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-underline-offset: 2px;
}

/* ============================================================
   Drop zone
   ============================================================ */

.dropzone {
  display: grid;
  gap: 8px;
}

.dropzone-label {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
}

.dropzone-area {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 20px;
  border: 1px dashed rgba(102, 113, 127, 0.5);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, padding 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dropzone-area:hover,
.dropzone.is-dragover .dropzone-area {
  border-color: var(--signal);
  background: rgba(254, 76, 28, 0.04);
}

.dropzone.is-dragover .dropzone-area {
  border-style: solid;
}

.dropzone-area:focus-within {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* The input covers the zone, so a click or a native drop anywhere selects. */
.dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
}

.dropzone.is-dragover .dropzone-icon {
  color: var(--signal);
  transform: translateY(-3px);
}

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

.dropzone-text {
  color: var(--ink);
  font-size: 0.86rem;
}

.dropzone-text strong {
  font-weight: 600;
}

.dropzone-browse {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dropzone-hint {
  color: var(--steel);
  font-size: 0.72rem;
}

.dropzone.has-file .dropzone-area {
  padding: 14px 20px;
}

.dropzone.has-file .dropzone-icon,
.dropzone.has-file .dropzone-hint {
  display: none;
}

.dropzone-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.dropzone-file-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.dropzone-file-icon svg {
  width: 17px;
  height: 17px;
}

.dropzone-file-meta {
  display: grid;
  flex: 1;
  min-width: 0;
}

.dropzone-file-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropzone-file-size {
  color: var(--steel);
  font-size: 0.72rem;
}

.dropzone-remove {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.dropzone-remove:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.dropzone-remove svg {
  width: 14px;
  height: 14px;
}

.dropzone-error {
  margin: 0;
  color: #991b1b;
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .dropzone-area,
  .dropzone-icon {
    transition: none;
  }
}

/* ============================================================
   Block CTAs: one action where a reader is ready for it.
   ============================================================ */

.block-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 26px;
}

.block-cta--center {
  justify-content: center;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.block-cta-note {
  color: var(--steel);
  font-size: 0.8rem;
}

.section-dark .block-cta-note {
  color: rgba(255, 255, 255, 0.62);
}

.faq-list + .block-cta--center {
  max-width: 820px;
  margin-inline: auto;
}

/* The first credential sits on the content column; the brand guide already
   draws the edge, so it needs no rule of its own. */
.trust-grid > .trust-item:first-child {
  padding-left: 0;
  border-left: 0;
}

/* ===== Mobile pass ==================================================== */

/* Footer columns: summary is the heading; folding only happens on phones. */
.footer-col > summary {
  display: block;
  list-style: none;
  cursor: default;
}

.footer-col > summary::-webkit-details-marker {
  display: none;
}

.footer-col > summary h2 {
  margin: 0 0 18px;
}

/* Menu: a full-height sheet under the header, the page stays put. */
.mobile-menu {
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

html:has(.mobile-menu:not([hidden])) {
  overflow: hidden;
}

/* Long breadcrumbs end in an ellipsis instead of pushing the page wide. */
.breadcrumbs {
  max-width: 100%;
  overflow: hidden;
}

.breadcrumbs .crumb-current {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  /* Capabilities as an accordion: rows, a chevron, the stage under the open row. */
  .cap-list {
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: visible;
    border-top: 1px solid var(--cap-line);
  }
  .cap-tab {
    width: 100%;
    padding: 16px 32px 16px 0;
    border: 0;
    border-bottom: 1px solid var(--cap-line);
    border-radius: 0;
    background: none;
    color: rgba(255, 255, 255, 0.7);
  }
  .cap-tab::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cap-tab[aria-selected="true"] {
    border-color: transparent;
    background: none;
    color: var(--white);
  }
  .cap-tab[aria-selected="true"]::after {
    transform: translateY(-30%) rotate(-135deg);
  }
  .cap-tab-title {
    font-size: 0.98rem;
    white-space: normal;
  }
  .cap-list > .cap-stage {
    padding: 2px 0 22px;
    border-bottom: 1px solid var(--cap-line);
  }
}

@media (max-width: 620px) {
  .section {
    padding-block: 48px;
  }
  .section-heading,
  .split-heading {
    margin-bottom: 24px;
  }

  /* Footer accordions */
  .footer-grid {
    gap: 0;
  }
  .footer-grid > div:first-child {
    margin-bottom: 28px;
  }
  .footer-col {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer-col:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer-col > summary {
    position: relative;
    padding: 16px 28px 16px 0;
    cursor: pointer;
  }
  .footer-col > summary h2 {
    margin: 0;
  }
  .footer-col > summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.7);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .footer-col[open] > summary::after {
    transform: translateY(-30%) rotate(-135deg);
  }
  .footer-links {
    padding-bottom: 14px;
  }

  /* Article */
  .post-single-hero h1 {
    font-size: var(--h1);
  }
  .post-prose {
    font-size: 0.95rem;
    line-height: 1.7;
  }
  .post-prose > p:first-of-type {
    font-size: 1rem;
  }
  .post-prose h2 {
    font-size: 1.18rem;
  }

  /* Insights filter: one scrollable row instead of pushing the page wide. */
  .blog-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .blog-filter {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .blog-filter::-webkit-scrollbar {
    display: none;
  }
  .blog-filter button {
    flex: none;
  }
}

/* Home section headings follow the phone scale like every other h2. */
@media (max-width: 620px) {
  .industry-showcase .section-heading h2,
  .cap-heading h2,
  .news-head h2,
  .family-head h2,
  .process-head h2,
  .client-section .section-heading h2 {
    font-size: var(--h2);
  }
  .industry-showcase .section-heading p:not(.eyebrow),
  .cap-heading p:not(.eyebrow) {
    font-size: 0.88rem;
  }
}

/* Closed contact panel: off screen with no shadow leaking into the page,
   and out of the tab order until it opens. */
.contact-panel {
  visibility: hidden;
  box-shadow: none;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 320ms;
}

.contact-panel.is-open {
  visibility: visible;
  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.3);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* An aspect ratio plus a minimum height forces a minimum width; the card
   frame is sized by its column alone. */
body .post-card .post-media {
  min-height: 0;
  width: 100%;
}

/* Pagination on phones: compact squares that wrap instead of running wide. */
@media (max-width: 620px) {
  .blog-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .blog-pagination button {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 0.78rem;
  }
}

/* ===== Mobile pass 2 ================================================== */

/* Menu toggle: three lines, no box, folding into an X when open. */
.menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.menu-toggle span:not(.screen-reader-text) {
  position: absolute;
  left: 11px;
  right: 11px;
  width: auto;
  height: 2px;
  margin: 0;
  background: currentColor;
  transition: top 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.menu-toggle span:nth-child(1) { top: 15px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 27px; }

.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.menu-toggle:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* Menu sheet: the header's dark ground, large quiet links, one CTA. */
.mobile-menu {
  display: flex;
  flex-direction: column;
  padding: 10px 20px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--ink);
  color: var(--white);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu .m-flat,
.mobile-menu .m-acc-head {
  padding: 16px 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.mobile-menu .m-flat,
.mobile-menu .m-acc {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.mobile-menu .m-acc-ico {
  border-color: rgba(255, 255, 255, 0.8);
}

.mobile-menu .m-acc-body .m-sub {
  padding: 9px 0 9px 2px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.mobile-menu .m-acc-body .m-sub:hover {
  color: var(--white);
}

.mobile-menu .m-acc-body .m-sub--all {
  color: var(--signal);
}

.mobile-menu .button {
  margin-top: 26px;
}

.m-contact {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}

.mobile-menu .m-contact a {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.86rem;
}

.mobile-menu .m-contact a:hover {
  color: var(--white);
}

@keyframes m-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mobile-menu:not([hidden]) > * {
  animation: m-in 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mobile-menu:not([hidden]) > :nth-child(2) { animation-delay: 30ms; }
.mobile-menu:not([hidden]) > :nth-child(3) { animation-delay: 60ms; }
.mobile-menu:not([hidden]) > :nth-child(4) { animation-delay: 90ms; }
.mobile-menu:not([hidden]) > :nth-child(5) { animation-delay: 120ms; }
.mobile-menu:not([hidden]) > :nth-child(6) { animation-delay: 150ms; }
.mobile-menu:not([hidden]) > :nth-child(7) { animation-delay: 180ms; }
.mobile-menu:not([hidden]) > :nth-child(8) { animation-delay: 210ms; }

/* Article byline: the old dot separators give way to the markup's own. */
.post-byline > span + span {
  padding-left: 0;
}

.post-byline > span + span::before {
  content: none;
}

/* Every paragraph of an article reads the same; only the first leads. */
.post-body-section .post-prose p {
  color: inherit;
  font-size: inherit;
}

.post-body-section .post-prose > p:first-of-type {
  color: var(--ink);
}

@media (max-width: 620px) {
  /* The hero keeps its own clearance under the header. */
  .page-hero {
    padding-top: calc(var(--header-h) + 36px);
    padding-bottom: 44px;
  }

  .lead-in,
  .feature-split {
    gap: 18px;
  }

  .post-single-hero {
    padding-top: calc(var(--header-h) + 32px);
  }

  .post-byline {
    font-size: 0.64rem;
  }

  .post-prose {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .post-body-section .post-prose > p:first-of-type {
    font-size: 0.96rem;
  }

  .post-prose h2 {
    margin-top: 1.8em;
    font-size: 1.08rem;
  }

  .post-prose h3 {
    font-size: 0.98rem;
  }

  /* Footer end: one light line of small print, not a block of capitals. */
  .footer-bottom {
    gap: 6px;
    margin-top: 28px;
    padding-top: 16px;
  }

  .footer-bottom p,
  .footer-bottom .footer-credit {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.6;
  }

  .footer-bottom .footer-consent {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu:not([hidden]) > * {
    animation: none;
  }
  .menu-toggle span:not(.screen-reader-text) {
    transition: none;
  }
}

/* Phones: hero ornaments step aside so they never sit on the breadcrumbs. */
@media (max-width: 620px) {
  .page-hero::after,
  .post-single-hero::after {
    display: none;
  }
}


/* ======================================================================
   Colombia-only components
   Carried from the previous Colombia theme: the certificate band with the
   official logos, the drawing-label, credentials strip and quote bar.
   ====================================================================== */

.section-heading--center {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.cert-logos {
  display: flex;
  justify-content: center;
  margin: 34px auto 40px;
  padding: 30px 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 680px;
}

.cert-logos img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.cert-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.cert-item {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
}

.cert-item h3 {
  font-size: 1.02rem;
  margin: 0 0 6px;
}

.cert-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--steel);
}

@media (max-width: 860px) {
  .cert-items { grid-template-columns: 1fr; text-align: center; }
  .cert-logos { padding: 22px 24px; margin: 26px auto 30px; }
}

/* ---- Crédito del pie: pequeño, en una línea, sin subrayado ---- */
.footer-credit {
  font-size: 0.78rem;
  white-space: nowrap;
  opacity: 0.66;
}

.footer-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
  white-space: nowrap;
}

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

@media (max-width: 620px) {
  .footer-credit { font-size: 0.72rem; }
}

/* ---- Marcas para las que hemos fabricado ---- */

/* ============================================================
   LENGUAJE DE PLANO
   El vocabulario visual de este negocio es el plano de taller:
   líneas de cota, bloques de título, etiquetas en monoespaciada.
   Estos componentes lo usan en vez de decoración genérica.
   ============================================================ */

/* ---- Línea de cota: marcador de sección con marcas terminales ---- */
.dim-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blueprint);
  margin-bottom: 14px;
}

.dim-label::before,
.dim-label::after {
  content: "";
  height: 7px;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  flex: 0 0 auto;
  width: 0;
}

.dim-label::after {
  flex: 1 1 auto;
  height: 0;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.4;
  position: relative;
  top: 1px;
}

.section-dark .dim-label,
.page-hero .dim-label { color: var(--orange); }

/* ---- Ficha técnica: bloque de título de plano ---- */
.spec-sheet {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

/* Marca de esquina, como el recuadro de un plano */
.spec-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.spec-sheet .spec-sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.spec-sheet .spec-sheet-head span:first-child {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blueprint);
}

.spec-sheet .spec-sheet-head span:last-child {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--steel);
  padding-right: 30px;
}

.spec-table {
  font-size: 0.92rem;
}

.spec-table th,
.spec-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

.spec-table th {
  width: 32%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blueprint);
  background: rgba(27, 58, 107, 0.03);
}

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

@media (max-width: 620px) {
  .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table th { border-bottom: 0; padding-bottom: 4px; }
  .spec-table td { padding-top: 0; }
}

/* ---- Franja de prueba: credenciales cerca de la decisión ---- */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.proof-strip > div {
  background: #fff;
  padding: 22px 20px;
}

.proof-strip dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 6px;
}

.proof-strip dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

@media (max-width: 860px) { .proof-strip { grid-template-columns: 1fr 1fr; } }

/* ---- Barra de cotización fija en páginas de detalle ---- */
.rfq-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(16px, 4vw, 34px);
  background: rgba(13, 17, 23, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rfq-bar p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

.rfq-bar strong {
  color: #fff;
  font-family: var(--font-display);
}

.rfq-bar .rfq-bar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.rfq-bar .rfq-bar-tel {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  white-space: nowrap;
}

.rfq-bar .rfq-bar-tel:hover { color: var(--orange); }

@media (max-width: 720px) {
  .rfq-bar { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; padding: 12px 16px; }
  .rfq-bar p { font-size: 0.84rem; }
  .rfq-bar .rfq-bar-actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rfq-bar { position: static; }
}


/* The drawing label speaks the shared label language: small tracked
   capitals led by the orange square. */
.dim-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: rgba(102, 113, 127, 0.72);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.dim-label::before {
  content: "";
  position: static;
  flex: none;
  width: 5px;
  height: 5px;
  border: 0;
  background: var(--signal);
  transform: none;
}

.dim-label::after {
  content: none;
}

.section-dark .dim-label,
.cap-showcase .dim-label {
  color: rgba(255, 255, 255, 0.72);
}

.dim-label + h2 {
  margin-top: 14px;
}

/* Technology sheet: the page's own description instead of spec rows it
   does not publish. */
.cap-sheet-lead {
  margin: 10px 0 0;
  color: var(--steel);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Six product tiles and the call to action on a grid that always closes:
   four across, the CTA spanning two. */
.family-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.family-grid--four .family-cta {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .family-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .family-grid--four {
    grid-template-columns: minmax(0, 1fr);
  }
  .family-grid--four .family-cta {
    grid-column: auto;
  }
}

/* Contact card in the quote page's left column: address, lines and email as
   one ruled list, each with a small outlined icon. */
.rfq-contact {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.rfq-contact .eyebrow {
  margin-bottom: 8px;
}

.rfq-contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rfq-contact-list li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.rfq-contact-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.rfq-contact-icon svg {
  width: 17px;
  height: 17px;
}

.rfq-contact-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rfq-contact-label {
  color: var(--steel);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rfq-contact-text a {
  color: var(--ink);
  font-size: 0.9rem;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

.rfq-contact-list li:hover .rfq-contact-icon {
  border-color: var(--signal);
  color: var(--signal);
}

.rfq-contact-text a:hover,
.rfq-contact-text a:focus-visible {
  color: var(--signal);
}

/* Card photos fill their frame edge to edge: no inset, no letterboxing.
   The product shots are 1080px squares, so a cover crop stays sharp. */
body .info-card .card-media {
  border: 0;
  background: var(--surface-2);
}

body .info-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}

/* Heading + copy blocks share one grid. Two in a row read as a single
   section: the second tucks under the first behind a hairline rule. */
.lead-block + .lead-block {
  padding-top: 0;
}

.lead-block + .lead-block .lead-in {
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.lead-in .prose .check-list {
  margin: 0;
}

.lead-in .prose .check-list li {
  margin: 0;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
}

.lead-in .prose .check-list li:first-child {
  padding-top: 2px;
}

.lead-in .prose .check-list li::before {
  top: calc(11px + 0.62em);
}

.lead-in .prose .check-list li:first-child::before {
  top: calc(2px + 0.62em);
}

/* Recognitions: a medal, the award years and the brand that gave it. */
.award-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.award-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 0.3s ease;
}

.award-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .award-card:hover {
    border-color: rgba(11, 14, 19, 0.18);
  }
  .award-card:hover::before {
    transform: scaleX(1);
  }
}

.award-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}

.award-icon {
  width: 56px;
  height: 56px;
  color: var(--ink);
}

.award-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.award-icon .award-star {
  color: var(--signal);
}

.award-year {
  padding: 5px 9px;
  border: 1px solid var(--line);
  color: var(--steel);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.award-brand {
  margin: 0 0 6px;
  color: var(--signal);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

.award-card p:last-child {
  margin: 0;
  color: var(--steel);
  font-size: 0.86rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .award-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lead-block + .lead-block .lead-in {
    padding-top: 32px;
  }
}

/* Certifications: one card per standard, its own logo on a quiet plate. */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 40px auto 0;
}

.cert-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 26px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  text-align: center;
  transition: border-color 0.3s ease;
}

.cert-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .cert-card:hover {
    border-color: rgba(11, 14, 19, 0.18);
  }
  .cert-card:hover::before {
    transform: scaleX(1);
  }
}

.cert-logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 118px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.cert-logo img {
  max-width: 150px;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cert-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.cert-card p {
  margin: 0;
  max-width: 28ch;
  color: var(--steel);
  font-size: 0.86rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .cert-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
  }
}

/* A percentage max-height inside a grid cell resolves to nothing, so the
   logos grew past their plate. Give the plate and the logo real heights. */
body .cert-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  padding: 0 0 24px;
}

body .cert-logo img {
  display: block;
  width: auto;
  height: 96px;
  max-width: 160px;
  max-height: none;
  object-fit: contain;
}

/* "Centered" headings centre the text as well as the block. */
.section-heading--center {
  text-align: center;
}

.section-heading--center .eyebrow {
  justify-content: center;
}

/* The original product shots carry a grey frame baked into the file;
   a slight zoom keeps it out of the card. */
body .info-card .card-media img[src*="/servintec-co/Sin-titulo-21_"] {
  transform: scale(1.12);
}

@media (hover: hover) {
  body .info-card:hover .card-media img[src*="/servintec-co/Sin-titulo-21_"] {
    transform: scale(1.16);
  }
}