/* ==========================================================================
   SBL v3 · glass.css. Owner: glass agent.
   Glass is about light: reflections, transparency, a sweep of light across a
   surface, layers separating. Tokens only, logical properties only.
   ========================================================================== */

/* ---------- shared ---------- */
.line-glass { --gl-warm: var(--brand); --gl-hair: var(--line); --gl-dark: var(--ink); --gl-paper: var(--bg); }
/* inverted band. Core .section--ink reads --ink after redefining it on the same element, so it renders blank. */
.gl-ink { background: var(--gl-dark); color: var(--gl-paper); --ink: var(--gl-paper); --ink-2: color-mix(in srgb, var(--gl-paper) 80%, transparent); --ink-3: color-mix(in srgb, var(--gl-paper) 60%, transparent); --line: color-mix(in srgb, var(--gl-paper) 16%, transparent); --line-2: color-mix(in srgb, var(--gl-paper) 30%, transparent); }
:root[data-theme="dark"] .gl-ink { background: var(--bg-2); color: var(--gl-dark); --ink: var(--gl-dark); --ink-2: color-mix(in srgb, var(--gl-dark) 82%, transparent); --ink-3: color-mix(in srgb, var(--gl-dark) 62%, transparent); --line: color-mix(in srgb, var(--gl-dark) 12%, transparent); --line-2: color-mix(in srgb, var(--gl-dark) 24%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gl-ink { background: var(--bg-2); color: var(--gl-dark); --ink: var(--gl-dark); --ink-2: color-mix(in srgb, var(--gl-dark) 82%, transparent); --ink-3: color-mix(in srgb, var(--gl-dark) 62%, transparent); --line: color-mix(in srgb, var(--gl-dark) 12%, transparent); --line-2: color-mix(in srgb, var(--gl-dark) 24%, transparent); } }
.gl-head { display: grid; gap: 16px; max-inline-size: 52rem; }
.gl-head .h1 { max-inline-size: 18ch; }
.gl-ph { inline-size: 100%; block-size: 100%; min-block-size: 220px; }
.gl-subnav-wrap { padding-block: 0; }
.gl-subnav { border-block: 1px solid var(--line); }
.gl-subnav ul { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin: 0; }
.gl-subnav ul::-webkit-scrollbar { display: none; }
.gl-subnav li { flex: none; }
.gl-subnav a {
  display: inline-flex; align-items: center; gap: 10px; min-block-size: 56px; padding-inline: 18px; position: relative;
  text-decoration: none; color: var(--ink-3); font-size: .9375rem; font-weight: 500; white-space: nowrap; transition: color .25s var(--ease);
}
.gl-subnav li:first-child a { padding-inline-start: 0; }
.gl-subnav a .mono { font-size: .6875rem; opacity: .7; }
.gl-subnav a::after { content: ""; position: absolute; inset-inline: 18px; inset-block-end: -1px; block-size: 2px; background: var(--accent); transform: scaleX(0); transform-origin: var(--o, left); transition: transform .45s var(--ease); }
[dir="rtl"] .gl-subnav a::after { --o: right; }
.gl-subnav li:first-child a::after { inset-inline-start: 0; }
.gl-subnav a:hover { color: var(--ink); }
.gl-subnav a:hover::after, .gl-subnav a[aria-current="page"]::after { transform: scaleX(1); }
.gl-subnav a[aria-current="page"] { color: var(--ink); }

/* text with a light sweep running through it (glass sheen) */
.gl-sheen {
  background: linear-gradient(105deg, var(--accent-ink) 0%, var(--accent-ink) 42%, var(--surface-2) 50%, var(--accent-ink) 58%, var(--accent-ink) 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gl-sheen 7s var(--ease-io) 1.2s infinite;
}
@keyframes gl-sheen { 0% { background-position: 100% 0; } 38%, 100% { background-position: 0 0; } }
html.reduced .gl-sheen { animation: none; background-position: 0 0; }

/* ---------- hub: the scroll story ---------- */
.gl-stage { position: relative; block-size: 430vh; }
.gl-stage__pin { position: sticky; inset-block-start: 0; block-size: 100svh; overflow: hidden; }
.gl-stage { --p: 0; }
.gl-stage__pin::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at calc(50% + var(--dir) * 22%) 55%, var(--accent-soft), transparent 70%);
}
:root[data-theme="dark"] .gl-stage__pin::before { background: radial-gradient(55% 60% at calc(50% + var(--dir) * 22%) 50%, var(--glow), transparent 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gl-stage__pin::before { background: radial-gradient(55% 60% at calc(50% + var(--dir) * 22%) 50%, var(--glow), transparent 72%); } }
.gl-stage__scene { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 62%; }
.gl-stage__grid { position: relative; z-index: 1; block-size: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; padding-block-start: var(--header-h); pointer-events: none; }
.gl-stage__copy, .gl-stage__steps { grid-area: 1 / 1; pointer-events: auto; }
.gl-stage__copy {
  opacity: clamp(0, calc(1 - (var(--p) - .05) * 14), 1);
  transform: translateY(calc(var(--p) * -260px));
  will-change: opacity, transform;
}
.gl-stage.is-telling .gl-stage__copy { pointer-events: none; }
.gl-hub__title { margin-block: 18px 22px; font-size: clamp(3rem, 1.4rem + 5.4vw, 7.4rem); }
:lang(ur) .gl-hub__title { font-size: clamp(2rem, 1rem + 3vw, 4rem); }
.gl-hub__title span { display: block; }
.gl-hub__l2 { font-style: italic; font-weight: 500; }
:lang(ar) .gl-hub__l2, :lang(ur) .gl-hub__l2, :lang(zh) .gl-hub__l2 { font-style: normal; }
.gl-stage__hint { display: inline-flex; align-items: center; gap: 12px; margin-block-start: 40px; }
.gl-stage__wheel { inline-size: 18px; block-size: 28px; border: 1px solid var(--line-2); border-radius: 10px; position: relative; }
.gl-stage__wheel::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 6px; inline-size: 2px; block-size: 6px; margin-inline-start: -1px; background: var(--accent); border-radius: 2px; animation: gl-wheel 1.8s var(--ease) infinite; }
@keyframes gl-wheel { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }

.gl-steps { position: relative; min-block-size: 15rem; margin: 0; }
.gl-step {
  position: absolute; inset-inline: 0; inset-block-start: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start;
  opacity: 0; transform: translateY(40px); transition: opacity .6s var(--ease), transform .8s var(--ease);
  pointer-events: none;
}
.gl-step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.gl-step.is-past { transform: translateY(-40px); }
.gl-step__n { font-size: 1rem; color: var(--accent-ink); padding-block-start: .5em; }
.gl-step .h3 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); font-family: var(--f-display); line-height: 1.05; margin-block-end: 16px; }
:lang(ar) .gl-step .h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.35; }
:lang(ur) .gl-step .h3 { line-height: 1.8; font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); }
.gl-step p { color: var(--ink-2); max-inline-size: 34ch; font-size: var(--t-lead); }
.gl-stage__rail { position: absolute; inset-inline-end: var(--gutter); inset-block: calc(var(--header-h) + 40px) 40px; inline-size: 1px; background: var(--line); }
.gl-stage__bar { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: 50% 0; }

