/* IQAir page (Rev8). Own identity inside the Almas Ara system: deep blue-black surfaces, a cool
   blue/cyan accent, clean light panels. Only opacity and transform animate; no filters or blur.
   Rev8: the cinematic stage is the hero; product photos in the family cards; photographic shop CTA. */
.iq-page {
  --iq-ink: #080c11;
  --iq-ink-2: #0d131b;
  --iq-ink-3: #131b26;
  --iq-ac: #6cc0ef;        /* on dark: 9.4:1 on --iq-ink */
  --iq-ac-2: #a9dcf6;
  --iq-ac-paper: #1c5a8c;  /* on paper: 6.6:1 */
  --iq-line: rgb(150 200 240 / .14);
  background: var(--iq-ink);
}
.iq-page .eyebrow { color: var(--iq-ac); }
.iq-page .paper .eyebrow { color: var(--iq-ac-paper); }

/* ---------- hero = the cinematic stage ---------- */
.iqh { position: relative; overflow: hidden; background:
  radial-gradient(60% 50% at 70% 8%, rgb(108 192 239 / .10), transparent 65%),
  radial-gradient(40% 40% at 8% 100%, rgb(108 192 239 / .05), transparent 60%), var(--iq-ink); }
.iqh-fold {
  --half: calc(var(--container) / 2);
  display: grid; min-block-size: 100svh; padding-block: 100px clamp(14px, 2.2vh, 28px);
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [c-start] minmax(0, var(--half)) minmax(0, var(--half)) [c-end] minmax(var(--gutter), 1fr) [full-end];
  grid-template-rows: auto minmax(400px, 1fr); row-gap: clamp(18px, 3.2vh, 40px); align-items: end;
}
.iqh-id { grid-column: c-start / span 1; grid-row: 1; min-inline-size: 0; }
.iqh-id .crumb { margin: 0; }
.iqp-logo { display: inline-flex; align-items: center; margin-block: var(--s5) var(--s4); padding: 9px 13px; border-radius: 12px; background: #f5f8fa; }
.iqp-logo img { block-size: 28px; inline-size: auto; }
.iqh .h1 { margin: 0; font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.9rem); }
.iqh .h1 em { font-style: normal; color: var(--iq-ac); }
.iqh-story { grid-column: span 1 / c-end; grid-row: 1; justify-self: end; inline-size: min(100%, 540px); min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.iqh-k, .iqx-copy { flex: 1 0 100%; }
.iqx-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: clamp(16px, 2.4vh, 26px); }
.iqh-k { display: flex; align-items: center; gap: 14px; margin-block-end: 12px; }
.iqx-eyebrow { margin: 0; font-size: .9rem; font-weight: 600; color: var(--iq-ac); }
.iqx-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--iq-ac); }
.iqx-steps li { inline-size: 18px; block-size: 3px; border-radius: 3px; background: currentColor; opacity: .25; transition: opacity 500ms var(--ease), inline-size 500ms var(--ease); }
.iqx-steps li.on { opacity: .95; inline-size: 30px; }
.iqx-copy { display: grid; }
.iqx-c { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity 450ms var(--ease), transform 450ms var(--ease), visibility 0s linear 450ms; }
.iqh[data-stage="1"] .iqx-c[data-for="1"], .iqh[data-stage="2"] .iqx-c[data-for="2"], .iqh[data-stage="3"] .iqx-c[data-for="3"], .iqh[data-stage="4"] .iqx-c[data-for="4"] { opacity: 1; transform: none; visibility: visible; transition-delay: 120ms, 120ms, 0s; }
.iqx-h { margin: 0 0 8px; font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); line-height: 1.5; font-weight: 650; text-wrap: balance; color: var(--on-ink); }
.iqx-p { margin: 0; max-inline-size: 46ch; font-size: clamp(.95rem, .92rem + .12vw, 1.04rem); line-height: 1.8; color: var(--on-ink-2); }
:root[lang="en"] .iqx-h, :root[lang="zh-CN"] .iqx-h { line-height: 1.35; letter-spacing: -.008em; }
.iqx-ctls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-start: clamp(16px, 2.4vh, 26px); }
.iqx-ctls:not(:has(> :not([hidden]))) { display: none; }
.iqx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 48px; padding: 10px 22px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.3; cursor: pointer; text-decoration: none; transition: transform 160ms var(--ease), background-color 160ms linear, color 160ms linear, border-color 160ms linear; -webkit-tap-highlight-color: transparent; }
.iqx-btn:active { transform: scale(.97); }
.iqx-btn[hidden] { display: none; }
.iqx-btn svg { inline-size: 18px; block-size: 18px; flex: none; }
.iqx-primary { background: var(--iq-ac); color: #06121c; }

.iqx-quiet, .iqx-ghost { background: transparent; color: var(--on-ink); border-color: rgb(255 255 255 / .28); }

.iqx-ghost.ext::after { opacity: .8; } /* Rev13: arrow drawn by the shared SVG mask in proto.css */
.iqx-text { min-block-size: 44px; padding-inline: 12px; color: var(--iq-ac); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.iqh :focus-visible { outline: 2px solid var(--iq-ac); outline-offset: 3px; }
:root:not(.js) .iqh [data-act="reveal"] { display: none; }

/* the stage: wider than the text column, a cinematic letterbox under the headline */
.iqh-stage { grid-column: full-start / full-end; grid-row: 2; align-self: stretch; padding-inline: clamp(10px, 1.6vw, 30px); min-block-size: 0; }
.iqx-media { position: relative; inline-size: 100%; max-inline-size: 2600px; block-size: 100%; max-block-size: 980px; margin-inline: auto; overflow: hidden; border-radius: clamp(18px, 2vw, 30px); background: #d4d4d1; isolation: isolate; touch-action: pan-y; box-shadow: 0 40px 100px -50px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .06); }
.iqx-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 7000ms var(--ease); transform-origin: 30% 70%; }
.iqh[data-stage="2"] .iqx-photo, .iqh[data-stage="3"] .iqx-photo { transform: scale(1.018); }
.iqx-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; z-index: 3; transition: opacity 450ms linear; }
.iqx-canvas.is-fading { opacity: 0; }
/* window light: a slow opacity drift (three cycles, stage 1 only, paused off screen) */
.iqx-light { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(40% 70% at var(--lx, 62%) var(--ly, 30%), rgb(255 253 246 / .5), rgb(255 253 246 / 0) 70%); opacity: .2; animation: iqx-light 8s var(--ease-io) 3 alternate; }
.iqh.is-off .iqx-light, .iqh:not([data-stage="1"]) .iqx-light { animation-play-state: paused; }
@keyframes iqx-light { to { opacity: .7; } }
/* device emphasis during purification: a cool halo just outside the purifier's outline (placed by the script) */
.iqx-device { position: absolute; z-index: 4; left: var(--dx, 30%); top: var(--dy, 55%); inline-size: var(--dw, 200px); block-size: var(--dh, 320px); translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease); }
.iqx-device::before { content: ""; position: absolute; inset: -16% -38%; border-radius: 50%; background: radial-gradient(closest-side, rgb(150 210 250 / 0) 58%, rgb(150 210 250 / .13) 76%, rgb(150 210 250 / 0) 100%); }
/* a second, wider glow breathes twice while the purifier works */
.iqx-device i { position: absolute; inset: -24% -60%; border-radius: 50%; background: radial-gradient(closest-side, rgb(150 210 250 / 0) 50%, rgb(150 210 250 / .07) 72%, rgb(150 210 250 / 0) 100%); opacity: 0; }
.iqh[data-stage="3"] .iqx-device { opacity: 1; }
.iqh[data-stage="3"] .iqx-device i { animation: iqx-breathe 2600ms var(--ease-io) 2 both; }
.iqh[data-stage="4"] .iqx-device { opacity: 0; transition-duration: 2200ms; }
@keyframes iqx-breathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* the cleaner end state: the room reads a little brighter and cooler */
.iqx-clear { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 2400ms var(--ease);
  background: radial-gradient(55% 90% at var(--lx, 62%) var(--ly, 30%), rgb(255 255 255 / .34), rgb(255 255 255 / 0) 70%), linear-gradient(180deg, rgb(228 242 255 / .16), rgb(236 246 255 / .06)); }
