/* TAADA's full-width photographic cover. Keep the photograph edge to edge. */
.trade-hero:has(.home-carousel) { background: #172630; }
.home-carousel { --carousel-progress: 0; position: relative; isolation: isolate; width: 100%; color: #fff; background: #172630; }
.home-carousel__stage { display: grid; touch-action: pan-y pinch-zoom; overflow: hidden; }
.home-carousel__slide { position: relative; isolation: isolate; grid-area: 1 / 1; display: flex; align-items: center; min-width: 0; min-height: max(690px, 44.445vw); padding: 58px max(6vw, calc((100vw - 1580px) / 2)) 120px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 650ms ease, visibility 650ms; }
.home-carousel__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.home-carousel__visual, .home-carousel__shade { position: absolute; inset: 0; margin: 0; }
.home-carousel__visual { z-index: -3; background: #6d7778; overflow: hidden; }
.home-carousel__visual > picture { position: absolute; inset: 0; display: block; }
.home-carousel__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; animation: none; }
.home-carousel__slide[data-photo="1"] .home-carousel__visual img { object-position: 15% 50%; }
.home-carousel__slide[data-photo="2"] .home-carousel__visual img { object-position: 35% 53%; }
.home-carousel__slide[data-photo="3"] .home-carousel__visual img { object-position: 65% 60%; }
.home-carousel__slide[data-photo="4"] .home-carousel__visual img { object-position: 30% 52%; }
.home-carousel__slide[data-photo="5"] .home-carousel__visual img { object-position: 40% 52%; }
.home-carousel__slide[data-photo="6"] .home-carousel__visual img { object-position: 58% 51%; }
.home-carousel__slide[data-photo="7"] .home-carousel__visual img { object-position: 56% 54%; }
.home-carousel__slide[data-photo="8"] .home-carousel__visual img { object-position: 75% 50%; }
.home-carousel__shade { z-index: -2; background: linear-gradient(90deg, rgba(15,29,39,.94) 0%, rgba(15,29,39,.82) 24%, rgba(15,29,39,.52) 43%, rgba(15,29,39,.12) 66%, rgba(15,29,39,.04) 100%), linear-gradient(0deg, rgba(15,29,39,.7), transparent 23%); }
.home-carousel__slide[data-align="right"] { justify-content: flex-end; }
.home-carousel__slide[data-align="right"] .home-carousel__shade { background: linear-gradient(270deg, rgba(15,29,39,.94) 0%, rgba(15,29,39,.82) 24%, rgba(15,29,39,.52) 43%, rgba(15,29,39,.12) 66%, rgba(15,29,39,.04) 100%), linear-gradient(0deg, rgba(15,29,39,.7), transparent 23%); }
.home-carousel__copy { width: min(100%, 570px); position: relative; padding: 0; }
.home-carousel__eyebrow { margin: 0 0 24px; font-size: 11px; font-weight: 500; line-height: 1.6; color: #e2e9ed; letter-spacing: .2em; }
.home-carousel__eyebrow::before { content: ""; display: inline-block; width: 38px; height: 4px; vertical-align: middle; margin-right: 14px; background: linear-gradient(90deg,#536eae 0 33%,#fff 33% 66%,#d64e37 66%); }
.home-carousel__slide[data-origin="tw"] .home-carousel__eyebrow::before { width: 38px; height: 4px; background: linear-gradient(90deg, #000095 0 28%, #fff 28% 43%, #fe0000 43%); }
.home-carousel__product { margin: 0 0 25px; font-size: clamp(17px, 1.35vw, 22px); font-weight: 550; letter-spacing: .06em; line-height: 1.5; }
.home-carousel__product > span { display: block; margin-top: 7px; font-size: 12px; font-weight: 400; letter-spacing: .13em; color: #d0dde5; }
.trade-hero .home-carousel__title { margin: 0; color: #fff; font-size: clamp(38px, 3.5vw, 62px); line-height: 1.38; font-weight: 600; letter-spacing: -.025em; text-wrap: initial; }
.home-carousel__lead { margin: 25px 0 12px; color: #fff; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.75; font-weight: 500; }
.home-carousel__description { margin: 0; color: #e0e7ec; max-width: 470px; font-size: 15px; line-height: 1.95; }
.home-carousel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 27px; margin-top: 30px; }
.home-carousel__actions .button { min-height: 48px; background: #c3462e; border-color: #c3462e; color: #fff; }
.home-carousel__actions .button:hover { background: #ab3824; }
.home-carousel__consult { display: inline-flex; gap: 14px; align-items: center; color: #fff; font-size: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.6); }
.home-carousel__consult span { font-size: 21px; }
.home-carousel__signature { margin: 26px 0 0; font-size: 13px; line-height: 1.7; letter-spacing: .06em; color: #cad8e1; }
.home-carousel__slide[data-photo="1"] .home-carousel__signature { font-family: Georgia, serif; font-size: 16px; font-style: italic; letter-spacing: 0; }
.home-carousel__caption { position: absolute; bottom: 81px; left: 6vw; right: 6vw; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 13px; color: #e1e8ec; letter-spacing: .05em; }
.home-carousel__caption-link { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 13px; }
.home-carousel__image-note { position: absolute; bottom: 107px; left: 6vw; font-size: 11px; color: #e1e8ec; padding: 3px 7px; background: rgba(15,29,39,.62); }
.home-carousel__controls { position: absolute; bottom: 20px; left: 6vw; right: 6vw; display: flex; align-items: center; gap: 30px; z-index: 3; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.35); }
.home-carousel__controls[hidden] { display: none; }
.home-carousel__pagination { flex: 1; display: flex; gap: 10px; max-width: 520px; }
.home-carousel__pagination button { display: block; flex: 1; min-width: 0; height: 32px; border: 0; position: relative; background: none; color: #fff; padding: 0; cursor: pointer; }
.home-carousel__pagination button::before, .home-carousel__pagination button::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; top: 50%; background: rgba(255,255,255,.38); transition: background 180ms; }
.home-carousel__pagination button::after { transform: scaleX(0); transform-origin: left; background: #e86d50; }
.home-carousel__pagination button[aria-current="true"]::before { background: rgba(255,255,255,.75); }
.home-carousel__pagination button[aria-current="true"]::after { transform: scaleX(var(--carousel-progress)); }
.home-carousel__pagination button:hover::before { background: #fff; }
.home-carousel__dot-name { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); padding: 6px 9px; background: #172630; white-space: nowrap; font-size: 11px; opacity: 0; visibility: hidden; transition: opacity 150ms; }
.home-carousel__pagination button:hover .home-carousel__dot-name, .home-carousel__pagination button:focus-visible .home-carousel__dot-name { opacity: 1; visibility: visible; }
.home-carousel__transport { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.home-carousel__count { display: inline-flex; align-items: baseline; gap: 8px; margin-right: 9px; font-size: 12px; color: #c6d2db; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.home-carousel__count b { color: #fff; font-size: 22px; font-weight: 400; }
.home-carousel__toggle, .home-carousel__arrow { border: 1px solid rgba(255,255,255,.45); background: rgba(15,29,39,.1); color: #fff; height: 40px; cursor: pointer; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; transition: background 180ms; }
.home-carousel__toggle { gap: 6px; padding: 0 12px; font-size: 12px; min-width: 77px; }
.home-carousel__arrow { width: 40px; font-size: 23px; line-height: 1; }
.home-carousel__toggle:hover, .home-carousel__arrow:hover { background: rgba(255,255,255,.15); }
.home-carousel__toggle[data-playing="false"] .home-carousel__pause, .home-carousel__toggle[data-playing="true"] .home-carousel__play { display: none; }
.home-carousel button:focus-visible, .home-carousel a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.home-carousel__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1900px) { .home-carousel__slide { min-height: max(880px, 44.445vw); } }
@media (max-width: 1100px) {
  .home-carousel__slide { min-height: 680px; padding-inline: 5vw; }
  .home-carousel__copy { max-width: 360px; }
  .trade-hero .home-carousel__title { font-size: clamp(35px, 4.1vw, 47px); }
  .home-carousel__description { max-width: 420px; font-size: 14px; }
  .home-carousel__lead { font-size: 16px; }
}
/* The photo has its own height: no dark overlay can cover a mobile product. */
@media (max-width: 900px) {
  .home-carousel { --mobile-photo-height: clamp(260px, 78vw, 340px); }
  .home-carousel__stage { height: auto; max-height: none; }
  .home-carousel__slide, .home-carousel__slide[data-align="right"] {
    min-height: 0; height: auto; display: flex; flex-direction: column;
    align-items: stretch; justify-content: flex-start;
    padding: calc(var(--mobile-photo-height) + 22px) 24px 20px;
  }
  .home-carousel__visual { bottom: auto; height: var(--mobile-photo-height); }
  .home-carousel__slide[data-photo] .home-carousel__visual img { object-position: 50% 0; }
  .home-carousel__shade, .home-carousel__slide[data-align="right"] .home-carousel__shade { display: none; background: none; }
  .home-carousel__copy { width: 100%; max-width: 600px; margin-inline: auto; }
  .home-carousel__eyebrow { font-size: 9px; letter-spacing: .12em; margin-bottom: 9px; }
  .home-carousel__eyebrow::before { width: 28px; margin-right: 10px; height: 3px; }
  .home-carousel__slide[data-origin="tw"] .home-carousel__eyebrow::before { width: 28px; height: 3px; }
  .home-carousel__product { font-size: 15px; margin-bottom: 12px; }
  .home-carousel__product > span { margin-top: 3px; font-size: 10px; letter-spacing: .08em; }
  .trade-hero .home-carousel__title { font-size: clamp(26px, 7vw, 32px); line-height: 1.32; }
  .home-carousel__lead, .home-carousel__signature, .home-carousel__caption { display: none; }
  .home-carousel__description { max-width: 600px; font-size: 13px; line-height: 1.75; margin-top: 13px; }
  .home-carousel__actions { gap: 8px 16px; margin-top: 17px; }
  .home-carousel__actions .button { min-height: 44px; font-size: 12px; padding: 11px 14px; }
  .home-carousel__consult { min-height: 44px; font-size: 12px; gap: 8px; padding: 8px 0; }
  .home-carousel__consult span { font-size: 18px; }
  .home-carousel__image-note { top: 10px; right: 12px; bottom: auto; left: auto; max-width: calc(100% - 24px); font-size: 9px; }
  .home-carousel__controls {
    position: relative; left: auto; right: auto; bottom: auto; margin: 0 24px;
    padding: 0 0 12px; gap: 0; flex-wrap: wrap;
  }
  .home-carousel__pagination { flex: 0 0 100%; max-width: none; gap: 8px; }
  .home-carousel__pagination button { height: 32px; }
  .home-carousel__pagination button::before, .home-carousel__pagination button::after { height: 2px; }
  .home-carousel__transport { width: 100%; justify-content: flex-end; gap: 10px; }
  .home-carousel__count { margin-right: auto; font-size: 11px; }
  .home-carousel__count b { font-size: 20px; }
  .home-carousel__arrow, .home-carousel__toggle { height: 44px; }
  .home-carousel__arrow { width: 44px; font-size: 22px; }
  .home-carousel__toggle { font-size: 11px; min-width: 76px; }
  .home-carousel__dot-name { display: none; }
}
/* At tablet widths use the landscape source, preserving the complete machine. */
@media (min-width: 481px) and (max-width: 900px) {
  .home-carousel { --mobile-photo-height: 44.445vw; }
  .home-carousel__slide[data-photo] .home-carousel__visual img { object-position: 50% 50%; }
}
@media (max-width: 359px) {
  .home-carousel__slide, .home-carousel__slide[data-align="right"] { padding-inline: 18px; }
  .home-carousel__controls { margin-inline: 18px; }
  .home-carousel__actions { gap: 6px 12px; }
  .home-carousel__actions .button { padding-inline: 12px; }
  .home-carousel__consult { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .home-carousel__slide, .home-carousel__pagination button::before { transition: none; } }
/* Keep the desktop opening, including navigation and credentials, on one 1080p screen. */
@media (min-width: 901px) {
  .home-carousel__stage { height: clamp(610px, 37.5vw, 720px); max-height: calc(100svh - 152px); }
  .home-carousel__slide { height: 100%; min-height: 0; padding-top: 32px; padding-bottom: 98px; }
  .home-carousel__eyebrow { margin-bottom: 16px; }
  .home-carousel__product { margin-bottom: 18px; }
  .trade-hero .home-carousel__title { font-size: clamp(34px, 3vw, 52px); }
  .home-carousel__lead { margin-top: 18px; margin-bottom: 9px; font-size: 16px; line-height: 1.7; }
  .home-carousel__description { font-size: 14px; line-height: 1.8; }
  .home-carousel__actions { margin-top: 22px; }
  .home-carousel__actions .button { min-height: 46px; }
  .home-carousel__signature { margin-top: 18px; font-size: 12px; }
  .home-carousel__slide[data-photo="1"] .home-carousel__signature { font-size: 14px; }
}
@media (min-width: 1921px) { .home-carousel__stage { height: 37.5vw; max-height: none; } }


/* Individual phone compositions: the product, rather than the room, is centered.
   Portrait image coordinates are relative to the unmodified 1024 x 1536 source.
   Keep these rules phone-only; tablet and desktop compositions already fit. */
@media (max-width: 480px) {
  .home-carousel__slide[data-photo="7"] { --phone-photo-width: 180%; --phone-photo-x: -49.95%; --phone-photo-y: -17.6%; }
  .home-carousel__slide[data-photo="8"] { --phone-photo-width: 182%; --phone-photo-x: -49.85%; --phone-photo-y: -21.7%; }
  .home-carousel__slide:is([data-photo="7"], [data-photo="8"]) .home-carousel__visual img {
    position: absolute; left: 50%; top: 50%; width: var(--phone-photo-width);
    height: auto; max-width: none; max-height: none; aspect-ratio: 2 / 3;
    object-fit: cover; transform: translate(var(--phone-photo-x), var(--phone-photo-y));
  }
}

/* The phone Cube uses the original scene with only the toilet and paper removed.
   A wider view reveals more shower, towel rail and vanity.
   Height 115% pulls back 28% from the previous 160% crop; keep the product whole. */
@media (max-width: 480px) {
  .home-carousel__slide[data-photo="1"] .home-carousel__visual img {
    position: absolute; left: 50%; top: 0; width: auto; height: 115%;
    max-width: none; max-height: none; aspect-ratio: 3 / 2;
    object-fit: cover; transform: translateX(-47.35%);
  }
}

/* Keep the opening Cube in the original photographic light. The text gradient
   ends before the heater at every desktop width; phones keep their clear photo. */
@media (min-width: 901px) {
  .home-carousel__slide[data-photo="1"] .home-carousel__shade {
    background:
      linear-gradient(90deg, rgba(15,29,39,.94) 0%, rgba(15,29,39,.82) 50%, rgba(15,29,39,.52) 85%, rgba(15,29,39,0) 100%) left top / max(48%, min(600px, calc(15vw + 78svh - 136px))) 100% no-repeat,
      linear-gradient(0deg, rgba(15,29,39,.7), transparent 23%);
  }
}