:root {
  --odex-blue: #003d7c;
  --odex-blue-deep: #00336b;
  --odex-blue-mid: #2f78bf;
  --odex-red: #E33A26;
  --odex-bg: #f1f4fa;
  --odex-text: #073a76;
  --odex-muted: #606b78;
  --odex-white: #fff;
  --odex-shadow: 0 18px 45px rgba(0, 47, 105, 0.14);
  --odex-serif: Georgia, "Times New Roman", serif;
  --odex-sans: Inter, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--odex-text);
  background: var(--odex-bg);
  font-family: var(--odex-sans);
  line-height: 1.65;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 145%;
  height: auto;
}

.container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 40px;
  left: 0;
  right: 0;
}

body.admin-bar .site-header {
  top: 72px;
}

.site-header__inner {
  width: calc(100% - 120px);
  max-width: none;
  min-height: 80px;
  margin: 0 auto;
  padding: 10px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 4px;
  background: #f1f2f8;
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  color: var(--odex-blue);
  font-weight: 800;
  letter-spacing: -0.05em;
}

.brand__mark {
  font-size: 42px;
}

.brand__sub {
  font-size: 15px;
  letter-spacing: 0.48em;
  margin-left: 3px;
}

.brand__legal {
  margin-top: 4px;
  font-size: 7px;
  letter-spacing: 0.02em;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.odex-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 34px;
}

.odex-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  color: #555;
  font-size: 16px;
  font-weight: 600;
}

.odex-menu a:hover,
.odex-menu a.is-active {
  color: var(--odex-blue);
}

.odex-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: var(--odex-red);
  transition: width 0.2s ease;
}

.odex-menu a.is-active::after {
  width: 100%;
}

.odex-product-view .odex-menu a[href*="/products/"] {
  color: var(--odex-blue);
}

.odex-product-view .odex-menu a[href*="/products/"]::after {
  width: 100%;
}

.odex-menu a:hover::after {
  width: 0;
}

.product-search {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.product-search__input {
  width: 0;
  min-width: 0;
  height: 54px;
  border: 1px solid rgba(0, 61, 124, .16);
  border-radius: 4px;
  padding: 0;
  background: #fff;
  color: var(--odex-blue);
  font: inherit;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  outline: none;
  transition: width .22s ease, padding .22s ease, opacity .18s ease, border-color .18s ease;
}

.product-search__input::placeholder {
  color: #8d96a3;
}

.product-search__input.is-error {
  border-color: rgba(255, 91, 100, .42);
  color: var(--odex-red);
}

.product-search__input.is-error::placeholder {
  color: var(--odex-red);
  opacity: 1;
}

.product-search.is-open .product-search__input,
.product-search:focus-within .product-search__input {
  width: 220px;
  padding: 0 14px;
  opacity: 1;
  pointer-events: auto;
}

.product-search.is-open .product-search__input:focus,
.product-search:focus-within .product-search__input:focus {
  border-color: rgba(0, 61, 124, .42);
}

.search-button {
  flex: 0 0 auto;
  width: 57px;
  height: 54px;
  border: 0;
  border-radius: 4px;
  background: url("../images/ui/search.png") center / 100% 100% no-repeat;
  box-shadow: 0 10px 18px rgba(0, 61, 124, 0.28);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.search-button span {
  display: none;
}

.search-button span::after {
  content: none;
}

.search-button:hover {
  transform: translateY(-2px);
  background: url("../images/ui/search.png") center / 100% 100% no-repeat;
  box-shadow: 0 14px 24px rgba(0, 61, 124, .32);
}

.nav-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(235, 247, 255, 0.98) 0%, rgba(230, 244, 255, 0.78) 42%, rgba(230, 244, 255, 0.34) 100%),
    radial-gradient(circle at 78% 56%, rgba(0, 74, 141, 0.28), transparent 34%),
    linear-gradient(180deg, #d9f1ff 0%, #97cce7 52%, #0c5c91 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -8% -120px -8%;
  height: 260px;
  border-radius: 50% 50% 0 0 / 70% 70% 0 0;
  background: var(--odex-bg);
  transform: rotate(2deg);
}

.hero::after {
  content: "";
  position: absolute;
  right: 13%;
  bottom: 150px;
  width: 420px;
  height: 190px;
  border-radius: 55% 45% 50% 50%;
  background: linear-gradient(180deg, rgba(0, 51, 107, 0.45), rgba(0, 61, 124, 0.1));
  filter: blur(1px);
  opacity: 0.45;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100% - 48px));
  margin-left: 10.5%;
  padding-top: 80px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--odex-red);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

.hero h1,
.section-heading h1,
.section-heading h2,
.page-hero h1,
.about-section h2,
.service-panel h2 {
  font-family: var(--odex-serif);
  color: var(--odex-blue);
  line-height: 1.12;
}

.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(42px, 5vw, 64px);
}

.hero h1 span {
  color: var(--odex-red);
}

.hero p:not(.eyebrow) {
  max-width: 600px;
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
}

.hero-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  font-size: 30px;
  cursor: default;
}

.hero-arrow--left { left: 60px; }
.hero-arrow--right { right: 60px; }

.wave-section {
  position: relative;
  padding: 110px 0 150px;
  overflow: hidden;
}

.wave-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30px 30px, rgba(47, 120, 191, 0.12) 2px, transparent 3px) 0 0 / 18px 18px,
    linear-gradient(180deg, #f4f7fc, #eef3fb);
  opacity: 0.85;
}

.two-col {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: center;
  gap: 72px;
}

.about-section h2,
.section-heading h1,
.section-heading h2 {
  margin: 0 0 22px;
  font-size: clamp(36px, 4vw, 54px);
}

.section-heading h1::after,
.section-heading h2::after,
.about-section h2::after,
.page-hero h1::after,
.contact-form h2::before {
  content: "";
  display: block;
  width: 250px;
  height: 1px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--odex-red) 0 38%, #d8dde7 38% 100%);
}

.about-section p {
  max-width: 780px;
  font-size: 18px;
  line-height: 1.55;
}

.circle-photo {
  width: min(100%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  justify-self: center;
  background:
    radial-gradient(circle at 70% 35%, rgba(255,255,255,.42), transparent 20%),
    linear-gradient(135deg, #0c6fa5, #053c70 54%, var(--odex-red) 54%, var(--odex-red) 63%, #003d7c 63%);
  box-shadow: var(--odex-shadow);
}

.circle-photo--industry {
  background:
    radial-gradient(circle at 60% 40%, rgba(255,255,255,.45), transparent 16%),
    linear-gradient(135deg, #dbe9f6, #0c5a95 40%, #00336b 100%);
}

.section {
  padding: 92px 0;
}

.section--light {
  background: #f0f3f9;
}

.section-heading {
  margin-bottom: 42px;
}

.section-heading p {
  max-width: 1120px;
  font-size: 20px;
  line-height: 1.6;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 60px;
}

.feature-card {
  background: #fff;
  border-radius: 3px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 39, 82, 0.08);
}

.feature-card__image,
.service-panel__image,
.office-photo {
  min-height: 220px;
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.2)),
    linear-gradient(135deg, #dce6ef 0%, #f7f8fa 35%, #2f78bf 35%, #0c4d8b 100%);
}

.feature-card:nth-child(2n) .feature-card__image {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.05)),
    linear-gradient(135deg, #ffd65c 0%, #d38915 30%, #134f86 30%, #76c4ee 100%);
}

.feature-card:nth-child(3n) .feature-card__image {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.05)),
    linear-gradient(135deg, #e8edf2 0%, #ffffff 48%, #ffcf33 48%, #5f6870 100%);
}

.feature-card h3 {
  margin: 22px 0 8px;
  color: var(--odex-blue);
  font-size: 22px;
}

.feature-card p {
  min-height: 76px;
  color: #5d6570;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 28px;
  border: 0;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(135deg, #347fc7, #003d7c);
  box-shadow: 0 10px 18px rgba(0, 61, 124, 0.22);
  font-weight: 700;
  cursor: pointer;
}

.feature-card .button {
  width: 100%;
  margin-top: 8px;
}

/* Products archive page */
.products-page-hero {
  position: relative;
  min-height: clamp(680px, 50vw, 860px);
  padding: 200px 0 150px;
  overflow: hidden;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.products-page-hero__content {
  width: min(1000px, calc(100% - 48px));
  margin-left: max(64px, calc((100vw - 1200px) / 2));
  color: #fff;
}

.products-page-hero h1 {
  margin: 0 0 20px;
  font-family: var(--odex-serif);
  font-size: clamp(44px, 5.3vw, 72px);
  line-height: 1.05;
  color: #fff;
}

.products-page-hero p {
  margin: 0;
  max-width: 1000px;
  font-size: 16px;
  line-height: 28.8px;
  font-weight: 600;
}

.products-page-list {
  position: relative;
  background: var(--odex-bg);
  padding: 60px 0 112px;
  /* 向上偏移，盖住透明间隙，露出上方hero波浪 */
  margin-top: -40px; 
  /* 加z-index保证白色层在hero上层，不会被hero盖住内容 */
  z-index: 1;
}

.products-page-list__inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.products-page-heading {
  margin-bottom: 46px;
}

.products-page-heading h2 {
  margin: 0;
  font-family: var(--odex-serif);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  color: var(--odex-blue);
}

.products-page-heading h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 18px;
  background: rgba(0, 61, 124, 0.14);
}

.products-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 360px);
  justify-content: space-between;
  gap: 46px 28px;
}

.products-page-card {
  display: flex;
  width: 360px;
  height: 372px;
  flex-direction: column;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  padding: 24px;
  box-shadow: none;
  transition: transform .24s ease;
}