/* scene fallback: an exploded drawing */
.gl-fb { display: grid; place-items: center; }
.gl-fb svg { inline-size: min(88%, 620px); }
.gl-fb__pane { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent); stroke-width: 1.4; }
.gl-fb__coat { fill: color-mix(in srgb, var(--accent-2) 22%, transparent); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 5 4; }
.gl-fb__seal { fill: none; stroke: var(--brand); stroke-width: 6; }
.gl-fb__pillars circle { fill: var(--ink); }
.gl-fb__axis { stroke: var(--line-2); stroke-dasharray: 3 6; }

@media (max-width: 900px) {
  .gl-stage__scene { inset-inline: 0; inset-block: calc(var(--header-h) - 10px) auto; inline-size: 100%; block-size: 46svh; }
  .gl-stage__grid { grid-template-columns: minmax(0, 1fr); align-items: end; padding-block: 0 48px; }
  .gl-stage__copy { align-self: end; }
  .gl-hub__title { font-size: clamp(2.6rem, 11vw, 4.2rem); margin-block: 12px 14px; }
  .gl-stage .lead { font-size: 1rem; }
  .gl-stage__hint { display: none; }
  .gl-steps { min-block-size: 13rem; }
  .gl-step { gap: 14px; }
  .gl-stage__rail { inset-block: auto 0; inset-inline: 0; inline-size: auto; block-size: 2px; }
  .gl-stage__bar { transform-origin: 0 50%; }
}
@media (max-width: 900px) and (max-height: 760px) { .gl-stage .lead { display: none; } }
/* landscape phones: scene beside the copy, copy clears the header so crumbs never meet the logo */
@media (orientation: landscape) and (max-height: 500px) {
  .gl-stage__scene { inset-block: 0; inset-inline: auto 0; inline-size: 44%; block-size: 100%; }
  .gl-stage__grid { grid-template-columns: minmax(0, 56%); align-items: center; padding-block: var(--header-h) 16px; }
  .gl-stage__copy { align-self: center; }
  .gl-hub__title { font-size: clamp(2rem, 1rem + 6svh, 3rem); margin-block: 6px 8px; }
  .gl-steps { min-block-size: 0; }
}
html.reduced .gl-stage__wheel::after { animation: none; }
/* reduced motion: no pinning, the steps become a plain list */
html.reduced .gl-stage { block-size: auto; }
html.reduced .gl-stage__pin { position: relative; block-size: auto; min-block-size: 100svh; overflow: visible; }
html.reduced .gl-stage__grid { grid-template-columns: minmax(0, 1fr); padding-block: calc(var(--header-h) + 48px) 64px; }
html.reduced .gl-stage__copy, html.reduced .gl-stage__steps { grid-area: auto; opacity: 1; transform: none; max-inline-size: 40rem; }
html.reduced .gl-stage__scene { position: relative; inset: auto; inline-size: 100%; block-size: 60vh; }
html.reduced .gl-steps { min-block-size: 0; display: grid; gap: 28px; margin-block-start: 48px; }
html.reduced .gl-step { position: static; opacity: 1; transform: none; }
html.reduced .gl-stage__rail { display: none; }

/* ---------- hub: three families ---------- */
.gl-fam .gl-head { margin-block-end: clamp(32px, 5vw, 64px); }
.gl-fam__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--ink); border: 2px solid var(--ink); }
.gl-fam__panel {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate;
  min-block-size: clamp(480px, 74vh, 760px); padding: clamp(20px, 2.4vw, 36px);
  background: var(--ink); color: var(--bg); text-decoration: none;
  --fx-spot-fill: color-mix(in srgb, var(--accent-2) 16%, transparent);
  --fx-spot-edge: var(--accent-2);
}
:root[data-theme="dark"] .gl-fam__panel { background: var(--surface); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gl-fam__panel { background: var(--surface); color: var(--ink); } }
.gl-fam__media { position: absolute; inset: 0; z-index: -1; clip-path: inset(0 33% 0 33%); transition: clip-path 1s var(--ease-io); }
.gl-fam__media picture, .gl-fam__media img, .gl-fam__media .ph { inline-size: 100%; block-size: 100%; object-fit: cover; }
.gl-fam__media img { filter: grayscale(1) contrast(1.05) brightness(.95); transform: scale(1.12); transition: filter .9s var(--ease), transform 1.4s var(--ease); }
.gl-fam__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.82), rgba(10,10,10,.15) 55%, rgba(10,10,10,.35)); opacity: .9; transition: opacity .8s var(--ease); }
.gl-fam__panel:hover .gl-fam__media, .gl-fam__panel:focus-visible .gl-fam__media, .gl-fam__panel.is-open .gl-fam__media { clip-path: inset(0); }
.gl-fam__panel:hover .gl-fam__media img, .gl-fam__panel:focus-visible .gl-fam__media img, .gl-fam__panel.is-open .gl-fam__media img { filter: none; transform: scale(1); }
.gl-fam__panel:hover, .gl-fam__panel:focus-visible, .gl-fam__panel.is-open { color: #F4EADC; }
.gl-fam__shine {
  position: absolute; inset-block: -20%; inset-inline-start: 0; inline-size: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.0) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 70%, transparent 100%);
  transform: translateX(calc(var(--dir) * -130%)) skewX(-12deg); transition: transform 1.2s var(--ease-io);
}
.gl-fam__panel:hover .gl-fam__shine, .gl-fam__panel:focus-visible .gl-fam__shine { transform: translateX(calc(var(--dir) * 330%)) skewX(-12deg); }
.gl-fam__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; z-index: 2; }
.gl-fam__top .mono { font-size: .875rem; opacity: .75; }
.gl-fam__tag { font-size: .8125rem; padding: 5px 12px; border: 1px solid currentColor; border-radius: 99px; opacity: .85; }
.gl-fam__body { position: relative; z-index: 2; display: grid; gap: 14px; }
.gl-fam__t { font: 600 clamp(2rem, 1.2rem + 2.2vw, 3.4rem)/1.02 var(--f-display); letter-spacing: -.01em; max-inline-size: 11ch; }
:lang(ar) .gl-fam__t { font-weight: 700; line-height: 1.3; letter-spacing: 0; }
:lang(ur) .gl-fam__t { line-height: 1.8; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); letter-spacing: 0; }
.gl-fam__body p { max-inline-size: 34ch; opacity: .8; font-size: .975rem; }
.gl-fam__go { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; margin-block-start: 6px; }
.gl-fam__go svg { inline-size: 1em; block-size: 1em; transition: transform .4s var(--ease); }
.gl-fam__panel:hover .gl-fam__go svg { transform: scaleX(var(--dir)) translateX(6px); }
.touch .gl-fam__media { clip-path: inset(0 30% 0 30%); }
@media (max-width: 900px) {
  .gl-fam__grid { grid-template-columns: minmax(0, 1fr); }
  .gl-fam__panel { min-block-size: 440px; }
  .gl-fam__media { clip-path: inset(0 0 0 62%); }
  [dir="rtl"] .gl-fam__media { clip-path: inset(0 62% 0 0); }
  .gl-fam__panel.is-open .gl-fam__media { clip-path: inset(0); }
}
html.reduced .gl-fam__media, html.reduced .gl-fam__shine { transition: none; }