.iqh[data-stage="3"] .iqx-clear { opacity: .45; transition-duration: 5200ms; }
.iqh[data-stage="4"] .iqx-clear { opacity: 1; }
.iqx-skip { position: absolute; z-index: 7; inset-block-end: 16px; inset-inline-end: 16px; min-block-size: 44px; min-inline-size: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .4); background: rgb(14 20 28 / .72); color: #fff; font: inherit; font-size: .88rem; cursor: pointer; transition: background-color 160ms linear, border-color 160ms linear, transform 160ms var(--ease); }
.iqx-skip[hidden] { display: none; }

.iqp-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(40px, 6vh, 72px) 0 0; border-block: 1px solid var(--iq-line); }
.iqp-facts div { padding: 26px 24px; border-inline-start: 1px solid var(--iq-line); }
.iqp-facts div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.iqp-facts dt { font-family: "Inter"; font-size: 2.2rem; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--on-ink); }
.iqp-facts dd { margin: 4px 0 0; font-size: .88rem; color: var(--on-ink-2); }

/* ---------- intro (light, "clean room" surface) ---------- */
.iqp-intro-sec { background: #f3f5f6; }
.iqp-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.iqp-intro .h2 { margin-block: var(--s4) var(--s5); }
.iqp-intro .lead + p { margin-block-start: var(--s4); color: var(--on-paper-2); line-height: 1.9; }
.iqp-intro .muted { margin-block-start: var(--s4); color: var(--on-paper-2); }
.iqp-intro-fig { margin: 0; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4 / 3; }
.iqp-intro-fig img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.iqp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: var(--s7) 0 0; padding: 0; list-style: none; border-block-start: 1px solid rgb(20 23 29 / .14); }
.iqp-pillars li { display: grid; gap: 6px; padding: 18px 18px 0 0; border-inline-start: 1px solid rgb(20 23 29 / .1); padding-inline: 18px; }
.iqp-pillars li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.iqp-pillars b { font-size: 1.05rem; color: var(--iq-ac-paper); }
.iqp-pillars span { font-size: .9rem; line-height: 1.75; color: var(--on-paper-2); }

