/* Full-width banners share the same composition on desktop and phones. */
.mb-hero,
.inner-banner {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.mb-hero::after,
.inner-banner::after {
  content: none;
  display: none;
}

.mb-hero-background,
.hero-shortcuts {
  border-radius: 0;
}

.mb-hero-inner,
.inner-banner-layout {
  width: 90%;
  max-width: 1400px;
  margin-inline: auto;
}

.mb-hero-copy,
.mb-hero-products,
.inner-banner-copy,
.inner-banner-visual {
  min-width: 0;
}

.mb-hero-products {
  padding: 0;
}

.hero-three {
  margin: 0;
}

@media (max-width: 760px) {

  .hero-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-shortcuts > a,
  .hero-shortcuts > a:nth-child(2) {
    padding: 12px 9px;
    font-size: clamp(10px, 2.5vw, 14px);
    line-height: 1.6;
    border-bottom: 0;
    border-right: 1px solid #d7e0e7;
    gap: 5px;
  }

  .hero-shortcuts > a:last-child {
    border-right: 0;
  }

  .hero-shortcuts > a svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .inner-banner {
    min-height: 0;
    margin-bottom: 25px;
  }

  .inner-banner-layout,
  .brand-hero .inner-banner-layout {
    width: auto;
    margin-inline: 16px;
    grid-template-columns: minmax(0, .56fr) minmax(0, .44fr);
    gap: 10px;
    min-height: 285px;
    padding-block: 24px;
    align-items: center;
  }

  .inner-banner-copy:only-child,
  .inner-banner:has(.inner-banner-photo[src*='company-panorama']) .inner-banner-copy {
    grid-column: 1;
    max-width: none;
  }

  .inner-banner-copy {
    max-width: none;
  }

  .inner-banner .crumbs {
    font-size: 10px;
    line-height: 1.6;
    gap: 5px;
    margin-bottom: 10px;
  }

  .inner-client-logo {
    width: 64px;
    height: 38px;
    margin-bottom: 10px;
  }

  .inner-banner h1,
  .brand-hero .inner-banner-copy h1 {
    font-size: clamp(20px, 5.2vw, 34px);
    line-height: 1.4;
    letter-spacing: -.3px;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .inner-banner p {
    font-size: clamp(12px, 2.7vw, 16px);
    line-height: 1.75;
    margin-top: 10px;
  }

  .inner-banner-photo,
  .inner-banner-photo[src*='company-panorama'],
  .inner-banner:has(img[src*='company-panorama']) .inner-banner-photo {
    object-position: 65% center;
  }

  .inner-banner-shade,
  .inner-banner:has(.inner-banner-photo[src*='company-panorama']) .inner-banner-shade {
    background: linear-gradient(90deg, #132637ed 0%, #132637d6 40%, #13263766 65%, #1326370d 100%);
  }

  .inner-banner-visual {
    min-height: 0;
    max-height: none;
    align-self: center;
    justify-content: center;
  }

  .inner-product-pair {
    width: 125%;
    max-width: none;
    height: clamp(185px, 48vw, 280px);
    margin: 0 -12.5%;
    flex-shrink: 0;
  }

  .inner-product-pair img {
    width: 60%;
  }

  .inner-single-product {
    width: 125%;
    max-width: none;
    height: clamp(190px, 50vw, 285px);
    margin-inline: -12.5%;
    flex-shrink: 0;
  }

  .inner-brand-mark {
    padding: 12px;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    max-width: 100%;
  }

  .inner-brand-mark img {
    width: 100%;
    height: 65px;
  }

  .inner-tds-preview {
    position: relative;
    right: auto;
    bottom: auto;
    opacity: 1;
    z-index: auto;
    max-width: 100%;
    transform: rotate(3deg);
  }

  .inner-tds-preview img {
    width: 100%;
    height: auto;
    max-height: 230px;
    object-fit: contain;
    border: 0;
    border-radius: 0;
  }

  .inner-phone {
    font-size: clamp(16px, 4vw, 22px);
    margin-top: 10px;
  }

  .brand-hero .inner-banner-layout {
    grid-template-columns: minmax(0, .48fr) minmax(0, .52fr);
  }

  .brand-hero-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    gap: 10px;
  }

  .brand-hero-logos a,
  .brand-hero-logos a:nth-child(even) {
    height: 44px;
    padding: 0;
  }

  .brand-hero-logos img {
    max-width: 100%;
    max-height: 38px;
  }

  .brand-hero-orbit {
    display: none;
  }

  /* A wide specification table must scroll inside its product column. */
  .detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-layout > * {
    min-width: 0;
  }

  .detail-layout .table-scroll {
    max-width: 100%;
  }
}

/* Keep the supplied desktop composition proportional across smaller screens. */
@media (max-width: 1150px) {
  :root {
    --top-unit: calc(100vw / 1470);
  }

  .mb-hero {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  .mb-hero-background {
    background: linear-gradient(90deg, #fff 0%, #fffffff2 27%, #ffffffa6 48%, #ffffff12 95%), url('assets/industry-hd.png') center / cover;
  }

  .mb-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    width: 90%;
    margin-inline: auto;
    min-height: calc(575 * var(--top-unit));
    padding: calc(35 * var(--top-unit)) 0;
    gap: calc(40 * var(--top-unit));
  }

  .banner-logo {
    width: calc(117 * var(--top-unit));
    height: calc(69 * var(--top-unit));
    margin-bottom: calc(18 * var(--top-unit));
  }

  .mb-hero h1 {
    font-size: calc(66 * var(--top-unit));
    line-height: 1.27;
    letter-spacing: calc(-.8 * var(--top-unit));
  }

  .mb-hero-copy > p {
    font-size: calc(18 * var(--top-unit));
    line-height: 1.9;
    margin-top: calc(20 * var(--top-unit));
    max-width: none;
  }

  .mb-hero .buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(12 * var(--top-unit));
    margin-top: calc(25 * var(--top-unit));
  }

  .mb-hero .btn,
  .mb-hero .btn:not(.secondary):not(.outline),
  .mb-hero .btn.secondary {
    flex: 0 0 auto;
    min-height: calc(58 * var(--top-unit));
    padding: calc(9 * var(--top-unit)) calc(12 * var(--top-unit)) calc(9 * var(--top-unit)) calc(25 * var(--top-unit));
    gap: calc(27 * var(--top-unit));
    border-radius: calc(18 * var(--top-unit));
    font-size: calc(16 * var(--top-unit));
    line-height: 1.5;
    white-space: nowrap;
  }

  .mb-hero .btn i {
    width: calc(36 * var(--top-unit));
    height: calc(36 * var(--top-unit));
    flex: 0 0 calc(36 * var(--top-unit));
  }

  .mb-hero .btn i svg {
    width: calc(19 * var(--top-unit));
    height: calc(19 * var(--top-unit));
  }

  .banner-telephone {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    font-size: calc(18 * var(--top-unit));
    gap: calc(12 * var(--top-unit));
    margin-top: calc(24 * var(--top-unit));
    line-height: 1.5;
    white-space: nowrap;
  }

  .banner-telephone span {
    display: inline;
  }

  .mb-hero-products {
    padding: 0;
    align-self: center;
  }

  .mb-hero-products::before {
    inset: 0 calc(-25 * var(--top-unit)) calc(20 * var(--top-unit));
  }

  .hero-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    margin: 0;
    gap: 0;
  }

  .hero-three img,
  .hero-three > a:nth-child(2) img {
    width: 110%;
    max-width: none;
    height: calc(340 * var(--top-unit));
    margin-left: -5%;
    object-fit: contain;
    filter: drop-shadow(0 calc(15 * var(--top-unit)) calc(13 * var(--top-unit)) #23303e22);
  }

  .hero-three > a:nth-child(2) img {
    height: calc(375 * var(--top-unit));
  }
}

/* Give the requested mobile copy and actions more space beside the products. */
@media (max-width: 760px) {
  .mb-hero-inner {
    width: auto;
    margin-inline: 16px;
    min-height: clamp(220px, 61vw, 340px);
    padding-block: 22px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 10px;
  }

  .mb-hero h1 {
    font-size: clamp(24px, 7.2vw, 42px);
    line-height: 1.3;
    letter-spacing: -.4px;
  }

  .mb-hero-copy > p {
    font-size: clamp(10.5px, 2.9vw, 15px);
    line-height: 1.65;
    margin-top: 12px;
  }

  .mb-hero .buttons {
    margin-top: 14px;
    gap: 6px;
  }

  .mb-hero .btn,
  .mb-hero .btn:not(.secondary):not(.outline),
  .mb-hero .btn.secondary {
    min-height: 36px;
    padding: 7px 6px;
    gap: 0;
    border-radius: 10px;
    font-size: clamp(8.5px, 2.5vw, 13px);
    line-height: 1.4;
  }

  .mb-hero .btn i {
    display: none;
  }

  .hero-three img,
  .hero-three > a:nth-child(2) img {
    width: 145%;
    margin-left: -22.5%;
    height: clamp(145px, 41vw, 250px);
  }

  .hero-three > a:nth-child(2) img {
    height: clamp(165px, 46vw, 275px);
  }
}

/* LINE keeps its familiar green and a compact rounded action shape. */
.floating-line {
  min-height: 46px;
  padding: 10px 14px;
  gap: 8px;
  border: 0;
  border-radius: 16px;
  background: #06c755;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 5px 16px #06a34630;
}

.floating-line:hover {
  background: #05b34c;
}

.floating-line .line-button-mark {
  width: 28px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #fff9;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: 700 8px Arial, sans-serif;
}

.floating-line .line-button-label {
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.line-button-arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.mobile-brand-rows {
  display: none;
}

@media (max-width: 760px) {
  .container,
  .wrap {
    width: calc(100% - 32px);
  }

  .header-main {
    height: 84px;
  }

  header .company-logo {
    width: clamp(112px, 31vw, 132px);
    height: 72px;
  }

  .page-scrolled .header-main {
    height: 76px;
  }

  .page-scrolled header .company-logo {
    height: 64px;
  }

  .mb-hero-inner {
    min-height: 285px;
    padding-block: 24px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 12px;
    align-content: center;
  }

  .mb-hero-copy {
    display: contents;
  }

  .mb-hero h1 {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(27px, 7.7vw, 39px);
    line-height: 1.25;
  }

  .mb-hero-copy > p {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.65;
  }

  .mb-hero-products {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .mb-hero .buttons {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4px;
    gap: 10px;
  }

  .mb-hero .btn,
  .mb-hero .btn:not(.secondary):not(.outline),
  .mb-hero .btn.secondary {
    min-height: 44px;
    padding: 10px;
    font-size: clamp(12px, 3.3vw, 15px);
    justify-content: center;
    border-radius: 12px;
  }

  .hero-three img,
  .hero-three > a:nth-child(2) img {
    height: clamp(155px, 44vw, 250px);
  }

  .hero-three > a:nth-child(2) img {
    height: clamp(175px, 49vw, 275px);
  }

  .hero-shortcuts > a,
  .hero-shortcuts > a:nth-child(2) {
    min-height: 50px;
    padding: 10px 9px;
    font-size: 11px;
    line-height: 1.45;
  }

  .section {
    padding-block: 32px;
  }

  .section-head {
    margin-bottom: 22px;
    gap: 16px;
  }

  .section-head h2,
  .company-copy h2,
  .company-section .company-copy h2 {
    font-size: 27px;
    line-height: 1.35;
  }

  .section-head p {
    font-size: 13px;
    line-height: 1.7;
  }

  .company-section .company-cutout img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .brands-strip {
    padding: 18px 0 12px;
  }

  .brands-label {
    gap: 12px;
    margin-bottom: 10px;
  }

  .brands-label strong {
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .brands-label > a {
    flex-shrink: 0;
    font-size: 10px;
  }

  .brands-strip > .business-brands,
  .brand-directory .brand-logo-cloud,
  .brand-hero .brand-hero-logos {
    display: none;
  }

  .mobile-brand-rows {
    display: grid;
    width: calc(100% - 32px);
    margin: 0 auto;
    gap: 4px;
    mix-blend-mode: multiply;
  }

  .brand-directory .mobile-brand-rows,
  .brand-hero .mobile-brand-rows {
    width: 100%;
  }

  .brand-hero .inner-banner-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .brand-hero .inner-banner-copy h1 {
    font-size: 26px;
  }

  .mobile-brand-row {
    min-width: 0;
    overflow: hidden;
  }

  .mobile-brand-track {
    display: flex;
    width: 200%;
    animation: mobile-brand-left 24s linear infinite;
    will-change: transform;
  }

  .mobile-brand-row-1 .mobile-brand-track {
    animation-direction: reverse;
  }

  .mobile-brand-set {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    flex: 0 0 50%;
    min-width: 0;
  }

  .mobile-brand-set > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 54px;
    padding: 6px;
  }

  .mobile-brand-set img {
    display: block;
    width: 100%;
    max-width: 80px;
    height: 36px;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .mobile-brand-rows:hover .mobile-brand-track {
    animation-play-state: paused;
  }

  .mobile-brand-row:focus-within .mobile-brand-track {
    animation: none;
    transform: none;
  }

  .motion-off .mobile-brand-track {
    animation: none;
    transform: none;
  }

  .motion-off .mobile-brand-set[aria-hidden='true'] {
    display: none;
  }

  .business-scope {
    margin: 0;
    padding: 20px 0 28px;
  }

  .scope-grid {
    gap: 12px;
  }

  .scope-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
  }

  .scope-intro h2 {
    grid-column: 1 / -1;
    margin: 0;
    font-size: clamp(20px, 5.5vw, 24px);
    line-height: 1.35;
  }

  .scope-intro h2 br {
    display: none;
  }

  .scope-intro p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
  }

  .scope-intro .btn,
  .scope-intro .btn.secondary {
    min-height: 42px;
    padding: 8px 10px;
    gap: 7px;
    font-size: 11px;
    border-radius: 11px;
  }

  .scope-intro .btn i {
    width: 23px;
    height: 23px;
  }

  .scope-intro .btn i svg {
    width: 14px;
    height: 14px;
  }

  .scope-tile {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
  }

  .scope-tile > img {
    height: 112px;
    flex-shrink: 0;
  }

  .scope-tile > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 12px;
    gap: 8px;
  }

  .scope-tile h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
  }

  .scope-tile p {
    min-height: 0;
    margin: 0;
    flex: 1;
    font-size: 12px;
    line-height: 1.6;
  }

  .scope-tile a {
    min-height: 36px;
    margin-top: 2px;
    padding: 7px 9px;
    font-size: 11px;
    border-radius: 9px;
  }

  .scope-tile a svg {
    width: 19px;
    height: 19px;
  }

  .scope-tile:last-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .scope-tile:last-child > img {
    min-height: 165px;
  }

  .product-grid,
  .home-products {
    gap: 12px;
  }

  .product-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    min-height: 266px;
  }

  .home-products .product-card:last-child {
    display: flex;
  }

  .product-art,
  .home-products .product-card:last-child .product-art {
    height: clamp(128px, 37vw, 160px);
    flex-shrink: 0;
  }

  .product-tag {
    top: 9px;
    left: 9px;
    padding: 3px 5px;
    font-size: 7px;
  }

  .product-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px;
  }

  .product-meta h3 {
    min-height: 0;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.4;
  }

  .product-meta p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 0;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.55;
  }

  .product-link {
    min-height: 31px;
    margin-top: auto;
    padding-top: 9px;
    font-size: 10px;
    line-height: 1.5;
    gap: 5px;
  }

  .product-link svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .floating-line {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 12px;
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-brand-track {
      animation: none;
      transform: none;
    }

    .mobile-brand-set[aria-hidden='true'] {
      display: none;
    }
  }
}

@keyframes mobile-brand-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}