/* ---------- hub: climate interactive ---------- */
.gl-cl__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-block-end: clamp(32px, 5vw, 64px); }
.gl-cl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.gl-cl__modes { display: grid; border-block-start: 1px solid var(--ink); }
.gl-cl__modes button {
  display: flex; align-items: baseline; gap: 16px; min-block-size: 64px; padding-block: 14px; text-align: start;
  font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.1 var(--f-display); color: var(--ink-3);
  border-block-end: 1px solid var(--line); position: relative; transition: color .3s var(--ease);
}
:lang(ar) .gl-cl__modes button, :lang(ur) .gl-cl__modes button { line-height: 1.6; }
.gl-cl__modes button .mono { font-size: .75rem; font-family: var(--f-mono); color: var(--ink-3); }
.gl-cl__modes button::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; background: var(--accent); transform: scaleX(0); transform-origin: var(--o, left); transition: transform .5s var(--ease); }
[dir="rtl"] .gl-cl__modes button::after { --o: right; }
.gl-cl__modes button:hover { color: var(--ink-2); }
.gl-cl__modes button[aria-selected="true"] { color: var(--ink); }
.gl-cl__modes button[aria-selected="true"]::after { transform: scaleX(1); }
.gl-cl__desc { margin-block-start: 24px; color: var(--ink-2); min-block-size: 8.5em; }
.gl-cl__fig { background: var(--surface); border: 1px solid var(--line); padding: clamp(14px, 2vw, 28px); display: grid; gap: 14px; }
.gl-cl__labels { display: flex; justify-content: space-between; gap: 12px; }
.gl-cl__lab { font: 600 .8125rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.gl-cl__lab::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--brand); }
.gl-cl__lab[data-k="vac"]::before { background: var(--accent); }
:lang(ar) .gl-cl__lab, :lang(ur) .gl-cl__lab, :lang(zh) .gl-cl__lab { letter-spacing: 0; text-transform: none; font-size: .9375rem; }
.gl-cl__stage { position: relative; }
.gl-cl__svg { inline-size: 100%; block-size: auto; touch-action: pan-y; cursor: grab; user-select: none; overflow: visible; }
.gl-cl.is-drag .gl-cl__svg { cursor: grabbing; }
.gl-cl__cool { position: absolute; inset-block-start: 4px; inset-inline-start: 50%; transform: translateX(calc(var(--dir) * -50%)); color: var(--ink-3); font-size: .75rem; opacity: 0; transition: opacity .4s; }
.gl-cl[data-mode="energy"] .gl-cl__cool { opacity: 1; }
.gl-stop-warm { stop-color: var(--brand); stop-opacity: .85; }
.gl-stop-clear { stop-color: var(--surface); stop-opacity: 0; }
.gl-stop-sun { stop-color: var(--brand); stop-opacity: .55; }
.gl-cl__in { fill: var(--bg); }
.gl-cl__warm { opacity: 0; transition: opacity .5s var(--ease); }
.gl-cl__wall { stroke: var(--ink); stroke-width: 2; fill: none; }
.gl-cl__wallblk { fill: var(--ink); }
.gl-cl__ground { stroke: var(--ink); stroke-width: 2; }
.gl-cl__arc { fill: none; stroke: var(--line-2); stroke-dasharray: 2 6; }
.gl-cl__pane line { stroke: var(--accent); stroke-width: 3; }
.gl-cl__room.is-ord .gl-cl__pane2 { display: none; }
.gl-cl__room.is-ord .gl-cl__pane line { stroke: var(--ink-3); }
.gl-cl__rays line { stroke: var(--brand); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: calc(var(--light, .6) * .9); }
.gl-cl__sun .gl-cl__disc { fill: var(--brand); stroke: var(--surface); stroke-width: 3; }
.gl-cl__patch { fill: color-mix(in srgb, var(--brand) 22%, var(--surface)); opacity: calc(var(--light, .6) * .55); transition: fill .4s; }
.gl-cl__heatin path, .gl-cl__heatback path { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 9 7; animation: gl-flow 1.4s linear infinite; }
.gl-cl__heatback path { stroke: color-mix(in srgb, var(--brand) 70%, var(--ink)); }
@keyframes gl-flow { to { stroke-dashoffset: -32; } }
.gl-cl__heatin, .gl-cl__heatback, .gl-cl__glare, .gl-cl__noisein, .gl-cl__noise, .gl-cl__ac { opacity: 0; transition: opacity .5s var(--ease); }
.gl-cl__glare circle { fill: color-mix(in srgb, var(--accent-2) 30%, var(--surface)); }
.gl-cl__glare circle + circle { fill: var(--surface); }
.gl-cl__noisein path, .gl-cl__noise .gl-cl__wv { fill: none; stroke: var(--ink-2); stroke-width: 1.6; }
.gl-cl__noise path:first-child { stroke: var(--ink); stroke-width: 3; }
.gl-cl__noise circle { fill: var(--ink); }
.gl-cl__noise .gl-cl__wv { transform-box: fill-box; transform-origin: 50% 100%; animation: gl-pulse 2.2s var(--ease) infinite; }
.gl-cl__noise .gl-cl__wv:nth-child(4) { animation-delay: .35s; } .gl-cl__noise .gl-cl__wv:nth-child(5) { animation-delay: .7s; }
@keyframes gl-pulse { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.gl-cl__ac rect:first-child { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
.gl-cl__ac line { stroke: var(--ink-3); }
.gl-cl__meterbg { fill: var(--bg-2); }
.gl-cl__meter { fill: var(--brand); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s var(--ease); }
.gl-cl__room.is-vac .gl-cl__meter { fill: var(--accent); transform: scaleY(calc(.1 + var(--heat, .5) * .22)); }
.gl-cl__room.is-ord .gl-cl__meter { transform: scaleY(calc(.2 + var(--heat, .5) * .8)); }
/* modes */
.gl-cl[data-mode="heat"] .is-ord .gl-cl__heatin { opacity: calc(.15 + var(--heat, .5) * .85); }
.gl-cl[data-mode="heat"] .is-vac .gl-cl__heatback { opacity: calc(.15 + var(--heat, .5) * .85); }
.gl-cl[data-mode="heat"] .is-ord .gl-cl__warm, .gl-cl[data-mode="energy"] .is-ord .gl-cl__warm { opacity: calc(var(--heat, .5) * .75); }
.gl-cl[data-mode="heat"] .is-vac .gl-cl__warm, .gl-cl[data-mode="energy"] .is-vac .gl-cl__warm { opacity: calc(var(--heat, .5) * .1); }
.gl-cl[data-mode="glare"] .is-ord .gl-cl__glare { opacity: calc(var(--light, .6) * .9); }
.gl-cl[data-mode="glare"] .is-ord .gl-cl__patch { fill: color-mix(in srgb, var(--accent-2) 40%, var(--surface)); opacity: calc(var(--light, .6) * .95); }
.gl-cl[data-mode="glare"] .is-vac .gl-cl__patch { opacity: calc(var(--light, .6) * .4); }
.gl-cl[data-mode="noise"] .gl-cl__noise, .gl-cl[data-mode="noise"] .is-ord .gl-cl__noisein { opacity: 1; }
.gl-cl[data-mode="noise"] .gl-cl__rays, .gl-cl[data-mode="noise"] .gl-cl__patch { opacity: .15; }
.gl-cl[data-mode="energy"] .gl-cl__ac { opacity: 1; }
.gl-cl__slider { display: grid; gap: 6px; }
.gl-cl__slider input { inline-size: 100%; accent-color: var(--brand); min-block-size: 44px; cursor: pointer; }
.gl-cl__ticks { display: flex; justify-content: space-between; }
.gl-cl__fig figcaption { border-block-start: 1px solid var(--line); padding-block-start: 12px; }
@media (max-width: 900px) {
  .gl-cl__head, .gl-cl { grid-template-columns: minmax(0, 1fr); }
  .gl-cl__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .gl-cl__modes button { font-size: 1.35rem; min-block-size: 56px; }
  .gl-cl__desc { min-block-size: 0; margin-block-start: 16px; }
}
html.reduced .gl-cl__heatin path, html.reduced .gl-cl__heatback path, html.reduced .gl-cl__noise .gl-cl__wv { animation: none; }

/* ---------- hub: the one distinction ---------- */
.gl-dist { border-block: 1px solid var(--ink); }
.gl-dist__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) auto; gap: clamp(20px, 4vw, 64px); align-items: center; }
.gl-dist__text { font: 500 clamp(1.5rem, 1rem + 1.8vw, 2.6rem)/1.25 var(--f-display); color: var(--ink); max-inline-size: 30ch; text-wrap: balance; }
:lang(ar) .gl-dist__text { font-weight: 700; line-height: 1.6; }
:lang(ur) .gl-dist__text { line-height: 2; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); }
@media (max-width: 900px) { .gl-dist__in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- closing: CTA + next page ---------- */
.gl-close { display: grid; gap: clamp(48px, 7vw, 120px); }
.gl-close__cta { max-inline-size: 58rem; }
.gl-close__cta .h1 { max-inline-size: 16ch; margin-block-end: 20px; }
.gl-next {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px; overflow: hidden;
  padding-block: clamp(24px, 4vw, 48px); border-block: 1px solid var(--ink); text-decoration: none; color: var(--ink);
}
.gl-next .eyebrow { grid-column: 1 / -1; }
.gl-next__t { font: 600 clamp(2.2rem, 1.2rem + 4.4vw, 6rem)/1 var(--f-display); letter-spacing: -.02em; transition: transform .6s var(--ease); }
:lang(ar) .gl-next__t { font-weight: 700; line-height: 1.35; letter-spacing: 0; }
:lang(ur) .gl-next__t { line-height: 1.8; font-size: clamp(1.8rem, 1rem + 3vw, 3.6rem); letter-spacing: 0; }
.gl-next__a svg { inline-size: clamp(32px, 4vw, 64px); block-size: auto; transition: transform .6s var(--ease); }
.gl-next:hover .gl-next__t { transform: translateX(calc(var(--dir) * 12px)); }
.gl-next:hover .gl-next__a svg { transform: scaleX(var(--dir)) translateX(10px); }
.gl-next:hover { color: var(--accent-ink); }

/* distribution badge (rendered only through SBL.excl) */
.gl-excl { margin-block: 18px 4px; }
.gl-excl .badge-excl { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.gl-fam__body .badge-excl { justify-self: start; border-color: var(--accent-2); color: inherit; background: rgba(10,10,10,.35); }

/* ==========================================================================
   PV page: full-bleed facade, pointer glare, layer lift, day/night, statement
   ========================================================================== */
.pv-hero { position: relative; min-block-size: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #0B0807; color: #F4EADC; --gx: .5;
  --ink: #F4EADC; --ink-2: #E8DCCB; --ink-3: rgba(244,234,220,.7); --line-2: rgba(244,234,220,.35); }
.pv-hero__media { position: absolute; inset: 0; }
.pv-hero__media picture, .pv-hero__media img, .pv-hero__media .ph { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pv-hero__media img { transform: scale(1.06); animation: pv-settle 2.4s var(--ease) both; }
@keyframes pv-settle { from { transform: scale(1.16); filter: brightness(.6); } to { transform: scale(1.06); filter: none; } }
.pv-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,6,5,.92) 0%, rgba(8,6,5,.55) 38%, rgba(8,6,5,.1) 70%, rgba(8,6,5,.35) 100%); }
/* a narrow band of reflected light that follows the pointer across the glass */
.pv-hero__glare {
  position: absolute; inset-block: -10%; inset-inline-start: 0; inline-size: 34%; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 0%, rgba(255,240,215,0) 35%, rgba(255,240,215,.34) 49%, rgba(255,255,255,.55) 50%, rgba(255,240,215,.18) 53%, transparent 70%);
  transform: translateX(calc(var(--gx) * 300% - 100%)) skewX(-14deg);
  opacity: 0; transition: opacity .8s var(--ease);
  animation: pv-pass 3.2s var(--ease-io) .6s 1 both;
}
[dir="rtl"] .pv-hero__glare { transform: translateX(calc(var(--gx) * 300% - 294%)) skewX(-14deg); }
.pv-hero.is-lit .pv-hero__glare { opacity: 1; animation: none; }
@keyframes pv-pass { 0% { opacity: 0; transform: translateX(-120%) skewX(-14deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(320%) skewX(-14deg); } }
html.reduced .pv-hero__glare, html.reduced .pv-hero__media img { animation: none; }
.pv-hero__in { position: relative; z-index: 2; padding-block: calc(var(--header-h) + 80px) clamp(40px, 6vw, 80px); }
.pv-hero__in .crumbs { color: rgba(244,234,220,.7); }
.pv-hero__in .crumbs a:hover { color: #F4EADC; }
.pv-hero__title { color: #F4EADC; font-size: clamp(3rem, 1rem + 7vw, 9rem); max-inline-size: 13ch; margin-block: 16px 28px; }
:lang(ur) .pv-hero__title { font-size: clamp(2.2rem, 1rem + 4vw, 5rem); }
.pv-hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; border-block-start: 1px solid rgba(244,234,220,.25); padding-block-start: 24px; }
.pv-hero__foot .lead { color: rgba(244,234,220,.85); }
.pv-hero__act { display: grid; gap: 14px; justify-items: start; }
.pv-hero__act .gl-excl { margin: 0; }
.pv-hero .badge-excl { color: #F4EADC; border-color: var(--accent-2); background: rgba(10,10,10,.35); }
.pv-hero .btn--ghost { color: #F4EADC; border-color: rgba(244,234,220,.4); }
.pv-hero .btn--ghost:hover { background: #F4EADC; color: #120E0C; }
.pv-hero .btn:not(.btn--ghost) { background: #F4EADC; color: #0A0A0A; border-color: #F4EADC; }
:root[data-theme="dark"] .pv-hero .btn:not(.btn--ghost) { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pv-hero .btn:not(.btn--ghost) { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); } }
.pv-hero__cap { position: absolute; z-index: 2; inset-inline-end: var(--gutter); inset-block-start: calc(var(--header-h) + 20px); color: rgba(244,234,220,.7); font-size: .75rem; }
@media (max-width: 900px) { .pv-hero__foot { grid-template-columns: minmax(0, 1fr); } }

.pv-plain__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-block-start: 28px; border-block-start: 1px solid var(--ink); }
.pv-plain__list li { padding-block: 28px; padding-inline: 0 clamp(16px, 3vw, 48px); display: grid; gap: 14px; align-content: start; }
.pv-plain__list li + li { border-inline-start: 1px solid var(--line); padding-inline-start: clamp(16px, 3vw, 48px); }
.pv-plain__list .mono { color: var(--accent-ink); }
.pv-plain__list p { color: var(--ink-2); max-inline-size: 30ch; }
@media (max-width: 900px) { .pv-plain__list { grid-template-columns: minmax(0, 1fr); } .pv-plain__list li + li { border-inline-start: 0; border-block-start: 1px solid var(--line); padding-inline-start: 0; } }

.pv-build { overflow: hidden; }
.pv-build__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.pv-build__hint { margin-block: 14px 24px; }
.pv-build__scene { block-size: clamp(420px, 70vh, 720px); }
.pv-layers { border-block-start: 1px solid var(--line-2); }
.pv-layer {
  inline-size: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; text-align: start;
  padding-block: 14px; border-block-end: 1px solid var(--line); color: var(--ink-3); transition: color .3s var(--ease);
}
.pv-layer .mono { font-size: .75rem; padding-block-start: .3em; }
.pv-layer__t { font: 600 1.25rem/1.3 var(--f-body); color: inherit; }
.pv-layer__d { grid-column: 2; font-size: .9375rem; max-block-size: 0; opacity: 0; overflow: hidden; transition: max-block-size .5s var(--ease), opacity .4s var(--ease); }
.pv-layer:hover, .pv-layer.is-on, .pv-layer[aria-pressed="true"] { color: var(--ink); }
.pv-layer.is-on .mono, .pv-layer[aria-pressed="true"] .mono { color: var(--accent-2); }
.pv-layer.is-on .pv-layer__d, .pv-layer[aria-pressed="true"] .pv-layer__d, .touch .pv-layer__d { max-block-size: 6em; opacity: .8; }
@media (max-width: 900px) { .pv-build__grid { grid-template-columns: minmax(0, 1fr); } .pv-build__scene { order: -1; block-size: 52svh; } }

.pv-dn__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
.pv-dn__fig { display: grid; gap: 10px; }
.pv-dn__cmp { aspect-ratio: 16 / 9; border-radius: var(--r-1); overflow: hidden; background: var(--bg-2); }
.pv-dn__img { position: absolute; inset: 0; }
.pv-dn__img:first-child { position: relative; block-size: 100%; }
.pv-dn__img picture, .pv-dn__img img, .pv-dn__img .ph { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 700px) { .pv-dn__cmp { aspect-ratio: 4 / 5; } }

.pv-dist__head { display: grid; gap: 16px; max-inline-size: 56rem; margin-block-end: clamp(28px, 4vw, 56px); }
.pv-dist__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--ink); }
.pv-dist__col { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 56px); display: grid; gap: 14px; align-content: start; }
.pv-dist__col + .pv-dist__col { border-inline-start: 1px solid var(--ink); }
.pv-dist__col.is-pv { background: var(--ink); color: var(--bg); --ink-3: color-mix(in srgb, var(--bg) 60%, transparent); }
.pv-dist__name { font: 600 clamp(1.6rem, 1rem + 2vw, 2.8rem)/1.1 var(--f-display); margin-block-end: 12px; }
:lang(ar) .pv-dist__name { font-weight: 700; line-height: 1.4; }
:lang(ur) .pv-dist__name { line-height: 1.9; }
.pv-dist__row { display: flex; align-items: center; gap: 14px; font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); font-weight: 600; padding-block: 10px; border-block-start: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.pv-dist__row.is-no { color: var(--ink-3); font-weight: 500; }
.pv-dist__y { display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--accent); color: var(--bg); flex: none; }
.is-pv .pv-dist__y { background: var(--accent-2); color: var(--ink-inv); }
.pv-dist__y svg { inline-size: 18px; block-size: 18px; }
.pv-dist__n { inline-size: 34px; block-size: 34px; border-radius: 50%; border: 1px dashed currentColor; flex: none; position: relative; }
.pv-dist__n::after { content: ""; position: absolute; inset-inline: 8px; inset-block-start: 50%; block-size: 1.5px; background: currentColor; }
@media (max-width: 700px) { .pv-dist__cols { grid-template-columns: minmax(0, 1fr); } .pv-dist__col + .pv-dist__col { border-inline-start: 0; border-block-start: 1px solid var(--ink); } }

