/* Editorial storefront direction. Elica is a reference for pacing and composition. */
.topline { display: none; }
.site-header { top: 0; transition: transform .55s cubic-bezier(.22,1,.36,1), height .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); }
.site-header.is-scrolled { top: 0; background: rgba(8,8,8,.7); border-color: rgba(255,255,255,.12); color: #fff; box-shadow: 0 10px 35px rgba(0,0,0,.1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.site-header.is-hidden { transform: translate3d(0,-101%,0); box-shadow: none; }
.site-header.is-hidden:focus-within, body.menu-open .site-header.is-hidden { transform: translate3d(0,0,0); }
.site-header.is-scrolled .desktop-nav a, .site-header.is-scrolled .icon-button, .site-header.is-scrolled .header-whatsapp { color: #fff; }
.site-header.is-scrolled .menu-trigger span { background: #fff; }
.header-inner { gap: 26px; }
.desktop-nav { margin-left: clamp(18px, 4vw, 64px); margin-right: auto; }
.header-whatsapp { min-height: 40px; padding: 0 2px; border: 0 !important; background: transparent !important; font-weight: 500; }
.header-whatsapp:hover { opacity: .72; transform: none; }
.site-header.is-scrolled .header-whatsapp { color: #fff; }
.site-header:not(.is-scrolled) .header-whatsapp { color: #fff; }
.brand-mark, .site-header .brand-mark, .site-header.is-scrolled .brand-mark, .site-header:not(.is-scrolled) .brand-mark, .site-footer .brand-mark {
  width: 43px; height: 43px; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink);
}
.site-header:not(.is-scrolled) .brand-mark, .site-footer .brand-mark { color: #fff; }
.site-header.is-scrolled .brand-mark { color: #fff; }
.brand-mark svg circle { fill: none; stroke: currentColor; stroke-width: 9; }
.brand-mark svg path, .site-header:not(.is-scrolled) .brand-mark svg path, .site-footer .brand-mark svg path { stroke: currentColor; stroke-width: 12; }
.brand-mark svg circle { stroke-dasharray: 654; stroke-dashoffset: 0; }
.site-header .brand-mark svg circle { animation: logo-circle-draw 1.4s .12s cubic-bezier(.22,1,.36,1) both; }
.site-header .brand-mark svg circle.logo-drawn { animation: none; stroke-dashoffset: 0; }
.site-header .brand:hover .brand-mark svg circle.logo-drawn, .site-header .brand:focus-visible .brand-mark svg circle.logo-drawn { animation: logo-circle-redraw .85s cubic-bezier(.22,1,.36,1) both; }
.brand-mark i { display: none; }
.brand-type strong { font-size: 21px; font-weight: 700; letter-spacing: -.065em; text-transform: lowercase; }
.brand-type small { margin-top: 4px; font-size: 8px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }

@keyframes logo-circle-draw { from { stroke-dashoffset: 654; } to { stroke-dashoffset: 0; } }
@keyframes logo-circle-redraw { from { stroke-dashoffset: 654; } to { stroke-dashoffset: 0; } }

.hero { height: 100svh; min-height: 650px; }
.hero-image { filter: brightness(.67) saturate(.7) contrast(1.03); object-position: 57% center; }
.hero-wash { background: linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.38) 51%,rgba(0,0,0,.04) 87%),linear-gradient(0deg,rgba(0,0,0,.27),transparent 46%); }
.hero-copy { width: min(620px, 60%); padding-top: 118px; }
.hero h1 { max-width: 650px; font-size: clamp(68px, 6.2vw, 96px); line-height: 1.02; letter-spacing: -.067em; }
.hero-description { max-width: 440px; font-size: clamp(15px,1.2vw,18px); line-height: 1.55; }
.hero-actions .button-light { min-height: 47px; padding-inline: 18px; font-size: 12px; }
.hero-side-note { display: none; }
.assurance { display: none; }

.categories-section { padding-block: clamp(104px, 10vw, 160px); background: #fff; }
.categories-section .container { display: grid; grid-template-columns: minmax(215px,290px) minmax(0,1fr); column-gap: clamp(48px,6vw,100px); align-items: start; }
.categories-heading { display: block; margin: 0; }
.categories-heading .eyebrow { margin-bottom: 33px; }
.categories-heading h2 { max-width: 290px; font-size: clamp(31px,2.8vw,43px); line-height: 1.08; letter-spacing: -.06em; }
.categories-heading > p { max-width: 260px; margin-top: 26px; font-size: 14px; }
.category-grid { display: flex; grid-column: 2; gap: 22px; width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.category-grid::-webkit-scrollbar { display: none; }
.category-card, .category-card.category-wash { display: block; flex: 0 0 clamp(225px,21vw,295px); width: clamp(225px,21vw,295px); height: auto; min-height: 0; aspect-ratio: auto; overflow: visible; padding: 0; border: 0; background: linear-gradient(to bottom,#f1f1f1 0 250px,transparent 250px); box-shadow: none; scroll-snap-align: start; transition: none; }
.category-card:hover { transform: none; box-shadow: none; }
.category-card::after { display: none; }
.category-card img, .category-wash img, .category-cold img, .category-screen img { position: static; width: 100%; height: 250px; object-fit: contain; mix-blend-mode: multiply; }
.category-card:hover img { transform: scale(1.035); }
.category-number, .round-arrow { display: none; }
.category-bottom { display: block; padding-top: 18px; }
.category-copy { display: block; }
.category-bottom strong, .category-copy strong { display: block; max-width: none; font-size: 23px; font-weight: 600; letter-spacing: -.045em; line-height: 1.18; }
.category-copy small { display: block; margin-top: 5px; color: #777; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.category-controls { grid-column: 2; display: flex; justify-content: space-between; align-items: center; margin-top: 23px; color: #777; font-size: 11px; }
.category-controls > div { display: flex; gap: 8px; }
.category-controls button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #bbb; border-radius: 50%; background: #fff; color: #111; transition: color .25s, background .25s, border-color .25s; }
.category-controls button:hover, .category-controls button:focus-visible { background: #111; border-color: #111; color: #fff; }
.category-controls button:first-child svg { transform: rotate(180deg); }

.feature-spotlight { display: grid; grid-template-columns: minmax(0,1.23fr) minmax(0,1fr); min-height: min(750px,75vw); background: #ededed; }
.feature-visual { min-width: 0; overflow: hidden; display: grid; place-items: center; background: #e9e9e9; }
.feature-visual img { width: 100%; height: 100%; max-height: 750px; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.02); transition: transform 1.3s var(--ease); }
.feature-visual.is-visible img { transform: scale(1); }
.feature-copy { align-self: center; max-width: 590px; padding: 90px clamp(40px,7vw,118px) 90px clamp(40px,5vw,88px); }
.feature-copy .eyebrow { margin-bottom: 28px; }
.feature-copy h2 { margin-bottom: 26px; font-size: clamp(48px,4.8vw,76px); font-weight: 600; line-height: 1.04; letter-spacing: -.065em; }
.feature-copy > p:not(.eyebrow) { margin-bottom: 10px; color: #666; font-size: 15px; }
.feature-copy > strong { display: block; margin-bottom: 32px; font-size: 25px; font-weight: 600; letter-spacing: -.045em; }
.feature-copy .button { min-height: 50px; }
.feature-copy > small { display: block; max-width: 350px; margin-top: 24px; color: #666; font-size: 11px; line-height: 1.6; }

.selection-section { padding-top: clamp(105px,10vw,160px); }
.selection-heading h2 { font-size: clamp(46px,5vw,68px); }
.filter-chip { min-height: 36px; padding-inline: 13px; font-weight: 500; }
.product-meta h3 { font-size: 23px; }
.footer-grid > div:not(:first-child) a:hover { text-decoration: none; }

@media (max-width: 850px) {
  .categories-section .container { display: block; }
  .categories-heading { max-width: 540px; margin-bottom: 42px; }
  .categories-heading h2 { max-width: none; font-size: clamp(34px,5vw,46px); }
  .categories-heading > p { max-width: 440px; }
  .category-grid { width: calc(100% + 18px); margin-right: -18px; }
  .category-controls { margin-top: 12px; }
  .feature-spotlight { grid-template-columns: 1fr 1fr; min-height: 600px; }
  .feature-copy { padding: 60px 34px; }
  .feature-copy h2 { font-size: clamp(42px,5vw,61px); }
}
@media (max-width: 600px) {
  .site-header, .site-header.is-scrolled { height: 67px; }
  .brand-mark, .site-header .brand-mark, .site-header.is-scrolled .brand-mark { width: 38px; height: 38px; }
  .brand-type strong { font-size: 18px; }
  .brand-type small { font-size: 7px; letter-spacing: .22em; }
  .hero { height: 100svh; min-height: 630px; }
  .hero-image { object-position: 62% center; }
  .hero-wash { background: linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.52) 44%,rgba(0,0,0,.10) 82%); }
  .hero-copy { width: 100%; padding-top: 0; padding-bottom: 112px; }
  .hero h1 { font-size: clamp(52px,12vw,67px); line-height: 1.04; }
  .hero-description { max-width: 330px; font-size: 14px; }
  .hero-scroll { bottom: 88px; }
  .categories-section { padding-block: 90px 98px; }
  .categories-heading { margin-bottom: 35px; }
  .categories-heading .eyebrow { margin-bottom: 22px; }
  .categories-heading h2 { font-size: clamp(34px,9vw,43px); }
  .categories-heading > p { margin-top: 17px; font-size: 13px; }
  .category-grid { gap: 15px; width: calc(100% + 18px); margin-right: -18px; scroll-padding-inline: 0 18px; }
  .category-card, .category-card.category-wash { flex-basis: min(70vw,280px); width: min(70vw,280px); height: auto; min-height: 0; background: linear-gradient(to bottom,#f1f1f1 0 224px,transparent 224px); }
  .category-card img, .category-wash img, .category-cold img, .category-screen img { height: 224px; }
  .category-bottom { padding-top: 14px; }
  .category-copy strong { font-size: 21px; }
  .category-controls { margin-top: 24px; }
  .feature-spotlight { grid-template-columns: 1fr; }
  .feature-visual { height: 360px; }
  .feature-visual img { max-height: 360px; }
  .feature-copy { padding: 55px 25px 65px; }
  .feature-copy h2 { font-size: clamp(45px,11vw,60px); }
  .selection-section { padding-top: 90px; }
  .selection-heading h2 { font-size: clamp(43px,10vw,58px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand-mark svg circle, .site-header .brand:hover .brand-mark svg circle.logo-drawn, .site-header .brand:focus-visible .brand-mark svg circle.logo-drawn { animation: none; stroke-dashoffset: 0; }
  .category-grid { scroll-behavior: auto; }
  .feature-visual img { transform: none; }
}

/* Compact navigation and an editorial, deliberately lightweight support panel. */
@media (max-width: 850px) {
  .mobile-menu:not([hidden]) {
    top: 70px; left: 12px; right: 12px; display: block; width: auto;
    padding: 20px 22px 15px; border: 1px solid rgba(255,255,255,.13);
    background: #101010; color: #f7f7f7; box-shadow: 0 26px 64px rgba(0,0,0,.28);
    animation: mobile-menu-in .42s var(--ease) both;
  }
  .mobile-menu-kicker, .mobile-menu-note { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
  .mobile-menu-kicker { padding: 2px 0 13px; color: #aaa; }
  .mobile-menu-note { padding-top: 17px; color: #777; font-size: 9px; }
  .mobile-menu a {
    display: grid; grid-template-columns: 22px minmax(0,1fr) 18px; align-items: center; gap: 15px;
    min-height: 57px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.15);
    color: #f7f7f7; font-family: var(--sans); font-size: 17px; line-height: 1.25;
    transition: color .2s, padding-inline .3s var(--ease);
  }
  .mobile-menu a:hover, .mobile-menu a:focus-visible { color: #c7a96d; padding-inline: 5px; }
  .mobile-menu a span { color: #888; font-size: 10px; font-weight: 500; letter-spacing: .02em; }
  .mobile-menu a strong { font-weight: 500; }
  .mobile-menu a svg { width: 16px; height: 16px; opacity: .7; }
}
@media (max-width: 600px) {
  .mobile-menu:not([hidden]) { top: 66px; }
  .mobile-menu a { min-height: 54px; font-size: 16px; }
}
@keyframes mobile-menu-in { from { opacity: 0; transform: translate3d(0,-12px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

.assistant-panel {
  width: min(408px, calc(100vw - 30px)); overflow: hidden; border: 1px solid #d5d5d5;
  background: #f8f8f7; box-shadow: 0 28px 72px rgba(0,0,0,.22);
  opacity: 0; transform: translate3d(0,18px,0) scale(.975); transform-origin: bottom right;
  pointer-events: none; transition: opacity .28s ease, transform .42s var(--ease);
}
.assistant-panel.is-open { opacity: 1; transform: translate3d(0,0,0) scale(1); pointer-events: auto; }
.assistant-head {
  position: relative; display: grid; grid-template-columns: 39px minmax(0,1fr) 34px;
  align-items: start; gap: 12px; min-height: 122px; padding: 23px 20px 20px;
  background: #111; color: #fff;
}
.assistant-head::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 20px; width: 42px; height: 1px; background: #b9995e; }
.assistant-head-mark { width: 36px; height: 36px; display: block; color: #fff; }
.assistant-head-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
.assistant-head-mark svg circle { stroke-width: 9; }
.assistant-head-mark svg path { stroke-width: 12; stroke-linecap: square; stroke-linejoin: miter; }
.assistant-head small { margin: 2px 0 11px; color: #bdbdbd; font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.assistant-head strong { display: block; max-width: 250px; font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -.045em; line-height: 1.16; }
.assistant-head button { width: 32px; height: 32px; display: grid; place-items: center; border-color: rgba(255,255,255,.4); color: #fff; transition: border-color .2s, transform .3s var(--ease); }
.assistant-head button:hover { border-color: #fff; transform: rotate(90deg); }
.assistant-head button svg { width: 14px; height: 14px; }
.assistant-messages { flex: 1 1 auto; min-height: 120px; gap: 15px; padding: 23px 22px 10px; background: #f8f8f7; }
.assistant-message { max-width: 95%; font-size: 13px; line-height: 1.55; }
.assistant-reply { padding: 2px 0 2px 15px; border: 0; border-inline-start: 2px solid #b9995e; background: transparent; color: #353535; }
.assistant-user { padding: 10px 13px; background: #171717; color: #fff; }
.assistant-suggestions { gap: 7px; padding: 8px 22px 20px; background: #f8f8f7; }
.assistant-suggestions button { min-height: 34px; padding: 7px 11px; border-color: #c9c9c9; border-radius: 0; background: #fff; color: #282828; font-size: 11px; font-weight: 500; transition: background .2s, border-color .2s, color .2s; }
.assistant-suggestions button:hover, .assistant-suggestions button:focus-visible { border-color: #111; background: #111; color: #fff; }
.assistant-form { gap: 10px; padding: 13px 17px 13px 22px; border-top: 1px solid #dcdcdc; background: #fff; }
.assistant-form:focus-within { box-shadow: inset 0 2px 0 #111; }
.assistant-form input { min-height: 43px; padding: 6px 3px; border: 0; background: transparent; color: #111; font-size: 13px; }
.assistant-form input:focus-visible { outline: none; }
.assistant-form button { flex: none; width: 43px; height: 43px; background: #111; transition: background .2s; }
.assistant-form button:hover { background: #444; }
.assistant-whatsapp { min-height: 49px; padding: 13px 22px; border-top: 1px solid #dcdcdc; background: #f8f8f7; color: #222; font-size: 11px; font-weight: 600; }
.assistant-whatsapp:hover { background: #ececec; }
@media (max-width: 600px) {
  .assistant-panel { right: 10px; left: 10px; width: auto; }
  .assistant-head { min-height: 112px; padding: 19px 17px; }
  .assistant-head strong { font-size: 20px; }
  .assistant-messages { padding: 20px 19px 10px; }
  .assistant-suggestions { padding: 8px 19px 17px; }
  .assistant-form { padding: 11px 14px 11px 19px; }
  .assistant-form input { font-size: 16px; }
  .assistant-whatsapp { padding-inline: 19px; }
}
@media (max-width: 600px) and (max-height: 640px) {
  .assistant-panel { top: auto; max-height: calc(100svh - 84px); }
  .assistant-messages { flex: 0 1 auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu:not([hidden]) { animation: none; }
  .assistant-panel { transition: none; transform: none; }
  .assistant-head button { transition: none; }
}

/* The promotional promise sits between the dark opening and the white catalogue. */
.delivery-promise { background: #f4f3ef; border-bottom: 1px solid #dfddd6; }
.delivery-promise-inner { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 23px; min-height: 124px; padding-block: 27px; }
.delivery-promise-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #a8a7a0; border-radius: 50%; color: #171717; }
.delivery-promise-icon svg { width: 25px; height: 25px; }
.delivery-promise-copy small { display: block; margin-bottom: 5px; color: #6e6c66; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.delivery-promise-copy strong { display: block; color: #111; font-size: clamp(22px,2.4vw,32px); font-weight: 600; letter-spacing: -.055em; line-height: 1.1; }
.delivery-promise a { display: inline-flex; align-items: center; gap: 20px; padding-bottom: 7px; border-bottom: 1px solid #1d1d1d; color: #1d1d1d; font-size: 11px; font-weight: 600; }
.delivery-promise a .arrow-icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.delivery-promise a:hover .arrow-icon { transform: translate(3px,-3px); }

/* The second view loads on intent, keeping phone browsing light. */
.product-media .product-primary-image { transition: opacity .48s ease, transform .7s var(--ease); }
.product-media .product-alt-image { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.045); transition: opacity .56s ease, transform .8s var(--ease); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .product-card.has-alt-ready .product-media:hover .product-primary-image { opacity: 0; transform: scale(var(--primary-image-scale, 1)); }
  .product-card.has-alt-ready .product-media:hover .product-alt-image { opacity: 1; transform: scale(1); }
}
.product-card.has-alt-ready .product-media:focus-visible .product-primary-image { opacity: 0; }
.product-card.has-alt-ready .product-media:focus-visible .product-alt-image { opacity: 1; transform: none; }

@media (max-width: 600px) {
  .delivery-promise-inner { grid-template-columns: 42px minmax(0,1fr); gap: 14px; min-height: 94px; padding-block: 19px; }
  .delivery-promise-icon { width: 40px; height: 40px; }
  .delivery-promise-icon svg { width: 21px; height: 21px; }
  .delivery-promise-copy small { font-size: 8px; }
  .delivery-promise-copy strong { font-size: clamp(18px,5vw,23px); }
  .delivery-promise a { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .product-media .product-primary-image, .product-media .product-alt-image { transition: none; }
}

/* A small LG collection, staged like an editorial showroom instead of a single promotion. */
@media (min-width: 601px) {
  .categories-section .category-card { flex: 1 0 calc(50% - 11px); width: auto; }
  .categories-section .category-controls { display: flex; }
}
.feature-spotlight { display: block; min-height: 0; padding-block: clamp(84px, 9vw, 132px); background: #ededeb; color: #171817; }
.feature-shell { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.58fr); gap: clamp(42px, 5vw, 90px); align-items: center; }
.feature-intro { max-width: 410px; }
.feature-intro .eyebrow { margin-bottom: clamp(25px, 3vw, 42px); color: #505250; }
.feature-intro h2 { margin: 0; font-size: clamp(43px, 4.5vw, 71px); font-weight: 600; line-height: 1.02; letter-spacing: -.067em; }
.feature-intro h2 em { color: #373937; font-family: var(--serif); font-weight: 500; }
.feature-intro > p:not(.eyebrow) { max-width: 340px; margin: 26px 0 42px; color: #575b57; font-size: 14px; line-height: 1.75; }
.feature-range { display: grid; gap: 4px; padding-top: 23px; border-top: 1px solid #bfc1ba; }
.feature-range span { color: #505250; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.feature-range strong { font-size: clamp(33px, 3.2vw, 47px); font-weight: 600; letter-spacing: -.058em; }
.feature-range small { color: #626661; font-size: 11px; }
.feature-models { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; align-items: stretch; }
.feature-model { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: clamp(360px, 37vw, 500px); padding: 20px 18px 23px; border: 0; border-left: 1px solid #cfd1cb; background: #ededeb; color: #171717; text-align: left; cursor: pointer; overflow: hidden; transition: background .45s var(--ease), transform .55s var(--ease), border-color .45s var(--ease); }
.feature-model:last-child { border-right: 1px solid #cfd1cb; }
.feature-model:hover, .feature-model:focus-visible { transform: translateY(-5px); border-color: #939590; background: #e5e5e2; outline: none; }
.feature-model-top { display: flex; justify-content: space-between; gap: 10px; color: #777; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.feature-model-top span:last-child { color: #414341; }
.feature-model img { display: block; width: 100%; height: clamp(225px, 25vw, 345px); object-fit: contain; mix-blend-mode: multiply; transform: scale(1.58); transition: transform .7s var(--ease); }
.feature-model:hover img, .feature-model:focus-visible img { transform: scale(1.67); }
.feature-model-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 13px; border-top: 1px solid #bfc1ba; }
.feature-model-bottom > span { display: grid; gap: 3px; }
.feature-model-bottom strong { font-size: clamp(18px, 1.6vw, 25px); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; }
.feature-model-bottom small { color: #666; font-size: 10px; }
.feature-model-bottom b { margin-top: 8px; font-size: 14px; font-weight: 700; }
.feature-model-bottom .arrow-icon { flex: 0 0 18px; width: 18px; height: 18px; margin-bottom: 2px; transition: transform .3s var(--ease); }
.feature-model:hover .feature-model-bottom .arrow-icon { transform: translate(3px,-3px); }
@media (max-width: 1050px) {
  .feature-shell { display: block; }
  .feature-intro { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 25px; max-width: none; margin-bottom: 44px; }
  .feature-intro .eyebrow, .feature-intro h2 { grid-column: 1; }
  .feature-intro > p:not(.eyebrow) { grid-column: 1; margin-bottom: 0; }
  .feature-range { grid-column: 2; grid-row: 2 / span 2; align-self: end; min-width: 210px; }
  .feature-model { min-height: 440px; }
}
@media (max-width: 650px) {
  .feature-spotlight { padding-block: 77px 73px; }
  .feature-intro { display: block; margin-bottom: 37px; }
  .feature-intro h2 { font-size: clamp(42px, 11vw, 59px); }
  .feature-intro > p:not(.eyebrow) { max-width: 310px; margin: 20px 0 29px; font-size: 13px; }
  .feature-range { max-width: none; grid-template-columns: 1fr auto; align-items: baseline; gap: 5px 15px; }
  .feature-range strong { grid-column: 2; grid-row: 1 / span 2; font-size: 33px; }
  .feature-range small { grid-column: 1; }
  .feature-models { display: flex; gap: 11px; width: calc(100% + 18px); margin-right: -18px; overflow-x: auto; padding: 0 18px 13px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .feature-models::-webkit-scrollbar { display: none; }
  .feature-model { flex: 0 0 min(75vw,300px); min-height: 410px; scroll-snap-align: start; }
  .feature-model img { height: 278px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-model, .feature-model img, .feature-model-bottom .arrow-icon { transition: none; }
  .feature-model:hover, .feature-model:focus-visible { transform: none; }
}

/* Catalogue navigation: product families instead of room names. */
.nav-catalogue { position: relative; }
.nav-catalogue-trigger { position: relative; display: inline-flex; align-items: center; padding: 10px 0; border: 0; background: transparent; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.nav-catalogue-trigger::after { content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(0); transition: transform .32s var(--ease); }
.nav-catalogue-trigger:hover::after,
.nav-catalogue-trigger:focus-visible::after,
.nav-catalogue-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav-catalogue-trigger::after { transition: none; } }
.site-header.is-scrolled .nav-catalogue-trigger { color: #fff; }
.nav-catalogue-panel { position: absolute; top: calc(100% + 8px); left: -24px; width: min(540px, calc(100vw - 48px)); padding: 15px 25px 25px; border: 1px solid #e4e4e4; background: #fff; box-shadow: 0 24px 50px rgba(0,0,0,.15); color: #111; }
.nav-catalogue-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.nav-catalogue-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.nav-catalogue-kicker { display: block; padding: 19px 0 8px; color: #777; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.site-header .desktop-nav .nav-catalogue-panel a,
.site-header:not(.is-scrolled) .desktop-nav .nav-catalogue-panel a,
.site-header.is-scrolled .desktop-nav .nav-catalogue-panel a { display: block; padding: 12px 0; border-top: 1px solid #ededed; color: #111; font-size: 14px; font-weight: 600; transition: color .24s var(--ease), padding-left .24s var(--ease); }
.site-header .desktop-nav .nav-catalogue-panel a.nav-catalogue-all { display: flex; align-items: center; justify-content: space-between; padding: 11px 0 18px; border-top: 0; border-bottom: 1px solid #d9d9d9; font-size: 17px; font-weight: 700; }
.nav-catalogue-all .arrow-icon { width: 17px; height: 17px; }
.nav-catalogue-panel a::after { display: none; }
.site-header .desktop-nav .nav-catalogue-panel a:hover,
.site-header:not(.is-scrolled) .desktop-nav .nav-catalogue-panel a:hover,
.site-header.is-scrolled .desktop-nav .nav-catalogue-panel a:hover { color: #777; padding-left: 4px; }
.category-hobs { background: linear-gradient(to bottom,#f1f1f1 0 250px,transparent 250px); }
.category-hobs img { object-fit: contain; }
.type-filter-row { display: flex; align-items: center; gap: 17px; padding: 0 0 18px; }
.type-filter-row > span { flex: none; color: #777; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.type-filter-list { display: flex; flex-wrap: wrap; gap: 7px; }
.type-filter-chip { min-height: 35px; padding: 0 12px; border: 1px solid #d3d3d3; background: #fff; color: #333; font-size: 11px; font-weight: 600; }
.type-filter-chip:hover, .type-filter-chip:focus-visible { border-color: #111; }
.type-filter-chip.is-active { border-color: #111; background: #111; color: #fff; }
@media (max-width: 850px) {
  .mobile-menu:not([hidden]) { max-height: calc(100dvh - 70px); overflow-y: auto; }
  .mobile-menu .mobile-menu-kicker:not(:first-child) { margin-top: 21px; }
  .mobile-menu a { padding-block: 13px; font-size: 23px; }
  .type-filter-row { display: block; }
  .type-filter-row > span { display: block; margin-bottom: 10px; }
  .type-filter-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .type-filter-chip { flex: none; }
}
@media (max-width: 360px) {
  .hero { min-height: 800px; }
}
@media (max-width: 600px) {
  .category-hobs { background: linear-gradient(to bottom,#f1f1f1 0 224px,transparent 224px); }
  .category-hobs img { height: 224px; }
}
.order-guidance { color: #545454; font-size: 14px; line-height: 1.65; }
.order-result .order-guidance { max-width: 55ch; }
.order-send { display: inline-flex; justify-content: space-between; gap: 20px; min-width: min(100%,330px); margin-top: 10px; }
.order-edit { display: block; min-height: 42px; margin-top: 18px; padding: 0; border: 0; border-bottom: 1px solid #555; background: transparent; color: #343434; font-size: 12px; font-weight: 700; }
body[data-page="home"] .catalog-toolbar,
body[data-page="home"] .type-filter-row,
body[data-page="home"] .brand-filter-row { display: none !important; }
.order-whatsapp-step { margin-top: 25px; padding: clamp(19px, 3vw, 28px); border: 1px solid #dedede; background: #f3f3f3; }
.order-whatsapp-step .eyebrow { margin: 0 0 9px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.order-whatsapp-step h4 { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); font-weight: 500; line-height: 1.12; }
.order-whatsapp-step > p:not(.eyebrow) { max-width: 54ch; margin: 0 0 19px; color: #545454; font-size: 13px; line-height: 1.6; }
.order-whatsapp { width: 100%; min-height: 58px; }

/* Home offers keep the catalogue visible while giving the opening a retail focus. */
.hero-price-note { display: inline-grid; grid-template-columns: minmax(0,1fr) 20px; align-items: center; gap: 3px 24px; min-width: min(100%,345px); margin-top: 42px; padding: 13px 17px 15px; border: 1px solid rgba(255,255,255,.5); background: rgba(17,19,18,.35); color: #fff; backdrop-filter: blur(12px); }
.hero-price-note span { grid-column: 1; color: #dededb; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-price-note strong { grid-column: 1; font-size: 15px; font-weight: 600; }
.hero-price-note b { font-weight: 700; }
.hero-price-note svg { grid-column: 2; grid-row: 1 / span 2; width: 17px; height: 17px; transition: transform .3s var(--ease); }
.hero-price-note:hover svg { transform: translateX(4px); }
.home-offers { padding: clamp(70px,8vw,124px) 0 clamp(80px,9vw,138px); background: #fff; }
.home-offers-heading { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-bottom: 39px; }
.home-offers-heading h2, .home-brands-heading h2 { margin: 0; font-size: clamp(42px,5.1vw,75px); font-weight: 600; line-height: 1.03; letter-spacing: -.065em; }
.home-offers-heading h2 em, .home-brands-heading h2 em { font-family: var(--serif); font-weight: 500; }
.home-inline-link { display: inline-flex; align-items: center; gap: 20px; flex: none; padding-bottom: 8px; border-bottom: 1px solid #111; font-size: 13px; font-weight: 600; }
.home-inline-link svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.home-inline-link:hover svg { transform: translate(3px,-3px); }
.home-offer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.home-offer-card { position: relative; display: flex; flex-direction: column; min-height: clamp(440px,42vw,600px); overflow: hidden; padding: clamp(27px,3vw,44px); color: #161717; background: #eae8e3; isolation: isolate; }
.home-offer-cook { background: #d9ddda; }
.home-offer-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 66% 63%,rgba(255,255,255,.72),transparent 55%); }
.home-offer-kicker { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.home-offer-card > strong { max-width: 350px; margin-top: 11px; font-size: clamp(32px,3.4vw,52px); font-weight: 600; letter-spacing: -.065em; line-height: 1.02; }
.home-offer-photo { display: grid; place-items: center; flex: 1; min-height: 0; overflow: hidden; }
.home-offer-photo img { display: block; width: 75%; height: 100%; max-height: 340px; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--ease); }
.home-offer-tv .home-offer-photo img { width: 85%; }
.home-offer-card:hover .home-offer-photo img { transform: scale(1.06); }
.home-offer-action { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.3); font-size: 13px; font-weight: 700; }
.home-offer-action svg { width: 19px; height: 19px; transition: transform .3s var(--ease); }
.home-offer-card:hover .home-offer-action svg { transform: translate(3px,-3px); }

.feature-spotlight { padding-block: clamp(82px,8vw,128px); background: #efeee9; }
.feature-shell { display: grid; grid-template-columns: minmax(310px,.72fr) minmax(0,1.28fr); gap: clamp(38px,5vw,86px); align-items: center; }
.feature-intro { max-width: 470px; }
.feature-intro .eyebrow { margin-bottom: 32px; }
.feature-intro h2 { font-size: clamp(49px,5vw,78px); }
.feature-intro > p:not(.eyebrow) { max-width: 375px; margin: 24px 0 36px; }
.feature-range { gap: 2px; }
.feature-range strong { font-size: clamp(42px,5vw,69px); line-height: 1.05; }
.feature-range small { font-size: 12px; }
.feature-cta { display: inline-flex; align-items: center; gap: 35px; margin-top: 35px; padding-bottom: 9px; border-bottom: 1px solid #171817; font-size: 13px; font-weight: 700; }
.feature-cta svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.feature-cta:hover svg { transform: translate(3px,-3px); }
.feature-showcase { min-width: 0; }
.feature-stage { position: relative; height: clamp(420px,39vw,610px); overflow: hidden; background: radial-gradient(ellipse at 51% 59%, #fff 0%, #e2e1da 78%); isolation: isolate; }
.feature-stage::after { content: ""; position: absolute; right: 10%; bottom: 8%; left: 10%; height: 26px; border-radius: 50%; background: rgba(31,31,28,.12); filter: blur(18px); z-index: 0; }
.feature-stage-note, .feature-stage-caption { position: absolute; z-index: 5; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.feature-stage-note { top: 25px; left: 27px; }
.feature-stage-caption { right: 22px; bottom: 22px; padding: 10px 12px; background: rgba(255,255,255,.88); letter-spacing: .06em; }
.feature-washer { position: absolute; display: block; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.feature-washer-seven { left: 0; bottom: 11%; z-index: 1; width: 54%; transform: rotate(-3deg) scale(1.17); }
.feature-washer-eight { right: -2%; bottom: 10%; z-index: 2; width: 54%; transform: rotate(3deg) scale(1.17); }
.feature-washer-nine { left: 25%; bottom: 7%; z-index: 3; width: 55%; transform: scale(1.32); filter: drop-shadow(0 18px 15px rgba(0,0,0,.12)); }
.feature-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #b8b8b0; }
.feature-options button { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 17px; min-width: 0; padding: 21px 18px 4px; border: 0; border-left: 1px solid #b8b8b0; background: transparent; color: #191919; text-align: left; cursor: pointer; transition: background .25s; }
.feature-options button:first-child { border-left: 0; padding-left: 0; }
.feature-options button:hover, .feature-options button:focus-visible { background: rgba(255,255,255,.6); outline: none; }
.feature-options button > span { font-size: 13px; font-weight: 700; }
.feature-options small { display: block; margin-top: 5px; color: #6c6c68; font-size: 10px; font-weight: 500; }
.feature-options strong { font-size: clamp(17px,1.6vw,24px); font-weight: 600; letter-spacing: -.04em; }

.home-packs { padding: clamp(75px,8vw,122px) 0; background: #181a18; color: #f8f8f4; }
.home-packs-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px,9vw,150px); align-items: end; }
.home-packs-copy h2 { margin: 0; font-size: clamp(44px,5.2vw,77px); font-weight: 600; letter-spacing: -.067em; line-height: 1.03; }
.home-packs-copy h2 em { color: #dad8c9; font-family: var(--serif); font-weight: 500; }
.home-packs-copy > p:not(.eyebrow) { max-width: 410px; margin: 24px 0 0; color: #bfc2ba; font-size: 14px; line-height: 1.7; }
.home-pack-list { border-top: 1px solid #70736c; }
.home-pack-list a { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 27px 0; border-bottom: 1px solid #70736c; color: #f8f8f4; transition: padding-left .3s var(--ease); }
.home-pack-list a:hover { padding-left: 8px; }
.home-pack-list a > span:first-child { display: grid; gap: 8px; }
.home-pack-list small { color: #acaea6; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.home-pack-list strong { font-size: clamp(22px,2.4vw,36px); font-weight: 500; letter-spacing: -.05em; line-height: 1.08; }
.home-pack-list a > span:last-child { display: inline-flex; align-items: center; gap: 13px; flex: none; font-size: 11px; font-weight: 600; }
.home-pack-list svg { width: 17px; height: 17px; }

.home-brands { padding: clamp(77px,8vw,125px) 0 clamp(85px,9vw,140px); background: #fff; }
.home-brands-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; column-gap: 30px; margin-bottom: 37px; }
.home-brands-heading .eyebrow { grid-column: 1 / -1; }
.home-brands-heading h2 { font-size: clamp(38px,4vw,61px); }
.home-brands-heading p:last-child { max-width: 200px; margin: 0; color: #737373; font-size: 13px; line-height: 1.5; }
.home-brand-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #e1e1df; border-left: 1px solid #e1e1df; }
.home-brand-grid a { display: grid; place-items: center; min-height: 165px; padding: 30px; border-right: 1px solid #e1e1df; border-bottom: 1px solid #e1e1df; transition: background .25s; }
.home-brand-grid a:hover, .home-brand-grid a:focus-visible { background: #f7f7f5; }
.home-brand-grid img { display: block; max-width: 62%; width: auto; max-height: 66px; height: auto; object-fit: contain; }
.home-brand-grid a:nth-child(4) img { max-height: 55px; }
.home-brand-grid a:nth-child(5) { background: #171717; }
.home-brand-grid a:nth-child(5):hover, .home-brand-grid a:nth-child(5):focus-visible { background: #313131; }
.home-brand-grid a:nth-child(5) img { max-width: 76%; }

@media (max-width: 1050px) {
  .feature-shell { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); gap: 30px; }
  .feature-intro { display: block; margin: 0; }
  .feature-range { min-width: 0; }
  .feature-stage { height: 440px; }
}
@media (max-width: 760px) {
  .home-offers-heading { align-items: start; flex-direction: column; gap: 23px; }
  .home-offer-card { min-height: 400px; }
  .feature-shell, .home-packs-inner { display: block; }
  .feature-intro { margin-bottom: 33px; }
  .feature-range { max-width: 410px; }
  .feature-stage { height: min(75vw,510px); }
  .home-packs-copy { margin-bottom: 35px; }
}
@media (max-width: 600px) {
  .hero-price-note { margin-top: 28px; }
  .home-offers { padding-block: 70px 80px; }
  .home-offers-heading h2 { font-size: clamp(39px,10vw,55px); }
  .home-offer-grid { grid-template-columns: 1fr; gap: 13px; }
  .home-offer-card { min-height: 415px; padding: 27px; }
  .home-offer-card > strong { font-size: 38px; }
  .home-offer-photo img { max-height: 245px; }
  .feature-spotlight { padding-block: 72px 78px; }
  .feature-intro h2 { font-size: clamp(43px,11vw,60px); }
  .feature-range { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
  .feature-range strong { grid-column: 2; grid-row: 1 / span 2; font-size: clamp(31px,8vw,40px); }
  .feature-range small { grid-column: 1; font-size: 10px; }
  .feature-cta { margin-top: 24px; }
  .feature-stage { height: min(75vw,310px); margin-inline: -18px; }
  .feature-washer-seven { width: 61%; left: -10%; bottom: 10%; transform: rotate(-3deg) scale(1.1); }
  .feature-washer-eight { width: 61%; right: -10%; bottom: 9%; transform: rotate(3deg) scale(1.1); }
  .feature-washer-nine { width: 65%; left: 18%; bottom: 7%; transform: scale(1.25); }
  .feature-stage-note { top: 16px; left: 18px; font-size: 9px; }
  .feature-stage-caption { right: 12px; bottom: 12px; font-size: 8px; }
  .feature-options { display: grid; grid-template-columns: 1fr; }
  .feature-options button, .feature-options button:first-child { flex-direction: row; align-items: center; gap: 12px; padding: 16px 0; border-left: 0; border-bottom: 1px solid #b8b8b0; }
  .feature-options strong { font-size: 20px; white-space: nowrap; }
  .home-packs { padding-block: 75px 84px; }
  .home-packs-copy h2 { font-size: clamp(43px,11vw,61px); }
  .home-pack-list a { display: block; }
  .home-pack-list a > span:last-child { margin-top: 19px; }
  .home-brands { padding-block: 75px 85px; }
  .home-brands-heading { display: block; }
  .home-brands-heading h2 { font-size: clamp(38px,9vw,54px); }
  .home-brands-heading p:last-child { max-width: none; margin-top: 16px; }
  .home-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-brand-grid a { min-height: 115px; padding: 22px 12px; }
  .home-brand-grid img { max-width: 75%; max-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-offer-photo img, .home-offer-action svg, .home-inline-link svg, .feature-cta svg { transition: none; }
}

/* A single LG campaign banner, using the exact catalogue photos over a quiet showroom scene. */
.feature-spotlight { padding: clamp(60px,7vw,105px) 0; background: #f5f3ee; }
.lg-promo { position: relative; min-height: clamp(520px,45vw,650px); overflow: hidden; isolation: isolate; background: #eadfce url('./assets/hero/lg-laundry-showroom-optimized.webp') center 58% / cover no-repeat; color: #171818; }
.lg-promo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg,rgba(250,246,237,.95) 0%,rgba(250,246,237,.91) 26%,rgba(250,246,237,.3) 47%,transparent 71%); }
.lg-promo-copy { position: relative; z-index: 5; width: min(38%,440px); padding: clamp(37px,4.4vw,61px) 0 95px clamp(35px,4.5vw,63px); }
.lg-promo-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 clamp(38px,5vw,72px); }
.lg-promo-kicker img { display: block; width: clamp(94px,9vw,126px); height: auto; max-height: 43px; object-fit: contain; }
.lg-promo-kicker span { color: #575048; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.lg-promo h2 { max-width: 440px; margin: 0; font-size: clamp(46px,5.3vw,78px); font-weight: 600; line-height: .99; letter-spacing: -.07em; }
.lg-promo h2 em { font-family: var(--serif); font-weight: 500; }
.lg-promo-price { display: grid; gap: 3px; margin-top: clamp(26px,3vw,43px); }
.lg-promo-price > span { color: #56544f; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lg-promo-price strong { font-size: clamp(43px,5vw,70px); font-weight: 600; line-height: 1.05; letter-spacing: -.065em; }
.lg-promo-price small { color: #514f4a; font-size: 11px; }
.lg-promo-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 54px; margin-top: 33px; padding: 14px 20px; border-radius: 30px; background: #171817; color: #fff; font-size: 13px; font-weight: 700; transition: background .28s ease, transform .28s var(--ease); }
.lg-promo-cta:hover, .lg-promo-cta:focus-visible { transform: translateY(-2px); background: #8c372d; }
.lg-promo-cta svg { width: 18px; height: 18px; }
.lg-promo-products { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lg-promo-washer { position: absolute; display: block; height: auto; object-fit: contain; }
.lg-promo-seven { left: 26%; bottom: 3%; z-index: 1; width: 48%; transform: scale(1.08); filter: drop-shadow(0 12px 14px rgba(0,0,0,.17)); }
.lg-promo-eight { right: -11%; bottom: 3%; z-index: 2; width: 46%; transform: scale(1.08); filter: drop-shadow(0 12px 14px rgba(0,0,0,.17)); }
.lg-promo-nine { left: 44%; bottom: 3%; z-index: 3; width: 52%; transform: scale(1.07); filter: drop-shadow(0 15px 18px rgba(0,0,0,.2)); }
.lg-promo-index { position: absolute; right: 23px; bottom: 20px; z-index: 5; padding: 8px 10px; background: rgba(255,255,255,.75); color: #393834; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Brand selection borrows the depth and cadence of the reference site's dark tiles. */
.home-brands { padding: clamp(80px,8vw,123px) 0 clamp(88px,9vw,137px); background: #080a0c; color: #f8f9f8; }
.home-brands-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(160px,235px); gap: 14px 30px; margin-bottom: 43px; }
.home-brands-heading .eyebrow { color: #bfc5c7; }
.home-brands-heading h2 { font-size: clamp(42px,4.4vw,69px); }
.home-brands-heading h2 em { color: #b7c5cb; }
.home-brands-heading p:last-child { max-width: 230px; margin: 0 0 4px; color: #a1a9ab; font-size: 13px; }
.home-brand-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; border: 0; }
.home-brand-grid .home-brand-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: clamp(180px,16vw,242px); overflow: hidden; padding: 30px 16px 34px; border: 1px solid #282c30; border-radius: 24px; background: #111316; color: #f6f7f8; transition: border-color .3s ease, background .3s ease, transform .4s var(--ease), box-shadow .3s ease; }
.home-brand-grid .home-brand-tile:hover, .home-brand-grid .home-brand-tile:focus-visible { transform: translateY(-4px); border-color: #5e8799; background: #102836; box-shadow: inset 0 0 45px rgba(32,91,121,.24),0 16px 32px rgba(0,0,0,.18); outline: none; }
.home-brand-ghost { position: absolute; right: -3%; bottom: -36%; color: rgba(255,255,255,.045); font-size: clamp(170px,19vw,310px); font-weight: 700; line-height: 1; pointer-events: none; }
.home-brand-grid .home-brand-tile img { position: relative; z-index: 1; display: block; width: auto; height: auto; max-width: 72%; max-height: 56px; object-fit: contain; filter: brightness(0) invert(1); }
.home-brand-grid .home-brand-tile:nth-child(1) img { max-width: 64%; }
.home-brand-grid .home-brand-tile:nth-child(4) img { max-height: 47px; }
.home-brand-grid .home-brand-tile:nth-child(4) img { filter: none; }
.home-brand-grid .home-brand-tile:nth-child(5) { background: #111316; }
.home-brand-grid .home-brand-tile:nth-child(5):hover, .home-brand-grid .home-brand-tile:nth-child(5):focus-visible { background: #102836; }
.home-brand-grid .home-brand-tile:nth-child(5) img { max-width: 70%; }
.home-brand-grid .home-brand-premium img { max-width: 78%; filter: brightness(0) invert(1); }
.home-brand-action { position: relative; z-index: 1; display: flex; justify-content: center; gap: 9px; margin-top: 27px; color: #939da2; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: color .25s ease; }
.home-brand-action .arrow-icon { width: 13px; height: 13px; }
.home-brand-tile:hover .home-brand-action, .home-brand-tile:focus-visible .home-brand-action { color: #e2f3fa; }
.home-brand-grid .home-brand-all { grid-column: span 2; align-items: flex-start; padding-left: clamp(30px,5vw,68px); background: radial-gradient(circle at 87% 90%,rgba(39,86,111,.19),transparent 45%),#121417; }
.home-brand-all strong { position: relative; z-index: 1; font-size: clamp(28px,2.8vw,43px); font-weight: 600; letter-spacing: -.055em; line-height: 1.1; }
.home-brand-all .home-brand-action { justify-content: flex-start; margin-top: 18px; }

@media (max-width: 1050px) {
  .lg-promo-copy { width: 41%; }
  .lg-promo h2 { font-size: clamp(42px,5vw,65px); }
  .lg-promo-seven { left: 30%; }
  .home-brand-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-brand-grid .home-brand-all { grid-column: span 3; }
}
@media (max-width: 760px) {
  .lg-promo { min-height: 740px; background-position: 56% center; }
  .lg-promo::before { background: linear-gradient(180deg,rgba(250,246,237,.97) 0%,rgba(250,246,237,.88) 37%,rgba(250,246,237,.12) 67%); }
  .lg-promo-copy { width: 100%; max-width: 475px; padding: 36px 28px 0; }
  .lg-promo-kicker { margin-bottom: 29px; }
  .lg-promo h2 { font-size: clamp(46px,8vw,65px); }
  .lg-promo-price { margin-top: 22px; }
  .lg-promo-price strong { font-size: 51px; }
  .lg-promo-cta { margin-top: 21px; }
  .lg-promo-products { top: 310px; }
  .lg-promo-seven { left: -12%; bottom: 2%; width: 55%; }
  .lg-promo-eight { right: -14%; bottom: 2%; width: 55%; }
  .lg-promo-nine { left: 23%; bottom: 0; width: 60%; }
  .lg-promo-index { right: 12px; bottom: 10px; font-size: 8px; }
  .home-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-brand-grid .home-brand-all { grid-column: span 2; }
}
@media (max-width: 600px) {
  .feature-spotlight { padding-block: 60px 70px; }
  .feature-spotlight .container { padding-inline: 0; }
  .lg-promo { min-height: 690px; background-position: 58% center; }
  .lg-promo-copy { padding: 34px 20px 0; }
  .lg-promo-kicker { gap: 13px; margin-bottom: 25px; }
  .lg-promo-kicker img { width: 84px; }
  .lg-promo-kicker span { font-size: 8px; }
  .lg-promo h2 { font-size: clamp(41px,10.2vw,53px); }
  .lg-promo-price strong { font-size: 48px; }
  .lg-promo-products { top: 333px; }
  .lg-promo-seven { left: -21%; bottom: 0; width: 80%; transform: none; }
  .lg-promo-eight { right: -21%; bottom: 0; width: 80%; transform: none; }
  .lg-promo-nine { left: 0; bottom: 1%; width: 95%; transform: none; }
  .lg-promo-index { display: none; }
  .home-brands { padding-block: 73px 85px; }
  .home-brands-heading { display: block; margin-bottom: 28px; }
  .home-brands-heading h2 { font-size: clamp(41px,10vw,54px); }
  .home-brands-heading p:last-child { margin-top: 17px; }
  .home-brand-grid { gap: 9px; }
  .home-brand-grid .home-brand-tile { min-height: 155px; padding: 20px 8px 23px; border-radius: 15px; }
  .home-brand-grid .home-brand-tile img { max-width: 76%; max-height: 43px; }
  .home-brand-grid .home-brand-tile:nth-child(1) img { max-width: 75%; }
  .home-brand-ghost { bottom: -23%; font-size: 160px; }
  .home-brand-action { margin-top: 23px; font-size: 8px; letter-spacing: .08em; }
  .home-brand-grid .home-brand-all { min-height: 150px; padding: 25px; }
  .home-brand-all strong { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-promo-cta, .home-brand-grid .home-brand-tile { transition: none; }
}

/* A calm, continuous introduction to the three most requested brands. */
.brand-ribbon { display: grid; grid-template-columns: clamp(205px,21vw,330px) minmax(0,1fr); align-items: stretch; min-height: 104px; overflow: hidden; border-bottom: 1px solid #deddd8; background: #f8f7f3; }
.brand-ribbon-heading { display: flex; align-items: center; gap: 16px; padding: 25px clamp(22px,3.1vw,58px); border-right: 1px solid #deddd8; color: #565650; font-size: 10px; font-weight: 700; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.brand-ribbon-line { width: 25px; height: 1px; flex: none; background: #a9a8a0; }
.brand-ribbon-window { min-width: 0; overflow: hidden; mask-image: linear-gradient(to right,transparent,#000 5%,#000 95%,transparent); }
.brand-ribbon-track { display: flex; width: max-content; height: 100%; animation: brand-ribbon-flow 160s linear infinite; animation-play-state: paused; }
.brand-ribbon.is-visible .brand-ribbon-track { animation-play-state: running; }
.brand-ribbon-set { display: flex; height: 100%; }
.brand-ribbon-set a { display: grid; place-items: center; width: clamp(180px,17vw,285px); height: 100%; padding: 26px 33px; border-right: 1px solid #e5e3dd; transition: background .25s ease; }
.brand-ribbon-set a:hover, .brand-ribbon-set a:focus-visible { background: #eeece5; }
.brand-ribbon-set img { display: block; width: min(100%,145px); height: 38px; object-fit: contain; }
.brand-ribbon-set img.brand-ribbon-focus { filter: brightness(0); }
.brand-ribbon-set a:nth-child(1) img { width: min(100%,154px); }
.brand-ribbon-set a:nth-child(2) img { width: min(100%,145px); height: 46px; }
.brand-ribbon-set a:nth-child(3) img { width: min(100%,106px); }
.brand-ribbon:focus-within .brand-ribbon-track, .brand-ribbon:hover .brand-ribbon-track { animation-play-state: paused; }
@keyframes brand-ribbon-flow { to { transform: translateX(-50%); } }
@media (max-width: 720px) {
  .brand-ribbon { display: block; min-height: 0; }
  .brand-ribbon-heading { min-height: 42px; gap: 11px; padding: 11px 22px 0; border: 0; font-size: 8px; }
  .brand-ribbon-line { width: 16px; }
  .brand-ribbon-window { height: 78px; }
  .brand-ribbon-set a { width: 170px; padding: 17px 26px; }
  .brand-ribbon-set img { height: 32px; }
  .brand-ribbon-set a:nth-child(2) img { height: 39px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-ribbon-track { animation: none; }
  .brand-ribbon-window { overflow-x: auto; mask-image: none; }
}