.products-page-card:hover {
  transform: translateY(-2px);
}

.products-page-card__image {
  display: block;
  width: 312px;
  height: 174px;
  min-height: 174px;
  border-radius: 2px;
  background-color: #fff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.products-page-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 0 0;
}

.products-page-card h3 {
  margin: 0 0 8px;
  color: var(--odex-blue);
  font-size: 16px;
  line-height: 1.18;
  font-weight: 800;
}

.products-page-card p {
  margin: 0;
  color: #5d6570;
  font-size: 14px;
  line-height: 1.45;
}

.products-page-card__button {
  display: block;
  width: 312px;
  height: 44px;
  margin-top: auto;
  border-radius: 4px;
  background-image: url("../images/ui/products/button_default.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: transform .2s ease, filter .2s ease;
}

.products-page-card__button:hover {
  background-image: url("../images/ui/products/button_hover.png");
  transform: translateY(-1px);
  filter: saturate(1.05);
}

@media (max-width: 980px) {
  .products-page-grid {
    grid-template-columns: repeat(2, 360px);
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .products-page-hero {
    min-height: 520px;
    padding: 170px 0 120px;
  }

  .products-page-hero__content {
    margin-left: 24px;
  }

  .products-page-grid {
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
    gap: 28px;
  }
}

/* Product > Winches listing */
.winches-list-page,
.product-single-page {
  background: #f1f2f8;
  color: var(--odex-blue);
}

.winches-list-hero {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.winches-list-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 61, 124, .82) 0%, rgba(47, 120, 191, .65) 45%, rgba(0, 61, 124, .24) 100%);
}

.winches-list {
  position: relative;
  margin-top: 60px;
  padding: 75px 0 132px;
  background: #f1f2f8;
  overflow: hidden;
}

.winches-list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -92px;
  width: 118vw;
  height: 188px;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  background: #f1f2f8;
}

.winches-list__inner,
.product-single-page__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 100px));
  margin: 56px auto;
}

.winches-list__inner {
  --winches-card-inset: max(0px, calc((100% - 1120px) / 2));
}

.product-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
  color: #04387B;
  font-size: 16px;
  font-weight: 700;
}

.product-breadcrumb a {
  color: #999999;
}

.product-breadcrumb a:hover {
  color: var(--odex-red);
}

.product-breadcrumb__separator {
  color: var(--odex-blue);
}

.product-breadcrumb__current {
  color: var(--odex-blue);
  font-weight: 800;
}

.winches-list__heading {
  max-width: none;
  margin-bottom: 22px;
}

.winches-list__heading h1 {
  margin: 0;
  font-family: var(--odex-serif);
  color: var(--odex-blue);
  font-size: clamp(36px, 3.2vw, 42px);
  line-height: 1.08;
}


.winches-list__heading p {
  margin: 20px 0 0;
  color: var(--odex-text);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 600;
}

.winches-list__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 18px;
}

.winches-list-card {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 28px;
  min-height: 150px;
  padding: 16px var(--winches-card-inset);
  border-top: 1px solid rgba(0, 61, 124, .14);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  transition: background .22s ease;
}

.winches-list-card:last-child {
  border-bottom: 1px solid rgba(0, 61, 124, .14);
}

.winches-list-card:hover {
  background: rgba(255, 255, 255, .22);
}

.winches-list-card__image {
  display: block;
  width: 260px;
  height: 124px;
  overflow: hidden;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
}

.winches-list-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none;
  transform-origin: center center;
}

.winches-list-card__body {
  display: block;
  padding: 0;
}

.winches-list-card__eyebrow,
.winches-list-card__meta {
  display: none;
}

.winches-list-card__title {
  display: block;
  margin: 0 0 10px;
  font-family: var(--odex-sans);
  color: var(--odex-blue);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.winches-list-card__text {
  display: block;
  max-width: 620px;
  color: #999999;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 500;
}

.winches-list-card__arrow {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  transform: translateY(8px);
}

.winches-list-card__arrow img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.winches-list-page--crane .winches-list-card__title {
  margin-bottom: 0;
}

.windows-doors-hatches-page .winches-list-card {
  cursor: default;
}

.windows-doors-hatches-card__image {
  background: #fff;
}

@media (max-width: 640px) {
  .windows-doors-hatches-page .winches-list-card {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 18px;
    padding: 18px 0;
  }

  .windows-doors-hatches-page .winches-list-card__image {
    width: 124px;
    height: 88px;
  }

  .windows-doors-hatches-page .winches-list-card__title {
    font-size: 20px;
  }

  .windows-doors-hatches-page .winches-list-card__text {
    font-size: 12px;
    line-height: 1.55;
  }

  .windows-doors-hatches-page .winches-list-card__arrow {
    display: none;
  }
}

/* Product > Winches detail */
.product-single-page {
  padding: 142px 0 92px;
  min-height: 100vh;
}

.odex-product-detail-view .site-header__inner {
  background: #FFFFFF;
}

.product-single-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 54px;
  align-items: start;
}

.product-single-sidebar {
  position: sticky;
  top: 126px;
  width: 330px;
  align-self: start;
}

.product-single-visual {
  position: relative;
  width: 330px;
  height: 300px;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

.product-single-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transform: none;
  transform-origin: center center;
}

.product-single-visual--odex-g img {
  transform: scale(1.08);
}

.product-single-visual--odex-v img {
  transform: scale(1.18);
  object-position: center 54%;
}

.product-single-visual--a-frame-lars-more img {
  transform: scale(1.16);
  object-position: center center;
}

.product-single-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 68, 124, .88) 0%,
    rgba(0, 91, 156, .58) 44%,
    rgba(0, 91, 156, .18) 74%,
    rgba(0, 91, 156, 0) 100%
  );
}

.product-single-anchors {
  margin-top: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 61, 124, .16);
}

.product-single-anchors a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 10px;
  color: #999999;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
}

.product-single-anchors a.is-active {
  color: var(--odex-blue);
}

.product-single-anchors a:last-child {
  margin-bottom: 0;
}

.product-single-anchors img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 16px;
  opacity: .55;
  filter: grayscale(1);
}

.product-single-anchors a.is-active img {
  opacity: 1;
  filter: none;
}

.product-single-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.product-single-brochure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--odex-blue);
  font-weight: 800;
  font-size: 12px;
}

.product-single-brochure img {
  width: 65px;
  height: 47px;
  object-fit: contain;
}

.product-single-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 154px;
  height: 34px;
  border-radius: 0;
  color: #fff;
  background: #2f78bf;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  transition: background .2s ease, transform .2s ease;
}

.product-single-price:hover {
  background: var(--odex-blue);
  transform: translateY(-1px);
}

.product-single-content {
  min-height: 720px;
  padding: 6px 0 48px;
  border-radius: 0;
  background: transparent;
}

.product-single-intro {
  margin-bottom: 18px;
}

.product-single-intro h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--odex-blue);
  font-family: var(--odex-sans);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
}

.product-single-intro h1 img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 43px;
}

.product-single-intro p {
  margin: 0;
  color: #666666;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

.product-spec-section {
  padding: 16px 0 18px;
  border-top: 1px solid rgba(0, 61, 124, .16);
  scroll-margin-top: 126px;
}

.product-spec-section h2 {
  position: relative;
  margin: 0 0 12px;
  padding-left: 10px;
  color: var(--odex-blue);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
}

.product-spec-section h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 2px;
  height: 16px;
  border-radius: 0;
  background: var(--odex-red);
  box-shadow: none;
}

.product-spec-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-spec-list li {
  position: relative;
  padding-left: 10px;
  color: #666666;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
}

.product-spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--odex-blue);
}

.product-spec-groups {
  display: grid;
  gap: 22px;
}

.product-spec-group h3 {
  margin: 0 0 12px;
  color: var(--odex-blue);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
}

@media (min-width: 1025px) {
  body.odex-product-detail-view {
    background: #f1f2f8;
    height: auto;
    overflow: auto;
  }

  .odex-product-detail-view .site-header {
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    z-index: 80;
  }

  body.admin-bar.odex-product-detail-view .site-header {
    top: 70px;
  }

  .odex-product-detail-view .site-main {
    height: auto;
    overflow: visible;
  }

  .odex-product-detail-view .product-single-page {
    box-sizing: border-box;
    height: auto;
    min-height: calc(100vh - 1px);
    padding: 190px 0 76px;
    overflow: visible;
  }

  .odex-product-detail-view .site-footer {
    position: static;
  }

  .odex-product-detail-view .product-single-page__inner {
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    overflow: visible;
  }

  .odex-product-detail-view .product-single-layout {
    height: auto;
    min-height: 0;
    align-items: start;
    overflow: visible;
  }

  .odex-product-detail-view .product-single-sidebar {
    position: static;
    top: auto;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .odex-product-detail-view .product-single-content {
    position: relative;
    height: calc(100vh - 230px);
    max-height: 760px;
    min-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    contain: paint;
    box-sizing: border-box;
    padding-right: 18px;
    padding-bottom: 180px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 61, 124, .26) transparent;
  }

  .odex-product-detail-view .product-single-content::-webkit-scrollbar {
    width: 8px;
  }

  .odex-product-detail-view .product-single-content::-webkit-scrollbar-track {
    background: transparent;
  }

  .odex-product-detail-view .product-single-content::-webkit-scrollbar-thumb {
    background: rgba(0, 61, 124, .26);
    border-radius: 999px;
  }
}