.pv-fits .gl-head { margin-block-end: clamp(32px, 5vw, 64px); }
.pv-fits__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; }
.pv-fit { display: grid; gap: 16px; }
.pv-fit--0 { grid-column: 1 / span 7; }
.pv-fit--1 { grid-column: 8 / span 5; margin-block-start: clamp(40px, 10vw, 160px); }
.pv-fit--2 { grid-column: 3 / span 6; }
.pv-fit--0 .pv-fit__m { aspect-ratio: 4 / 3; }
.pv-fit--1 .pv-fit__m { aspect-ratio: 3 / 4; }
.pv-fit--2 .pv-fit__m { aspect-ratio: 16 / 10; }
.pv-fit__m picture, .pv-fit__m img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pv-fit__m .cap { background: rgb(10 10 10 / .6); padding: 2px 6px; border-radius: 2px; text-shadow: none; }
.pv-fit figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; }
.pv-fit figcaption .mono { color: var(--accent-ink); padding-block-start: .4em; }
.pv-fit figcaption p { grid-column: 2; color: var(--ink-2); max-inline-size: 36ch; }
@media (max-width: 900px) { .pv-fit--0, .pv-fit--1, .pv-fit--2 { grid-column: 1 / -1; margin: 0; } }

.pv-why__in { display: grid; gap: 28px; }
.pv-why__q { position: relative; overflow: hidden; margin: 0; padding-block: 12px; }
.pv-why__q p { font: 500 clamp(1.8rem, 1rem + 3.4vw, 4.6rem)/1.12 var(--f-display); letter-spacing: -.01em; max-inline-size: 24ch; color: var(--ink); text-wrap: balance; }
:lang(ar) .pv-why__q p { font-weight: 700; line-height: 1.5; letter-spacing: 0; }
:lang(ur) .pv-why__q p { line-height: 2; font-size: clamp(1.5rem, 1rem + 2vw, 3rem); letter-spacing: 0; }

