/* Homepage and shared shell dimensions use rem, driven by site-layout.css.
 * Keep media-query breakpoints in px; 1rem remains 16px on mobile.
 */
@font-face {
    font-family: Lora;
    src: url('../fonts/Lora-variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap
}

@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex-variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap
}

:root {
    --mh-bg: #251f1b;
    --mh-text: #ede9e3;
    --mh-gold: #ffd99d;
    --mh-gradient: linear-gradient(90deg, #C48337, #F4CA8C);
    --mh-container: 100rem
}

.mh-home,
.mh-header,
.mh-footer,
.mh-dialog,
.mh-quick-contact {
    font-family: 'Google Sans Flex', Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.5;
    box-sizing: border-box
}

.mh-home *,
.mh-header *,
.mh-footer *,
.mh-dialog *,
.mh-quick-contact * {
    box-sizing: border-box
}

.mh-home {
    background: var(--mh-bg);
    color: var(--mh-text);
    overflow: clip
}

.mh-home h1,
.mh-home h2,
.mh-home h3,
.mh-home p,
.mh-home figure,
.mh-footer p,
.mh-footer h2 {
    margin: 0
}

.mh-home h1 span {
    line-height: inherit
}

.mh-copy p {
    line-height: 1.6
}

.mh-home section {
    scroll-margin-top: 6.25rem
}

.mh-home textarea,
.mh-dialog textarea {
    font-family: 'Google Sans Flex', Arial, sans-serif !important
}

.mh-header:not(.mh-header-home) {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent
}

.mh-header:not(.mh-header-home).mh-scrolled {
    position: fixed;
    background: #fff
}

.mh-home h2,
.mh-dialog h2 {
    font: 500 clamp(1.75rem, 2.22vw, 2.6875rem)/1.2 Lora, Georgia, serif;
    letter-spacing: .015em;
    color: inherit
}

.mh-home h3 {
    font-weight: 500;
    line-height: 1.3;
    color: inherit
}

.mh-home a,
.mh-header a,
.mh-footer a {
    color: inherit;
    text-decoration: none
}

.mh-home img {
    display: block;
    max-width: 100%;
    height: auto;
}

.mh-container {
    width: calc(100% - 5rem);
    max-width: var(--mh-container);
    margin-inline: auto;
    position: relative
}

.mh-wide {
    width: calc(100% - 8.125rem);
    max-width: 103rem !important;
    margin-inline: auto
}

.mh-section {
    position: relative;
    padding-block: 8.125rem
}

.mh-section-heading {
    text-align: center;
    margin-bottom: 4rem
}

.mh-section-heading p {
    max-width: 68.75rem;
    margin: 1.25rem auto 0;
    line-height: 1.55
}

.mh-gradient-text {
  /* 关键：让宽度只包裹内容 */
  display: inline-block;      /* 或 inline-flex / inline */
  width: fit-content;         /* 宽度仅基于内容 */
  max-width: 100%;            /* 防止超出父容器，可按需保留 */

  background: var(--mh-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.mh-eyebrow {
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: .025em
}

.mh-copy {
    line-height: 1.6;
    margin: 2.125rem 0 3.625rem
}

.mh-copy p+p {
    margin-top: 1.5rem
}

.mh-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
    margin-bottom: 3rem
}

.mh-heading-row>div {
    max-width: 70rem
}

.mh-heading-row p {
    margin-top: 1.625rem;
    max-width: 60rem
}

.mh-heading-row .mh-button {
    flex-shrink: 0
}

.mh-button,
.mh-dialog input[type=submit],
.mh-footer input[type=submit],
.mh-inquiry input[type=submit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.875rem;
    padding: 0.2rem 3.5rem;
    border: 0px solid transparent;
    border-radius: 0.3125rem;
    background: var(--mh-gradient);
    color: #191919 !important;
    font: 500 1.25rem/1.2 'Google Sans Flex', Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s, box-shadow .25s, color .25s;
    max-width: 100%
}


.mh-button:hover,
.mh-button[aria-pressed=true],
.mh-dialog input[type=submit]:hover,
.mh-footer input[type=submit]:hover,
.mh-inquiry input[type=submit]:hover {
    background: #fff;
    box-shadow: 0 0.1875rem 0.1875rem rgba(0, 0, 0, 0.199);
    color: #191919
}

.mh-home :focus-visible,
.mh-header :focus-visible,
.mh-footer :focus-visible,
.mh-dialog :focus-visible,
.mh-quick-contact :focus-visible {
    outline: 0.1875rem solid #ffd99d;
    outline-offset: 0.3125rem
}

.mh-button-outline {
    border: 1px solid;
    background: transparent;
    border-color: #d8cbbb;
    color: #fff !important
}

.mh-button-outline:hover {
    color: #191919 !important
}

.mh-centered-action {
    text-align: center;
    margin-top: 4.375rem
}

.mh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem
}

.mh-section-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    z-index: 0;
    pointer-events: none
}

.mh-audience:after,
.mh-materials:after,
.mh-solutions:after,
.mh-inquiry:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.51);
    pointer-events: none
}

.mh-audience>.mh-container,
.mh-materials>div,
.mh-solutions>.mh-container,
.mh-inquiry>.mh-container {
    position: relative;
    z-index: 1
}

.mh-empty {
    padding: 3.625rem 1.5rem;
    border: 1px solid #ffffff20;
    text-align: center;
    color: #c7bdb3;
    min-height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.mh-hero {
    min-height: 38.75rem;
    height: min(47.4vw, 56.875rem);
    position: relative;
    display: flex;
    align-items: center
}

.mh-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center
}

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

.mh-hero-carousel .mh-track,
.mh-hero-carousel .mh-slide {
    height: 100%
}

.mh-hero-carousel picture {
    display: block;
    width: 100%;
    height: 100%
}

.mh-hero-carousel .mh-track {
    gap: 0
}

.mh-hero-carousel .mh-hero-image {
    position: static;
    display: block
}

.mh-hero-carousel .mh-carousel-controls {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 1.5rem;
    margin: 0;
    transform: translateX(-50%)
}

.mh-hero:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, #0009, transparent 72%), linear-gradient(#0008, transparent 24%)
}

.mh-hero-content {
    z-index: 2;
    padding-top: 3.75rem
}

.mh-hero .mh-eyebrow {
    text-transform: none;
    font-size: 1.625rem
}

.mh-hero h1 {
    font: 500 clamp(2.5rem, 3.13vw, 3.8125rem)/1.08 Lora, Georgia, serif;
    margin: 1.625rem 0 1.875rem;
    letter-spacing: .02em
}

.mh-hero h1>span {
    display: block
}

.mh-hero-description {
    font-size: 1.25rem;
    max-width: 44.375rem;
    line-height: 1.45
}

.mh-hero .mh-actions {
    margin-top: 4.875rem
}

.mh-about {
    padding-bottom: 0
}

.mh-about-grid {
    display: grid;
    grid-template-columns: 1fr 1.06fr;
    align-items: start;
    max-width: 111rem;
    width: calc(100% - 9rem)
}

.mh-about-copy {
    position: relative;
    background: #050504;
    padding: 4.625rem 4.375rem 5.625rem 6.875rem;
    min-height: 41.5rem;
    isolation: isolate;
    /* overflow: hidden; */
}

.mh-about-copy:after {
    content: '';
    position: absolute;
    inset: 0 -13.75rem 0 0;
    background: #050504;
    z-index: -2
}

.mh-about .mh-eyebrow {
    margin-bottom: 0.75rem
}

.mh-about h2 {
    font-size: clamp(1.75rem, 2.22vw, 2.6875rem);
    line-height: 1.02
}

.mh-about .mh-copy {
    font-size: 1.125rem;
    max-width: 43.75rem
}

/* The positioned watermark is painted above static content; lift this button over it. */
.mh-about .mh-about-button {
    position: relative;
    z-index: 1;
    background-color: #c48337;
    background-image: var(--mh-gradient, linear-gradient(90deg, #c48337, #f4ca8c));
}

/* Keep the hover surface solid; only the inner label receives the gradient. */
.mh-about .mh-about-button:is(:hover, :focus-visible) {
    background: #000 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 5px 5px #0005;
}

.mh-about .mh-about-button:is(:hover, :focus-visible) span {
    background: var(--mh-gradient, linear-gradient(90deg, #c48337, #f4ca8c));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.mh-about-photo {
    padding-top: 4.6875rem;
    position: relative;
    z-index: 1; /* Only the painted image covers the watermark, not the blank space below. */
}

.mh-about-photo {
    overflow: hidden; /* 裁切放大溢出的部分 */
}

.mh-about-photo img {
    width: 100%;
    aspect-ratio: 883 / 643;
    object-fit: cover;
    transition: transform 0.4s ease;
	border-radius:.6em;
}

.mh-about-photo:hover img {
    transform: scale(1.05); /* 微微放大，可调 1.03 ~ 1.08 */
}

.mh-watermark {
    font-size: clamp(6.25rem, 12vw, 13.75rem);
    font-weight: 600;
    line-height: .8;
    color: #b8873844;
    position: absolute;
    left: 5rem;
    bottom: -0.9375rem;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
    mask-image: linear-gradient(to top, #000 30%, transparent 100%);
}

.mh-watermark-wrap {
    position: absolute;
    inset: 0;
    overflow: visible;
    /* Preserve the original top/bottom/left crop, but let the watermark
       continue into the right column. The photo supplies the actual occlusion. */
    clip-path: inset(0 -100vw 0 0);
    pointer-events: none;
    z-index: 0;
}

.mh-factory-carousel {
    margin-top: 4.5rem;
    padding: 0 0 0.25rem
}

.mh-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain
}

.mh-track::-webkit-scrollbar {
    display: none
}

.mh-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0
}

.mh-factory-carousel .mh-slide {
    flex-basis: calc((100% - 4.5rem)/4)
}

.mh-factory-carousel img {
    aspect-ratio: 383/215;
    object-fit: cover;
    width: 100%
}

.mh-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.375rem;
    margin-top: 1.5rem
}

.mh-arrow {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #d9cec166;
    background: transparent;
    color: var(--mh-gold);
    font-size: 1.5625rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s
}

.mh-arrow:hover {
    background: #fff;
    color: #191919;
    box-shadow: 0 0.375rem 0.625rem #0004
}

.mh-arrow:disabled {
    opacity: .25;
    cursor: default
}

.mh-count {
    font-size: 0.875rem;
    min-width: 2.8125rem;
    text-align: center
}

.mh-carousel-controls[hidden] {
    display: none
}

.mh-factory-carousel .mh-carousel-controls {
    position: absolute;
    inset: 0 -4.25rem;
    justify-content: space-between;
    margin: 0;
    pointer-events: none
}

.mh-factory-carousel .mh-arrow {
    width: 2.0625rem;
    height: 3.6875rem;
    min-width: 2.0625rem;
    padding: 0;
    border: 0;
    pointer-events: auto;
    overflow: hidden;
    background: transparent center / 2.0625rem 3.6875rem no-repeat;
    box-shadow: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
    transition: none
}

.mh-factory-carousel .mh-arrow[data-prev] {
    background-image: url('../images/home/left-1.png')
}

.mh-factory-carousel .mh-arrow[data-next] {
    background-image: url('../images/home/right-1.png')
}

.mh-factory-carousel .mh-arrow[data-prev]:hover,
.mh-factory-carousel .mh-arrow[data-prev]:active {
    background-image: url('../images/home/left-2.png')
}

.mh-factory-carousel .mh-arrow[data-next]:hover,
.mh-factory-carousel .mh-arrow[data-next]:active {
    background-image: url('../images/home/right-2.png')
}

.mh-factory-carousel .mh-arrow:hover,
.mh-factory-carousel .mh-arrow:active {
    background-color: transparent;
    box-shadow: none
}

.mh-factory-carousel .mh-arrow:disabled {
    opacity: 1
}

.mh-factory-carousel .mh-count {
    display: none
}

.mh-manufacturing-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, 18.75rem);
    gap: 1.25rem
}

.mh-manufacturing-grid figure {
    position: relative;
    overflow: hidden
}

.mh-manufacturing-grid figure:first-child {
    grid-row: span 2
}