@media (max-width: 1180px) {
  .product-single-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-single-sidebar,
  .product-single-visual {
    width: 100%;
  }

  .product-single-visual {
    height: auto;
    aspect-ratio: 50 / 44;
  }

  .product-single-content {
    min-height: 0;
    padding-right: 0;
  }
}

@media (max-width: 760px) {
  .winches-list__inner,
  .product-single-page__inner {
    width: min(100% - 40px, 520px);
  }

  .winches-list__grid,
  .product-spec-list {
    grid-template-columns: 1fr;
  }

  .product-single-page {
    padding-top: 128px;
  }

  .product-single-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-single-price {
    width: 100%;
  }
}

.button--light {
  color: var(--odex-blue);
  background: #fff;
}

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

.industry-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 28px;
  overflow: hidden;
  border-radius: 4px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 61, 124, 0.12), rgba(0, 51, 107, 0.92)),
    linear-gradient(135deg, #6bbbe6, #003d7c);
  box-shadow: var(--odex-shadow);
}

.industry-card span {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
}

.industry-card small {
  font-size: 14px;
  line-height: 1.45;
}

.cta-strip {
  padding: 80px 0;
  color: #fff;
  background: linear-gradient(135deg, var(--odex-blue), #0c76b8);
}

.cta-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta-strip h2 {
  margin: 0 0 8px;
  font-size: 34px;
}

.cta-strip p {
  margin: 0;
}

.page-hero {
  padding: 190px 0 90px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 61, 124, 0.88), rgba(0, 61, 124, 0.42)),
    linear-gradient(135deg, #b7e2f7, #003d7c);
}

.page-hero h1 {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(42px, 5vw, 64px);
}

.page-hero h1::after {
  background: linear-gradient(90deg, var(--odex-red) 0 38%, rgba(255,255,255,.34) 38% 100%);
}

.page-hero p {
  max-width: 880px;
  margin: 0;
  font-size: 19px;
}

.service-list {
  display: grid;
  gap: 64px;
}

.service-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 54px;
  align-items: center;
  padding: 34px;
  background: #fff;
  box-shadow: var(--odex-shadow);
}

.service-panel--reverse {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
}

.service-panel--reverse .service-panel__image {
  order: 2;
}

.service-panel h2 {
  margin: 0 0 16px;
  font-size: 40px;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: 60px;
  align-items: start;
}

.contact-info h2,
.contact-form h2 {
  margin: 24px 0 18px;
  color: var(--odex-blue);
  font-size: 24px;
}

.contact-info dl {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px 8px;
  color: #6d7480;
}

.contact-info dt {
  color: #555;
  font-weight: 700;
}

.contact-form {
  padding-top: 20px;
}

.contact-form label {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #5d6570;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 0;
  border-radius: 4px;
  padding: 13px 16px;
  background: #e3e6ee;
  color: #333;
  font: inherit;
}

.contact-form textarea {
  min-height: 110px;
  resize: vertical;
}

.contact-form .consent {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 20px 0 8px;
}

.contact-form .consent input {
  width: 22px;
  height: 22px;
}

.form-note {
  color: #9a9fa8;
  font-size: 12px;
}

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

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 60px 0 24px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 61, 124, .96), rgba(0, 61, 124, .85)),
    linear-gradient(135deg, #045a95, #002f61);
}

.site-footer__grid {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2.05fr .85fr 1.02fr .85fr 1.05fr;
  gap: 42px;
}

.footer-logo {
  font-size: 64px;
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.08em;
}

.footer-logo span {
  display: block;
  font-size: 18px;
  letter-spacing: 0.48em;
  font-weight: 600;
}

.site-footer h2 {
  margin: 0 0 14px;
  font-size: 22px;
  text-transform: uppercase;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin: 9px 0;
  font-size: 13px;
  line-height: 1.55;
}

.site-footer li::before {
  content: "•";
  color: var(--odex-red);
  margin-right: 5px;
}

.footer-company {
  font-weight: 800;
}

.follow-button {
  display: inline-flex;
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 4px;
  color: var(--odex-blue);
  background: #fff;
  font-weight: 800;
  text-transform: uppercase;
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.7);
  font-size: 13px;
}

.quick-contact {
  position: fixed;
  z-index: 30;
  right: 0;
  top: 62%;
  display: grid;
}

.quick-contact a {
  width: 48px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(35, 41, 48, 0.78);
  border-bottom: 1px solid rgba(255,255,255,.2);
}

@media (max-width: 760px) {
  .site-header {
    top: 18px;
  }

  .site-header__inner {
    width: min(100% - 28px, 1320px);
    padding: 12px 18px;
  }

  .nav-toggle {
    display: inline-grid;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 0;
    background: var(--odex-blue);
    padding: 12px;
  }

  .nav-toggle span {
    display: block;
    height: 2px;
    background: #fff;
  }

  .primary-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 14px;
    left: 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    background: #fff;
    box-shadow: var(--odex-shadow);
  }

  .primary-nav.is-open {
    display: flex;
  }

  .odex-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .search-button {
    width: 100%;
    height: 54px;
  }

  .product-search {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .product-search.is-open .product-search__input,
  .product-search:focus-within .product-search__input {
    width: 100%;
  }

  .hero__content {
    margin-left: 32px;
  }

  .card-grid,
  .industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .container,
  .site-footer__grid,
  .site-footer__bottom {
    width: min(100% - 32px, 1200px);
  }

  .brand__mark {
    font-size: 34px;
  }

  .hero {
    min-height: 680px;
  }

  .hero__content {
    width: min(100% - 32px, 620px);
    margin: 0 auto;
  }

  .hero p:not(.eyebrow) {
    font-size: 17px;
  }

  .hero-arrow {
    display: none;
  }

  .two-col,
  .contact-grid,
  .service-panel,
  .service-panel--reverse {
    grid-template-columns: 1fr;
  }

  .service-panel--reverse .service-panel__image {
    order: initial;
  }

  .card-grid,
  .industry-grid,
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .cta-strip .container {
    display: block;
  }

  .cta-strip .button {
    margin-top: 22px;
  }

  .contact-form label {
    grid-template-columns: 1fr;
  }

  .quick-contact {
    top: auto;
    bottom: 20px;
  }
}

/* Formal development pass: Figma/PDF asset integration */
.hero {
  background:
    linear-gradient(90deg, rgba(232, 247, 255, 0.96) 0%, rgba(226, 244, 255, 0.76) 39%, rgba(226, 244, 255, 0.15) 100%),
    url("../images/ui/home-hero.jpg") right center / cover no-repeat;
}

.hero::after {
  display: none;
}

.circle-photo {
  background-size: cover;
  background-position: center;
}

.feature-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.feature-card__image,
.service-panel__image,
.office-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.feature-card__image {
  min-height: 250px;
  background-color: #fff;
  background-size: contain;
}

.feature-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.feature-card__body .button {
  margin-top: auto;
}

.industry-card {
  background-size: cover;
  background-position: center;
  transition: transform .22s ease, box-shadow .22s ease;
}

.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0, 47, 105, 0.18);
}

.service-panel__image {
  min-height: 320px;
}

.contact-page {
  padding-top: 190px;
}

.office-photo {
  min-height: 420px;
}

.site-footer li::before {
  content: "•";
  color: var(--odex-red);
  margin-right: 6px;
}

.quick-contact a {
  font-size: 20px;
}

/* Figma home v2 restoration */
:root {
  --odex-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --odex-sans: "Hanken Grotesk", Inter, "Segoe UI", Arial, sans-serif;
  --odex-page-bg: #f2f5fb;
}

html {
  scroll-behavior: smooth;
}

body.home {
  background: var(--odex-page-bg);
}

.home .site-header {
  top: 40px;
}

.admin-bar.home .site-header {
  top: 72px;
}

.home .site-header__inner {
  width: calc(100% - 80px);
  max-width: none;
  min-height: 80px;
  padding: 12px 60px;
  background: #f1f2f8;
  border-color: rgba(255, 255, 255, .86);
  border-radius: 4px;
}

.home .brand__mark {
  font-size: 46px;
}

.home .brand__sub {
  font-size: 15px;
}

.home .primary-nav {
  gap: 32px;
}

.home .odex-menu {
  gap: 34px;
}

.home .odex-menu a {
  font-size: 16px;
  font-weight: 600;
}

.home .search-button {
  width: 57px;
  height: 54px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.home .search-button:hover {
  transform: translateY(-2px);
  background: url("../images/ui/search.png") center / 100% 100% no-repeat;
  box-shadow: 0 14px 24px rgba(0, 61, 124, .32);
}

.home-hero {
  position: relative;
  min-height: 800px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(230, 246, 255, .98) 0%, rgba(230, 246, 255, .76) 34%, rgba(230, 246, 255, .12) 68%),
    url("../images/ui/home-hero.jpg") center center / cover no-repeat;
}

.home-hero::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -122px;
  height: 245px;
  border-radius: 50% 50% 0 0 / 70% 70% 0 0;
  background: var(--odex-page-bg);
  transform: rotate(2deg);
}

.home-hero__content {
  position: relative;
  z-index: 1;
  width: 554px;
  margin-left: max(120px, calc((100vw - 1200px) / 2));
  margin-top: 54px;
}

.home-hero h1 {
  margin: 0 0 24px;
  color: var(--odex-blue);
  font-family: var(--odex-serif);
  font-size: 60px;
  font-weight: 900;
  line-height: 1.07;
  letter-spacing: -.025em;
}

.home-hero h1 span {
  color: var(--odex-red);
}

.home-hero p {
  width: 544px;
  max-width: 100%;
  margin: 0;
  color: var(--odex-blue);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
}

.home-hero__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(21, 29, 36, .66);
  font-size: 28px;
  cursor: pointer;
  transition: transform .24s ease, background .24s ease;
}