.pv-spec__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.pv-spec__t { max-inline-size: 16ch; margin-block: 16px 20px; }
.pv-spec__steps { border-block-start: 1px solid var(--ink); }
.pv-spec__steps li { display: flex; gap: 18px; align-items: baseline; padding-block: 18px; border-block-end: 1px solid var(--line); font-size: 1.125rem; font-weight: 500; }
.pv-spec__steps .mono { color: var(--accent-ink); }
.pv-spec__note { margin-block-start: 18px; max-inline-size: 44ch; }
@media (max-width: 900px) { .pv-spec__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Vacuum page: a technical drawing sheet. Section drawn on scroll,
   comparison, to-scale bars, manufacturer table that draws its build-up.
   ========================================================================== */
.vc-hero { padding-block: calc(var(--header-h) + clamp(32px, 6vw, 88px)) clamp(40px, 6vw, 80px); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; }
.vc-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: end; }
.vc-hero__title { margin-block: 16px 24px; }
.vc-hero__note { display: flex; gap: 12px; align-items: flex-start; margin-block-start: 22px; padding: 14px 16px; border-inline-start: 2px solid var(--accent); background: var(--surface); max-inline-size: 46ch; font-size: .9375rem; color: var(--ink-2); }
.vc-hero__note svg { inline-size: 20px; block-size: 20px; flex: none; color: var(--accent-ink); margin-block-start: 3px; }
.vc-hero__fig { display: grid; gap: 10px; }
.vc-hero__media { aspect-ratio: 4 / 5; box-shadow: var(--shadow-2); }
@media (max-width: 900px) { .vc-hero__grid { grid-template-columns: minmax(0, 1fr); } .vc-hero__media { aspect-ratio: 4 / 3; } }