.mh-manufacturing-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .mh-manufacturing-grid figure:hover img {
        transform: scale(1.05)
    }
}

.mh-manufacturing-grid figcaption {
    font-family: 'Lora';
    position: absolute;
    inset: auto 0 0;
    padding: 1.5625rem 0.5rem 0.9375rem;
    text-align: center;
    background: linear-gradient(transparent, rgb(0, 0, 0));
    font-size: 1.4375rem;
    font-weight: 500
}

.mh-audience {
    padding-block: 5.25rem
}

.mh-audience .mh-section-heading {
    max-width: 84.375rem;
    margin-inline: auto
}

.mh-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    padding-inline: 2.1875rem
}

.mh-audience-card {
    background: #f5f3efde;
    padding: 2.625rem 2.125rem 2.375rem;
    color: #333 !important;
    display: flex;
    flex-direction: column;
    transition: background .25s, box-shadow .25s;
    justify-content: space-around;
    border-radius: 0.9375rem;
}


.mh-audience-card:hover {
    background: linear-gradient( 0deg,
        rgba(196, 131, 55, 0.9),   /* #C48337 @ 80% */
        rgba(244, 202, 140, 0.9)   /* #F4CA8C @ 80% */);
    box-shadow: 0 0.625rem 1.125rem #ffffff55;
}

.mh-audience-card img {
    width: 3.75rem;
    height: 3.75rem;
    object-fit: contain;
    margin-bottom: 0.75rem
}

.mh-audience-card h3 {
    font-size: 1.6875rem;
    margin-bottom: 0.625rem;
    font-family: 'Lora';
    /* min-height: 66px */
}

.mh-audience-card p {
    font-size: 1.0625rem;
    line-height: 1.5
}

.mh-card-line {
    display: block;
    width: 2.75rem;
    height: 0.5rem;
    background: #444;
    margin-top: 1.875rem
}

.mh-audience .mh-centered-action {
    margin-top: 4.375rem
}

.mh-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.375rem 2.625rem;
    padding-inline: 2.5rem
}

.mh-product-photo {
    aspect-ratio: 479/299;
    border-radius: 0.625rem;
    overflow: hidden;
    background: #302922
}

.mh-product-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s
}

.mh-product-card:hover img {
  transform: scale(1.025);
}
.mh-product-card:hover .mh-product-photo{
box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.75); 
}
.mh-product-card h3 {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 1.4375rem auto 0;

  /* 关键：让 h3 收缩到文字宽度，而不是撑满整行 */
  display: block;
  width: fit-content;
  position: relative;

  transition: color 0.2s ease;
}

/* 下划线：宽度跟文字一致 */
.mh-product-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.375rem;                   /* 下划线与文字的距离 */
  width: 100%;                    /* 因为 h3 已是 inline-block，100% = 文字宽度 */
  height: 2px;
  background: var(--mh-gradient);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

/* hover：渐变文字 + 下划线展开 */
.mh-product-card:hover h3 {
  background: var(--mh-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.mh-product-card:hover h3::after {
  transform: scaleX(1);
}

.mh-solutions {
    padding-block: 4.375rem
}

.mh-solutions:after {
    background: rgba(0, 0, 0, 0.486)
}

.mh-solutions-grid {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    gap: 4.375rem;
    align-items: center;
    min-height: 45rem
}

.mh-solutions .mh-copy {
    max-width: 36.25rem
}

.mh-solutions h2 {
    margin-top: 1.25rem
}

.mh-solution-carousel {
    min-width: 0
}

.mh-solution-card {
    position: relative;
    min-height: 35rem;
    background: #302922
}

.mh-solution-card img {
    width: 100%;
    height: 40.625rem;
    object-fit: cover
}

.mh-solution-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 2.75rem 2.375rem 4.375rem;
    text-align: right;
    background: linear-gradient(#0008, transparent);
    color: #fff
}

.mh-solution-caption h3 {
    font: 500 1.875rem Lora, Georgia, serif;
    text-transform: uppercase
}

.mh-solution-caption p {
    font-size: 1.25rem;
    margin-top: 0.625rem
}

.mh-solution-carousel .mh-carousel-controls {
    justify-content: flex-end
}

.mh-projects-grid {
    display: grid;
    grid-template-columns: 16.875rem minmax(0, 1fr);
    gap: 5rem;
    align-items: center
}

.mh-project-intro {
    padding: 4.375rem 1.5625rem;
    background: #ffffff09
}

.mh-project-intro h2 {
    font-size: 3.75rem;
    line-height: 1.1;
    margin-bottom: 4.375rem
}

.mh-project-intro .mh-button {
    font-size: 1rem;
    padding: 0.8125rem 1.125rem
}

.mh-project-carousel {
    min-width: 0
}

.mh-project-carousel .mh-track {
    gap: 2.625rem
}

.mh-project-card {
    flex-basis: calc((100% - 2.625rem)/2.2)
}

.mh-project-card:nth-child(even) {
    padding-top: 5rem
}

.mh-project-card img {
    width: 100%;
    aspect-ratio: 513/370;
    object-fit: cover;
    background: #302922
}

.mh-project-card p {
    font-size: 0.875rem;
    text-transform: uppercase;
    margin: 1.75rem 1.5rem 0.5rem
}

.mh-project-card h3 {
    font-size: 1.25rem;
    text-transform: uppercase;
    margin: 0.5rem 1.5rem
}

.mh-project-arrow {
    display: grid;
    place-items: center;
    width: 2.625rem;
    height: 2.625rem;
    border: 1px solid #ffffff60;
    border-radius: 50%;
    margin: 3.125rem 1.5rem 0
}

.mh-project-card a:hover {
    color: var(--mh-gold)
}

.mh-project-carousel .mh-carousel-controls {
    justify-content: flex-start
}

.mh-materials {
    padding-block: 4rem
}

.mh-materials:after {
    background: linear-gradient(rgb(0 0 0 / 12%), rgb(0 0 0 / 12%)), linear-gradient(#171613ce, transparent 35%, rgba(17, 17, 17, 0.842))
}

.mh-material-carousel {
    position: relative
}

.mh-material-carousel .mh-track {
    gap: 2rem;
    padding-inline: max(1.5rem, calc((100vw - 51.75rem)/2));
    scroll-padding-inline: max(1.5rem, calc((100vw - 51.75rem)/2))
}

.mh-material-carousel .mh-slide {
    position: relative;
    flex: 0 0 min(51.75rem, 70vw);
    scroll-snap-align: center;
    z-index: 1;
    transform: scale(.9);
    transform-origin: center center;
    transition: transform .42s ease, z-index 0s .21s
}

.mh-material-carousel .mh-slide.mh-current {
    z-index: 2;
    transform: scale(1);
    transition-delay: 0s
}

.mh-material-carousel img {
    width: 100%;
    aspect-ratio: 828/426;
    object-fit: cover
}

.mh-material-carousel figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 2.5rem 0.625rem 1.5625rem;
    background: linear-gradient(transparent, #000a);
    font-size: 1.5rem
}

.mh-material-carousel .mh-carousel-controls {
    margin-top: 1.125rem
}

.mh-brands {
    margin-top: 4.625rem
}

.mh-brands h2 {
    font-size: 2.25rem
}

.mh-brand-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.625rem;
    align-content: start
}

.mh-brand-grid>div {
    padding: 0.5rem;
    background: #fff;
    min-height: 6.875rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.mh-brand-grid img {
    width: 100%;
    height: 6rem;
    object-fit: contain
}

.mh-process {
    padding-bottom: 0
}

.mh-process-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 14%;
    margin-top: 3.75rem;
    margin-bottom: 6.25rem
}

.mh-process-grid details {
    border-bottom: 1px solid #ffffff4a;
    min-width: 0
}

.mh-process-grid summary {
    font-size: 1.6875rem;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    padding: 0 2.1875rem 1.5625rem 0;
    line-height: 1.3
}

.mh-process-grid summary {
    list-style: none
}

.mh-process-grid summary::-webkit-details-marker {
    display: none
}

.mh-process-grid summary>span {
    display: inline-block;
    max-width: 100%
}

.mh-process-grid summary:after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0
}

.mh-process-grid details[open] summary:after {
    content: '−'
}

.mh-process-grid details[open] summary>span {
    background: var(--mh-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.mh-process-grid details[open] summary:after {
    background: var(--mh-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.mh-process-grid details p {
    padding: 1.5625rem 0 1.875rem;
    font-size: 1.375rem
}

.mh-process-grid details[open] p {
    width: fit-content;
    max-width: 100%;
    background: var(--mh-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.mh-process-carousel {
    position: relative
}

.mh-process-carousel .mh-track {
    gap: 0
}

.mh-process-carousel img {
    width: 100%;
    aspect-ratio: 1920/680;
    object-fit: cover
}

.mh-process-carousel .mh-carousel-controls {
    position: absolute;
    bottom: 1.125rem;
    left: 0;
    right: 0
}

.mh-process-carousel .mh-count {
    background: #0006;
    border-radius: 1.25rem;
    padding: 0.1875rem 0.625rem
}

.mh-process-carousel .mh-arrow {
    background: #0006
}

.mh-news-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem
}

.mh-news-card {
    display: block;
    position: relative;
    min-width: 0;
    background: #d7d7d7;
    color: #302b27 !important;
    padding: 1.75rem 5.625rem 1.875rem 2.625rem;
    transition: background-color .25s ease
}

.mh-news-card time {
    font-size: 1.0625rem
}

.mh-news-card h3 {
    font-size: 1.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.625rem 0
}

.mh-news-card p {
    font-size: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.mh-news-card>span {
    position: absolute;
    right: 2.1875rem;
    bottom: 2.1875rem;
    display: grid;
    place-items: center;
    border: 1px solid #302b27;
    width: 2rem;
    height: 2rem;
    background: transparent;
    transition: background-color .25s ease, border-color .25s ease
}

.mh-news-arrow svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem
}

.mh-news-arrow path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter
}

.mh-news-arrow-default {
    stroke: #302b27;
    opacity: 1
}

.mh-news-arrow-active {
    opacity: 0
}

.mh-news-card:is(:hover, :active, :focus-visible) {
    background: #f1edea;
    box-shadow: none
}

.mh-news-card:is(:hover, :active, :focus-visible) .mh-news-arrow {
    border-color: #191919;
    background: #191919
}

.mh-news-card:is(:hover, :active, :focus-visible) .mh-news-arrow-default {
    opacity: 0
}

.mh-news-card:is(:hover, :active, :focus-visible) .mh-news-arrow-active {
    opacity: 1
}

.mh-inquiry {
    padding-top: 4rem;
    padding-bottom: 8.125rem
}

.mh-inquiry>.mh-section-background {
    height: 80% !important
}

.mh-inquiry:after {
    height: 80%;
    background: #0006
}

.mh-inquiry .mh-section-heading p {
    max-width: 53.125rem
}

.mh-inquiry-form {
    max-width: 80rem;
    background: #fff;
    color: #191919;
    margin: auto;
    padding: 3.625rem 3.375rem 2.25rem;
    position: relative
}

.mh-privacy {
    text-align: center;
    font-size: 0.9375rem;
    color: #666;
    margin-top: 1.25rem !important
}

.mh-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem
}

.mh-form-grid>p {
    margin: 0
}

.mh-form-grid label,
.mh-quote-fields label {
    display: block;
    min-width: 0
}

.mh-form-grid .mh-form-wide {
    grid-column: 1/-1
}

.mh-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0)
}

.mh-inquiry input:not([type=submit]),
.mh-inquiry textarea,
.mh-dialog input:not([type=submit]),
.mh-dialog textarea,
.mh-footer-form input:not([type=submit]) {
    width: 100%;
    max-width: 100%;
    background: #f4f3f1;
    color: #333;
    border: 1px solid #eceae7;
    border-radius: 0;
    min-height: 3.25rem;
    padding: 0.875rem 1.125rem;
    font: 400 1.0625rem/1.4 'Google Sans Flex', Arial, sans-serif;
    box-sizing: border-box
}

.mh-inquiry textarea {
    height: 4.25rem;
    resize: vertical
}

.mh-form-submit {
    grid-column: 1/-1;
    text-align: center;
    margin-top: 0.625rem
}

.mh-captcha {
    display: flex;
    gap: 0.9375rem;
    align-items: center
}

.mh-captcha .wpcf7-form-control-wrap {
    flex: 1
}

.mh-captcha img {
    max-width: 8.125rem;
    object-fit: contain;
    height: 2.8125rem
}

.mh-home .wpcf7-spinner,
.mh-footer .wpcf7-spinner,
.mh-dialog .wpcf7-spinner {
    display: none
}

.mh-home form.submitting .wpcf7-spinner,
.mh-footer form.submitting .wpcf7-spinner,
.mh-dialog form.submitting .wpcf7-spinner {
    display: inline-block
}

.mh-home .wpcf7-not-valid-tip,
.mh-dialog .wpcf7-not-valid-tip {
    font-size: 0.875rem
}

.mh-footer-form .wpcf7-not-valid-tip {
    color: #ffd99d;
    font-size: 0.875rem
}

.mh-header {
    position: relative;
    z-index: 100;
    background: #100e0c;
    color: #fff;
    width: 100%;
    height: 5.625rem
}

.mh-header-home {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent
}

.mh-scrolled {
    position: fixed;
    top: 0;
    background: #ffffff;
    box-shadow: 0 1px 0 #ffffff13
}

.mh-scrolled .mh-icon-button, .mh-language-button{
    color: #050504;
}
.mh-scrolled .mh-language-button {
    border: 1px solid #050504;
}


.mh-scrolled .mh-header-actions .mh-quote-button{
    background: #050504;
        color: #ffff !important;
}


.mh-scrolled .mh-language-button{
    color: #050504;
}

.mh-scrolled.mh-icon-button svg{
    stroke:#050504;
}

.mh-scrolled .mh-menu a{
color: #050504;
}
.admin-bar .mh-header-home,
.admin-bar .mh-header.mh-scrolled {
    top: 2rem
}

.mh-header-row {
    padding-top: 0.8em;
    height: 5.625rem;
    display: flex;
    align-items: center;
    gap: 1.875rem
}

.mh-logo {
    flex-shrink: 0;
    display: block;
    width: 10.8125rem;
    margin-right: auto;
    margin-bottom: 0.8em;
}

.mh-logo img {
    display: block;
    width: 100%;
    height: auto
}

.mh-logo .mh-logo-solid,
.mh-header.mh-scrolled .mh-logo .mh-logo-gradient {
    display: none;
}
.mh-header.mh-scrolled .mh-logo .mh-logo-solid {
    display: block;
}
@media (max-width: 767px) {
    .mh-header.mh-header-home,
    .mh-header:not(.mh-header-home) {
        background: #fff;
        color: #191919;
    }
    .mh-header .mh-logo .mh-logo-gradient { display: none; }
    .mh-header .mh-logo .mh-logo-solid { display: block; }
    .mh-header:not(.mh-scrolled) .mh-quote-button { background: #050504; color: #fff !important; }
}

.mh-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.mh-menu {
    display: flex;
    align-items: center;
    gap: 2.5rem
}

.mh-menu>li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3125rem
}

.mh-menu a {
  font-size: 1.1875rem;
  line-height: .8;
  padding-block: 2rem;
  display: block;
  white-space: nowrap;

  position: relative;
  color: #ffffff;                    /* 基础文字色 */
  text-decoration: none;

  /* ✅ transition 放在基础状态，进出都有动画 */
  transition: color 0.2s ease;
}

/* 下划线伪元素 */
.mh-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1.25rem;                   /* 根据 padding-block 调整位置 */
  width: 100%;
  height: 2px;
  background: var(--mh-gradient);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease; /* ✅ 0.2s 动画 */
}

/* hover / 当前项 */
.mh-menu a:hover,
.mh-menu .current-menu-item > a,
.mh-menu .current-menu-ancestor > a {
  background: var(--mh-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 下划线展开 */
.mh-menu a:hover::after,
.mh-menu .current-menu-item > a::after,
.mh-menu .current-menu-ancestor > a::after {
  transform: scaleX(1);
}

.mh-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: -1.375rem;
    min-width: 12.5rem;
    background: #13110f;
    padding: 0.75rem 0;
    box-shadow: 0 0.75rem 1.5rem #0004;
    display: none;
    z-index: 1
}

.mh-menu .sub-menu li {
    position: relative
}

.mh-menu .sub-menu a {
    padding: 0.875rem 1.5rem;
    white-space: normal;
    font-size: 1rem
}

.mh-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%
}

.mh-menu li.mh-expanded>.sub-menu {
    display: block
}

.mh-menu .site-submenu-toggle {
    display: inline-flex !important;
    position: static;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem
}

.mh-menu .site-submenu-toggle span {
    display: block;
    width: 0.4375rem;
    height: 0.4375rem;
    transform: rotate(45deg);
    border: solid currentColor;
    border-width: 0 1px 1px 0
}

.mh-menu .sub-menu .site-submenu-toggle {
    position: absolute;
    right: 0.25rem;
    top: 0.75rem
}

.mh-header-actions {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    margin-left: auto
}

.mh-icon-button,
.mh-language-button {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0.3125rem;
    font: inherit
}

.mh-icon-button svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    display: block
}

