/* Final responsive navigation tuning for index.html */

/* Keep the page inside the viewport on narrow devices. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Desktop navigation: the dropdown is taken out of layout flow and uses a fixed
   anchor point, so opening it cannot resize or move any menu item. */
@media (min-width: 901px) {
  .site-header .nav-shell {
    width: min(1600px, calc(100% - clamp(32px, 6vw, 120px))) !important;
    grid-template-columns: minmax(240px, 43.0625%) minmax(0, 56.9375%) !important;
  }

  .site-header .main-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(14px, 2.25vw, 44px) !important;
    margin-top: clamp(42px, 3.35vw, 56px) !important;
    min-width: 0 !important;
  }

  .site-header .main-menu > a,
  .site-header .main-menu > .menu-item,
  .site-header .main-menu > .menu-item > .products-trigger,
  .site-header .main-menu > a:nth-child(n),
  .site-header .main-menu > .menu-item:nth-child(n) {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .site-header .main-menu > a,
  .site-header .main-menu > .menu-item > .products-trigger {
    font-size: clamp(11px, .83vw, 16px) !important;
    letter-spacing: clamp(.1px, .052vw, 1px) !important;
  }

  .site-header .main-menu > .menu-item.products-menu {
    position: relative !important;
    display: block !important;
    width: auto !important;
    height: 33px !important;
    min-height: 33px !important;
    overflow: visible !important;
  }

  .site-header .products-trigger {
    display: flex !important;
    align-items: center !important;
    height: 33px !important;
    line-height: 1 !important;
  }

  .site-header .products-menu::after {
    top: 100% !important;
    left: 50% !important;
    width: max(180px, 100%) !important;
    height: 12px !important;
    transform: translateX(-50%) !important;
  }

  .site-header .product-dropdown {
    top: calc(100% + 10px) !important;
    left: 50% !important;
    width: clamp(178px, 15vw, 250px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    transform: translate(-50%, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .16s ease, visibility 0s linear .16s !important;
    will-change: opacity !important;
  }

  .site-header .products-menu:hover .product-dropdown,
  .site-header .products-menu:focus-within .product-dropdown,
  .site-header .products-menu.is-open .product-dropdown {
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }

  .site-header .product-dropdown a,
  .site-header.scrolled .product-dropdown a {
    box-sizing: border-box !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 9px 0 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    transform: none !important;
    transition: color .16s ease !important;
  }
}

/* Tablet and phone navigation: the menu has one predictable open state and
   submenu expansion is controlled only by .is-open (touch friendly). */
@media (max-width: 900px) {
  .site-header .menu-toggle {
    display: block !important;
    position: absolute !important;
    top: 13px !important;
    right: 0 !important;
    z-index: 100 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 0 !important;
  }

  .site-header .menu-toggle::before {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    margin: 8px auto 0 !important;
    background: currentColor !important;
    box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor !important;
  }

  .site-header .menu-toggle span { display: none !important; }
  .site-header.scrolled .menu-toggle { color: var(--header-orange, #ea5b11) !important; }
  .site-header .nav-shell {
    width: calc(100% - clamp(32px, 8vw, 64px)) !important;
  }

  .site-header .main-menu {
    position: absolute !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: initial !important;
    justify-content: initial !important;
    height: 0 !important;
    margin: 0 !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px clamp(18px, 8vw, 32px) 12px !important;
    gap: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transition: max-height .28s ease, opacity .18s ease, visibility 0s linear .28s !important;
  }

  .site-header.nav-open .main-menu {
    height: auto !important;
    visibility: visible !important;
    max-height: min(78vh, 620px) !important;
    opacity: 1 !important;
    transition-delay: 0s !important;
    overflow-y: auto !important;
  }

  .site-header .main-menu > a,
  .site-header .main-menu > .menu-item {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .site-header .main-menu > .menu-item > .products-trigger {
    margin: 0 !important;
  }

  .site-header .main-menu > .menu-item.products-menu {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .site-header .products-trigger {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .site-header .product-dropdown,
  .site-header .products-menu:hover .product-dropdown,
  .site-header .products-menu:focus-within .product-dropdown {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    max-height: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 0 0 clamp(12px, 4vw, 18px) !important;
    border: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: max-height .25s ease, padding .25s ease !important;
  }

  .site-header .products-menu.is-open .product-dropdown {
    max-height: min(60vh, 380px) !important;
    padding-bottom: 8px !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
  }

  .site-header .product-dropdown a,
  .site-header.scrolled .product-dropdown a {
    min-height: 42px !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    border-bottom-color: rgba(255, 255, 255, .2) !important;
    color: #fff !important;
    font-size: clamp(12px, 3.6vw, 14px) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    transform: none !important;
  }
}

@media (max-width: 420px) {
  .site-header .nav-shell {
    width: calc(100% - 28px) !important;
  }

  .site-header .main-menu {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}





/* PSD rail alignment: manufacturer and solutions share the 1600px desktop rail. */
@media (min-width: 1600px) {
  .manufacturer-section > .container,
  .solutions-section > .container {
    width: min(1600px, calc(100vw - 120px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .solutions-section .section-row > .button {
    width: clamp(200px, 16.77vw, 322px) !important;
    height: clamp(42px, 3.02vw, 58px) !important;
    min-height: clamp(42px, 3.02vw, 58px) !important;
    padding-left: clamp(18px, 1.875vw, 36px) !important;
    padding-right: clamp(18px, 1.875vw, 36px) !important;
    border-radius: 999px !important;
  }

  .solutions-section .section-row > .button i {
    width: clamp(25px, 1.72vw, 33px) !important;
    height: clamp(13px, .89vw, 17px) !important;
    flex-basis: clamp(25px, 1.72vw, 33px) !important;
    background-size: contain !important;
  }
}

@media (min-width: 901px) and (max-width: 1599px) {
  .manufacturer-section > .container,
  .solutions-section > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .solutions-section .section-row > .button {
    width: clamp(200px, 16.77vw, 268px) !important;
    height: clamp(42px, 3.02vw, 52px) !important;
    min-height: clamp(42px, 3.02vw, 52px) !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 900px) {
  .manufacturer-section > .container,
  .solutions-section > .container {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .solutions-section .section-row > .button {
    width: min(100%, 240px) !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
  }
}


/* Use viewport coordinates for the desktop rail so the browser scrollbar does not
   shift the 1920px PSD rail by 15px. */
@media (min-width: 1600px) {
  .manufacturer-section > .container,
  .solutions-section > .container {
    margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1599px) {
  .manufacturer-section > .container,
  .solutions-section > .container {
    margin-left: 32px !important;
    margin-right: 0 !important;
  }
}

/* Keep the same navigation spacing after the header enters its scrolled state. */
@media (min-width: 901px) {
  .site-header.scrolled .main-menu {
    gap: clamp(14px, 2.25vw, 44px) !important;
  }

  .site-header.scrolled .main-menu > a,
  .site-header.scrolled .main-menu > .menu-item,
  .site-header.scrolled .main-menu > .menu-item > .products-trigger,
  .site-header.scrolled .main-menu > a:nth-child(n),
  .site-header.scrolled .main-menu > .menu-item:nth-child(n) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Keep the PRODUCTS label readable on its light hover surface. The direct-child
   color rule in the legacy header lockup has higher specificity than the generic
   anchor hover rule, so override it explicitly for this trigger. */
@media (min-width: 901px) {
  .site-header .main-menu > .menu-item > .products-trigger:hover,
  .site-header .main-menu > .menu-item > .products-trigger:focus-visible {
    color: var(--header-orange, #ea5b11) !important;
  }

  .site-header.scrolled .main-menu > .menu-item > .products-trigger:hover,
  .site-header.scrolled .main-menu > .menu-item > .products-trigger:focus-visible {
    color: #fff !important;
  }
}

/* Keep the PRODUCTS trigger readable while its white hover surface is active. */
@media (min-width: 901px) {
  .site-header .products-menu:hover > .products-trigger,
  .site-header .products-menu:focus-within > .products-trigger,
  .site-header .products-menu.is-open > .products-trigger {
    color: var(--header-orange, #ea5b11) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* PSD header lockup: the 1920px artwork uses a centered 1600px rail. At
   wider screens the rail stays centered; the navigation keeps the source
   margins instead of distributing the links with a smaller flex gap. */
@media (min-width: 1800px) {
  .site-header .nav-shell,
  .site-header.scrolled .nav-shell {
    width: min(1600px, calc(100vw - 120px)) !important;
    margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
    margin-right: 0 !important;
  }

  .site-header .brand,
  .site-header.scrolled .brand {
    margin-top: 7px !important;
    margin-left: -14px !important;
  }

  .site-header .brand-logo,
  .site-header.scrolled .brand-logo {
    width: 233px !important;
    max-width: none !important;
  }

  .site-header .topbar,
  .site-header.scrolled .topbar {
    left: max(0px, calc(50vw - 283px)) !important;
    right: 0 !important;
    width: auto !important;
  }

  .site-header .main-menu,
  .site-header.scrolled .main-menu {
    margin-top: 49px !important;
    gap: 0 !important;
  }

  .site-header .main-menu > a.nav-home.is-current,
  .site-header.scrolled .main-menu > a.nav-home.is-current {
    width: 77px !important;
    min-width: 77px !important;
    height: 33px !important;
    min-height: 33px !important;
    line-height: 33px !important;
    text-align: center !important;
    border-radius: 17px !important;
    background: #fff !important;
    color: #ea5b11 !important;
  }

  .site-header .main-menu > a.nav-home.is-current::before,
  .site-header.scrolled .main-menu > a.nav-home.is-current::before {
    display: none !important;
  }

  .site-header .main-menu > .menu-item.products-menu,
  .site-header.scrolled .main-menu > .menu-item.products-menu {
    margin-left: 54px !important;
    margin-right: 0 !important;
  }

  .site-header .main-menu > a.nav-solutions,
  .site-header.scrolled .main-menu > a.nav-solutions {
    margin-left: 67px !important;
    margin-right: 0 !important;
  }

  .site-header .main-menu > a.nav-oem,
  .site-header.scrolled .main-menu > a.nav-oem {
    margin-left: 68px !important;
    margin-right: 0 !important;
  }

  .site-header .main-menu > a.nav-about,
  .site-header.scrolled .main-menu > a.nav-about {
    margin-left: 67px !important;
    margin-right: 0 !important;
  }

  .site-header .main-menu > a.nav-news,
  .site-header.scrolled .main-menu > a.nav-news {
    margin-left: 67px !important;
    margin-right: 0 !important;
  }

  .site-header .main-menu > a.nav-contact,
  .site-header.scrolled .main-menu > a.nav-contact {
    margin-left: 68px !important;
    margin-right: 0 !important;
  }
}



/* Keep the compact desktop header in the same place while it becomes sticky.
   Legacy scrolled rules enlarged the type and shifted each item to the right. */
@media (min-width: 901px) and (max-width: 1799px) {
  .site-header.scrolled .main-menu {
    margin-top: clamp(42px, 3.35vw, 56px) !important;
  }

  .site-header.scrolled .main-menu > a,
  .site-header.scrolled .main-menu > .menu-item > .products-trigger {
    font-size: clamp(11px, .83vw, 16px) !important;
    letter-spacing: clamp(.1px, .052vw, 1px) !important;
  }

  .site-header .main-menu > a.nav-home.is-current,
  .site-header.scrolled .main-menu > a.nav-home.is-current {
    width: clamp(64px, 4vw, 77px) !important;
    min-width: clamp(64px, 4vw, 77px) !important;
    height: 33px !important;
    min-height: 33px !important;
    border-radius: 17px !important;
    background: #fff !important;
    color: #ea5b11 !important;
    line-height: 33px !important;
    text-align: center !important;
  }

  .site-header .main-menu > a.nav-home.is-current::before,
  .site-header.scrolled .main-menu > a.nav-home.is-current::before {
    display: none !important;
  }
}

/* Manufacturing & Quality PSD alignment. The desktop frame uses the same
   left rail as Manufacturer and Solutions; the photo is inset inside the
   gray offset frame instead of bleeding to the viewport edge. */
@media (min-width: 1800px) {
  .quality-section > .container {
    width: min(1600px, calc(100vw - 120px)) !important;
    max-width: none !important;
    margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
    margin-right: 0 !important;
  }

  .quality-section .quality-grid {
    grid-template-columns: 742px minmax(0, 1fr) !important;
    gap: 87px !important;
    align-items: start !important;
  }

  .quality-copy {
    width: 742px !important;
    max-width: 742px !important;
    padding-top: 15px !important;
  }

  .quality-copy > p:not(.eyebrow) {
    max-width: 742px !important;
  }

  .quality-section .quality-visual {
    width: calc(100% + 160px) !important;
    margin-right: -160px !important;
    position: relative !important;
    overflow: visible !important;
  }

  .quality-section .quality-visual img {
    width: 100% !important;
    height: 553px !important;
    object-fit: cover !important;
  }

  .quality-section .quality-visual::before {
    inset: 53px 0 -20px -24px !important;
    background: #e3ded7 !important;
  }
}

@media (min-width: 901px) and (max-width: 1799px) {
  .quality-section > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    max-width: none !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }

  .quality-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(36px, 5.8vw, 88px) !important;
    align-items: start !important;
  }

  .quality-copy {
    padding-top: 15px !important;
  }

  .quality-visual {
    width: 100% !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  .quality-visual::before {
    inset: 0 0 -20px -20px !important;
  }
}

@media (max-width: 900px) {
  .quality-section > .container {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .quality-visual {
    width: 100% !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  .quality-visual::before {
    inset: 8px 0 -10px -8px !important;
  }
}



@media (min-width: 1800px) {
  .quality-copy .eyebrow {
    gap: 33px !important;
  }

  .quality-copy .eyebrow::before {
    width: 102px !important;
    flex-basis: 102px !important;
  }

  .quality-copy .eyebrow::after {
    left: 79px !important;
  }

  .quality-copy h2 {
    font-size: clamp(40px, 2.7vw, 52px) !important;
  }

  .quality-copy > .button {
    width: 248px !important;
    height: 58px !important;
    min-height: 58px !important;
    border-radius: 29px !important;
  }
}

/* Latest News PSD alignment: keep the dot field and intro panel on the left
   rail, and use the exported 455x362 image panels without a cream block below. */
@media (min-width: 1800px) {
  .news-section > .container {
    width: min(1600px, calc(100vw - 120px)) !important;
    max-width: none !important;
    margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
    margin-right: 0 !important;
  }

  .news-section::before {
    left: -40px !important;
    top: 0 !important;
    width: 145px !important;
    height: 266px !important;
    background-size: 19px 19px !important;
  }

  .news-section .news-grid {
    grid-template-columns: 372px minmax(0, 1fr) !important;
    gap: 104px !important;
  }

  .news-intro {
    width: 372px !important;
  }

  .news-intro::before {
    left: -113px !important;
    top: 0 !important;
    width: 188px !important;
    height: 579px !important;
  }

  .news-section .news-cards {
    gap: 37px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    align-items: flex-start !important;
  }

  .news-section .news-card {
    flex: 0 0 455px !important;
    min-width: 455px !important;
    height: auto !important;
    background: transparent !important;
  }

  .news-section .news-card:nth-child(1),
  .news-section .news-card:nth-child(3) { margin-top: 0 !important; }
  .news-section .news-card:nth-child(2) { margin-top: 84px !important; }

  .news-section .news-media {
    width: 455px !important;
    height: 362px !important;
    min-height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .news-section .news-card img {
    display: block !important;
    width: 455px !important;
    height: 362px !important;
    min-height: 0 !important;
    object-fit: cover !important;
    background: transparent !important;
  }
}

@media (min-width: 901px) and (max-width: 1799px) {
  .news-section > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    max-width: none !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }

  .news-section::before {
    left: 0 !important;
    top: 0 !important;
    width: 110px !important;
    height: 360px !important;
  }

  .news-cards {
    gap: clamp(24px, 2.4vw, 37px) !important;
  }

  .news-card {
    flex-basis: clamp(280px, 31vw, 455px) !important;
    min-width: clamp(280px, 31vw, 455px) !important;
    background: transparent !important;
  }

  .news-media {
    height: clamp(220px, 25vw, 362px) !important;
    min-height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .news-card img {
    width: 100% !important;
    height: clamp(220px, 25vw, 362px) !important;
    object-fit: cover !important;
    background: transparent !important;
  }
}

@media (max-width: 900px) {
  .news-section > .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .news-media,
  .news-card img {
    background: transparent !important;
  }
}




/* About module PSD rail: anchor both labels to the same 1600px rail and
   keep the center artwork centered between them. */
@media (min-width: 1800px) {
  .about-section .about-text,
  .about-section[data-reveal].is-visible > .about-text {
    left: max(160px, calc((100vw - 1600px) / 2)) !important;
    top: calc(50% + 12px) !important;
    width: 1600px !important;
    transform: translateY(-50%) !important;
  }

  .about-section .about-text > div:last-child {
    width: 322px !important;
    text-align: left !important;
  }

  .about-section .about-center {
    width: 571px !important;
    left: 16px !important;
  }

  .about-section .about-center img {
    width: 100% !important;
    height: 360px !important;
    object-fit: cover !important;
  }
}

@media (max-width: 900px) {
  .about-section .about-text,
  .about-section[data-reveal].is-visible > .about-text {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
}



/* Product list page: reuse the calibrated site chrome and shared content rail. */
.product-list-page {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

.product-list-page .product-list-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.product-list-page .product-list-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.product-list-page .product-list-hero-inner,
.product-list-page .product-list-intro-grid,
.product-list-page .product-filter,
.product-list-page .product-list-grid-wrap > .container {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.product-list-page .product-list-hero-inner {
  padding-bottom: 82px !important;
}

.product-list-page .product-list-hero h1 {
  font-size: clamp(48px, 4.5vw, 76px) !important;
}

.product-list-page .product-list-intro {
  padding: 108px 0 42px !important;
}

.product-list-page .product-list-intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr) !important;
  gap: 96px !important;
  align-items: end !important;
}

.product-list-page .product-list-filter {
  margin-top: 58px !important;
  gap: 34px !important;
  border-bottom-color: rgba(101, 94, 88, .28) !important;
}

.product-list-page .product-filter button {
  color: #655e58 !important;
}

.product-list-page .product-filter button:hover,
.product-list-page .product-filter button.is-active {
  color: var(--orange) !important;
}

.product-list-page .product-list-grid-wrap {
  padding: 0 0 124px !important;
}

.product-list-page .product-list-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.product-list-page .product-list-card {
  border: 1px solid rgba(101, 94, 88, .12) !important;
  border-radius: 6px !important;
  background: #f7eee6 !important;
  box-shadow: none !important;
}

.product-list-page .product-list-card:hover {
  box-shadow: 0 16px 30px rgba(84, 44, 29, .14) !important;
}

.product-list-page .product-list-media {
  height: 330px !important;
  background: #f8f1ea !important;
}

.product-list-page .product-list-media img {
  mix-blend-mode: multiply !important;
}

.product-list-page .product-list-card-body {
  padding: 22px 22px 26px !important;
}

.product-list-page .product-list-card-body h2 {
  color: #3d281e !important;
}

.product-list-page .product-list-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .product-list-page .product-list-hero-inner,
  .product-list-page .product-list-intro-grid,
  .product-list-page .product-filter,
  .product-list-page .product-list-grid-wrap > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }

  .product-list-page .product-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .product-list-page .product-list-media {
    height: clamp(260px, 25vw, 330px) !important;
  }
}

@media (max-width: 900px) {
  .product-list-page .product-list-hero-inner,
  .product-list-page .product-list-intro-grid,
  .product-list-page .product-filter,
  .product-list-page .product-list-grid-wrap > .container,
  .product-list-page .product-list-cta .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .product-list-page .product-list-hero {
    min-height: 470px !important;
  }

  .product-list-page .product-list-intro-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .product-list-page .product-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .product-list-page .product-list-media {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

@media (max-width: 640px) {
  .product-list-page .product-list-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Product detail page: shared index chrome, rail and palette. */
.product-page {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

.product-page .product-hero-inner,
.product-page .product-summary-grid,
.product-page .product-details > .container,
.product-page .product-specs > .container {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.product-page .product-hero {
  min-height: 520px !important;
  background-color: #6e3828 !important;
}

.product-page .product-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.product-page .product-summary {
  padding: 108px 0 120px !important;
}

.product-page .product-summary-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
  gap: clamp(64px, 6vw, 112px) !important;
  align-items: center !important;
}

.product-page .product-main-media,
.product-page .product-thumbnails button,
.product-page .product-panel img {
  background: #f8f1ea !important;
  border-color: rgba(101, 94, 88, .15) !important;
}

.product-page .product-main-media {
  min-height: 560px !important;
  border-radius: 8px !important;
}

.product-page .product-main-media img,
.product-page .product-thumbnails img,
.product-page .product-panel img {
  mix-blend-mode: multiply !important;
}

.product-page .product-info h2,
.product-page .product-panel h2,
.product-page .product-bottom-cta h2 {
  color: #191919 !important;
}

.product-page .product-kicker,
.product-page .product-detail-tabs button.is-active,
.product-page .product-detail-tabs button:hover,
.product-page .product-specs .eyebrow {
  color: var(--orange) !important;
}

.product-page .product-meta,
.product-page .product-detail-tabs,
.product-page .product-bottom-cta {
  border-color: rgba(101, 94, 88, .25) !important;
}

.product-page .product-details {
  padding-bottom: 112px !important;
}

.product-page .product-panel img {
  border-radius: 6px !important;
}

.product-page .product-specs {
  background: #f7eee6 !important;
}

.product-page .spec-grid {
  background: rgba(101, 94, 88, .22) !important;
}

.product-page .spec-grid > div {
  background: #f7eee6 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .product-page .product-hero-inner,
  .product-page .product-summary-grid,
  .product-page .product-details > .container,
  .product-page .product-specs > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  .product-page .product-hero-inner,
  .product-page .product-summary-grid,
  .product-page .product-details > .container,
  .product-page .product-specs > .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .product-page .product-hero {
    min-height: 360px !important;
  }

  .product-page .product-summary {
    padding: 64px 0 78px !important;
  }

  .product-page .product-summary-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .product-page .product-info {
    max-width: 100% !important;
  }

  .product-page .product-main-media {
    min-height: 340px !important;
  }
}


/* Solution detail page: shared index chrome, rail and warm palette. */
.solution-page {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

.solution-page .solution-hero-inner,
.solution-page .solution-intro-grid,
.solution-page .solution-cards > .container,
.solution-page .solution-process > .container,
.solution-page .showcase-grid {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.solution-page .solution-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.solution-page .solution-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.solution-page .solution-intro {
  padding: 108px 0 82px !important;
}

.solution-page .solution-intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr) !important;
  gap: 96px !important;
}

.solution-page .solution-feature {
  border: 1px solid rgba(101, 94, 88, .14) !important;
  border-radius: 6px !important;
  background: #f7eee6 !important;
}

.solution-page .solution-feature > img {
  height: 330px !important;
}

.solution-page .solution-process {
  background: #f7eee6 !important;
}

.solution-page .process-grid article {
  border-color: rgba(101, 94, 88, .22) !important;
  background: rgba(255, 255, 255, .35) !important;
}

.solution-page .solution-showcase {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .solution-page .solution-hero-inner,
  .solution-page .solution-intro-grid,
  .solution-page .solution-cards > .container,
  .solution-page .solution-process > .container,
  .solution-page .showcase-grid {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }

  .solution-page .solution-feature > img {
    height: clamp(260px, 25vw, 330px) !important;
  }
}

@media (max-width: 900px) {
  .solution-page .solution-hero-inner,
  .solution-page .solution-intro-grid,
  .solution-page .solution-cards > .container,
  .solution-page .solution-process > .container,
  .solution-page .showcase-grid {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .solution-page .solution-hero {
    min-height: 440px !important;
  }

  .solution-page .solution-intro-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .solution-page .solution-feature > img {
    height: auto !important;
    aspect-ratio: 520 / 300 !important;
  }
}

/* OEM / ODM page: shared index chrome, rail and warm palette. */
.oem-page {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

.oem-page .oem-hero-inner,
.oem-page .oem-intro-grid,
.oem-page .oem-capabilities > .container,
.oem-page .oem-process-grid,
.oem-page .oem-branding-grid {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.oem-page .oem-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.oem-page .oem-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.oem-page .oem-intro {
  padding: 108px 0 82px !important;
}

.oem-page .oem-intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr) !important;
  gap: 96px !important;
}

.oem-page .oem-capability-grid article {
  border-color: rgba(101, 94, 88, .14) !important;
  border-radius: 6px !important;
  background: #f7eee6 !important;
}

.oem-page .oem-process,
.oem-page .oem-cta {
  background-color: #6e3828 !important;
}

.oem-page .oem-branding {
  background: var(--cream) !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .oem-page .oem-hero-inner,
  .oem-page .oem-intro-grid,
  .oem-page .oem-capabilities > .container,
  .oem-page .oem-process-grid,
  .oem-page .oem-branding-grid {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  .oem-page .oem-hero-inner,
  .oem-page .oem-intro-grid,
  .oem-page .oem-capabilities > .container,
  .oem-page .oem-process-grid,
  .oem-page .oem-branding-grid,
  .oem-page .oem-cta .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .oem-page .oem-hero {
    min-height: 440px !important;
  }
}

/* About page: shared index chrome, rail and warm visual system. */
.about-page .about-hero-inner,
.about-page .about-intro-grid,
.about-page .about-story-grid,
.about-page .about-capabilities > .container,
.about-page .about-quality-grid {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.about-page .about-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.about-page .about-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.about-page .about-intro,
.about-page .about-story,
.about-page .about-quality {
  background: var(--cream) !important;
}

.about-page .about-capabilities {
  background: #f7eee6 !important;
}

.about-page .about-capability-grid article {
  border-color: rgba(101, 94, 88, .22) !important;
  background: rgba(255, 255, 255, .35) !important;
}

.about-page .about-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .about-page .about-hero-inner,
  .about-page .about-intro-grid,
  .about-page .about-story-grid,
  .about-page .about-capabilities > .container,
  .about-page .about-quality-grid {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  .about-page .about-hero-inner,
  .about-page .about-intro-grid,
  .about-page .about-story-grid,
  .about-page .about-capabilities > .container,
  .about-page .about-quality-grid,
  .about-page .about-cta .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .about-page .about-hero {
    min-height: 440px !important;
  }
}

/* About page: shared index chrome, rail and warm visual system. */
.about-page {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

.about-page .about-hero-inner,
.about-page .about-intro-grid,
.about-page .about-story-grid,
.about-page .about-capabilities > .container,
.about-page .about-quality-grid {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.about-page .about-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.about-page .about-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.about-page .about-capabilities {
  background: #f7eee6 !important;
}

.about-page .about-capability-grid article {
  border-color: rgba(101, 94, 88, .22) !important;
  background: rgba(255, 255, 255, .35) !important;
}

.about-page .about-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .about-page .about-hero-inner,
  .about-page .about-intro-grid,
  .about-page .about-story-grid,
  .about-page .about-capabilities > .container,
  .about-page .about-quality-grid {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  .about-page .about-hero-inner,
  .about-page .about-intro-grid,
  .about-page .about-story-grid,
  .about-page .about-capabilities > .container,
  .about-page .about-quality-grid,
  .about-page .about-cta .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .about-page .about-hero {
    min-height: 440px !important;
  }
}

/* Project list page: shared index chrome, rail and application palette. */
.project-page .project-hero-inner,
.project-page .project-intro-grid,
.project-page .project-filter,
.project-page .project-list > .container {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.project-page .project-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.project-page .project-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.project-page .project-intro,
.project-page .project-list {
  background: var(--cream) !important;
}

.project-page .project-card {
  border: 1px solid rgba(101, 94, 88, .14) !important;
  border-radius: 6px !important;
  background: #f7eee6 !important;
}

.project-page .project-card > img {
  height: 360px !important;
}

.project-page .project-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .project-page .project-hero-inner,
  .project-page .project-intro-grid,
  .project-page .project-filter,
  .project-page .project-list > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }

  .project-page .project-card > img {
    height: clamp(260px, 25vw, 360px) !important;
  }
}

@media (max-width: 900px) {
  .project-page .project-hero-inner,
  .project-page .project-intro-grid,
  .project-page .project-filter,
  .project-page .project-list > .container,
  .project-page .project-cta .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .project-page .project-hero {
    min-height: 440px !important;
  }
}

/* Project Center page: shared index chrome, rail and warm project-card system. */
.project-page {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

.project-page .project-hero-inner,
.project-page .project-intro-grid,
.project-page .project-filter,
.project-page .project-list > .container {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.project-page .project-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.project-page .project-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.project-page .project-intro {
  padding: 108px 0 60px !important;
}

.project-page .project-intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr) !important;
  gap: 96px !important;
}

.project-page .project-filter {
  margin-top: 58px !important;
  gap: 34px !important;
}

.project-page .project-filter button:hover,
.project-page .project-filter button.is-active {
  color: var(--orange) !important;
}

.project-page .project-card {
  border: 1px solid rgba(101, 94, 88, .14) !important;
  border-radius: 6px !important;
  background: #f7eee6 !important;
}

.project-page .project-card > img {
  height: 360px !important;
}

.project-page .project-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .project-page .project-hero-inner,
  .project-page .project-intro-grid,
  .project-page .project-filter,
  .project-page .project-list > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }

  .project-page .project-card > img {
    height: clamp(280px, 25vw, 360px) !important;
  }
}

@media (max-width: 900px) {
  .project-page .project-hero-inner,
  .project-page .project-intro-grid,
  .project-page .project-filter,
  .project-page .project-list > .container,
  .project-page .project-cta .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .project-page .project-hero {
    min-height: 440px !important;
  }
}

/* Project detail page: shared index chrome, rail and warm project palette. */
.project-detail-page .project-detail-hero-inner,
.project-detail-page .project-detail-intro-grid,
.project-detail-page .project-detail-gallery > .container,
.project-detail-page .project-story-grid,
.project-detail-page .project-detail-areas > .container {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.project-detail-page .project-detail-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.project-detail-page .project-detail-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.project-detail-page .project-detail-intro,
.project-detail-page .project-detail-gallery,
.project-detail-page .project-detail-areas {
  background: var(--cream) !important;
}

.project-detail-page .project-gallery-grid figure,
.project-detail-page .area-grid article {
  border-radius: 6px !important;
  background: #f7eee6 !important;
}

.project-detail-page .project-detail-story,
.project-detail-page .project-detail-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .project-detail-page .project-detail-hero-inner,
  .project-detail-page .project-detail-intro-grid,
  .project-detail-page .project-detail-gallery > .container,
  .project-detail-page .project-story-grid,
  .project-detail-page .project-detail-areas > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  .project-detail-page .project-detail-hero-inner,
  .project-detail-page .project-detail-intro-grid,
  .project-detail-page .project-detail-gallery > .container,
  .project-detail-page .project-story-grid,
  .project-detail-page .project-detail-areas > .container,
  .project-detail-page .project-detail-cta .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .project-detail-page .project-detail-hero {
    min-height: 440px !important;
  }
}

/* Project detail page: shared index chrome, rail and application palette. */
.project-detail-page .project-detail-hero-inner,
.project-detail-page .project-detail-intro-grid,
.project-detail-page .project-detail-gallery > .container,
.project-detail-page .project-story-grid,
.project-detail-page .project-detail-areas > .container {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.project-detail-page .project-detail-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.project-detail-page .project-detail-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.project-detail-page .project-detail-intro,
.project-detail-page .project-detail-gallery,
.project-detail-page .project-detail-areas {
  background: var(--cream) !important;
}

.project-detail-page .project-gallery-grid figure,
.project-detail-page .area-grid article {
  border-radius: 6px !important;
  border: 1px solid rgba(101, 94, 88, .14) !important;
  background: #f7eee6 !important;
}

.project-detail-page .project-detail-story,
.project-detail-page .project-detail-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .project-detail-page .project-detail-hero-inner,
  .project-detail-page .project-detail-intro-grid,
  .project-detail-page .project-detail-gallery > .container,
  .project-detail-page .project-story-grid,
  .project-detail-page .project-detail-areas > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  .project-detail-page .project-detail-hero-inner,
  .project-detail-page .project-detail-intro-grid,
  .project-detail-page .project-detail-gallery > .container,
  .project-detail-page .project-story-grid,
  .project-detail-page .project-detail-areas > .container,
  .project-detail-page .project-detail-cta .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .project-detail-page .project-detail-hero {
    min-height: 440px !important;
  }
}

/* News list page: shared index chrome, rail and warm editorial palette. */
.news-list-page .news-list-hero-inner,
.news-list-page .news-list-intro-grid,
.news-list-page .news-filter,
.news-list-page .news-list-grid-wrap > .container {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.news-list-page .news-list-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.news-list-page .news-list-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.news-list-page .news-list-intro,
.news-list-page .news-list-grid-wrap {
  background: var(--cream) !important;
}

.news-list-page .news-list-card {
  border: 1px solid rgba(101, 94, 88, .14) !important;
  border-radius: 6px !important;
  background: #f7eee6 !important;
}

.news-list-page .news-list-media {
  height: 300px !important;
  background: #f8f1ea !important;
}

.news-list-page .news-list-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .news-list-page .news-list-hero-inner,
  .news-list-page .news-list-intro-grid,
  .news-list-page .news-filter,
  .news-list-page .news-list-grid-wrap > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }

  .news-list-page .news-list-media {
    height: clamp(240px, 25vw, 300px) !important;
  }
}

@media (max-width: 900px) {
  .news-list-page .news-list-hero-inner,
  .news-list-page .news-list-intro-grid,
  .news-list-page .news-filter,
  .news-list-page .news-list-grid-wrap > .container,
  .news-list-page .news-list-cta .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .news-list-page .news-list-hero {
    min-height: 440px !important;
  }

  .news-list-page .news-list-media {
    height: auto !important;
    aspect-ratio: 1.55 !important;
  }
}

/* News listing page: shared index chrome, rail and warm article cards. */
.news-list-page .news-list-hero-inner,
.news-list-page .news-list-intro-grid,
.news-list-page .news-filter,
.news-list-page .news-list-grid-wrap > .container {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.news-list-page .news-list-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.news-list-page .news-list-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.news-list-page .news-list-intro,
.news-list-page .news-list-grid-wrap {
  background: var(--cream) !important;
}

.news-list-page .news-list-card {
  border: 1px solid rgba(101, 94, 88, .14) !important;
  border-radius: 6px !important;
  background: #f7eee6 !important;
}

.news-list-page .news-list-media {
  height: 300px !important;
  background: #f8f1ea !important;
}

.news-list-page .news-list-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .news-list-page .news-list-hero-inner,
  .news-list-page .news-list-intro-grid,
  .news-list-page .news-filter,
  .news-list-page .news-list-grid-wrap > .container {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }

  .news-list-page .news-list-media {
    height: clamp(240px, 25vw, 300px) !important;
  }
}

@media (max-width: 900px) {
  .news-list-page .news-list-hero-inner,
  .news-list-page .news-list-intro-grid,
  .news-list-page .news-filter,
  .news-list-page .news-list-grid-wrap > .container,
  .news-list-page .news-list-cta .container {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .news-list-page .news-list-hero {
    min-height: 440px !important;
  }
}

/* News detail page: shared index chrome, rail and warm article palette. */
.news-detail-page .news-detail-hero-inner,
.news-detail-page .news-detail-layout {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.news-detail-page .news-detail-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.news-detail-page .news-detail-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.news-detail-page .news-detail-body {
  background: var(--cream) !important;
}

.news-detail-page .news-sidebar-card {
  border: 1px solid rgba(101, 94, 88, .14) !important;
  border-radius: 6px !important;
  background: #f7eee6 !important;
}

.news-detail-page .news-sidebar-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .news-detail-page .news-detail-hero-inner,
  .news-detail-page .news-detail-layout {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  .news-detail-page .news-detail-hero-inner,
  .news-detail-page .news-detail-layout {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .news-detail-page .news-detail-hero {
    min-height: 440px !important;
  }
}

/* News detail page: shared index chrome, reading rail and warm article palette. */
.news-detail-page .news-detail-hero-inner,
.news-detail-page .news-detail-layout {
  width: min(1600px, calc(100vw - 120px)) !important;
  max-width: none !important;
  margin-left: max(60px, calc((100vw - 1600px) / 2)) !important;
  margin-right: 0 !important;
}

.news-detail-page .news-detail-hero {
  min-height: 560px !important;
  background-color: #6e3828 !important;
}

.news-detail-page .news-detail-hero-shade {
  background: linear-gradient(90deg, rgba(39, 25, 18, .84), rgba(39, 25, 18, .42) 62%, rgba(39, 25, 18, .14)) !important;
}

.news-detail-page .news-detail-body {
  background: var(--cream) !important;
}

.news-detail-page .news-article-cover,
.news-detail-page .news-article-image {
  border-radius: 6px !important;
}

.news-detail-page .news-sidebar-card {
  border: 1px solid rgba(101, 94, 88, .14) !important;
  border-radius: 6px !important;
  background: #f7eee6 !important;
}

.news-detail-page .news-sidebar-cta {
  background-color: #6e3828 !important;
}

@media (min-width: 901px) and (max-width: 1799px) {
  .news-detail-page .news-detail-hero-inner,
  .news-detail-page .news-detail-layout {
    width: min(1600px, calc(100vw - 64px)) !important;
    margin-left: 32px !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  .news-detail-page .news-detail-hero-inner,
  .news-detail-page .news-detail-layout {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .news-detail-page .news-detail-hero {
    min-height: 440px !important;
  }
}

/* Let the Latest News swiper use the full viewport to the right, as in the
   reference section, while its left rail remains anchored to the page grid. */
@media (min-width: 1800px) {
  .news-section .news-cards {
    width: calc(100vw - max(60px, calc((100vw - 1600px) / 2)) - 476px) !important;
    max-width: none !important;
  }
}


/* ABOUT dropdown keeps the single PROJECTS item compact. */
@media(min-width:901px){
  .site-header .main-menu > .menu-item.about-menu > .product-dropdown { left:50%!important; width:180px!important; max-width:calc(100vw - 24px)!important; padding:6px 10px!important; transform:translate(-50%,0)!important; }
  .site-header .main-menu > .menu-item.about-menu > .product-dropdown a { min-height:34px!important; padding:8px 2px!important; font-size:11px!important; line-height:1.2!important; text-align:left!important; white-space:nowrap!important; }
}
@media(max-width:900px){
  .site-header .main-menu > .menu-item.about-menu > .product-dropdown,
  .site-header .main-menu > .menu-item.about-menu:hover > .product-dropdown,
  .site-header .main-menu > .menu-item.about-menu:focus-within > .product-dropdown,
  .site-header .main-menu > .menu-item.about-menu.is-open > .product-dropdown { width:100%!important; max-width:none!important; padding:0 0 0 14px!important; transform:none!important; }
}