.home-hero__arrow:hover {
  transform: scale(1.08);
}

.home-section-heading h2 {
  margin: 0;
  color: var(--odex-blue);
  font-family: var(--odex-serif);
  font-size: 54px;
  font-weight: 900;
  line-height: 1.18;
}

.home-section-heading h2::after {
  content: "";
  display: block;
  width: 29%;
  height: 1px;
  margin: 18px 0 24px;
  background: var(--odex-red);
  
}

.home-section-heading p {
  margin: 0;
  color: var(--odex-blue);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}

.home-about {
  position: relative;
  margin-top: -60px;
  padding: 180px 0 88px;
  overflow: hidden;
}

.home-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12px 12px, rgba(47,120,191,.12) 2px, transparent 3px) 0 46px / 18px 18px,
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(242,245,251,.96));
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 100%);
}

.home-about .container {
  position: relative;
  z-index: 1;
}

.home-about .home-section-heading p {
  max-width: 1200px;
}

.home-about__image {
  min-height: 480px;
  margin-top: 32px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 20px 60px rgba(0, 61, 124, .12);
}

.home-middle {
  padding: 0 0 88px;
}

.home-middle-card {
  display: grid;
  grid-template-columns: 560px 1fr;
  align-items: center;
  gap: 64px;
  min-height: 284px;
  margin-bottom: 60px;
}

.home-middle-card--reverse {
  grid-template-columns: 1fr 560px;
}

.home-middle-card--reverse .home-middle-card__image {
  order: 2;
}

.home-middle-card__image {
  height: 284px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 48px rgba(0, 47, 105, .12);
}

.home-middle-card:first-child .home-middle-card__image {
  background-size: 118% auto;
  background-position: center center;
}

.home-middle-card__content {
  position: relative;
}

.home-middle-card__content::before {
  content: "";
  position: absolute;
  width: 56px;
  height: 31px;
  left: -72px;
  top: 12px;
  display: none;
  background:
    linear-gradient(var(--odex-red), var(--odex-red)) 0 14px / 56px 3px no-repeat,
    linear-gradient(135deg, transparent 50%, var(--odex-red) 51%) right 7px top 6px / 14px 14px no-repeat;
}

.home-middle-card--reverse .home-middle-card__content::before {
  left: auto;
  right: -72px;
}

.home-middle-card h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  color: var(--odex-blue);
  font-family: var(--odex-serif);
  font-size: 52px;
  line-height: 1.12;
}

.home-middle-card h2::before {
  content: "";
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: url("../images/ui/boat_1.png") center / contain no-repeat;
}

.home-middle-card p {
  margin: 0;
  color: var(--odex-blue);
  font-size: 20px;
  line-height: 1.48;
}

.home-products {
  padding: 0 0 120px;
}

.home-products .home-section-heading {
  margin-bottom: 44px;
}

.home-products__viewport {
  width: min(1516px, calc(100vw - 40px));
  margin-left: max(120px, calc((100vw - 1200px) / 2));
  overflow: hidden;
}

.home-products__track {
  display: flex;
  gap: 44px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 0 300px 20px 0;
  box-sizing: content-box;
  scrollbar-width: none;
}

.home-products__track::-webkit-scrollbar {
  display: none;
}

.home-product-card {
  position: relative;
  flex: 0 0 346px;
  height: 346px;
  scroll-snap-align: start;
}

.home-product-card__image {
  display: block;
  width: 330px;
  height: 330px;
  margin-left: 16px;
  border-radius: 3px;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 42px rgba(0, 61, 124, .08);
  transition: transform .25s ease, filter .25s ease;
}

.home-product-card:hover .home-product-card__image {
  transform: translateY(-6px);
  filter: saturate(1.05) contrast(1.03);
}

.home-product-card__label {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 318px;
  min-height: 94px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(0, 45, 95, .12);
  color: var(--odex-blue);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  transition: transform .22s ease, box-shadow .22s ease;
}

.home-product-card__label strong {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0;
  color: transparent;
  background: url("../images/ui/icon_1.png") center / contain no-repeat;
  font-size: 0;
  line-height: 1;
}

.home-product-card:hover .home-product-card__label {
  transform: translateY(-4px);
  box-shadow: 0 24px 42px rgba(0, 45, 95, .18);
}

.home-products__controls {
  margin-top: 28px;
}

.home-products__progress {
  --odex-product-thumb: 260px;
  position: relative;
  width: 980px;
  max-width: 100%;
  height: 18px;
  margin-left: 110px;
  cursor: grab;
  touch-action: none;
}

.home-products__progress:active {
  cursor: grabbing;
}

.home-products__progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: #dfe5ee;
  transform: translateY(-50%);
}

.home-products__progress span {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  display: block;
  width: min(var(--odex-product-thumb), 100%);
  height: 4px;
  border-radius: 999px;
  background: var(--odex-red);
  transform: translateY(-50%);
  transition: left .12s ease;
}

.back-to-top {
  position: fixed;
  z-index: 35;
  right: 18px;
  bottom: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}

.back-to-top img {
  display: block;
  width: 100%;
  height: 100%;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-2px);
}

.quick-contact a {
  transition: background .2s ease, transform .2s ease;
}

.quick-contact a:hover {
  background: var(--odex-blue);
  transform: translateX(-4px);
}

.site-footer li::before {
  content: "•";
}

@media (max-width: 760px) {
  .home .site-header__inner {
    width: min(100% - 28px, 1320px);
    padding: 12px 18px;
  }

  .home-hero__content,
  .home-products__viewport {
    margin-left: 32px;
  }

  .home-middle-card,
  .home-middle-card--reverse {
    grid-template-columns: 1fr;
  }

  .home-middle-card--reverse .home-middle-card__image {
    order: initial;
  }

  .home-middle-card__content::before,
  .home-middle-card--reverse .home-middle-card__content::before {
    display: none;
  }
}

@media (max-width: 760px) {
  .home-hero {
    min-height: 720px;
  }

  .home-hero__content {
    width: min(100% - 32px, 554px);
    margin: 0 auto;
  }

  .home-hero h1 {
    font-size: 44px;
  }

  .home-hero p,
  .home-section-heading p,
  .home-middle-card p {
    font-size: 17px;
  }

  .home-about {
    padding-top: 150px;
  }

  .home-about__image,
  .home-middle-card__image {
    min-height: 260px;
    height: auto;
  }

  .home-section-heading h2,
  .home-middle-card h2 {
    font-size: 38px;
  }

  .home-products__viewport {
    width: calc(100vw - 24px);
    margin-left: 16px;
  }
}

/* Figma home v2 refinement pass */
body.home {
  overflow-x: hidden;
}

.home .site-header {
  top: 40px;
}

.admin-bar.home .site-header {
  top: 72px;
}

.home .site-header__inner {
  width: calc(100% - 120px);
  max-width: none;
  min-height: 80px;
  padding: 10px 60px;
  background: #f1f2f8;
  box-shadow: none;
}

.home .brand {
  width: 128px;
  min-height: 56px;
  justify-content: center;
}

.home .brand__mark {
  font-size: 43px;
  line-height: .8;
}

.home .brand__sub {
  font-size: 14px;
  line-height: 1;
}

.home .brand__legal {
  font-size: 6px;
  margin-top: 3px;
}

.home .odex-menu a {
  min-height: 44px;
  font-size: 16px;
  color: #5b5b5b;
}

.home .odex-menu a.is-active,
.home .odex-menu a:hover {
  color: var(--odex-blue);
}

.home-hero {
  min-height: 800px;
  align-items: flex-start;
  padding-top: 285px;
  background:
    linear-gradient(90deg, rgba(231,246,255,.96) 0%, rgba(231,246,255,.68) 34%, rgba(231,246,255,.12) 62%),
    url("../images/ui/home-hero.jpg") center top / cover no-repeat;
}

.home-hero__content {
  margin-top: 0;
}

.home-hero h1 {
  width: 554px;
  font-size: 56px;
  line-height: 1.14;
  margin-bottom: 24px;
}

.home-hero p {
  font-size: 21px;
  line-height: 1.36;
}

.home-hero__arrow {
  top: 405px;
}


/* Home hero carousel */
.home-hero {
  isolation: isolate;
  height: clamp(860px, 60.42vw, 1240px);
  min-height: 0;
  background: none;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 45, 89, .45) 0%, rgba(0, 45, 89, .20) 42%, rgba(0, 45, 89, .04) 72%);
  pointer-events: none;
}

.home-hero::after {
  display: none;
}

.home-hero__slides,
.home-hero__slide {
  position: absolute;
  inset: 0;
}

.home-hero__slides {
  z-index: 0;
}

.home-hero__slide {
  opacity: 0;
  top: -50px;
  bottom: 0;
  background-position: center 66%;
  background-repeat: no-repeat;
  background-size: cover;
  transform: none;
  transition: opacity .55s ease;
}

.home-hero__slide.is-active {
  opacity: 1;
  transform: none;
}

.home-hero__content {
  z-index: 3;
}

.home-hero h1 {
  color: #fff;
  text-shadow: 0 12px 28px rgba(0, 36, 78, .22);
}

.home-hero p {
  color: #fff;
  text-shadow: 0 8px 18px rgba(0, 36, 78, .24);
}

.home-hero__arrow {
  z-index: 4;
  top: 42%;
  width: 110px;
  height: 400px;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 0;
  transform: translateY(-50%);
  transition: transform .24s ease, opacity .24s ease;
}

.home-hero__arrow:hover {
  background-color: transparent;
  transform: translateY(-50%);
}