.mh-language-button {
    font-size: 0.8125rem;
    white-space: nowrap
}
.mh-language-button span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;              /* 消除行高影响 */
    transform: translateY(-.4em); /* 视觉微调，按需 1~2px */
}


/* 头部询盘按钮 */
/* 头部询盘按钮 */
.mh-header .mh-quote-button {
    background: #fff;
    font-size: 0.875rem;
    min-height: 1.5rem;
    padding: 2px 0.875rem;
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    position: relative;          /* 作为 span 绝对定位的参照 */
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    overflow: hidden;            /* 让圆形覆盖不溢出 a 的圆角 */
    text-decoration: none;
    box-sizing: border-box;

    /* 给右侧图标预留空间，避免文字被覆盖 */
    padding-right: 2.75rem;
}

/* 圆形图标 span：完全贴合 a 高度，贴右侧 */
.mh-header .mh-quote-button .mh-quote-icon {
    /* 尺寸：宽度=高度=按钮高度，让它贴满右侧 */
    width: 1.5rem;                 /* 覆盖区宽度，可调 */
    height:1.5rem;                /* 贴合 a 的完整高度（关键） */
    border-radius: 50%;          /* 想要圆弧右缘就保留，想要方形覆盖可改 0 */
    background: var(--mh-gradient);
    color: #fff;

    /* 图标居中 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    /* 绝对定位贴右、贴满上下 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* 若想微调水平位置改 right 值 */
}

/* 约束 SVG 尺寸（关键修复） */
.mh-header .mh-quote-button .mh-quote-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
    flex-shrink: 0;
}
/* 头部询盘按钮 */




.mh-menu-toggle {
    display: none
}

.mh-skip {
    position: fixed;
    top: -5rem;
    left: 1.25rem;
    padding: 0.75rem 1.25rem;
    background: #fff;
    color: #191919;
    z-index: 500
}

.mh-skip:focus {
    top: 0.625rem
}

.mh-dialog {
    border: 1px solid #756855;
    padding: 3.125rem;
    max-width: min(42.5rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2.5rem);
    overflow: auto;
    background: #f7f4ed;
    color: #191919;
    position: fixed;
    margin: auto;
    box-shadow: 0 1.5625rem 5rem #0008
}

.mh-dialog::backdrop {
    background: #000b
}

.mh-dialog h2 {
    text-align: center;
    font-size: 2.125rem;
    margin: 0 0 2.25rem
}

.mh-dialog-close {
    position: absolute;
    right: 0.9375rem;
    top: 0.5rem;
    font-size: 2rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: #3e352a;
    padding: 0.5rem
}

.mh-dialog form[role=search] {
    display: grid;
    gap: 1.125rem
}

/* Header search: isolated, centered, single-line search bar. */
#mh-search {
    width: min(45rem, calc(100vw - 2rem));
    max-width: none;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    box-shadow: 0 1.125rem 3.4375rem #0007
}

#mh-search .mh-dialog-close,
#mh-search>h2,
#mh-search form>label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

#mh-search form[role=search] {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0
}

#mh-search input[type=search] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3.375rem;
    padding: 0.875rem 1.125rem;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #191919;
    box-shadow: none;
    outline-offset: -0.1875rem
}

#mh-search form .mh-button {
    flex: 0 0 5.125rem;
    min-width: 5.125rem;
    min-height: 3.375rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--mh-gradient);
    font-size: 0
}

#mh-search form .mh-button::before {
    content: none
}

#mh-search form .mh-button svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    margin: auto;
    stroke: #191919;
    stroke-width: 1.8;
    stroke-linecap: round
}

#mh-search form .mh-button:hover,
#mh-search form .mh-button:focus-visible {
    background: #fff
}

.mh-language-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem
}

.mh-quote-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.625rem
}

.mh-quote-fields .mh-form-wide {
    grid-column: 1/-1
}

.mh-quote-fields textarea {
    height: 6.875rem
}

.mh-quote-fields input[type=file] {
    font-size: 0.8125rem !important;
    padding: 0.875rem 0.5rem !important
}

.mh-dialog .mh-field-visible {
    font-size: 1rem;
    display: block;
    margin-bottom: 0.5rem
}

.mh-footer {
    background: #030303;
    color: #f2f2f2;
    padding-top: 2.625rem
}

.mh-footer-brand {
    text-align: center;
    margin-bottom: 3.625rem
}

.mh-footer-brand img {
    width: 14rem;
    height: auto;
    display: block;
    margin: auto
}

.mh-footer-brand p {
    color: #f4f4f4;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 1rem;
    text-transform: uppercase
}

.mh-footer-grid {
    display: grid;
    grid-template-columns: minmax(22.8125rem,1.5fr) minmax(11.5625rem,.7fr) minmax(11.875rem,.72fr) minmax(19.375rem,1fr);
    gap: clamp(2.625rem,4vw,4.875rem);
    align-items: start;
    padding: 0 0.625rem 1.875rem
}

.mh-footer h2 {
    font-family: 'Google Sans Flex', Arial, sans-serif;
    color: #fff;
    font-size: 1.4375rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.375rem;
    text-transform: uppercase
}

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

.mh-footer li {
    margin-bottom: 1.125rem
}

.mh-footer-nav a {
    position: relative;
    display: inline-block;
    color: #f2f2f2;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.35;
    transition: padding-left .25s ease,color .25s ease
}

.mh-footer-nav a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.8125rem;
    height: 2px;
    background: var(--mh-gradient);
    opacity: 0;
    transform: translate(-0.5rem,-50%) scaleX(0);
    transform-origin: left;
    transition: opacity .25s ease,transform .25s ease
}