/* ---------- technology: the tower-in-the-sky picture beside a quiet list ---------- */
.iqp-tech-sec { background: var(--iq-ink); }
.iqp-sec-head { max-inline-size: 760px; margin-block-end: var(--s7); }
.iqp-sec-head .h2 { margin-block: var(--s4) var(--s4); }
.iqp-tech-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.iqp-tech-fig { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--radius-l); overflow: hidden; background: #2d5f93; box-shadow: 0 40px 90px -50px rgb(0 0 0 / .9), 0 0 0 1px var(--iq-line); }
.iqp-tech-fig img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.iqp-tech { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--iq-line); }
.iqp-tech li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; padding-block: 22px; border-block-end: 1px solid var(--iq-line); }
.iqp-tech h3 { margin: 2px 0 6px; font-size: 1.12rem; color: var(--on-ink); }
.iqp-tech p { margin: 0; color: var(--on-ink-2); line-height: 1.85; font-size: .95rem; }
.iqp-ic { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 14px; background: rgb(108 192 239 / .1); color: var(--iq-ac); }
.iqp-ic svg { inline-size: 28px; block-size: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- timeline: shared vertical timeline, IQAir cool blue ---------- */
.iqp-tl-sec { background: var(--iq-ink-2); }
.tl.tl-iq { --tl-ac: var(--iq-ac); --tl-glow: rgb(108 192 239 / .16); --tl-line: rgb(150 200 240 / .16); --tl-sep: rgb(150 200 240 / .08); --tl-dot: var(--iq-ink-2); --tl-year: #7c8796; --tl-text: var(--on-ink-2); }
.tl-iq .tl-fill { box-shadow: 0 0 12px rgb(108 192 239 / .45); }
.tl-iq .tl-ev h3 { color: var(--on-ink); }

/* ---------- at home: two low-resolution banners, shown no wider than 640 css px ---------- */
.iqp-home-sec { background: var(--iq-ink); }
.iqp-home { display: grid; grid-template-columns: repeat(2, minmax(0, 640px)); justify-content: space-between; gap: clamp(20px, 3vw, 40px); }
.iqp-home-c { margin: 0; display: grid; gap: 18px; align-content: start; }
.iqp-home-m { position: relative; aspect-ratio: 1080 / 420; border-radius: var(--radius-l); overflow: hidden; background: #1b2430; box-shadow: 0 0 0 1px var(--iq-line); }
.iqp-home-m img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.iqp-home-c:first-child .iqp-home-m img { object-position: 20% 50%; }
.iqp-home-c figcaption { display: grid; gap: 6px; max-inline-size: 56ch; }
.iqp-home-c figcaption b { font-size: 1.05rem; color: var(--iq-ac); }
.iqp-home-c figcaption span { color: var(--on-ink-2); line-height: 1.85; font-size: .96rem; }

/* ---------- product families: product photography on clean surfaces ---------- */
.iqp-fam-sec { background: #f3f5f6; }
.iqp-fam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.iqp-pc { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-l); overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgb(20 23 29 / .04), 0 30px 60px -48px rgb(20 40 70 / .35), inset 0 0 0 1px rgb(20 23 29 / .07); }
/* the photos have white backgrounds; multiply lets the soft surface show through them, so no file box is visible */
.iqp-pc-media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; isolation: isolate; background: radial-gradient(90% 80% at 50% 38%, #ffffff 0%, #f4f6f8 55%, #e9eef2 100%); }
.iqp-pc-media img { position: absolute; left: 50%; top: 50%; inline-size: var(--w); block-size: auto; max-inline-size: none; object-fit: contain; transform: translate(calc(var(--cx) * -100%), calc(var(--cy) * -100%)); mix-blend-mode: multiply; transition: transform 900ms var(--ease); }

.iqp-pc-body { display: grid; align-content: start; gap: 6px; padding: clamp(20px, 2vw, 30px) clamp(20px, 2.2vw, 32px) clamp(24px, 2.4vw, 34px); border-block-start: 1px solid rgb(20 23 29 / .06); }
.iqp-fam-k { margin: 0; font-size: .86rem; font-weight: 600; color: var(--iq-ac-paper); }
.iqp-pc h3 { margin: 0 0 4px; font-family: "Inter"; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.65rem); font-weight: 650; letter-spacing: -.012em; color: var(--on-paper); }
.iqp-pc-body p:last-child { margin: 0; max-inline-size: 44ch; font-size: .95rem; line-height: 1.8; color: var(--on-paper-2); }

/* ---------- Almas Ara + shop ---------- */
.iqp-rel-sec { background: var(--iq-ink); }
.iqp-link { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; color: var(--iq-ac); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* shop CTA: premium blue with a subtle photograph. The photo is a CSS background, so only the active
   variant downloads; the script sets data-v from ?cta=a|b (no JS: the recommended variant). The photo is
   blended in luminosity over the blue, then a blue gradient keeps the text side calm (WCAG AA). */
.iqp-cta { position: relative; overflow: hidden; isolation: isolate; min-block-size: 300px; background: linear-gradient(120deg, #0d3456, #18578a 58%, #2675ae); color: #fff; }
.iqp-cta::before, .iqp-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.iqp-cta::before { z-index: -2; background-size: cover; background-repeat: no-repeat; background-position: var(--bp, 50% 50%); mix-blend-mode: luminosity; opacity: var(--bo, .5); }
.iqp-cta::after { z-index: -1; background: linear-gradient(var(--ga, 270deg), rgb(10 40 68 / .9) 0%, rgb(12 48 80 / .7) 42%, rgb(18 70 112 / .2) 100%); }
:root[dir="ltr"] .iqp-cta { --ga: 90deg; }
.iqp-cta > * { position: relative; }
.iqp-cta .eyebrow { color: #d7eefc; }
.iqp-cta p { opacity: 1; color: rgb(255 255 255 / .9); }
.iqp-cta .btn { --bg: #fff; --fg: #0c2f4d; min-block-size: 52px; padding-inline: 28px; font-size: 1.02rem; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .5); }
.iqp-cta[data-v="a"] { --bp: 50% 62%; --bo: .62; }
.iqp-cta[data-v="b"] { --bp: 62% 40%; --bo: .5; }
.iqp-cta[data-v="a"]::before { background-image: image-set(url("../img/iqair/cta-alps-1440.webp") 1x, url("../img/iqair/cta-alps-2880.webp") 2x); }
.iqp-cta[data-v="b"]::before { background-image: image-set(url("../img/iqair/cta-room-1440.webp") 1x, url("../img/iqair/cta-room-2880.webp") 2x); }
:root:not(.js) .iqp-cta { --bp: 50% 62%; --bo: .62; }
:root:not(.js) .iqp-cta::before { background-image: image-set(url("../img/iqair/cta-alps-1440.webp") 1x, url("../img/iqair/cta-alps-2880.webp") 2x); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .iqp-intro, .iqp-tech-grid { grid-template-columns: 1fr; }
  .iqp-tech-fig { aspect-ratio: 16 / 10; max-block-size: 520px; }
  .iqp-tech-fig img { object-position: 50% 45%; }
  .iqp-home { grid-template-columns: 1fr; justify-content: stretch; max-inline-size: 680px; }
  .iqx-photo { object-position: 30% 50%; }
}
@media (max-width: 1023px) {
  .iqh-fold { grid-template-rows: auto auto minmax(380px, 1fr); }
  .iqh-id { grid-column: c-start / c-end; }
  .iqh-story { grid-column: c-start / c-end; grid-row: 2; justify-self: start; inline-size: min(100%, 620px); }
  .iqh-stage { grid-row: 3; }
}
@media (max-width: 760px) {
  .iqh-fold { min-block-size: 0; padding-block: 84px 8px; grid-template-rows: auto auto auto; row-gap: 18px; }
  /* phone: headline, then the stage with its button on the picture (photo and control stay in view together),
     then the story text and the store link. The story wrapper dissolves so its parts sit in the page grid. */
  .iqh-fold { grid-template-rows: auto auto auto auto auto; row-gap: 0; }
  .iqh-id { grid-row: 1; margin-block-end: 18px; }
  .iqh-story { display: contents; }
  .iqh-stage { grid-row: 2; padding-inline: 10px; }
  .iqh-k { grid-column: c-start / c-end; grid-row: 3; margin-block: 18px 8px; }
  .iqx-copy { grid-column: c-start / c-end; grid-row: 4; }
  .iqx-more { grid-column: c-start / c-end; grid-row: 5; margin-block-start: 16px; }
  .iqx-ctls { grid-column: full-start / full-end; grid-row: 2; align-self: end; z-index: 8; margin: 0; padding: 0 26px 18px; pointer-events: none; }
  .iqx-ctls > * { pointer-events: auto; }
  /* buttons sit on the window side of the picture (physical right in every language), clear of most of the purifier */
  .iqx-ctls { justify-content: flex-end; }
  :root[dir="rtl"] .iqx-ctls { justify-content: flex-start; }
  .iqx-ctls .iqx-primary { box-shadow: 0 10px 30px -10px rgb(0 0 0 / .45); }
  .iqx-ctls .iqx-quiet, .iqx-ctls .iqx-text { background: rgb(10 16 24 / .72); color: #fff; border-color: rgb(255 255 255 / .3); text-decoration: none; }
  .iqx-media { block-size: auto; aspect-ratio: 1130 / 1000; max-block-size: 52svh; border-radius: 20px; }
  .iqx-skip { inset-block: 10px auto; inset-inline-end: 10px; }
  .iqx-photo { object-position: 20% 50%; }
  .iqp-logo { margin-block: 14px 12px; padding: 7px 11px; }
  .iqp-logo img { block-size: 22px; }
  .iqh .h1 { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.4rem); }
  .iqx-h { font-size: 1.12rem; }
  .iqx-p { font-size: .98rem; }

  .iqp-facts { grid-template-columns: 1fr 1fr; }
  .iqp-facts div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .iqp-facts div:nth-child(n+3) { border-block-start: 1px solid var(--iq-line); }
  .iqp-facts div { padding: 20px 16px; }
  .iqp-facts dt { font-size: 1.8rem; }
  .iqp-pillars { grid-template-columns: 1fr; }
  .iqp-pillars li, .iqp-pillars li:first-child { border-inline-start: 0; padding-inline: 0; padding-block: 14px; border-block-end: 1px solid rgb(20 23 29 / .1); }
  .iqp-tech-fig { aspect-ratio: 1; }
  .iqp-tech li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding-block: 18px; }
  .iqp-ic { inline-size: 44px; block-size: 44px; }
  .iqp-home-m { aspect-ratio: 1080 / 470; }
}
@media (max-width: 640px) {
  .iqp-fam { grid-template-columns: 1fr; }
  .iqp-pc-media { aspect-ratio: 5 / 4; }
  .iqp-cta { min-block-size: 0; }
  .iqp-cta::after { background: linear-gradient(180deg, rgb(10 40 68 / .88) 0%, rgb(12 48 80 / .72) 55%, rgb(18 70 112 / .45) 100%); }
  .iqp-cta[data-v="a"] { --bp: 40% 40%; }
  .iqp-cta[data-v="b"] { --bp: 50% 40%; }
  .iqp-cta[data-v="a"]::before, :root:not(.js) .iqp-cta::before { background-image: image-set(url("../img/iqair/cta-alps-m-640.webp") 1x, url("../img/iqair/cta-alps-m-860.webp") 2x); }
  .iqp-cta[data-v="b"]::before { background-image: image-set(url("../img/iqair/cta-room-m-640.webp") 1x, url("../img/iqair/cta-room-m-860.webp") 2x); }
}
/* short landscape phones: text beside the stage */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1023px) {
  .iqh-fold { min-block-size: 0; padding-block: 76px 10px; grid-template-columns: [full-start] var(--gutter) [c-start] minmax(0, 1fr) minmax(0, 1.25fr) [c-end] var(--gutter) [full-end]; grid-template-rows: auto auto; column-gap: 20px; }
  .iqh-id { grid-column: 2; grid-row: 1; }
  .iqh-story { grid-column: 2; grid-row: 2; inline-size: 100%; align-self: start; }
  .iqh-stage { grid-column: 3 / 5; grid-row: 1 / 3; padding-inline: 0 10px; align-self: stretch; }
  .iqh-fold { --mh: max(260px, calc(100svh - 90px)); }
  .iqx-media { block-size: var(--mh); max-block-size: none; } /* Final: the phone rule's 52svh cap shrank the picture under the buttons placed for --mh (667 x 375) */
  .iqh .h1 { font-size: 1.7rem; }
  .iqp-logo { margin-block: 8px; } .iqp-logo img { block-size: 20px; }
  .iqx-h { font-size: 1.02rem; } .iqx-p { font-size: .93rem; line-height: 1.65; }
  .iqx-ctls { margin-block-start: 10px; } .iqx-ctls .iqx-primary { flex: 0 1 auto; }
  /* short landscape phones: the eyebrow and step dots give way and the scene buttons sit on the picture
     (as on portrait phones), so photo, headline and start button share the first view */
  .iqh-fold { grid-template-rows: auto auto 1fr; }
  .iqh-k { display: none; }
  .iqh-story { display: contents; }
  .iqx-copy { grid-column: 2; grid-row: 2; align-self: start; }
  .iqx-more { grid-column: 2; grid-row: 3; align-self: start; margin-block-start: 12px; }
  .iqh-stage { grid-row: 1 / 4; align-self: start; }
  /* the picture has a fixed height here, so the button row is placed on its bottom edge (48 px buttons, 16 px inset) */
  .iqx-ctls { grid-column: 3 / 5; grid-row: 1 / 4; align-self: start; z-index: 8; margin: calc(var(--mh) - 64px) 0 0; padding: 0 26px; flex-wrap: nowrap; pointer-events: none; justify-content: flex-end; }
  :root[dir="rtl"] .iqx-ctls { justify-content: flex-start; }
  .iqx-ctls > * { pointer-events: auto; }
  .iqx-ctls .iqx-primary { box-shadow: 0 10px 30px -10px rgb(0 0 0 / .45); }
  .iqx-ctls .iqx-quiet, .iqx-ctls .iqx-text { background: rgb(10 16 24 / .72); color: #fff; border-color: rgb(255 255 255 / .3); text-decoration: none; }
  .iqx-skip { inset-block: 10px auto; inset-inline-end: 10px; }
}
@media (min-width: 1900px) {
  .iqx-h { font-size: 1.7rem; } .iqx-p { font-size: 1.12rem; }
}

/* reduced motion: still states and short cross-fades only */
:root[data-motion="reduce"] .iqx-light { animation: none; opacity: .4; }
:root[data-motion="reduce"] .iqx-photo { transition: none; transform: none !important; }
:root[data-motion="reduce"] .iqx-c, :root[data-motion="reduce"] .iqx-clear, :root[data-motion="reduce"] .iqx-device { transition: opacity 250ms linear !important; transform: none; }
:root[data-motion="reduce"] .iqx-device i { animation: none; }
:root[data-motion="reduce"] .iqp-pc-media img { transition: none; }

/* ---------- Final design candidate (worker "brands") ---------- */
/* hover only where a pointer can hover (no sticky state after a tap), 160 ms; pressed = slight press (.iqx-btn:active) */
@media (hover: hover) {
  .iqx-primary:hover { background: var(--iq-ac-2); }
  .iqx-quiet:hover, .iqx-ghost:hover { border-color: rgb(255 255 255 / .6); }
  .iqx-text:hover { color: var(--iq-ac-2); text-decoration-thickness: 2px; }
  .iqx-skip:hover { background: rgb(14 20 28 / .88); border-color: rgb(255 255 255 / .65); }
  .iqp-link:hover { color: var(--iq-ac-2); text-decoration-thickness: 2px; }
}
.iqx-skip:active { transform: scale(.97); }
.iqx-text, .iqp-link { transition: color 160ms linear, text-decoration-color 160ms linear; }
.iqp-link:active, .iqx-text:active { color: #fff; }
.iqp-link:focus-visible { outline: 2px solid var(--iq-ac); outline-offset: 3px; border-radius: 4px; }
/* the family cards are not links: no hover motion on them (a zoom implied a click that does nothing) */
/* the "IQAir technologies" link now sits with the store link below the story text (it used to be a second pill on the
   photo in the final state, covering the purifier's base on phones and landscape phones) */
.iqx-more .iqx-text { padding-inline: 4px 12px; }
@media (max-width: 760px) { .iqx-more { row-gap: 6px; } }
/* shop CTA button: its own resting shadow overrode the shared hover shadow, so hover showed no change */
@media (hover: hover) { .iqp-cta .btn:hover { --bg: #eaf5fc; box-shadow: 0 16px 34px -14px rgb(0 0 0 / .6); } }
/* D10 (QA): the heading is still in its scroll-reveal offset (22 px) when the continue link scrolls to it, so it ended 2 px
   under the header after the reveal; a small margin on top of the global scroll-padding (proto.css, 96 px) */
#tech-t { scroll-margin-block-start: 24px; }