.home-hero__arrow--prev {
  left: -18px;
  background-image: url("../images/ui/button_1.png");
}

.home-hero__arrow--prev:hover {
  background-image: url("../images/ui/button_2.png");
}

.home-hero__arrow--next {
  right: -18px;
  background-image: url("../images/ui/button_3.png");
}

.home-hero__arrow--next:hover {
  background-image: url("../images/ui/button_4.png");
}

.home-about {
  margin-top: -115px;
  padding: clamp(150px, 10vw, 178px) 0 88px;
  overflow: hidden;
  background: transparent;
}

.home-about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  height: calc(100vw * 1382 / 2881);
  min-height: 520px;
  transform: translateX(-50%);
  display: block;
  background: url("../images/ui/background_1.png") center top / 100% auto no-repeat;
}

.home-about .home-section-heading {
  max-width: 1160px;
  margin-bottom: 32px;
}

.home-about .home-section-heading h2 {
  display: inline-block;
}

.home-about .home-section-heading h2::after {
  width: 100%;
  margin-top: 12px;
  background: var(--odex-red);
}

.home-about__image {
  height: 438px;
  min-height: 438px;
  margin-top: 28px;
  background-position: center;
  box-shadow: none;
}

.home-middle {
  position: relative;
  padding-top: 112px;
  padding-bottom: 96px;
  overflow: hidden;
  background: transparent;
}

.home-middle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  transform: translateX(-50%);
  background: #E1E8F4;
}

.home-middle .container {
  position: relative;
  z-index: 1;
}

.home-middle-card {
  grid-template-columns: 560px 1fr;
  gap: 64px;
  margin-bottom: 92px;
}

.home-middle-card:last-child {
  margin-bottom: 0;
}

.home-middle-card--reverse {
  grid-template-columns: 1fr 560px;
}

.home-middle-card__image {
  height: 284px;
}

.home-middle-card__content {
  max-width: 575px;
}

.home-middle-card--reverse .home-middle-card__content {
  justify-self: start;
}

.home-middle-card h2 {
  font-size: 52px;
  margin-bottom: 18px;
}

.home-products {
  padding-top: 36px;
}

.home-products .home-section-heading {
  margin-bottom: 44px;
}

.home-products__track {
  gap: 44px;
  padding-bottom: 8px;
}

.home-product-card {
  flex-basis: 346px;
  height: 415px;
}

.home-product-card__image {
  height: 330px;
  background-size: cover;
}

.home-product-card:nth-child(1) .home-product-card__image,
.home-product-card:nth-child(2) .home-product-card__image,
.home-product-card:nth-child(3) .home-product-card__image,
.home-product-card:nth-child(4) .home-product-card__image,
.home-product-card:nth-child(6) .home-product-card__image {
  background-size: 126% 126%;
}

.home-product-card:nth-child(4) .home-product-card__image,
.home-product-card:nth-child(6) .home-product-card__image {
  background-size: 132% 132%;
}

.home-product-card:nth-child(4) .home-product-card__image {
  background-position: center 52%;
}

.home-product-card:nth-child(6) .home-product-card__image {
  background-position: center 50%;
}

.home-product-card__label {
  bottom: 69px;
}

.home-products__progress {
  margin-top: 0;
}

.site-footer {
  min-height: 470px;
  padding-top: 60px;
  background:
    linear-gradient(90deg, rgba(0,61,124,.96), rgba(0,61,124,.82)),
    url("../images/ui/industry-ocean.jpg") center / cover no-repeat;
}

.site-footer__grid {
  align-items: start;
}

.quick-contact a {
  font-size: 11px;
  font-weight: 800;
}

/* Unified white logo asset
   The uploaded logo is white, so the header brand sits on a deep-blue plate.
   Footer uses the same transparent PNG directly on the dark ocean background. */
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  min-height: 62px;
  padding: 10px 16px;
  border-radius: 4px;
  background: var(--odex-blue);
  box-shadow: 0 12px 26px rgba(0, 61, 124, 0.18);
  letter-spacing: normal;
}

.brand__image {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
}

.home .brand {
  width: 172px;
  min-height: 62px;
  padding: 10px 16px;
}

.site-footer .footer-logo-image {
  display: block;
  width: min(320px, 100%);
  height: auto;
  margin: 0 0 18px;
}

.site-footer .footer-logo-link {
  display: inline-block;
  width: min(320px, 100%);
}

.site-footer .footer-logo-link .footer-logo-image {
  width: 100%;
}

/* Footer visual refinement */
.site-footer .footer-logo-image {
  width: min(320px, 100%);
}

.site-footer .footer-company {
  width: min(320px, 100%);
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-footer .footer-office,
.site-footer .footer-contact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .94);
  font-size: 12px;
  line-height: 1.45;
}

.site-footer .footer-office img,
.site-footer .footer-contact img {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.site-footer .footer-office span {
  max-width: 250px;
}

.site-footer li::before {
  content: "▪";
  color: var(--odex-red);
  margin-right: 6px;
}

.site-footer li a {
  display: inline-block;
  vertical-align: top;
}

.site-footer .footer-contact a {
  color: inherit;
}

.site-footer .follow-button {
  display: inline-flex;
  margin-top: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.site-footer .follow-button img {
  display: block;
  width: 132px;
  height: auto;
}

.site-footer__bottom {
  border-top: 0;
}

@media (max-width: 900px) {
  .brand,
  .home .brand {
    width: 150px;
    min-height: 56px;
    padding: 8px 12px;
  }

  .brand__image {
    width: 126px;
  }

  .site-footer .footer-logo-image {
    width: min(260px, 100%);
  }
}

@media (max-width: 640px) {
  .brand,
  .home .brand {
    width: 132px;
    min-height: 50px;
  }

  .brand__image {
    width: 110px;
  }
}


/* Header logo: remove the blue logo frame */
.home .site-header .brand,
.site-header .brand {
  width: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.site-header .brand__image {
  display: block;
  width: 170px;
  height: auto;
}

@media (max-width: 900px) {
  .site-header .brand__image {
    width: 140px;
  }
}

@media (max-width: 640px) {
  .site-header .brand__image {
    width: 118px;
  }
}

/* Final footer overrides */
.site-footer li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.site-footer li::before {
  content: "\25AA";
  flex: 0 0 auto;
  margin-right: 0;
  line-height: inherit;
}

.site-footer li a {
  display: block;
  min-width: 0;
}

/* Floating quick contact icons */
.quick-contact {
  right: 0;
  top: 85%;
  transform: translateY(-50%);
  justify-items: end;
  overflow: visible;
  border-radius: 4px;
  background: transparent;
}

.quick-contact a {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--odex-blue);
  border-bottom: 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
  transition: background .2s ease, transform .2s ease;
}

.quick-contact a:first-child::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 1px;
  background: var(--odex-red);
  transform: translateX(-50%);
  pointer-events: none;
}

.quick-contact a img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.quick-contact a:hover {
  background: #063d78;
  transform: none;
}

.search-button,
.home .search-button,
.home .search-button:hover {
  box-shadow: none;
}

/* A-Frame & LARS overview page */
.a-frame-page {
  min-height: 100vh;
  background: #f1f2f8;
  color: var(--odex-blue);
}

.a-frame-overview {
  padding: 142px 0 92px;
}

.a-frame-overview__inner {
  width: min(1200px, calc(100% - 100px));
  margin: 56px auto;
}

.a-frame-breadcrumb {
  margin: 0 0 26px;
  font-size: 16px;
  color: #9a9fa8;
}

.a-frame-breadcrumb a {
  color: #9a9fa8;
}

.a-frame-breadcrumb .product-breadcrumb__separator,
.a-frame-breadcrumb .product-breadcrumb__current {
  color: var(--odex-blue);
}

.a-frame-overview__heading {
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 61, 124, 0.18);
}

.a-frame-overview__heading h1 {
  margin: 0;
  color: var(--odex-blue);
  font-family: var(--odex-serif);
  font-size: clamp(36px, 2.3vw, 32px);
  font-weight: 800;
  line-height: 1.12;
}

.a-frame-hero {
  position: relative;
  margin: 0 0 14px;
  overflow: hidden;
  background: #d8e1ee;
}

.a-frame-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(to top, rgba(0, 61, 124, 0.78), rgba(0, 61, 124, 0));
  pointer-events: none;
}

.a-frame-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
}

.a-frame-summary {
  margin: 0 0 24px;
  color: #666d78;
  font-size: 18px;
  line-height: 1.65;
}

.a-frame-summary strong {
  color: var(--odex-blue);
  font-weight: 800;
}

.a-frame-detail-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(320px, 1.45fr);
  gap: 34px;
  align-items: start;
}

.a-frame-features h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
  color: var(--odex-blue);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.a-frame-features h2 img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.a-frame-features ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.a-frame-features li {
  position: relative;
  padding: 0 0 7px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0, 61, 124, 0.10);
  color: #666d78;
  font-size: 18px;
  line-height: 1.8;
}

.a-frame-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--odex-blue);
}

.a-frame-diagram {
  margin: 0;
  padding: 0 4px;
  border-left: 1px solid rgba(0, 61, 124, 0.28);
  border-right: 1px solid rgba(0, 61, 124, 0.28);
}

.a-frame-diagram img {
  display: block;
  width: 100%;
}

.moon-page .a-frame-diagram {
  overflow: hidden;
  padding: 0;
  border-left: 0;
  border-right: 0;
}

.moon-page .a-frame-diagram img {
  transform: scale(1.04);
  transform-origin: center center;
}

.a-frame-more {
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(320px, 1.45fr);
  gap: 34px;
  margin-top: 26px;
}