.mh-footer-nav a:hover,
.mh-footer-nav a:focus-visible,
.mh-footer-nav a:active,
.mh-footer-nav a[aria-current=page] {
    padding-left: 1.3125rem;
    background: var(--mh-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.mh-footer-nav a:hover::before,
.mh-footer-nav a:focus-visible::before,
.mh-footer-nav a:active::before,
.mh-footer-nav a[aria-current=page]::before {
    opacity: 1;
    transform: translate(0,-50%) scaleX(1)
}

.mh-footer-contact p {
    display: grid;
    grid-template-columns: 1.375rem minmax(0,1fr);
    align-items: start;
    gap: 0.75rem;
    color: #f1f1f1;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1.25rem
}

.mh-footer-contact p>img {
    display: block;
    width: auto;
    max-width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
    margin-top: 2px
}

.mh-footer-form>p {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 1.25rem
}

.mh-footer-form input:not([type=submit]) {
    min-height: 3.625rem;
    margin: 0;
    background: #d9d9d9;
    border: 0;
    color: #252525;
    font-size: 0.9375rem;
    padding: 0.875rem 1.0625rem
}

.mh-home input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus,
.mh-home input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus-visible,
.mh-home textarea:focus,
.mh-home textarea:focus-visible,
.mh-home select:focus,
.mh-home select:focus-visible,
.mh-footer input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus,
.mh-footer input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus-visible,
.mh-footer textarea:focus,
.mh-footer textarea:focus-visible,
.mh-footer select:focus,
.mh-footer select:focus-visible,
.mh-dialog input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus,
.mh-dialog input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus-visible,
.mh-dialog textarea:focus,
.mh-dialog textarea:focus-visible,
.mh-dialog select:focus,
.mh-dialog select:focus-visible {
    outline: 0;
    box-shadow: none
}

.mh-footer-form form>label {
    display: block;
    margin-bottom: 0.75rem
}

.mh-footer-form .mh-captcha {
    display: grid;
    grid-template-columns: minmax(0,1fr) 7rem;
    gap: 0.75rem;
    align-items: stretch;
    margin-bottom: 1.4375rem
}

.mh-footer-form .mh-captcha label,
.mh-footer-form .mh-captcha .wpcf7-form-control-wrap {
    display: block;
    min-width: 0
}

.mh-footer-form .mh-captcha img {
    width: 7rem;
    max-width: 7rem;
    height: 3.625rem;
    padding: 0.4375rem;
    background: #fff;
    object-fit: contain
}

.mh-footer-form input[type=submit] {
    width: 100%;
    min-height: 2.75rem;
    font-size: 1.25rem;
    font-weight: 500
}

.mh-footer .mh-social {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 3.75rem
}

.mh-social>span {
    color: #fff;
    font-size: 1.1875rem;
    font-weight: 500;
    margin-right: 0.75rem
}

.mh-social a {
    display: grid;
    place-items: center;
    width: 1.8125rem;
    height: 1.8125rem;
    background: #747474;
    color: #fff;
    border-radius: 50%;
    transition: background .25s ease,transform .25s ease
}

.mh-social a:hover,
.mh-social a:focus-visible,
.mh-social a:active {
    background: var(--mh-gradient);
    color: #fff;
    transform: translateY(-1px)
}

.mh-social svg {
    width: 1.0625rem;
    height: 1.0625rem;
    overflow: visible;
    fill: currentColor;
    stroke: none
}

.mh-social a[aria-label=Instagram] svg rect,
.mh-social a[aria-label=Instagram] svg circle:not(.mh-social-dot) {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8
}

.mh-social .mh-social-dot {
    fill: currentColor
}

.mh-copyright {
    border-top: 1px solid #37332e;
    text-align: center;
    padding: 0.75rem 1.5rem 0.8125rem;
    color: #d8d8d8;
    font-size: 1rem
}

.mh-quick-contact {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    background: #090807bd;
    border-radius: 0.3125rem 0 0 0.3125rem;
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem;
    width: 3rem;
    padding-block: 0;
    overflow: hidden;
    transition: width .32s ease, padding .32s ease, background-color .32s ease
}

.mh-quick-contact__details {
    width: 15.125rem;
    height: 12rem;
    padding: 0 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(1.125rem);
    transition: height .32s ease, opacity .22s ease, transform .32s ease, visibility 0s linear .32s
}

.mh-quick-contact__detail {
    display: flex;
    align-items: center;
    width: 100%;
    height: 3rem;
    border-bottom: 1px solid rgba(255,255,255,.72);
    color: #fff;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none
}

.mh-quick-contact__qr {
    display: flex;
    align-items: center;
    height: 6rem;
    padding-block: 0.375rem
}

.mh-quick-contact__qr img {
    display: block;
    width: 5.25rem;
    height: 5.25rem;
    padding: 0.1875rem;
    border-radius: 0.4375rem;
    background: #fff;
    object-fit: contain
}

.mh-quick-contact__actions {
    width: 3rem;
    display: grid
}

.mh-quick-contact__actions>a,
.mh-quick-contact__actions>button {
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    width: 3rem;
    height: 3rem;
    color: inherit;
    font-size: 1.375rem;
    text-decoration: none;
    cursor: pointer
}

.mh-quick-contact__actions svg {
    display: block;
    width: 1.5625rem;
    height: 1.5625rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.mh-quick-contact__actions .mh-quick-contact__phone {
    fill: currentColor;
    stroke: none
}

.mh-quick-contact__actions .mh-quick-contact__top {
    width: 1.75rem;
    height: 1.75rem;
    stroke-width: 1.8;
    stroke-linecap: square;
    stroke-linejoin: miter
}

.mh-quick-contact__actions>a:hover,
.mh-quick-contact__actions>button:hover {
    background: var(--mh-gradient);
    color: #191919
}

@media (hover:hover) and (pointer:fine) {
    .mh-quick-contact:hover {
        width: 18.125rem;
        padding-block: 0.5625rem;
        /* background: rgba(91,91,91,.94) */
    }

    .mh-quick-contact:hover .mh-quick-contact__details {
        height: 13rem
    }

    .mh-quick-contact:hover .mh-quick-contact__detail,
    .mh-quick-contact:hover .mh-quick-contact__actions>a,
    .mh-quick-contact:hover .mh-quick-contact__actions>button {
        height: 3.25rem
    }

    .mh-quick-contact:hover .mh-quick-contact__qr {
        height: 6.5rem
    }

    .mh-quick-contact:hover .mh-quick-contact__details {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition-delay: .06s, 0s, 0s
    }
}

@media (min-width:681px) {
    .mh-quick-contact:focus-within {
        width: 18.125rem;
        padding-block: 0.5625rem;
        background: rgba(91,91,91,.94)
    }

    .mh-quick-contact:focus-within .mh-quick-contact__details {
        height: 13rem
    }

    .mh-quick-contact:focus-within .mh-quick-contact__detail,
    .mh-quick-contact:focus-within .mh-quick-contact__actions>a,
    .mh-quick-contact:focus-within .mh-quick-contact__actions>button {
        height: 3.25rem
    }

    .mh-quick-contact:focus-within .mh-quick-contact__qr {
        height: 6.5rem
    }

    .mh-quick-contact:focus-within .mh-quick-contact__details {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition-delay: .06s, 0s, 0s
    }
}

.mh-mobile-utilities {
    display: none
}

@media(max-width:1600px) {
    .mh-section {
        padding-block: 5.9375rem
    }

    .mh-about {
        padding-bottom: 0
    }

    .mh-process {
        padding-bottom: 0
    }

    .mh-hero .mh-eyebrow {
        font-size: 1.375rem
    }

    .mh-hero-description {
        font-size: 1.125rem
    }

    .mh-hero .mh-actions {
        margin-top: 3rem
    }

    .mh-about-copy {
        padding: 3.75rem 2.8125rem 3.75rem 4.0625rem;
        min-height: 35.625rem
    }

    .mh-about .mh-copy {
        font-size: 1rem;
        margin-bottom: 2.25rem
    }

    .mh-about-photo {
        padding-top: 4.0625rem
    }

    .mh-about-grid {
        width: calc(100% - 6.25rem)
    }

    .mh-menu {
        gap: 1.25rem
    }

    .mh-menu a {
        font-size: 0.9375rem
    }

    .mh-header-row {
        gap: 1.25rem
    }

    .mh-logo {
        width: 9.0625rem
    }

    .mh-manufacturing-grid {
        grid-template-rows: repeat(2, 15rem);
        gap: 0.875rem
    }

    .mh-manufacturing-grid figcaption {
        font-size: 1.125rem
    }

    .mh-audience-grid {
        padding: 0;
        gap: 1.5rem
    }

    .mh-audience-card {
        padding: 1.875rem 1.5rem
    }

    .mh-audience-card h3 {
        font-size: 1.4375rem
    }

    .mh-audience-card p {
        font-size: 1rem
    }

    .mh-product-card h3 {
        font-size: 1.3125rem
    }

    .mh-solutions-grid {
        gap: 3.125rem;
        min-height: 36.875rem
    }

    .mh-solution-card img {
        height: 33.75rem
    }

    .mh-projects-grid {
        gap: 3.4375rem;
        grid-template-columns: 15rem minmax(0, 1fr)
    }

    .mh-project-intro h2 {
        font-size: 3rem
    }

    .mh-footer-grid {
        gap: 2.25rem
    }

    .mh-footer {
        font-size: 1rem
    }

    .mh-process-grid summary,
    .mh-process-link {
        font-size: 1.4375rem
    }

    .mh-heading-row>div {
        max-width: 75%
    }

    .mh-button {
        font-size: 1.125rem
    }

    .mh-heading-row .mh-button {
        font-size: 1rem
    }

    .mh-inquiry {
        padding-bottom: 6.25rem
    }
}

@media(max-width:1200px) {
    .mh-container {
        width: calc(100% - 3.5rem)
    }

    .mh-header-row {
        height: 4.75rem
    }

    .mh-header {
        height: 4.75rem
    }

    .mh-menu-toggle {
        display: block;
        order: 3;
        font-size: 1.5625rem
    }

    .mh-header-actions {
        margin-left: auto
    }

    .mh-navigation {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 4.75rem;
        background: #100e0c;
        max-height: calc(100dvh - 6.25rem);
        overflow-y: auto;
        padding: 0.75rem 1.5rem 1.375rem;
        box-shadow: 0 1.25rem 2.1875rem #0006
    }

    .mh-navigation.mh-open {
        display: block
    }

    .mh-menu {
        display: block
    }

    .mh-menu>li {
        display: block
    }

    .mh-menu a {
        padding: 1rem 0;
        font-size: 1.0625rem
    }

    .mh-menu .site-submenu-toggle {
        position: absolute;
        right: 0;
        top: 0.75rem;
        width: 2.25rem;
        height: 2rem;
        justify-content: center;
        align-items: center
    }

    .mh-menu .sub-menu,
    .mh-menu .sub-menu .sub-menu {
        position: static;
        min-width: 0;
        padding: 0 0 0 1.125rem;
        box-shadow: none
    }

    .mh-menu .sub-menu a {
        padding: 0.75rem 0
    }

    .mh-section {
        padding-block: 4.6875rem
    }

    .mh-about {
        padding-bottom: 0
    }

    .mh-about-copy {
        padding: 2.5rem 2rem;
        min-height: 0
    }

    .mh-about-copy:after {
        right: -5rem
    }

    .mh-about-photo {
        padding-top: 2.8125rem
    }

    .mh-about-grid {
        width: calc(100% - 3.5rem);
        grid-template-columns: 1fr 1fr
    }

    .mh-about h2 {
        font-size: 1.75rem
    }

    .mh-about .mh-copy {
        font-size: 0.9375rem;
        margin: 1.5625rem 0
    }

    .mh-about .mh-button {
        font-size: 1rem
    }

    .mh-wide {
        width: calc(100% - 3.5rem)
    }

    .mh-factory-carousel .mh-carousel-controls {
        position: static;
        justify-content: center;
        pointer-events: auto
    }

    .mh-factory-carousel .mh-count {
        display: inline
    }

    .mh-manufacturing-grid {
        grid-template-rows: repeat(2, 11.875rem)
    }

    .mh-manufacturing-grid figcaption {
        font-size: 1rem
    }

    .mh-audience-grid {
        gap: 1rem
    }

    .mh-audience-card {
        padding: 1.5rem 1.125rem
    }

    .mh-audience-card h3 {
        font-size: 1.25rem
    }

    .mh-audience-card p {
        font-size: 0.875rem
    }

    .mh-audience-card img {
        margin-bottom: 1.375rem
    }

    .mh-solutions-grid {
        gap: 2.1875rem;
        grid-template-columns: 42% minmax(0, 1fr)
    }

    .mh-solution-caption {
        padding: 1.5625rem
    }

    .mh-solution-caption h3 {
        font-size: 1.5rem
    }

    .mh-solution-caption p {
        font-size: 1rem
    }

    .mh-solution-card {
        min-height: 25rem
    }

    .mh-solution-card img {
        height: 31.25rem
    }

    .mh-solutions .mh-copy {
        font-size: 1rem
    }

    .mh-heading-row {
        gap: 1.5rem
    }

    .mh-heading-row h2 {
        font-size: 1.875rem
    }

    .mh-heading-row .mh-button {
        padding-inline: 1.125rem;
        font-size: 0.875rem
    }

    .mh-projects-grid {
        grid-template-columns: 11.875rem minmax(0, 1fr);
        gap: 1.875rem
    }

    .mh-project-intro {
        padding: 2.8125rem 1.25rem
    }

    .mh-project-intro h2 {
        font-size: 2.625rem
    }

    .mh-project-card h3 {
        font-size: 1.0625rem
    }

    .mh-process {
        padding-bottom: 0
    }

    .mh-process-grid {
        gap: 2rem 8%
    }

    .mh-process-grid summary,
    .mh-process-link {
        font-size: 1.1875rem
    }

    .mh-footer-grid {
        grid-template-columns: minmax(0,1.2fr) minmax(18.75rem,1fr);
        gap: 2.75rem 3.75rem
    }

    .mh-footer-form {
        grid-column: 2;
        grid-row: 1
    }

    .mh-footer nav {
        grid-column: auto
    }

    .mh-inquiry-form {
        padding: 2.1875rem
    }

    .mh-news-card {
        padding: 1.5rem 3.4375rem 1.5rem 1.5625rem
    }

    .mh-news-card>span {
        right: 0.9375rem
    }

    .mh-brand-grid {
        gap: 1.125rem
    }

    .mh-brand-grid>div {
        min-height: 5rem
    }

    .mh-brand-grid img {
        height: 4.375rem
    }
}

@media(max-width:767px) {

    .mh-home,
    .mh-footer {
        font-size: 1rem
    }

    .mh-container,
    .mh-wide {
        width: calc(100% - 2.25rem)
    }

    .mh-section {
        padding-block: 3.5rem
    }

    .mh-section-heading {
        margin-bottom: 2rem
    }

    .mh-section-heading p {
        margin-top: 1.125rem
    }

    .mh-header,
    .mh-header-row {
        height: 4.375rem;
        padding-top: 0em;
    }

    .mh-logo {
        width: 7.5rem;
        margin-bottom: 0em;
    }

    .mh-header-row {
        gap: 0.75rem
    }

    .mh-header-actions {
        gap: 0.5rem
    }

    .mh-header .mh-quote-button {
        font-size: 0.75rem;
        padding-right: 2.4em;
    }

    .mh-header-actions .mh-language-button {
        display: none
    }

    .mh-icon-button svg {
        width: 1.1875rem;
        height: 1.1875rem
    }

    .mh-navigation {
        top: 4.375rem;
        left: -1.125rem;
        right: -1.125rem
    }

    .admin-bar .mh-header-home,
    .admin-bar .mh-header.mh-scrolled {
        top: 0;
    }

    .mh-hero {
        height: auto;
        min-height: 43.75rem;
        align-items: center
    }

    .mh-hero-image {
        object-position: 60% center
    }

    .mh-hero:after {
        background: linear-gradient(90deg, #000c, #0004)
    }

    .mh-hero-content {
        padding-top: 4.375rem;
        padding-bottom: 2.8125rem
    }

    .mh-hero .mh-eyebrow {
        font-size: 1.0625rem;
        max-width: 20rem
    }

    .mh-hero h1 {
        font-size: 2.375rem;
        line-height: 1.13;
        margin-block: 1.5625rem
    }

    .mh-hero h1>span:last-child {
        font-size: 2rem;
        margin-top: 0.375rem
    }

    .mh-hero-description {
        font-size: 1rem;
        max-width: 26.25rem
    }

    .mh-hero-description br {
        display: none
    }

    .mh-hero .mh-actions {
        margin-top: 2.25rem;
        gap: 0.875rem
    }

    .mh-button {
        font-size: 1rem;
        padding: 0.8125rem 1.25rem
    }

    .mh-hero .mh-button {
        font-size: 0.9375rem;
        padding-inline: 1rem
    }

    .mh-about {
        padding-bottom: 0
    }

    .mh-about-grid {
        display: flex;
        flex-direction: column;
        width: calc(100% - 2.25rem)
    }

    .mh-about-copy {
        padding: 2rem 1.5rem;
        min-height: 0
    }

    .mh-about-copy:after {
        right: 0
    }

    .mh-about .mh-eyebrow {
        font-size: 1rem
    }

    .mh-about h2 {
        font-size: 1.8125rem;
        line-height: 1.13
    }

    .mh-about-photo {
        padding: 0;
        margin-top: 0.625rem;
        width: 100%
    }

    .mh-about-photo img {
        aspect-ratio: 4/3;

    }

    .mh-watermark {
        left: 5rem;
        font-size: 5.9375rem
    }

    .mh-factory-carousel {
        margin-top: 1.75rem
    }

    .mh-factory-carousel .mh-slide {
        flex-basis: calc((100% - 1rem)/2)
    }

    .mh-track {
        gap: 1rem
    }

    .mh-manufacturing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 0.75rem
    }

    .mh-manufacturing-grid figure {
        height: 11.25rem
    }

    .mh-manufacturing-grid figure:first-child {
        grid-column: 1/-1;
        grid-row: auto;
        height: 17.5rem
    }

    .mh-manufacturing-grid figcaption {
        font-size: 0.9375rem;
        padding: 1.625rem 0.3125rem 0.75rem
    }

    .mh-centered-action {
        margin-top: 2rem
    }

    .mh-audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.875rem
    }

    .mh-audience-card {
        padding: 1.5rem 1.0625rem
    }

    .mh-audience-card img {
        width: 2.8125rem;
        height: 2.8125rem
    }

    .mh-audience-card h3 {
        font-size: 1.1875rem;
        min-height: 3.125rem
    }

    .mh-audience-card p {
        font-size: 0.875rem
    }

    .mh-audience .mh-centered-action {
        margin-top: 2rem
    }

    .mh-heading-row {
        display: block;
        margin-bottom: 1.875rem
    }

    .mh-heading-row>div {
        max-width: none
    }

    .mh-heading-row h2 {
        font-size: 1.75rem
    }

    .mh-heading-row .mh-button {
        margin-top: 1.5rem;
        font-size: 0.9375rem
    }

    .mh-heading-row p {
        margin-top: 1.125rem
    }

    .mh-product-grid {
        padding: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem
    }

    .mh-product-photo {
        border-radius: 0.375rem;
        aspect-ratio: 1.35
    }

    .mh-product-card h3 {
        font-size: 1rem;
        margin-top: 0.875rem
    }

    .mh-solutions-grid {
        display: block;
        min-height: 0
    }

    .mh-solutions .mh-copy {
        margin: 1.5rem 0 1.875rem
    }

    .mh-solution-carousel {
        margin-top: 2.375rem
    }

    .mh-solution-card {
        min-height: 18.75rem
    }

    .mh-solution-card img {
        height: auto;
        aspect-ratio: 1.1;
        object-fit: cover
    }

    .mh-solution-caption {
        padding: 1.5rem 1.25rem
    }

    .mh-solution-caption h3 {
        font-size: 1.4375rem
    }

    .mh-projects-grid {
        display: block
    }

    .mh-project-intro {
        padding: 0;
        background: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.25rem;
        margin-bottom: 2.1875rem
    }

    .mh-project-intro h2 {
        font-size: 2.125rem;
        margin: 0
    }

    .mh-project-intro .mh-button {
        font-size: 0.875rem
    }

    .mh-project-carousel .mh-track {
        gap: 1.25rem
    }

    .mh-project-card {
        flex-basis: 82%
    }

    .mh-project-card:nth-child(even) {
        padding-top: 2.1875rem
    }

    .mh-project-card h3,
    .mh-project-card p {
        margin-inline: 0.3125rem
    }

    .mh-project-arrow {
        margin: 1.5rem 0.3125rem 0
    }

    .mh-material-carousel .mh-track {
        gap: 1rem;
        padding-inline: 10vw;
        scroll-padding-inline: 10vw
    }

    .mh-material-carousel .mh-slide {
        flex-basis: 80vw;
        transform: scale(.94)
    }

    .mh-material-carousel .mh-slide.mh-current {
        transform: scale(1)
    }

    .mh-material-carousel img {
        aspect-ratio: 1.5
    }

    .mh-material-carousel figcaption {
        font-size: 1.125rem;
        padding-bottom: 1.125rem
    }

    .mh-brands {
        margin-top: 3rem
    }

    .mh-brands h2 {
        font-size: 1.75rem
    }

    .mh-brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem
    }

    .mh-brand-grid>div {
        min-height: 4.0625rem
    }

    .mh-brand-grid img {
        height: 4.0625rem
    }

    .mh-process {
        padding-bottom: 0
    }

    .mh-process-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        margin-top: 2.375rem;
        margin-bottom: 2.8125rem
    }

    .mh-process-grid summary,
    .mh-process-link {
        font-size: 1.25rem;
        padding-bottom: 1.125rem
    }

    .mh-process-grid details p {
        font-size: 1.0625rem;
        padding: 0.3125rem 0 1.5rem
    }

    .mh-process-carousel img {
        aspect-ratio: 1.55
    }

    .mh-process-carousel .mh-carousel-controls {
        bottom: 0.625rem
    }

    .mh-news-grid {
        grid-template-columns: 1fr;
        gap: 1.125rem
    }

    .mh-news-card {
        padding: 1.5rem 3.5rem 1.5rem 1.5rem
    }

    .mh-news-card h3 {
        font-size: 1.1875rem
    }

    .mh-inquiry-form {
        padding: 1.625rem 1.25rem
    }

    .mh-form-grid {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .mh-inquiry textarea {
        height: 6.875rem
    }

    .mh-privacy {
        font-size: 0.75rem
    }

    .mh-footer {
        padding-top: 2.8125rem;
        font-size: 0.9375rem
    }

    .mh-footer-brand {
        margin-bottom: 2.5rem
    }

    .mh-footer-brand img {
        width: 11.25rem
    }

    .mh-footer-brand p {
        font-size: 0.8125rem
    }

    .mh-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.125rem 1.5rem;
        padding-inline: 0
    }

    .mh-footer-contact {
        grid-column: 1/-1
    }

    .mh-footer nav {
        grid-column: auto
    }

    .mh-footer-form {
        grid-column: 1/-1;
        grid-row: auto
    }

    .mh-footer h2 {
        font-size: 1.3125rem
    }

    .mh-footer-contact p {
        font-size: 0.9375rem;
        margin-bottom: 1.0625rem
    }

    .mh-footer .mh-social {
        margin-top: 1.875rem
    }

    .mh-footer-form>p {
        font-size: 1.1875rem
    }

    .mh-copyright {
        font-size: 0.75rem;
        padding: 1.125rem
    }

    .mh-quick-contact {
        top: auto;
        bottom: 1.5rem;
        transform: none
    }

    .mh-quick-contact {
        grid-template-columns: minmax(0, 1fr) 2.125rem;
        width: 2.125rem
    }

    .mh-quick-contact__actions {
        width: 2.125rem
    }

    .mh-quick-contact__actions>a,
    .mh-quick-contact__actions>button {
        width: 2.125rem;
        height: 2.25rem;
        font-size: 1.125rem
    }

    .mh-dialog {
        padding: 2.8125rem 1.375rem 1.75rem
    }

    .mh-dialog h2 {
        font-size: 1.625rem
    }

    .mh-quote-fields {
        grid-template-columns: 1fr;
        gap: 1.125rem
    }

    .mh-language-options .mh-button {
        font-size: 0.875rem
    }

    .mh-quote-fields input[type=file] {
        font-size: 0.9375rem !important
    }
}