.vc-how__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.vc-how__grid .gl-head { grid-column: 1; }
.vc-x { grid-column: 2; grid-row: 1 / span 2; position: relative; margin: 0; }
.vc-x__svg { inline-size: 100%; block-size: auto; overflow: visible; }
.vc-x__pane { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--ink); stroke-width: 1.4; }
.vc-x__lowe { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 2 3; }
.vc-x__pil rect { fill: var(--ink); }
.vc-x__seal { fill: var(--brand); stroke: var(--ink); stroke-width: 1; }
.vc-x__dim, .vc-x__lead { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.vc-x__heat path { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; }
.vc-x__heat .vc-x__back { stroke-dasharray: 5 5; }
.vc-x__x path { stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; }
.vc-x__l { position: absolute; font: 600 .75rem/1.2 var(--f-mono); letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; transform: translateY(-50%); }
:lang(ar) .vc-x__l, :lang(ur) .vc-x__l { font-family: var(--f-body); font-size: .875rem; letter-spacing: 0; }
:lang(ur) .vc-x__l { line-height: 2; }
.vc-x__l--out { inset-inline-start: 2%; inset-block-start: 4%; color: var(--ink-3); }
.vc-x__l--in { inset-inline-end: 2%; inset-block-start: 4%; color: var(--ink-3); }
.vc-x__l--size { inset-inline-start: 45%; inset-block-start: 2%; transform: translate(-50%, -60%); }
.vc-x__l--temp { inset-inline-end: calc(100% - 25%); inset-block-start: 52.6%; }
.vc-x__l--lowe { inset-inline-start: 67.5%; inset-block-start: 18.4%; }
.vc-x__l--pil { inset-inline-start: 70.5%; inset-block-start: 51.6%; }
.vc-x__l--seal { inset-inline-start: 70.5%; inset-block-start: 7.9%; }
.vc-x__l--vac { inset-inline-start: 70.5%; inset-block-start: 73.7%; }
.vc-modes { grid-column: 1; display: grid; gap: 0; border-block-start: 1px solid var(--ink); }
.vc-modes li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; padding-block: 16px; border-block-end: 1px solid var(--line); align-items: baseline; }
.vc-modes .mono { color: var(--ink-3); font-size: .75rem; }
.vc-modes p { grid-column: 2 / -1; color: var(--ink-2); font-size: .9375rem; }
.vc-modes__s { font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--ink); color: var(--bg); }
.vc-modes__s.is-back { background: var(--accent-ink); }
@media (max-width: 900px) {
  .vc-how__grid { grid-template-columns: minmax(0, 1fr); }
  .vc-how__grid .gl-head, .vc-x, .vc-modes { grid-column: 1; grid-row: auto; }
  .vc-x__l { font-size: .625rem; }
}

.vc-cmp .gl-head { margin-block-end: clamp(28px, 4vw, 56px); }
.vc-cmp__rows { border-block-start: 1px solid var(--ink); }
.vc-cmp__row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 16px; padding-block: 22px; border-block-end: 1px solid var(--line); align-items: center; position: relative; }
.vc-cmp__row--head { padding-block: 12px; font: 600 .75rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
:lang(ar) .vc-cmp__row--head, :lang(ur) .vc-cmp__row--head, :lang(zh) .vc-cmp__row--head { letter-spacing: 0; text-transform: none; font-size: .875rem; }
.vc-cmp__row span { color: var(--ink-2); font-size: .9375rem; }
.vc-cmp__row .vc-cmp__name { display: flex; align-items: center; gap: 14px; font: 600 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.2 var(--f-display); color: var(--ink) !important; }
:lang(ar) .vc-cmp__row .vc-cmp__name, :lang(ur) .vc-cmp__row .vc-cmp__name { font-family: var(--f-body); font-size: 1.05rem; }
.vc-cmp__glyph { inline-size: 30px; block-size: 40px; flex: none; position: relative; }
.vc-cmp__glyph::before, .vc-cmp__glyph::after { content: ""; position: absolute; inset-block: 0; inline-size: 5px; background: color-mix(in srgb, var(--accent) 40%, transparent); border: 1px solid var(--ink); }
.vc-cmp__glyph::before { inset-inline-start: 4px; }
.vc-cmp__glyph::after { inset-inline-end: 4px; }
.is-low .vc-cmp__glyph::after { display: none; }
.is-mid .vc-cmp__glyph { background: linear-gradient(90deg, transparent 9px, color-mix(in srgb, var(--ink) 8%, transparent) 9px 21px, transparent 21px); }
.is-high .vc-cmp__glyph::before, .is-high .vc-cmp__glyph::after { inset-inline: 9px auto; }
.is-high .vc-cmp__glyph::after { inset-inline: auto 9px; }
.vc-cmp__row .vc-cmp__lvl { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink) !important; }
.vc-cmp__lvl i { display: inline-flex; gap: 3px; }
.vc-cmp__lvl b { inline-size: 7px; block-size: 18px; background: var(--line-2); }
.is-low .vc-cmp__lvl b:first-child, .is-mid .vc-cmp__lvl b:nth-child(-n+2), .is-high .vc-cmp__lvl b { background: var(--accent); }
.vc-cmp__row.is-high { background: var(--surface); }
.vc-cmp__row.is-high::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--accent); }
.vc-cmp__row.is-high > :first-child { padding-inline-start: 16px; }
@media (max-width: 900px) {
  .vc-cmp__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vc-cmp__row--head { display: none; }
  .vc-cmp__name, .vc-cmp__lvl { grid-column: 1 / -1; }
}