.a-frame-more__button {
  display: inline-flex;
  grid-column: 2;
  justify-self: end;
  width: 250px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #2f78bf;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.a-frame-more__button:hover {
  color: #fff;
  background: var(--odex-blue);
  transform: translateY(-1px);
}

.moon-page__intro-title {
  margin-bottom: 14px;
}

.moon-page__intro-title h2 {
  margin-bottom: 0;
}

.moon-page__more-button {
  width: 250px;
}

.moon-page__more-button:hover {
  color: #fff;
  background: var(--odex-blue);
}

@media (max-width: 900px) {
  .a-frame-overview {
    padding-top: 126px;
  }

  .a-frame-overview__inner {
    width: min(100% - 40px, 760px);
  }

  .a-frame-detail-grid {
    grid-template-columns: 1fr;
  }

  .a-frame-more {
    grid-template-columns: 1fr;
  }

  .a-frame-more__button {
    grid-column: 1;
  }

  .a-frame-diagram {
    border-left: 0;
    border-right: 0;
  }
}

/* Industries archive page */
body.post-type-archive-odex_industry,
.industries-page {
  background: #f1f2f8;
}

.post-type-archive-odex_industry .odex-menu a[href*="/industries/"] {
  color: var(--odex-blue);
}

.post-type-archive-odex_industry .odex-menu a[href*="/industries/"]::after {
  width: 100%;
}

.industries-hero {
  position: relative;
  min-height: clamp(500px, 43vw, 620px);
  padding: 170px 0 150px;
  overflow: hidden;
  background-repeat: no-repeat;
  /* Lower the source artwork so the ship and platform match the design crop. */
  background-position: center calc(50% + clamp(150px, 15vw, 360px));
  background-size: cover;
}

.industries-hero__inner {
  position: relative;
  width: min(1200px, calc(100% - 96px));
  margin: 0 auto;
}

.industries-hero__content {
  width: min(1000px, 100%);
  color: #fff;
}

.industries-hero h1 {
  margin: 0 0 20px;
  color: #fff;
  font-family: var(--odex-serif);
  font-size: clamp(44px, 5.3vw, 72px);
  line-height: 1.05;
}

.industries-hero p {
  margin: 0;
  max-width: 1000px;
  color: #fff;
  font-size: 16px;
  line-height: 28.8px;
  font-weight: 600;
}

.industries-list {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  padding: 46px 0 105px;
  background: #f1f2f8;
}

.industries-list__inner {
  width: min(1120px, calc(100% - 96px));
  margin: 0 auto;
}

.industries-list__heading {
  margin-bottom: 34px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 61, 124, 0.12);
}

.industries-list__heading h2 {
  margin: 0;
  color: var(--odex-blue);
  font-family: var(--odex-serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  font-weight: 800;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(58px, 8vw, 112px);
  row-gap: 58px;
  margin-top: 72px;
}

.industries-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: start;
  gap: 10px 18px;
}

/* The two cards in the left column sit slightly higher in the reference layout. */
.industries-card:nth-child(odd) {
  transform: translateY(-40px);
}

.industries-card__copy h3 {
  margin: 0 0 6px;
  color: var(--odex-blue);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
}

.industries-card__copy p {
  margin: 0;
  max-width: 430px;
  color: #59636e;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}

.industries-card__arrow {
  display: inline-flex;
  width: 24px;
  height: 24px;
  margin-top: 8px;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.industries-card__arrow:hover {
  transform: translateX(3px);
}

.industries-card__arrow img {
  display: block;
  width: 100%;
  height: auto;
}

.industries-card__arrow span {
  display: none;
}

.industries-card__image {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  margin-top: 8px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: none;
}

.industries-card__image img {
  position: absolute;
  top: 52.5%;
  left: 50%;
  display: block;
  width: 111%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  transition: transform 0.35s ease;
}

.industries-card__image:hover img {
  transform: translate(-50%, -50%) scale(1.035);
}

@media (max-width: 900px) {
  .industries-hero {
    min-height: 520px;
    padding: 150px 0 125px;
  }

  .industries-hero__inner,
  .industries-list__inner {
    width: min(100% - 42px, 680px);
  }

  .industries-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .industries-card:nth-child(odd) {
    transform: none;
  }
}

@media (max-width: 620px) {
  .industries-hero {
    padding-top: 132px;
  }

  .industries-list {
    padding-top: 34px;
  }
}

/* Oil and Gas industry detail page */
body.single-odex_industry,
.industry-single {
  background: #f1f2f8;
}

.single-odex_industry .odex-menu a[href*="/industries/"],
.odex-industry-view .odex-menu a[href*="/industries/"] {
  color: var(--odex-blue);
}

.single-odex_industry .odex-menu a[href*="/industries/"]::after,
.odex-industry-view .odex-menu a[href*="/industries/"]::after {
  width: 100%;
}

.industry-single {
  padding: 142px 0 92px;
}

.industry-single__inner {
  width: min(1200px, calc(100% - 100px));
  margin: 56px auto;
}

.industry-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 34px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
}

.industry-breadcrumb a {
  color: #98a2ad;
}

.industry-breadcrumb a:hover {
  color: var(--odex-red);
}

.industry-breadcrumb__separator,
.industry-breadcrumb__current {
  color: var(--odex-blue);
}

.industry-single__title {
  margin: 0 0 18px;
  color: var(--odex-blue);
  font-family: var(--odex-sans);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
}

.industry-single__intro {
  margin-bottom: 28px;
  padding: 18px 22px;
  background: #e4edf9;
  color: #4f5d6a;
}

.industry-single__intro p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

.industry-single__intro strong {
  color: #0C4E9E;
  font-weight: 900;
}

.industry-single__hero-image {
  position: relative;
  margin: 0 0 18px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #dbe8f7;
}

.industry-single__hero-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 68, 124, .9) 0%,
    rgba(0, 91, 156, .62) 42%,
    rgba(0, 91, 156, .2) 76%,
    rgba(0, 91, 156, 0) 100%
  );
}

.industry-single__hero-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 116%;
  max-width: none;
  height: 116%;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%);
}

.industry-single__lead {
  margin: 0 0 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(0, 61, 124, .12);
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

.industry-single__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 54px;
  align-items: start;
}

.industry-single__sections {
  display: grid;
  gap: 26px;
}

.industry-feature {
  color: #4f5d6a;
}

.industry-feature h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--odex-blue);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
}

.industry-feature p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: #666666;
}

.industry-feature__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  max-width: 36px;
  object-fit: contain;
}

.industry-single__side-image {
  position: relative;
  margin: 0;
  aspect-ratio: 330 / 418;
  overflow: hidden;
  border-radius: 4px;
  background: #dbe8f7;
}

.industry-single__side-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 68, 124, .9) 0%,
    rgba(0, 91, 156, .62) 45%,
    rgba(0, 91, 156, .18) 76%,
    rgba(0, 91, 156, 0) 100%
  );
}

.industry-single__side-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 116%;
  max-width: none;
  height: 116%;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%);
}

.industry-feature--wide {
  margin-top: 26px;
}

@media (max-width: 900px) {
  .industry-single {
    padding-top: 140px;
  }

  .industry-single__inner {
    width: min(100% - 42px, 680px);
  }

  .industry-single__body {
    grid-template-columns: 1fr;
  }

  .industry-single__side-image {
    width: min(360px, 100%);
  }
}

@media (max-width: 620px) {
  .industry-single {
    padding-top: 128px;
    padding-bottom: 60px;
  }

  .industry-single__intro {
    padding: 16px;
  }
}

/* Services page */
body.page-template-page-services,
.services-page {
  background: #f1f2f8;
}

.page-template-page-services .odex-menu a[href*="/services/"],
.post-type-archive-odex_service .odex-menu a[href*="/services/"] {
  color: var(--odex-blue);
}

.page-template-page-services .odex-menu a[href*="/services/"]::after,
.post-type-archive-odex_service .odex-menu a[href*="/services/"]::after {
  width: 100%;
}

.services-hero {
  min-height: clamp(500px, 43vw, 620px);
  padding: 170px 0 150px;
  background-repeat: no-repeat;
  background-position: center calc(50% + clamp(120px, 12vw, 280px));
  background-size: cover;
}

.services-hero__inner,
.services-list__inner {
  width: min(1120px, calc(100% - 96px));
  margin: 0 auto;
}

.services-hero__content {
  width: min(1000px, 100%);
  color: #fff;
}

.services-hero h1 {
  margin: 0 0 20px;
  color: #fff;
  font-family: var(--odex-serif);
  font-size: clamp(44px, 5.3vw, 72px);
  line-height: 1.05;
}

.services-hero p {
  margin: 0;
  max-width: 1000px;
  color: #fff;
  font-size: 16px;
  line-height: 28.8px;
  font-weight: 600;
}

.services-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 23px;
  padding: 1px 18px;
  border-radius: 3px;
  background: #003d7c;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  transition: background-color .2s ease, transform .2s ease;
}

.services-hero__button:hover {
  background: #2f78bf;
  transform: translateY(-1px);
}

.services-list {
  padding: 28px 0 92px;
  background: #f1f2f8;
}

.services-item {
  margin: 0 0 42px;
}

.services-item:last-child {
  margin-bottom: 0;
}

.services-item h2 {
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 61, 124, .12);
  color: var(--odex-blue);
  font-family: var(--odex-serif);
  font-size: clamp(36px, 2.6vw, 34px);
  line-height: 1.15;
  font-weight: 800;
}