@media(prefers-reduced-motion:reduce) {

    .mh-home *,
    .mh-header *,
    .mh-footer *,
    .mh-dialog * {
        scroll-behavior: auto !important;
        transition: none !important
    }
}

.mh-dots>.mh-arrow,
.mh-dots>.mh-count {
    display: none
}

.mh-dots {
    gap: 0.625rem
}

.mh-dots>button:not(.mh-arrow) {
    background: #BABBBB;
    width: 0.625rem;
    height: 0.625rem;
    padding: 0;
    border: 0px solid #e1d4bc;
    border-radius: 50%;
    cursor: pointer
}

.mh-dots>button[aria-pressed=true] {
    background: #fff;
    box-shadow: 0 0.1875rem 0.375rem #0004
}

.mh-hero-carousel .mh-dots {
    gap: 0.5rem
}

.mh-hero-carousel .mh-dots>button:not(.mh-arrow) {
    position: relative;
    width: 0.375rem;
    height: 0.375rem;
    border: 0;
    background: rgba(255,255,255,.65);
    box-shadow: none;
    transition: width .2s ease, height .2s ease, border-color .2s ease, background .2s ease
}

.mh-hero-carousel .mh-dots>button:not(.mh-arrow)[aria-pressed=true] {
    width: 0.75rem;
    height: 0.75rem;
    border: 1px solid #fff;
    background: transparent;
    box-shadow: none
}