.vc-perf__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.vc-perf__table { grid-column: 1 / -1; }
.vc-scope { display: inline-flex; border: 1px solid var(--ink); border-radius: var(--r-1); margin-block-start: 28px; }
.vc-scope button { min-block-size: 44px; padding-inline: 18px; font-weight: 600; font-size: .9375rem; color: var(--ink-2); transition: background-color .3s var(--ease), color .3s var(--ease); }
.vc-scope button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.vc-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-block-start: 20px; }
.vc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.vc-legend span::before { content: ""; inline-size: 18px; block-size: 8px; background: var(--ink-3); }
.vc-legend .is-vac::before { background: var(--accent); }
.vc-bars { display: grid; gap: 26px; padding: clamp(18px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line); }
.vc-bars__h { font-weight: 600; margin-block-end: 8px; }
.vc-bars__h .mono { color: var(--ink-3); font-weight: 400; }
.vc-bar { display: flex; align-items: center; gap: 12px; block-size: 26px; margin-block-start: 6px; }
.vc-bar__f { flex: 1; block-size: 100%; position: relative; }
.vc-bar__f::before { content: ""; position: absolute; inset: 0; background: var(--ink-3); transform: scaleX(var(--v, 0)); transform-origin: var(--o, left); transition: transform 1s var(--ease-io); }
[dir="rtl"] .vc-bar__f::before { --o: right; }
.is-vac .vc-bar__f::before { background: var(--accent); }
.vc-bar__v { min-inline-size: 3.5em; text-align: end; font-size: .9375rem; color: var(--ink); }
.vc-perf .spec .grp th { padding-block: 18px 8px; font: 600 .75rem/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
:lang(ar) .vc-perf .spec .grp th, :lang(ur) .vc-perf .spec .grp th, :lang(zh) .vc-perf .spec .grp th { letter-spacing: 0; text-transform: none; font-size: .875rem; }
.spec thead th .mono { font-size: .6875rem; text-transform: none; letter-spacing: 0; }
@media (max-width: 900px) { .vc-perf__grid { grid-template-columns: minmax(0, 1fr); } }

.vc-cfg__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-block-end: clamp(28px, 4vw, 56px); }
.vc-cfg__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.vc-filter { margin-block-end: 16px; }
.vc-filter .chip { min-block-size: 40px; cursor: pointer; color: var(--ink-2); }
.vc-filter .chip[aria-pressed="true"] { background: var(--ink); color: var(--gl-dark); border-color: var(--ink); }
.gl-ink .table-wrap { border-color: var(--ink); }
.vc-cfg__t { min-inline-size: 760px; }
.vc-cfg__t td.mono { white-space: nowrap; }
.vc-cfg__t tbody tr { cursor: pointer; }
.vc-cfg__t tbody tr.is-sel { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.vc-cfg__t tbody tr:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.vc-cfg__pick { min-block-size: 36px; text-align: start; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.vc-cfg__draw { position: sticky; inset-block-start: calc(var(--header-h) + 24px); display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line-2); }
.vc-cfg__svg svg { inline-size: 100%; block-size: auto; max-block-size: 360px; }
.vc-b__glass { fill: color-mix(in srgb, var(--accent) 55%, transparent); stroke: var(--ink); stroke-width: 1.4; }
.vc-b__lowe { stroke: var(--accent-2); stroke-width: 3; }
.vc-b__lowe.is-d { stroke-width: 5; stroke-dasharray: 3 2; }
.vc-b__air { fill: color-mix(in srgb, var(--ink) 6%, transparent); stroke: var(--line-2); }
.vc-b__spacer { fill: var(--ink-3); }
.vc-b__vac { fill: var(--brand); }
.vc-b__pil { fill: var(--ink); }
.vc-b__svg text { fill: var(--ink-2); font: 600 11px var(--f-mono); text-anchor: middle; }
.vc-b__svg .vc-b__side { font-size: 10px; fill: var(--ink-3); text-anchor: start; }
.vc-b__svg .vc-b__side:first-of-type { text-anchor: end; }
.vc-b__svg .vc-b__vt { fill: var(--brand); }
.vc-cfg__svg .vc-b__svg > * { transition: opacity .5s var(--ease), transform .6s var(--ease); transform-box: fill-box; transform-origin: 50% 50%; }
.vc-cfg__svg:not(.is-in) .vc-b__svg > rect, .vc-cfg__svg:not(.is-in) .vc-b__svg > line { opacity: 0; transform: scaleY(.6); }
@media (max-width: 1000px) { .vc-cfg__head, .vc-cfg__grid { grid-template-columns: minmax(0, 1fr); } .vc-cfg__draw { position: static; order: -1; } }

.vc-samples__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: end; }
.vc-samples__head { grid-column: 1 / span 4; align-self: start; }
.vc-sample { display: grid; gap: 8px; }
.vc-sample__m { aspect-ratio: 3 / 4; background: var(--surface); }
.vc-sample__m picture, .vc-sample__m img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.vc-sample--0 { grid-column: 5 / span 4; }
.vc-sample--1 { grid-column: 9 / span 4; margin-block-end: clamp(40px, 8vw, 120px); }
.vc-sample--2 { grid-column: 3 / span 4; }
.vc-sample--3 { grid-column: 7 / span 5; }
.vc-sample--3 .vc-sample__m { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .vc-samples__head { grid-column: 1 / -1; } .vc-sample { grid-column: span 6 !important; margin: 0 !important; } }

.vc-wins__list { border-block-start: 1px solid var(--ink); margin-block-start: clamp(28px, 4vw, 48px); }
.vc-win { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; align-items: baseline; padding-block: clamp(20px, 3vw, 36px); border-block-end: 1px solid var(--line); }
.vc-win__t { font: 600 clamp(1.5rem, 1rem + 1.8vw, 2.8rem)/1.1 var(--f-display); transition: transform .6s var(--ease), color .4s; }
:lang(ar) .vc-win__t { font-weight: 700; line-height: 1.45; }
:lang(ur) .vc-win__t { line-height: 1.9; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); }
.vc-win p { color: var(--ink-2); max-inline-size: 40ch; }
.vc-win__sheen { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 30%; pointer-events: none; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent) 18%, transparent), transparent); transform: translateX(calc(var(--dir) * -110%)); transition: transform 1s var(--ease-io); }
.vc-win:hover .vc-win__sheen { transform: translateX(calc(var(--dir) * 360%)); }
.vc-win:hover .vc-win__t { transform: translateX(calc(var(--dir) * 10px)); color: var(--accent-ink); }
@media (max-width: 760px) { .vc-win { grid-template-columns: minmax(0, 1fr); } }

.vc-mfg__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.vc-mfg__t .spec { min-inline-size: 0; }
.vc-mfg__t th { font-weight: 500; color: var(--ink-3); inline-size: 45%; }
.vc-mfg__t td { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .vc-mfg__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Systems page: panoramic villa, U-value scale, frame section, rail
   ========================================================================== */
.sy-hero { padding-block-start: calc(var(--header-h) + clamp(32px, 6vw, 88px)); }
.sy-hero__title { margin-block: 16px 28px; max-inline-size: 15ch; }
.sy-hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding-block-end: clamp(28px, 4vw, 56px); }
.sy-hero__fig { display: grid; gap: 10px; }
.sy-hero__media { position: relative; overflow: hidden; aspect-ratio: 21 / 9; animation: sy-open 1.6s var(--ease-io) .1s both; }
@keyframes sy-open { from { clip-path: inset(0 8% 0 8%); } to { clip-path: inset(0); } }
.sy-hero__media picture, .sy-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sy-hero__sweep { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 30%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent, rgba(255,245,225,.3) 50%, transparent); transform: translateX(calc(var(--dir) * -110%)) skewX(-12deg);
  animation: sy-sweep 2.6s var(--ease-io) 1.2s both; }
@keyframes sy-sweep { to { transform: translateX(calc(var(--dir) * 400%)) skewX(-12deg); } }
html.reduced .sy-hero__media, html.reduced .sy-hero__sweep { animation: none; }
@media (max-width: 900px) { .sy-hero__row { grid-template-columns: minmax(0, 1fr); } .sy-hero__media { aspect-ratio: 4 / 3; } }