.services-item__row {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

.services-item--reverse .services-item__row {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.services-item--reverse .services-item__image {
  order: 2;
}

.services-item--reverse .services-item__copy {
  order: 1;
}

.services-item__image {
  position: relative;
  width: 320px;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  background: #dbe8f7;
  box-shadow: none;
}

.services-item__image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 68, 124, .9) 0%,
    rgba(0, 91, 156, .58) 45%,
    rgba(0, 91, 156, .18) 76%,
    rgba(0, 91, 156, 0) 100%
  );
}

.services-item__image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.services-item__copy h3 {
  margin: 0 0 11px;
  color: var(--odex-blue);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 900;
}

.services-item__copy p {
  margin: 0;
  color: #59636e;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 500;
}

@media (max-width: 900px) {
  .services-hero {
    min-height: 520px;
    padding: 150px 0 125px;
  }

  .services-hero__inner,
  .services-list__inner {
    width: min(100% - 42px, 680px);
  }

  .services-item__row,
  .services-item--reverse .services-item__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .services-item--reverse .services-item__image,
  .services-item--reverse .services-item__copy {
    order: initial;
  }

  .services-item__image {
    width: min(360px, 100%);
  }
}

@media (max-width: 620px) {
  .services-hero {
    padding-top: 128px;
  }

  .services-list {
    padding-top: 18px;
  }
}

/* Shared archive hero alignment: Products, Industries, Services */
.products-page-hero,
.industries-hero,
.services-hero {
  position: relative;
  min-height: clamp(680px, 50vw, 860px);
  padding: 200px 0 150px;
  overflow: hidden;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.industries-hero__inner,
.services-hero__inner {
  width: 100%;
  margin: 0;
}

.products-page-hero__content,
.industries-hero__content,
.services-hero__content {
  width: min(1000px, calc(100% - 48px));
  margin-left: max(64px, calc((100vw - 1200px) / 2));
  color: #fff;
}

.products-page-hero h1,
.industries-hero h1,
.services-hero h1 {
  margin: 0 0 20px;
  color: #fff;
  font-family: var(--odex-serif);
  font-size: clamp(44px, 5.3vw, 72px);
  line-height: 1.05;
}

.products-page-hero p,
.industries-hero p,
.services-hero p {
  margin: 0;
  max-width: 1000px;
  color: #fff;
  font-size: 16px;
  line-height: 28.8px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .products-page-hero,
  .industries-hero,
  .services-hero {
    min-height: 520px;
    padding: 170px 0 120px;
  }

  .products-page-hero__content,
  .industries-hero__content,
  .services-hero__content {
    width: min(100% - 48px, 1000px);
    margin-left: 24px;
  }
}

/* Contact page */
body.page-template-page-contact-us,
.contact-page-v2 {
  background: #f1f2f8;
}

.page-template-page-contact-us .odex-menu a[href*="/contact-us/"] {
  color: var(--odex-blue);
}

.page-template-page-contact-us .odex-menu a[href*="/contact-us/"]::after {
  width: 100%;
}

.contact-hero {
  position: relative;
  min-height: clamp(680px, 50vw, 860px);
  padding: 200px 0 150px;
  overflow: hidden;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.contact-hero__content {
  width: min(1000px, calc(100% - 48px));
  margin-left: max(64px, calc((100vw - 1200px) / 2));
  color: #fff;
}

.contact-hero h1 {
  margin: 0 0 20px;
  color: #fff;
  font-family: var(--odex-serif);
  font-size: clamp(44px, 5.3vw, 72px);
  line-height: 1.05;
}

.contact-main {
  padding: 28px 0 92px;
  background: #f1f2f8;
}

.contact-main__inner {
  width: min(1180px, calc(100% - 96px));
  margin: 0 auto;
}

.contact-main__title {
  margin: 0 0 34px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 61, 124, .12);
  color: var(--odex-blue);
  font-family: var(--odex-serif);
  font-size: clamp(36px, 2.6vw, 34px);
  line-height: 1.15;
  font-weight: 800;
}

.contact-layout-v2 {
  display: grid;
  grid-template-columns: 470px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.contact-office__image {
  position: relative;
  margin: 0 0 22px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: #dbe8f7;
}

.contact-office__image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 68, 124, .9) 0%,
    rgba(0, 91, 156, .58) 45%,
    rgba(0, 91, 156, .18) 76%,
    rgba(0, 91, 156, 0) 100%
  );
}

.contact-office__image img {
  display: block;
  width: 116%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translateX(-8%);
}

.contact-office h3,
.contact-form-v2 h3 {
  margin: 0 0 15px;
  color: var(--odex-blue);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 900;
}

.contact-office__line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  margin-bottom: 12px;
  color: #59636e;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500;
}

.contact-office__line img {
  width: 18px;
  max-width: 18px;
  margin-top: 2px;
}

.contact-office__line > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: start;
}

.contact-office__line strong {
  color: var(--odex-blue);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.45;
  grid-column: 1;
}

.contact-office__line p {
  margin: 0 0 3px;
  font-size: 14px;
  color: #999999;
}

.contact-office__line p {
  grid-column: 2;
}

.contact-office a {
  color: var(--odex-blue);
  font-weight: 800;
}

.contact-office__line a {
  color: #999999;
  font-weight: 500;
  text-decoration: none;
}

.contact-touch {
  margin-top: 22px;
  color: #59636e;
  font-size: 11px;
  line-height: 1.5;
}

.contact-touch h3 {
  margin-bottom: 10px;
}

.contact-touch p {
  margin: 0 0 3px;
  color: #999999;
  font-size: 16px;
}

.contact-form-v2 {
  --contact-form-label-column: 190px;
  --contact-form-column-gap: 18px;
  padding-top: 0;
  border-top: 0;
}

.contact-form-v2::before,
.contact-form-v2__actions::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--odex-red) 0 33.333%, rgba(0, 61, 124, .12) 33.333% 100%);
}

.contact-form-v2 h3 {
  margin: 18px 0 15px;
}

.contact-form-v2__message-title {
  position: relative;
  margin-top: 22px;
  padding-top: 18px;
}

.contact-form-v2__message-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--odex-red) 0 33.333%, rgba(0, 61, 124, .12) 33.333% 100%);
}

.contact-form-v2 label {
  display: grid;
  grid-template-columns: var(--contact-form-label-column) minmax(0, 1fr);
  gap: var(--contact-form-column-gap);
  align-items: center;
  margin-bottom: 10px;
  color: #59636e;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
}

.contact-form-v2 input,
.contact-form-v2 textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
  background: #e4e7ef;
  color: #999999;
  font: inherit;
  font-size: 14px;
}

.contact-form-v2 input {
  min-height: 34px;
}

.contact-form-v2 textarea {
  min-height: 78px;
  resize: vertical;
}

.contact-form-v2 label.contact-form-v2__message {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.contact-form-v2 label.contact-form-v2__message textarea {
  display: block;
  width: 100%;
}

.contact-form-v2__actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-top: 18px;
  padding-top: 16px;
}

.contact-form-v2__actions::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.contact-form-v2 label.contact-form-v2__consent {
  display: flex;
  gap: 25px;
  align-items: center;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  margin: 0;
}

.contact-form-v2 label.contact-form-v2__consent input {
  flex: 0 0 auto;
  min-height: auto;
  width: 18px;
  max-width: 18px;
  height: 18px;
  padding: 0;
  margin: 0 0 0 4px;
}

.contact-form-v2 label.contact-form-v2__consent em {
  color: var(--odex-blue);
  font-style: normal;
  font-weight: 800;
  text-decoration: underline;
}

.contact-form-v2__note {
  margin: 4px 0 14px;
  color: #a0a6af;
  font-size: 12px;
  line-height: 1.4;
}

.contact-form-v2__submit {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 34px;
  padding: 0 22px;
  border: 0;
  border-radius: 2px;
  background: var(--odex-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.contact-form-v2__required {
  color: var(--odex-red);
}

.contact-form-status {
  margin: -16px 0 28px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
}

.contact-form-status--success {
  color: #0c6237;
  background: #dff4e9;
}

.contact-form-status--error {
  color: #8f1f2b;
  background: #fde2e5;
}

@media (max-width: 900px) {
  .contact-main__inner {
    width: min(100% - 42px, 680px);
  }

  .contact-layout-v2 {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 760px) {
  .contact-hero {
    min-height: 520px;
    padding: 170px 0 120px;
  }

  .contact-hero__content {
    width: min(100% - 48px, 1000px);
    margin-left: 24px;
  }
}

@media (max-width: 620px) {
  .contact-form-v2 label,
  .contact-form-v2__consent {
    grid-template-columns: 1fr;
  }

  .contact-form-v2__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-form-v2__submit {
    margin-left: 0;
  }

  .contact-form-v2__note {
    margin-left: 0;
  }
}

.brochure-modal[hidden] {
  display: none;
}

.brochure-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 40px 20px 86px;
}

.brochure-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}

.brochure-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(600px, calc(100vw - 40px));
  min-height: 376px;
  padding: 28px 70px 28px;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}

.brochure-modal__title {
  margin: 0 0 18px;
  color: #04387B;
  font-family: var(--odex-sans);
  font-size: 20px;
  font-style: italic;
  font-weight: 800;
  line-height: 1.25;
}

.brochure-modal__image {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 18px;
  object-fit: contain;
}

.brochure-modal__message {
  margin: 0 0 20px;
  color: #666666;
  font-size: 16px;
  line-height: 1.5;
}

.brochure-modal__status {
  margin: -6px 0 18px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.45;
}

.brochure-modal__status--success {
  background: #edf8f1;
  color: #16743a;
}

.brochure-modal__status--error {
  background: #fff1f0;
  color: #b42318;
}