.mh-hero-carousel .mh-dots>button:not(.mh-arrow)[aria-pressed=true]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%,-50%)
}

.mh-material-carousel .mh-carousel-controls {
    position: absolute;
    left: 50%;
    right: auto;
    top: 50%;
    /* Button centers sit on the inner edges of the scaled adjacent slides. */
    width: calc(min(56.925rem, 77vw) + 7.5rem);
    max-width: 100%;
    justify-content: space-between;
    margin: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index:2;
}

.mh-material-carousel .mh-arrow {
    pointer-events: auto;
    width: 3.5rem;
    height: 3.5rem;
    background: #18130e5e
}

.mh-material-carousel .mh-count {
    display: none
}

.mh-button {
    border-radius: 0.1875rem
}

.mh-language-button {
    border: 1px solid #ffffff80;
    border-radius: 0.3125rem;
    padding: 2px 0.4375rem
}

@media(max-width:767px) {
    .mh-factory-carousel .mh-carousel-controls {
        gap: 0.5rem;
        margin-top: 0.625rem
    }

    .mh-factory-carousel .mh-arrow {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        background-size: 0.875rem 1.5625rem
    }

    .mh-material-carousel .mh-carousel-controls {
        left: 0.25rem;
        right: 0.25rem
    }

    .mh-material-carousel .mh-arrow {
        width: 2.25rem;
        height: 2.625rem
    }

    .mh-header .mh-language-button {
        display: none
    }
}

@media(max-width:1200px) {
    .mh-mobile-utilities {
        display: flex;
        gap: 0.9375rem;
        padding-top: 1.125rem
    }

    .mh-mobile-utilities .mh-button {
        font-size: 0.875rem
    }
}

@media(max-width:767px) {
    .mh-hero h1 {
        font-size: clamp(2rem, 9.7vw, 2.375rem)
    }
}

.mh-factory-carousel .mh-slide img {
    cursor: zoom-in;
	border-radius:.6em;
}

.mh-factory-carousel .mh-slide img:focus-visible {
    outline: 0.1875rem solid #ffd99d;
    outline-offset: -0.1875rem
}

.mh-image-lightbox {
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    width: min(92vw, 100rem);
    height: auto;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent
}

.mh-image-lightbox[open] {
    display: grid;
    place-items: center
}

.mh-image-lightbox::backdrop {
    background: #000d
}

.mh-image-lightbox>img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 88vh;
    object-fit: contain;
    box-shadow: 0 1.5rem 5rem #0009
}

.mh-image-lightbox-close {
    position: absolute;
    z-index: 1;
    top: 0.625rem;
    right: 0.625rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid #ffffff80;
    border-radius: 50%;
    background: #191919cc;
    color: #fff;
    font: 300 2rem/1 Arial, sans-serif;
    cursor: pointer
}

.mh-image-lightbox-close:hover,
.mh-image-lightbox-close:focus-visible {
    background: #fff;
    color: #191919
}

@media(max-width:767px) {
    .mh-image-lightbox {
        width: calc(100vw - 1.5rem);
        height: auto
    }

    .mh-image-lightbox>img {
        max-height: 76vh
    }

    .mh-image-lightbox-close {
        top: 0.5rem;
        right: 0.5rem
    }
}

/* Static home-solution carousel: content aligned left, media flush to viewport right. */
.mh-solutions {
    overflow: hidden
}

.mh-solutions-grid {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    /* padding-left: max(2.5rem, calc((100vw - var(--mh-container)) / 2)); */
    box-sizing: border-box;
    grid-template-columns: minmax(22.5rem, 40rem) minmax(0, 1fr)
}

.mh-solutions-intro {
    min-width: 0
}

.mh-solution-carousel,
.mh-solution-carousel .mh-track {
    min-width: 0
}

.mh-solution-carousel {
    --mh-solution-control-right: clamp(2.5rem, 6vw, 7.25rem);
    position: relative
}

.mh-solution-card {
    min-height: 0;
    overflow: hidden;
    border-radius: 0.625rem
}

.mh-solution-card img {
    width: 100%;
    height: clamp(30rem, 36vw, 40.625rem);
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: inherit
}

.mh-solution-caption {
    padding: 2.75rem clamp(2.375rem, 6vw, 7.25rem) 5.625rem
}

.mh-solution-carousel .mh-carousel-controls {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    margin: 0;
    padding: 0;
    pointer-events: none
}

.mh-solution-carousel .mh-arrow {
    position: absolute;
    top: 69%;
    transform: translateY(-50%);
    width: 3.375rem;
    height: 3.375rem;
    min-width: 3.375rem;
    padding: 0;
    overflow: visible;
    border: 1px solid #ffffff66;
    border-radius: 50%;
    background: transparent center / 0.6875rem 1.25rem no-repeat;
    box-shadow: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
    transition: none
}

.mh-solution-carousel .mh-arrow[data-prev] {
    right: calc(var(--mh-solution-control-right) + 3.875rem)
}

.mh-solution-carousel .mh-arrow[data-next] {
    right: var(--mh-solution-control-right)
}

.mh-solution-carousel .mh-arrow,
.mh-solution-carousel .mh-count {
    pointer-events: auto
}

.mh-solution-carousel .mh-count {
    position: absolute;
    right: var(--mh-solution-control-right);
    bottom: 1.375rem;
    min-width: 5.75rem;
    font-size: 1.125rem;
    line-height: 1;
    text-align: center
}

.mh-solution-carousel .mh-arrow::before {
    content: '';
    position: absolute;
    inset: -2px;
    padding: 2px;
    border-radius: 50%;
    background: var(--mh-gradient);
    opacity: 0;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.mh-solution-carousel .mh-arrow[data-prev] {
    background-image: url('../images/home/left-1.png')
}

.mh-solution-carousel .mh-arrow[data-next] {
    background-image: url('../images/home/right-1.png')
}

.mh-solution-carousel .mh-arrow[data-prev]:hover,
.mh-solution-carousel .mh-arrow[data-prev]:active,
.mh-solution-carousel .mh-arrow[data-prev]:focus-visible {
    background-image: url('../images/home/left-2.png')
}

.mh-solution-carousel .mh-arrow[data-next]:hover,
.mh-solution-carousel .mh-arrow[data-next]:active,
.mh-solution-carousel .mh-arrow[data-next]:focus-visible {
    background-image: url('../images/home/right-2.png')
}

.mh-solution-carousel .mh-arrow:hover,
.mh-solution-carousel .mh-arrow:active,
.mh-solution-carousel .mh-arrow:focus-visible {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none
}

.mh-solution-carousel .mh-arrow:hover::before,
.mh-solution-carousel .mh-arrow:active::before,
.mh-solution-carousel .mh-arrow:focus-visible::before {
    opacity: 1
}

.mh-solution-carousel .mh-arrow:disabled {
    opacity: 1
}

@media(max-width:1200px) {
    .mh-solutions-grid {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        grid-template-columns: minmax(20rem, 42%) minmax(0, 1fr)
    }

    .mh-solution-card img {
        height: clamp(26.875rem, 48vw, 35rem)
    }
}

@media(max-width:767px) {
    .mh-solutions {
        padding-block: 4.5rem
    }

    .mh-solutions-grid {
        display: block;
        padding-left: 1.125rem;
        padding-right: 1.125rem;
    }

    .mh-solutions-intro {
        padding-right: 1.125rem
    }

    .mh-solution-carousel {
        --mh-solution-control-right: 3.25rem;
        margin-top: 2.25rem
    }

    .mh-solution-card {
        border-radius: 0.5rem;
    }

    .mh-solution-card img {
        height: auto;
        aspect-ratio: 1432 / 1080
    }

    .mh-solution-caption {
        padding: 1.375rem 1.125rem 6rem;
        text-align: left
    }

    .mh-solution-caption h3 {
        font-size: 1.3125rem
    }

    .mh-solution-caption p {
        max-width: 18.75rem;
        margin-top: 0.5rem;
        font-size: 0.9375rem;
        line-height: 1.45
    }

    .mh-solution-carousel .mh-carousel-controls {
        inset: 0
    }

    .mh-solution-carousel .mh-arrow {
        top: auto;
        bottom: 3.375rem;
        transform: none;
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        background-size: 0.5625rem 1rem
    }

    .mh-solution-carousel .mh-arrow[data-prev] {
        right: 6.5rem
    }

    .mh-solution-carousel .mh-arrow[data-next] {
        right: 3.25rem
    }

    .mh-solution-carousel .mh-count {
        right: 3.25rem;
        bottom: 1rem;
        min-width: 6rem;
        font-size: 0.9375rem;
        text-align: center
    }
}

/* Projects carousel layout from the approved homepage artwork. */
.mh-projects {
    overflow: hidden;
    background: #211c18
}

.mh-projects-grid {
    align-items: start;
    overflow: visible
}

.mh-project-intro {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 31.875rem;
    padding: 4.25rem 5.625rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background: #ffffff0d
}

.mh-project-intro::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -3.4375rem;
    left: -3.375rem;
    width: 7.8125rem;
    height: 16.625rem;
    background: url('../images/home/project-dots.png') center / contain no-repeat;
    pointer-events: none
}

.mh-project-intro h2 {
    margin: 0 0 6.375rem;
    font-size: 3.75rem;
    line-height: 1.04
}

.mh-project-intro .mh-button {
    min-width: 12.25rem;
    padding: 0.75rem 1.25rem;
    font-size: 1.0625rem
}

.mh-project-carousel {
    position: relative;
    min-width: 0;
    overflow: visible
}

.mh-project-carousel .mh-track {
    gap: 2.8125rem;
    overflow-x: auto;
    overflow-y: hidden
}

.mh-project-card {
    flex: 0 0 clamp(26.25rem, 26.72vw, 32.0625rem)
}

.mh-project-card:nth-child(even) {
    padding-top: 5.25rem
}

.mh-project-card img {
    width: 100%;
    aspect-ratio: 513 / 370;
    border-radius: 0;
    object-fit: cover
}

.mh-project-card p {
    margin: 1.75rem 1.125rem 0.5rem;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.3
}

.mh-project-card h3 {
    margin: 0.5rem 1.125rem;
    color: #fff;
    font-size: 1.3125rem;
    line-height: 1.3
}

.mh-project-arrow {
    position: relative;
    width: 3rem;
    height: 3rem;
    margin: 3rem 1.125rem 0;
    border-color: #ffffffa6;
    font-size: 1.375rem;
    transition: color .25s, border-color .25s
}