.sy-series__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-block-end: clamp(36px, 5vw, 72px); }
.sy-scale { padding-block: 8px 0; }
.sy-scale__cap { display: flex; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.sy-scale__better { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); font-weight: 600; }
.sy-scale__better svg { inline-size: 16px; block-size: 16px; transform: none; }
.sy-scale__axis { position: relative; block-size: 180px; border-block-end: 2px solid var(--ink); margin-inline: 24px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.sy-scale__tick { position: absolute; inset-block-end: -10px; inset-inline-start: calc((1 - var(--x)) * 100%); inline-size: 1px; block-size: 10px; background: var(--ink); }
.sy-scale__tick i { position: absolute; inset-block-start: 14px; inset-inline-start: 50%; transform: translateX(-50%); font-style: normal; font-size: .75rem; color: var(--ink-3); }
.sy-pin { position: absolute; inset-block-end: 0; inset-inline-start: calc((1 - var(--x)) * 100%); transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; padding-block-end: 0; min-inline-size: 64px; color: var(--ink-3); transition: color .3s var(--ease); }
.sy-pin::after { content: ""; inline-size: 1px; block-size: 64px; background: currentColor; opacity: .5; }
.sy-pin:nth-of-type(even)::after { block-size: 104px; }
.sy-pin__m { font-size: .75rem; }
.sy-pin__n { font: 600 1.15rem/1 var(--f-display); letter-spacing: .04em; }
.sy-pin__dot { position: absolute; inset-block-end: -9px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--bg); border: 2px solid currentColor; transition: transform .4s var(--ease), background-color .3s; }
.sy-pin:hover, .sy-pin[aria-pressed="true"] { color: var(--ink); }
.sy-pin[aria-pressed="true"] .sy-pin__dot { background: var(--accent); border-color: var(--accent); transform: scale(1.35); box-shadow: 0 0 0 8px var(--glow); }
.sy-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 48px; align-items: end; margin-block-start: 64px; padding-block-start: 28px; border-block-start: 1px solid var(--line); }
.sy-detail > * { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.sy-detail:not(.is-in) > * { opacity: 0; transform: translateY(12px); }
.sy-detail__name { display: grid; gap: 4px; }
.sy-detail__name .mono { color: var(--accent-ink); }
.sy-detail__n { font: 600 clamp(3rem, 2rem + 4vw, 6.4rem)/.9 var(--f-display); letter-spacing: .02em; }
.sy-detail__dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; }
.sy-detail__dl div { border-inline-start: 1px solid var(--line-2); padding-inline-start: 16px; }
.sy-detail__dl dt { font-size: .8125rem; color: var(--ink-3); margin-block-end: 6px; }
.sy-detail__dl dd { margin: 0; font-size: 1.15rem; font-weight: 600; }
.sy-detail__dl dd.mono { font-size: 1.6rem; }
.sy-detail__dl small { font-size: .75rem; color: var(--ink-3); }
@media (max-width: 900px) {
  .sy-series__head, .sy-detail { grid-template-columns: minmax(0, 1fr); }
  .sy-detail__dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sy-pin { min-inline-size: 48px; }
  .sy-pin__n { font-size: .85rem; }
  .sy-scale__axis { margin-inline: 22px; }
}

.sy-frame__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.sy-x { position: relative; margin: 0; }
.sy-x__svg { inline-size: 100%; block-size: auto; }
.sy-x__glass { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--ink); stroke-width: 1.4; }
.sy-x__vac { stroke: var(--brand); stroke-width: 2; stroke-dasharray: 3 4; }
.sy-x__alu { fill: color-mix(in srgb, var(--ink) 10%, transparent); stroke: var(--ink); stroke-width: 1.6; }
.sy-x__brk { fill: var(--accent); stroke: var(--ink); stroke-width: 1; }
.sy-x__seal { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.sy-x__lead { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.sy-x__l--glass { inset-inline-start: 79%; inset-block-start: 16.7%; }
.sy-x__l--brk { inset-inline-start: 79%; inset-block-start: 66.9%; }
.sy-x__l--seal { inset-inline-start: 79%; inset-block-start: 33.3%; }
.sy-x__l--alu { inset-inline-end: 82.5%; inset-block-start: 71.4%; }
.sy-x__l--out { inset-inline-start: 2%; inset-block-start: 4%; color: var(--ink-3); }
.sy-x__l--in { inset-inline-end: 2%; inset-block-start: 4%; color: var(--ink-3); }
.sy-frame__list { border-block-start: 1px solid var(--ink); margin-block-start: 28px; }
.sy-frame__list li { padding-block: 14px; border-block-end: 1px solid var(--line); color: var(--ink-2); }
.sy-frame__war { display: flex; gap: 12px; align-items: center; margin-block-start: 24px; font-weight: 600; font-size: 1.1rem; }
.sy-frame__war svg { inline-size: 28px; block-size: 28px; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--bg); flex: none; }
@media (max-width: 900px) { .sy-frame__grid { grid-template-columns: minmax(0, 1fr); } }

.sy-dn__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.sy-dn__fig { display: grid; gap: 10px; }
.sy-dn__cmp { aspect-ratio: 16 / 10; }
@media (max-width: 900px) { .sy-dn__grid { grid-template-columns: minmax(0, 1fr); } }

.sy-fac { overflow: hidden; }
.sy-fac__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-block-end: clamp(28px, 4vw, 56px); }
.sy-fac__btn { border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink); }
.sy-fac__btn .is-prev { transform: scaleX(calc(var(--dir) * -1)); }
.sy-rail { display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: 8px; }
.sy-rail::-webkit-scrollbar { display: none; }
.sy-card { flex: 0 0 clamp(240px, 28vw, 420px); scroll-snap-align: start; display: grid; gap: 10px; margin: 0; }
.sy-card.is-tall { flex-basis: clamp(260px, 32vw, 480px); }
.sy-card__m { aspect-ratio: 3 / 4; }
.sy-card__m picture, .sy-card__m img { inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; }
.sy-card__m img { transition: transform 1.2s var(--ease); }
.sy-card:hover .sy-card__m img { transform: scale(1.05); }
@media (max-width: 900px) { .sy-fac__head { grid-template-columns: minmax(0, 1fr); } .sy-card { flex-basis: 78vw; } }

.sy-scope__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.sy-scope__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-block-start: 1px solid var(--ink); margin-block-start: 32px; }
.sy-scope__list li { padding-block: 16px; border-block-end: 1px solid var(--line); font-weight: 500; }
.sy-scope__side { display: grid; gap: 28px; }
.sy-scope__img { aspect-ratio: 4 / 3; }
.sy-scope__img picture, .sy-scope__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sy-proc { display: grid; gap: 0; border-block-start: 1px solid var(--ink); }
.sy-proc li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding-block: 16px; border-block-end: 1px solid var(--line); }
.sy-proc__n { color: var(--accent-ink); padding-block-start: .35em; }
.sy-proc p { grid-column: 2; color: var(--ink-2); }
@media (max-width: 900px) { .sy-scope__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .sy-scope__list { grid-template-columns: minmax(0, 1fr); } }

/* closing: a cut-out pane beside the CTA */
.gl-close__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.gl-close__obj { position: relative; display: grid; place-items: center; }
.gl-close__obj picture, .gl-close__obj img { inline-size: min(100%, 420px); block-size: auto; }
.gl-close__obj::before { content: ""; position: absolute; inset: 10% 6%; background: radial-gradient(closest-side, var(--accent-soft), transparent); z-index: -1; }
@media (max-width: 900px) { .gl-close__top { grid-template-columns: minmax(0, 1fr); } .gl-close__obj img { inline-size: min(70%, 300px); } }
.gl-close__obj .pic { background: none; }
/* schematic labels: wrap instead of spilling past the drawing on narrow screens */
.vc-x__l { max-inline-size: 28%; white-space: normal; }
.vc-x__l--temp { max-inline-size: 24%; text-align: end; }
.sy-x__l--alu { inset-inline-end: auto; inset-inline-start: 1%; inset-block-start: 77%; max-inline-size: 22%; }