.brochure-modal__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.brochure-modal__input {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 2px;
  background: #f5f5f5;
  color: #333;
  font-size: 14px;
  padding: 0 12px;
  outline: none;
}

.brochure-modal__input::placeholder {
  color: #999999;
  font-size: 14px;
  opacity: 1;
}

.brochure-modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 214px;
  height: 48px;
  border: 0;
  border-radius: 4px;
  background: #2f78bf;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.brochure-modal__submit:hover {
  background: #04387B;
  transform: translateY(-1px);
}

.brochure-modal__close {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(50% + 212px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  transform: translateX(-50%);
  cursor: pointer;
}

@media (max-width: 620px) {
  .brochure-modal {
    padding: 28px 18px 84px;
  }

  .brochure-modal__dialog {
    min-height: 0;
    padding: 26px 22px;
  }

  .brochure-modal__message {
    font-size: 15px;
  }

  .brochure-modal__submit {
    width: min(214px, 100%);
  }

  .brochure-modal__close {
    top: calc(50% + 218px);
  }
}

/* Header bar must stay pure white on every page. Keep this at the end so it
   wins over shared header, home, archive, and detail-page overrides above. */
body .site-header > .site-header__inner,
body.home .site-header > .site-header__inner,
body.odex-product-view .site-header > .site-header__inner,
body.odex-product-detail-view .site-header > .site-header__inner,
body.odex-industry-view .site-header > .site-header__inner,
body.single-odex_industry .site-header > .site-header__inner,
body.page-template-page-services .site-header > .site-header__inner,
body.page-template-page-contact-us .site-header > .site-header__inner,
body.post-type-archive-odex_product .site-header > .site-header__inner,
body.post-type-archive-odex_industry .site-header > .site-header__inner,
body.post-type-archive-odex_service .site-header > .site-header__inner {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Search button final normalization: use the home-header size and treatment
   everywhere, including product/detail/archive pages. */
.site-header .product-search,
.home .site-header .product-search {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  height: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header .search-button,
.site-header .search-button:hover,
.home .site-header .search-button,
.home .site-header .search-button:hover {
  flex: 0 0 57px !important;
  width: 57px !important;
  height: 54px !important;
  min-width: 57px !important;
  min-height: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: url("../images/ui/search.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

.site-header .search-button span,
.home .site-header .search-button span {
  display: none !important;
}

.site-header .product-search__input,
.home .site-header .product-search__input {
  height: 54px !important;
}

@media (max-width: 760px) {
  .site-header .product-search,
  .home .site-header .product-search {
    width: 100% !important;
    height: auto !important;
  }

  .site-header .search-button,
  .site-header .search-button:hover,
  .home .site-header .search-button,
  .home .site-header .search-button:hover {
    flex-basis: 54px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Floating contact buttons: show native hover titles only, no page navigation. */
.quick-contact button {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row-reverse;
  gap: 9px;
  padding: 0 8px;
  border: 0;
  border-bottom: 0;
  background: var(--odex-blue);
  color: #fff;
  font-size: 0;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
  overflow: hidden;
  transition: width .24s ease, background .2s ease;
}

.quick-contact button:first-child {
  border-radius: 4px 4px 0 0;
}

.quick-contact button:last-child {
  border-radius: 0 0 4px 4px;
}

.quick-contact button:first-child::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 0;
  width: 22px;
  height: 1px;
  background: var(--odex-red);
  transform: none;
}

.quick-contact button img {
  flex: 0 0 auto;
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.quick-contact button span {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .24s ease, opacity .2s ease;
}

.quick-contact button:hover,
.quick-contact button:focus-visible {
  width: 220px;
  padding: 0 11px 0 14px;
  background: #063d78;
  outline: none;
  transform: none;
  font-size: 14px;
}

.quick-contact button:first-child:hover,
.quick-contact button:first-child:focus-visible {
  width: 125px;
}

.quick-contact button:hover span,
.quick-contact button:focus-visible span {
  max-width: 180px;
  opacity: 1;
}

/* Desktop adaptation final layer.
   Keeps the approved desktop composition consistent across common laptop,
   1080p, and 2K desktop widths without changing the mobile layout. */
@media (min-width: 1024px) {
  :root {
    --odex-desktop-page-max: 1928px;
    --odex-desktop-content-max: 1200px;
    --odex-desktop-gutter: clamp(56px, 5.85vw, 120px);
  }

  html {
    scrollbar-gutter: stable;
  }

  .site-header,
  body.admin-bar .site-header,
  body.admin-bar.home .site-header,
  body.admin-bar.odex-product-detail-view .site-header {
    top: clamp(32px, 2.6vw, 44px) !important;
  }

  .site-header__inner,
  .home .site-header__inner {
    width: min(calc(100% - var(--odex-desktop-gutter)), var(--odex-desktop-page-max)) !important;
    min-height: clamp(78px, 5.2vw, 104px) !important;
    padding: clamp(10px, .85vw, 14px) clamp(28px, 3.1vw, 60px) !important;
  }

  .site-header .brand__image {
    width: clamp(138px, 8.3vw, 170px) !important;
  }

  .primary-nav,
  .home .primary-nav {
    gap: clamp(18px, 1.7vw, 32px) !important;
  }

  .odex-menu,
  .home .odex-menu {
    gap: clamp(18px, 1.75vw, 34px) !important;
  }

  .odex-menu a,
  .home .odex-menu a {
    font-size: clamp(14px, .84vw, 16px) !important;
    white-space: nowrap;
  }

  .container,
  .site-footer__grid,
  .site-footer__bottom,
  .products-page-list__inner,
  .industries-list__inner,
  .services-list__inner,
  .contact-main__inner {
    width: min(var(--odex-desktop-content-max), calc(100% - var(--odex-desktop-gutter))) !important;
  }

  .home-hero {
    height: clamp(720px, 60.42vw, 1240px) !important;
    min-height: 0 !important;
    padding-top: clamp(220px, 18.55vw, 285px) !important;
  }

  .home-hero__slide {
    top: clamp(-96px, -4vw, -60px) !important;
    bottom: 0 !important;
    background-position: center 66% !important;
    background-size: cover !important;
  }

  .home-hero__content {
    width: clamp(500px, 36vw, 590px) !important;
    margin-left: max(clamp(84px, 7.8vw, 120px), calc((100vw - var(--odex-desktop-content-max)) / 2)) !important;
    margin-top: 0 !important;
  }

  .home-hero h1 {
    width: 100% !important;
    font-size: clamp(48px, 3.65vw, 64px) !important;
    line-height: 1.12 !important;
  }

  .home-hero p {
    width: min(100%, 560px) !important;
    font-size: clamp(18px, 1.36vw, 22px) !important;
  }

  .home-hero__arrow {
    top: clamp(330px, 26.4vw, 520px) !important;
    width: clamp(72px, 7.2vw, 110px) !important;
    height: clamp(260px, 26vw, 400px) !important;
  }

  .home-about {
    margin-top: clamp(-160px, -8.2vw, -118px) !important;
    padding-top: clamp(190px, 11.2vw, 246px) !important;
  }

  .home-about::before {
    background-position: center top !important;
    background-size: 100% auto !important;
  }

  .home-about__image {
    height: clamp(340px, 28.5vw, 438px) !important;
    min-height: clamp(340px, 28.5vw, 438px) !important;
  }

  .home-section-heading h2,
  .home-middle-card h2 {
    font-size: clamp(42px, 3.4vw, 54px) !important;
  }

  .home-section-heading p,
  .home-middle-card p {
    font-size: clamp(17px, 1.3vw, 20px) !important;
  }

  .home-middle-card,
  .home-middle-card--reverse {
    grid-template-columns: minmax(420px, 560px) minmax(0, 1fr) !important;
    gap: clamp(40px, 4.2vw, 64px) !important;
  }

  .home-middle-card--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 560px) !important;
  }

  .home-products__viewport {
    width: min(1516px, calc(100vw - var(--odex-desktop-gutter))) !important;
    margin-left: max(calc(var(--odex-desktop-gutter) / 2), calc((100vw - var(--odex-desktop-content-max)) / 2)) !important;
  }

  .products-page-hero,
  .industries-hero,
  .services-hero,
  .contact-hero {
    box-sizing: border-box !important;
    height: clamp(760px, 50vw, 1280px) !important;
    min-height: 0 !important;
    padding-top: clamp(170px, 12vw, 200px) !important;
    padding-bottom: clamp(120px, 8vw, 150px) !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
  }

  .products-page-list,
  .industries-list,
  .services-list,
  .contact-main {
    margin-top: -1px !important;
    padding-top: clamp(46px, 3vw, 80px) !important;
  }

  .products-page-hero__content,
  .industries-hero__content,
  .services-hero__content,
  .contact-hero__content {
    width: min(1000px, calc(100% - var(--odex-desktop-gutter))) !important;
    margin-left: max(calc(var(--odex-desktop-gutter) / 2), calc((100vw - var(--odex-desktop-content-max)) / 2)) !important;
  }

  .quick-contact {
    top: 85% !important;
    transform: translateY(-50%) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --odex-desktop-gutter: clamp(48px, 5.2vw, 72px);
  }

  .site-header__inner,
  .home .site-header__inner {
    padding-left: clamp(22px, 2.4vw, 34px) !important;
    padding-right: clamp(22px, 2.4vw, 34px) !important;
  }

  .home-hero__content {
    width: min(500px, calc(100% - 160px)) !important;
  }
}

@media (min-width: 1920px) {
  .home-hero__slide {
    top: -96px !important;
    bottom: 0 !important;
    background-position: center 66% !important;
  }
}