.mh-project-arrow::before {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: 50%;
    background: var(--mh-gradient);
    opacity: 0;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.mh-project-card a:hover {
    color: inherit
}

.mh-project-card a:is(:hover, :active, :focus-visible) p,
.mh-project-card a:is(:hover, :active, :focus-visible) h3,
.mh-project-card a:is(:hover, :active, :focus-visible) .mh-project-arrow {
    background: var(--mh-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.mh-project-card a:is(:hover, :active, :focus-visible) .mh-project-arrow {
    border-color: transparent
}

.mh-project-card a:is(:hover, :active, :focus-visible) .mh-project-arrow::before {
    opacity: 1
}

.mh-project-carousel .mh-carousel-controls {
    position: absolute;
    z-index: 2;
    display: flex;
    top: 40rem;
    left: -22.8125rem;
    width: 15.3125rem;
    margin: 0;
    gap: 1.375rem;
    justify-content: center
}

.mh-project-carousel .mh-arrow {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 0
}

.mh-project-carousel .mh-arrow::before {
    content: none
}

.mh-project-carousel .mh-arrow svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    overflow: visible
}

.mh-project-carousel .mh-arrow path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter
}

.mh-project-carousel .mh-control-default {
    stroke: #fff;
    opacity: 1
}

.mh-project-carousel .mh-control-active {
    opacity: 0
}

.mh-project-carousel .mh-count {
    display: block;
    width: 1px;
    min-width: 1px;
    height: 1.125rem;
    overflow: hidden;
    background: #fff;
    color: transparent;
    font-size: 0
}

.mh-project-carousel .mh-count::before {
    content: none
}

.mh-project-carousel .mh-arrow:hover,
.mh-project-carousel .mh-arrow:active,
.mh-project-carousel .mh-arrow:focus-visible {
    background: transparent;
    box-shadow: none;
}

.mh-project-carousel .mh-arrow:is(:hover, :active, :focus-visible) .mh-control-default {
    opacity: 0
}

.mh-project-carousel .mh-arrow:is(:hover, :active, :focus-visible) .mh-control-active {
    opacity: 1
}

@media(min-width:1201px) {
    .mh-projects-grid {
        grid-template-columns: 15.3125rem minmax(0, 1fr);
        gap: 7.5rem
    }

    .mh-project-intro {
        margin-top: 3.4375rem
    }
}

@media(min-width:768px) and (max-width:1200px) {
    .mh-projects-grid {
        grid-template-columns: 13.75rem minmax(0, 1fr);
        gap: 4rem
    }

    .mh-project-intro {
        min-height: 28.125rem;
        margin-top: 2.8125rem;
        padding: 3.625rem 1.5rem
    }

    .mh-project-intro h2 {
        margin-bottom: 5.125rem;
        font-size: 2.875rem
    }

    .mh-project-card {
        flex-basis: clamp(22.5rem, 43vw, 28.75rem)
    }

    .mh-project-carousel .mh-carousel-controls {
        top: 35.3125rem;
        left: -17.75rem;
        width: 13.75rem
    }
}

@media(min-width:768px) {
    .mh-project-carousel {
        width: calc(100% + max(2.5rem, calc((100vw - var(--mh-container)) / 2)))
    }
}

@media(max-width:767px) {
    .mh-projects-grid {
        display: block;
        overflow: visible
    }

    .mh-project-intro {
        display: block;
        min-height: 0;
        margin: 0 0 2.625rem;
        padding: 2.375rem 1.75rem 2.5rem;
        background: #ffffff0d
    }

    .mh-project-intro::before {
        top: -1.75rem;
        left: -1.125rem;
        width: 5.125rem;
        height: 10.9375rem
    }

    .mh-project-intro h2 {
        margin: 0 0 2rem;
        font-size: 2.5rem
    }

    .mh-project-intro .mh-button {
        margin: 0;
        min-width: 0;
        font-size: 0.9375rem
    }

    .mh-project-carousel .mh-track {
        gap: 1.25rem;
        overflow-x: auto
    }

    .mh-project-card {
        flex-basis: 82vw
    }

    .mh-project-card:nth-child(even) {
        padding-top: 2.125rem
    }

    .mh-project-card p {
        margin: 1.25rem 0.25rem 0.375rem;
        font-size: 0.75rem
    }

    .mh-project-card h3 {
        margin: 0.375rem 0.25rem;
        font-size: 1.125rem
    }

    .mh-project-arrow {
        width: 2.625rem;
        height: 2.625rem;
        margin: 1.625rem 0.25rem 0
    }

    .mh-project-carousel .mh-carousel-controls {
        position: static;
        width: auto;
        margin-top: 1.75rem;
        justify-content: flex-start
    }
}


@media(max-width:500px) {
    .mh-audience-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 0.875rem
    }

}

/* Desktop primary-navigation dropdowns follow the approved light panel design. */
@media(min-width:1201px) {
    .mh-navigation {
        height: 100%;
        align-self: stretch
    }

    .mh-menu {
        height: 100%;
        align-self: stretch
    }

    .mh-menu>li {
        height: 100%;
        align-self: stretch
    }

    .mh-menu>li>a {
        display: flex;
        height: 100%;
        padding-block: 0;
        align-items: center
    }

    .mh-menu>li>a::after {
        top: auto;
        bottom: 1.5rem
    }

    .mh-menu>li>.site-submenu-toggle {
        display: none!important
    }

    .mh-menu .sub-menu {
        display: block;
        min-width: 11rem;
        padding: 0.4375rem 0;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background: #fff;
        border: 1px solid #19191912;
        box-shadow: 0 0.75rem 1.5rem #00000024;
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s
    }

    .mh-menu>li>.sub-menu {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 0.5rem)
    }

    .mh-menu .sub-menu .sub-menu {
        top: -0.5rem;
        left: calc(100% + 0.25rem);
        transform: translateX(0.5rem)
    }

    .mh-menu li.mh-expanded>.sub-menu {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition-delay: 0s
    }

    .mh-menu>li.mh-expanded>.sub-menu {
        transform: translate(-20%, 0)
    }

    .mh-menu .sub-menu li.mh-expanded>.sub-menu {
        transform: translateX(0)
    }

    .mh-header .mh-menu .sub-menu a,
    .mh-header.mh-scrolled .mh-menu .sub-menu a {
        display: block;
        width: 100%;
        padding: 0.6875rem 1rem;
        color: #191919;
			font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.35;
        white-space: nowrap;
        -webkit-text-fill-color: #191919;
        transition: background-color .2s ease
    }

    .mh-menu .sub-menu a::after {
        display: none
    }

    .mh-header .mh-menu .sub-menu a:hover,
    .mh-header .mh-menu .sub-menu .current-menu-item>a,
    .mh-header .mh-menu .sub-menu .current-menu-ancestor>a {
        background: var(--mh-gradient);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        text-decoration: underline;
        text-decoration-color: #c48337;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.25rem;
        -webkit-text-fill-color: transparent
    }

    .mh-menu .sub-menu .site-submenu-toggle {
        top: 0.5rem;
        right: 0.4375rem;
        color: #191919
    }
}

/* Mobile navigation follows the approved desktop header language. */
@media(max-width:1200px) {
    .mh-navigation {
        position: fixed;
        z-index: 101;
        top: 4.75rem;
        left: 0;
        right: 0;
        display: block;
        max-height: calc(100dvh - 4.75rem);
        padding: 0.5rem clamp(1.75rem, 5vw, 3.5rem) 1.75rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-0.625rem);
        pointer-events: none;
        background: #fff;
        color: #191919;
        border-top: 1px solid #c4833759;
        box-shadow: 0 1.375rem 2.75rem #0004;
        transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s
    }

    .mh-navigation.mh-open {
        display: block;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition-delay: 0s
    }

    .mh-menu>li {
        position: relative;
        display: block;
        border-bottom: 1px solid #1919191f
    }

    .mh-menu a,
    .mh-scrolled .mh-menu a {
        display: block;
        width: fit-content;
        max-width: calc(100% - 2.875rem);
        padding: 1.125rem 0;
        color: #191919;
        font-size: 1.0625rem;
        line-height: 1.2;
        -webkit-text-fill-color: currentColor
    }

    .mh-menu a::after {
        bottom: 0.6875rem;
        height: 2px
    }

    .mh-menu a:hover,
    .mh-menu .current-menu-item>a,
    .mh-menu .current-menu-ancestor>a {
        background: var(--mh-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent
    }

    .mh-menu .site-submenu-toggle,
    .mh-scrolled .mh-menu .site-submenu-toggle {
        top: 0.6875rem;
        right: 0;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.75rem;
        color: #191919
    }

    .mh-menu .site-submenu-toggle span {
        width: 0.5625rem;
        height: 0.5625rem;
        transition: transform .2s ease
    }

    .mh-menu li.mh-expanded>.site-submenu-toggle span {
        transform: rotate(225deg)
    }

    .mh-menu .sub-menu,
    .mh-menu .sub-menu .sub-menu {
        margin: 0 -0.625rem 0.625rem;
        padding: 0.25rem 1.125rem 0.5rem;
        background: #ffffff;
        /* border-left: 2px solid #c48337; */
        box-shadow: none
    }

    .mh-menu .sub-menu li:last-child {
        border-bottom: 0
    }

    .mh-menu .sub-menu a {
        padding: 0.875rem 0;
        font-size: 0.9375rem
    }

    .mh-menu-toggle {
        display: grid;
        width: 2.125rem;
        height: 2.125rem;
        padding: 0.3125rem;
        place-items: center;
        color: inherit
    }

    .mh-menu-toggle svg {
        width: 1.5rem;
        height: 1.375rem;
        overflow: visible
    }

    .mh-menu-toggle svg path {
        transform-box: fill-box;
        transform-origin: center;
        transition: transform .2s ease, opacity .2s ease
    }

    .mh-menu-toggle[aria-expanded=true] svg path:first-child {
        transform: translateY(0.5rem) rotate(45deg)
    }

    .mh-menu-toggle[aria-expanded=true] svg path:nth-child(2) {
        opacity: 0
    }

    .mh-menu-toggle[aria-expanded=true] svg path:last-child {
        transform: translateY(-0.5rem) rotate(-45deg)
    }

    .mh-mobile-utilities {
        display: none
    }
}

@media(max-width:767px) {
    .mh-navigation {
        top: 4.375rem;
        max-height: calc(100dvh - 4.375rem);
        padding: 0.375rem 1.5rem 1.5rem
    }

    .mh-mobile-utilities {
        display: flex;
        padding-top: 1.25rem;
        gap: 0.625rem
    }

    .mh-mobile-utilities .mh-button:first-child {
        min-height: 2.125rem;
        padding: 0.375rem 0.75rem;
        border: 1px solid #19191966;
        border-radius: 2px;
        background: transparent;
        box-shadow: none;
        color: #191919 !important;
        font-size: 0.75rem
    }

    .mh-mobile-utilities .mh-button:first-child:hover,
    .mh-mobile-utilities .mh-button:first-child:focus-visible {
        background: var(--mh-gradient);
        border-color: transparent
    }

    .mh-mobile-utilities .mh-button:nth-child(2) {
        display: none
    }

    .mh-header-row {
        gap: 0.5rem
    }

    .mh-header-actions {
        gap: 0.3125rem
    }
}

@media(max-width:360px) {
    .mh-logo {
        margin-bottom: 0em;
        width: 6rem
    }

    .mh-header-row {
        gap: 0.3125rem;
        padding-top: 0em;
    }

    .mh-icon-button {
        padding: 0.1875rem
    }

    .mh-header .mh-quote-button {
        min-height: 1.375rem;
        padding: 2px 1.875rem 2px 0.5rem;
        font-size: 0.625rem
    }

    .mh-header .mh-quote-button .mh-quote-icon {
        width: 1.375rem;
        height: 1.375rem
    }

    .mh-menu-toggle {
        width: 1.875rem;
        height: 1.875rem
    }

    .mh-navigation {
        padding-inline: 1.25rem
    }
}

/* Material carousel controls and active caption. */
.mh-material-carousel figcaption {
    visibility: hidden;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity .24s ease, transform .24s ease, visibility .24s
}

.mh-material-carousel .mh-slide.mh-current figcaption {
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

.mh-material-carousel .mh-arrow {
    width: 3.5rem;
    min-width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(13, 11, 9, .84);
    box-shadow: none
}

.mh-material-carousel .mh-arrow::before {
    content: none
}

.mh-material-carousel .mh-arrow svg {
    display: block;
    width: 1.4375rem;
    height: 1.4375rem;
    margin: auto;
    overflow: visible
}

.mh-material-carousel .mh-arrow path {
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: square;
    stroke-linejoin: miter
}

.mh-material-carousel .mh-control-default {
    stroke: #fff;
    opacity: 1
}

.mh-material-carousel .mh-control-active {
    opacity: 0
}

.mh-material-carousel .mh-arrow:is(:hover, :active, :focus-visible) {
    border: 0;
    background: rgba(13, 11, 9, .92);
    box-shadow: none
}

.mh-material-carousel .mh-arrow:is(:hover, :active, :focus-visible) .mh-control-default {
    opacity: 0
}

.mh-material-carousel .mh-arrow:is(:hover, :active, :focus-visible) .mh-control-active {
    opacity: 1
}

/* Brand grid separators and borderless state dots. */
.mh-brand-grid {
    gap: 0
}

.mh-brand-grid>div {
    position: relative;
    padding: 1rem 1.125rem;
    background: transparent
}

.mh-brand-grid>div:not(:nth-child(5n)):not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0px;
    width: 1px;
    background: rgba(255, 255, 255, .72)
}

.mh-brand-grid>div:nth-last-child(n+6)::before {
    content: '';
    position: absolute;
    right: 0px;
    bottom: 0;
    left: 0px;
    height: 1px;
    background: rgba(255, 255, 255, .72)
}

.mh-brand-grid img {
    border-radius: 0;
    background: #fff
}

.mh-brand-carousel .mh-dots>button:not(.mh-arrow) {
    width: 0.625rem;
    height: 0.625rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #999;
    box-shadow: none
}

.mh-brand-carousel .mh-dots>button:not(.mh-arrow)[aria-pressed=true] {
    border: 0;
    background: var(--mh-gradient);
    box-shadow: none
}

@media(max-width:767px) {
    .mh-material-carousel .mh-carousel-controls {
        left: 0;
        right: 0;
        width: auto;
        transform: translateY(-50%)
    }

    .mh-material-carousel .mh-arrow {
        width: 2.625rem;
        min-width: 2.625rem;
        height: 2.875rem
    }

    .mh-material-carousel .mh-arrow svg {
        width: 1.1875rem;
        height: 1.1875rem
    }

    .mh-brand-grid>div {
        padding: 0.5625rem 0.625rem
    }

    .mh-brand-grid>div:not(:nth-child(5n)):not(:last-child)::after,
    .mh-brand-grid>div:nth-last-child(n+6)::before {
        content: none
    }

    .mh-brand-grid>div:not(:nth-child(2n)):not(:last-child)::after {
        content: '';
        position: absolute;
        top: 0px;
        right: 0;
        bottom: 0px;
        width: 1px;
        background: rgba(255, 255, 255, .72)
    }

    .mh-brand-grid>div:nth-last-child(n+3)::before {
        content: '';
        position: absolute;
        right: 0px;
        bottom: 0;
        left: 0px;
        height: 1px;
        background: rgba(255, 255, 255, .72)
    }

    .mh-news-card {
        padding-right: 5.75rem
    }

    .mh-news-card>span {
        right: 3.25rem
    }
}

/* One-time section reveals on the homepage. */
html.mh-reveal-ready .mh-reveal {
    opacity: 0;
    transition: opacity .72s ease, transform .72s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--mh-reveal-delay, 0ms);
    will-change: opacity, transform
}

html.mh-reveal-ready .mh-reveal-up {
    transform: translate3d(0, 2.25rem, 0)
}

html.mh-reveal-ready .mh-reveal-left {
    transform: translate3d(-2.625rem, 0, 0)
}

html.mh-reveal-ready .mh-reveal-right {
    transform: translate3d(2.625rem, 0, 0)
}

html.mh-reveal-ready .mh-reveal.mh-reveal-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0)
}

/* Fixed background treatment for the project discussion section. */
.mh-inquiry::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 20%;
    left: 0;
    background-image: var(--mh-inquiry-background);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    pointer-events: none
}

.mh-inquiry>.mh-section-background {
    opacity: 0
}

.mh-news-card p {
    min-height: 2.9em;
    line-height: 1.45
}

@media(max-width:767px) {
    html.mh-reveal-ready .mh-reveal-up {
        transform: translate3d(0, 1.5rem, 0)
    }

    html.mh-reveal-ready .mh-reveal-left {
        transform: translate3d(-1.625rem, 0, 0)
    }

    html.mh-reveal-ready .mh-reveal-right {
        transform: translate3d(1.625rem, 0, 0)
    }

    html.mh-reveal-ready .mh-reveal.mh-reveal-visible {
        transform: translate3d(0, 0, 0)
    }
}

@media(prefers-reduced-motion:reduce) {
    html.mh-reveal-ready .mh-reveal {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto
    }
}
/* Fullscreen factory gallery: main image, navigation and selectable thumbnails. */
.mh-image-lightbox {
    inset: 0; transform: none; margin: 0; width: 100%; height: 100dvh;
    max-width: none; max-height: none; padding: 0; border: 0;
    background: rgb(28 28 28 / 88%); color: #fff; overflow: hidden;
    font-family: 'Google Sans Flex', Arial, sans-serif;
}
.mh-image-lightbox[open] { display: grid; grid-template-rows: 48px minmax(0, 1fr) auto; place-items: stretch; }
.mh-image-lightbox::backdrop { background: rgb(0 0 0 / 25%); }
.mh-gallery-toolbar { display: flex; align-items: center; justify-content: space-between; padding-inline: 18px 8px; }
.mh-gallery-count { color: #ddd; font-size: 14px; }
.mh-image-lightbox .mh-image-lightbox-close { position: static; width: 40px; height: 40px; border: 0; border-radius: 0; background: transparent; color: #fff; font: 300 30px/1 Arial, sans-serif; }
.mh-gallery-stage { position: relative; min-height: 0; display: grid; place-items: center; padding: 8px 64px 24px; }
.mh-image-lightbox .mh-gallery-preview { display: block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; border-radius: 0; }
.mh-gallery-prev, .mh-gallery-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 4px; background: transparent; color: #fff; font: 300 40px/1 Arial, sans-serif; cursor: pointer; }
.mh-gallery-prev { left: 8px; }
.mh-gallery-next { right: 8px; }
.mh-gallery-thumbs { display: flex; justify-content: safe center; gap: 6px; overflow-x: auto; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); background: #171717; scrollbar-width: thin; }
.mh-gallery-thumbs button { flex: 0 0 100px; width: 100px; height: 70px; padding: 0; border: 2px solid transparent; border-radius: 0; background: #222; opacity: .55; cursor: pointer; }
.mh-gallery-thumbs button[aria-pressed=true] { border-color: #f4ca8c; opacity: 1; }
.mh-gallery-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.mh-image-lightbox button:hover { background-color: #ffffff20; opacity: 1; }
.mh-image-lightbox button:focus-visible { outline: 2px solid #f4ca8c; outline-offset: -2px; }
@media(max-width:767px) {
    .mh-image-lightbox { width: 100%; height: 100dvh; }
    .mh-gallery-stage { padding: 4px 44px 16px; }
    .mh-gallery-prev, .mh-gallery-next { width: 40px; height: 56px; }
    .mh-gallery-prev { left: 0; } .mh-gallery-next { right: 0; }
    .mh-gallery-thumbs button { flex-basis: 76px; width: 76px; height: 56px; }
}
/* Our Projects — PSD: text aligns with the content edge; decoration is offset independently. */
.mh-projects-grid { --project-intro-width: 15.3125rem; --project-column-gap: 8.3125rem; grid-template-columns: var(--project-intro-width) minmax(0, 1fr); gap: var(--project-column-gap); }
.mh-project-intro {
    position: relative; isolation: isolate; min-height: 0;
    padding: 0; margin-top: 7.6875rem; background: transparent;
}
.mh-project-intro::before { content: none; }
.mh-project-intro-backdrop {
    position: absolute; z-index: -1; pointer-events: none;
    left: -6.625rem; top: -4.25rem; width: 15.3125rem; height: 32rem;
    background: #ffffff1a; border-radius: 0;
}
.mh-project-intro-backdrop::before {
    content: ''; position: absolute; left: -3.375rem; top: -3.4375rem;
    width: 7.8125rem; height: 16.625rem;
    background: url('../images/home/project-dots.png') center / contain no-repeat;
    pointer-events: none;
}
.mh-project-intro h2 { margin: 0 0 6.375rem; }
.mh-project-intro .mh-button { margin: 0; white-space: nowrap; }
@media(min-width:768px) {
    .mh-project-carousel .mh-carousel-controls {
        left: calc(0rem - var(--project-intro-width) - var(--project-column-gap));
        top: 41rem; width: var(--project-intro-width); justify-content: flex-start;
    }
}
@media(min-width:768px) and (max-width:1200px) {
    .mh-projects-grid { --project-intro-width: 13.75rem; --project-column-gap: 4rem; }
    .mh-project-intro { margin-top: 6rem; padding: 0; }
    .mh-project-intro-backdrop { left: -3rem; top: -3.625rem; width: 13.75rem; height: 28.125rem; }
    .mh-project-intro h2 { margin-bottom: 5.125rem; }
    .mh-project-carousel .mh-carousel-controls { top: 35.3125rem; }
}
@media(max-width:767px) {
    .mh-projects-grid { display: block; }
    .mh-project-intro { margin: 1.75rem 0 3rem; padding: 0; min-height: 0; background: transparent; }
    .mh-project-intro-backdrop { left: -1.125rem; top: -1.25rem; width: 10rem; height: calc(100% + 2rem); }
    .mh-project-intro-backdrop::before { left: -1.125rem; top: -.75rem; width: 5.125rem; height: 10.9375rem; }
    .mh-project-intro h2 { margin-bottom: 2rem; }
}
/* Keep the alternating composition stable when the carousel clones slides. */
.mh-project-card:nth-child(even) { padding-top: 0; }
.mh-project-card.mh-project-card--offset { padding-top: 5.25rem; }
@media(max-width:767px) { .mh-project-card.mh-project-card--offset { padding-top: 2.125rem; } }

/* Homepage project form: proportions from the approved design. */
.mh-inquiry-form { padding: 3.125rem 4.625rem 2.5rem; }
.mh-inquiry .mh-form-grid { gap: 1.125rem 2.375rem; }
.mh-inquiry input:not([type=submit]):not([type=hidden]),
.mh-inquiry textarea {
    background: #f4f4f4;
    border: 0;
    min-height: 4rem;
    padding: 1.125rem 1.75rem;
    font-size: 1.125rem;
}
.mh-inquiry input::placeholder,
.mh-inquiry textarea::placeholder { color: #929292; opacity: 1; }
.mh-inquiry textarea { display: block; height: 4rem; }
.mh-inquiry .mh-captcha { gap: 3rem; }
.mh-inquiry .mh-captcha > label { flex: 0 1 53%; width: 53%; }
.mh-inquiry .mh-captcha .wpcf7-form-control-wrap { display: block; }
.mh-inquiry .mh-captcha img {
    flex: 0 0 auto;
    width: 9rem;
    max-width: 9rem;
    height: 3rem;
    object-fit: contain;
}
.mh-inquiry .mh-form-submit { margin-top: 1.125rem; }
.mh-inquiry .mh-privacy { color: #999; }
@media(max-width:767px) {
    .mh-inquiry-form { padding: 1.625rem 1.25rem; }
    .mh-inquiry .mh-form-grid { gap: 1rem; }
    .mh-inquiry input:not([type=submit]):not([type=hidden]),
    .mh-inquiry textarea { min-height: 3.25rem; padding: .875rem 1rem; font-size: 1rem; }
    .mh-inquiry textarea { height: 6.875rem; }
    .mh-inquiry .mh-captcha { gap: 1rem; }
    .mh-inquiry .mh-captcha > label { flex: 1; width: auto; }
    .mh-inquiry .mh-captcha img { width: 6.75rem; max-width: 6.75rem; height: 2.25rem; }
}

/* Shared desktop/mobile navigation: uppercase submenu labels. */
/* .mh-header .mh-menu .sub-menu a { text-transform: uppercase; } */
 .mh-header .mh-menu .sub-menu a { text-transform: none; } 

.mh-quick-contact__detail:is(:hover, :focus-visible) {
    background-image: var(--mh-gradient, linear-gradient(90deg, #c48337, #f4ca8c));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    text-shadow: none;
}

/* Full-width contact strip above the existing single-row navigation. */
.mh-header { height: auto; }
.mh-contact-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    min-height: 3.75rem;
    padding: .5rem max(2.5rem, calc((100vw - var(--mh-container)) / 2));
    background: #080808;
}
.mh-contact-strip a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.mh-contact-strip a span {
    color: #fff;
    -webkit-text-fill-color: #fff;
}
/* .mh-contact-strip a + a {
    margin-left: 1.5rem;
    padding-left: 1.5rem;
}
.mh-contact-strip a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1.25rem;
    background: #fff;
    transform: translateY(-50%);
} */
.mh-contact-strip svg {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mh-contact-strip a:is(:hover, :focus-visible) span {
    background: var(--mh-gradient, linear-gradient(90deg, #c48337, #f4ca8c));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 767px) {
    .mh-contact-strip { gap: .375rem; min-height: 2.5rem; padding: .5rem .75rem; }
    .mh-contact-strip a { font-size: .6875rem; }
    .mh-contact-strip a + a { margin-left: .5rem; padding-left: .5rem; }
    .mh-contact-strip a + a::before { height: 1rem; }
    .mh-contact-strip svg { width: 1rem; height: 1rem; }
}