/* ==========================================================================
   SBL v3 · core.css
   "Day and Night": day = grey paper, black ink, one sun accent (Sawir);
   night = warm black with amber architectural light.
   Every colour is a token. Page CSS may only consume tokens.
   ========================================================================== */

/* ---------- Fonts (self-hosted: CSP allows font-src 'self' only) ---------- */
@font-face { font-family: "SBL Display"; src: url(/assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: "SBL Display"; src: url(/assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); font-weight: 600 800; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: "SBL Display"; src: url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+2000-206F; }
@font-face { font-family: "SBL Display"; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0600-06FF,U+200C-200E,U+FDF2,U+FDFC,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "SBL Display"; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2"); font-weight: 600 800; font-display: swap; unicode-range: U+0600-06FF,U+200C-200E,U+FDF2,U+FDFC,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "SBL Sans"; src: url(/assets/fonts/manrope-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: "SBL Sans"; src: url(/assets/fonts/manrope-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: "SBL Sans"; src: url(/assets/fonts/manrope-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: "SBL Sans"; src: url(/assets/fonts/manrope-latin-700-normal.woff2) format("woff2"); font-weight: 700 800; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: "SBL Sans"; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF,U+200C-200E,U+FDF2,U+FDFC,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "SBL Sans"; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF,U+200C-200E,U+FDF2,U+FDFC,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "SBL Sans"; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF,U+200C-200E,U+FDF2,U+FDFC,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "SBL Sans"; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2"); font-weight: 700 800; font-display: swap; unicode-range: U+0600-06FF,U+200C-200E,U+FDF2,U+FDFC,U+FE70-FE74,U+FE76-FEFC; }
/* Arabic and Urdu files are subset (fonttools, 2026-10-10) to the letters the site uses plus a margin:
   Arabic/Urdu letters, harakat, Arabic-Indic and Urdu digits, punctuation, lam-alef and the
   presentation forms FE70-FEFC; all OpenType layout features kept. Re-subset after adding a new script.
   Urdu is only ever requested under :lang(ur), so non-Urdu visitors never download it. */
@font-face { font-family: "SBL Urdu"; src: url(/assets/fonts/noto-nastaliq-urdu-arabic-400-normal.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "SBL Urdu"; src: url(/assets/fonts/noto-nastaliq-urdu-arabic-700-normal.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }

/* ---------- Tokens: day (default) ---------- */
:root {
  color-scheme: light;
  --bg: #F2F2F2;  --bg-2: #E8E8E6;  --surface: #FFFFFF;  --surface-2: #F7F7F5;
  --ink: #0A0A0A; --ink-2: #2D2D2B; --ink-3: #62625E; --ink-inv: #F2F2F2;
  --band-bg: #0A0A0A; --band-ink: #F2F2F2;
  --line: rgba(10,10,10,.12); --line-2: rgba(10,10,10,.24);
  --brand: #D9731A; --brand-ink: #9C4C08;
  --btn-bg: #0A0A0A; --btn-ink: #F2F2F2; --btn-bg-hover: #2A2A28;
  --shadow-1: 0 1px 2px rgba(10,10,10,.06), 0 8px 24px -12px rgba(10,10,10,.18);
  --shadow-2: 0 2px 6px rgba(10,10,10,.06), 0 30px 60px -30px rgba(10,10,10,.35);
  --cutout-shadow: drop-shadow(0 30px 30px rgba(10,10,10,.22));
  --photo-filter: grayscale(1) contrast(1.06) brightness(1.02);
  --photo-filter-on: none;
  --glow-a: .16;            /* strength of spotlight/edge light */
  --scrim: linear-gradient(to top, rgba(10,10,10,.55), rgba(10,10,10,0) 60%);
  --hatch: repeating-linear-gradient(-45deg, rgba(10,10,10,.06) 0 1px, transparent 1px 9px);
  /* Business lines (day) */
  --solar: #D9731A;   --solar-ink: #9C4C08;   --solar-2: #F2B33D;
  --glass: #1F7E85;   --glass-ink: #155C61;   --glass-2: #77C3C8;
  --storage: #3B8A4D; --storage-ink: #276737; --storage-2: #93CFA0;
  --power: #6450C6;   --power-ink: #4A38A6;   --power-2: #B2A6F0;
  --infra: #2D5A8E;   --infra-ink: #22487A;   --infra-2: #8FB2DE;
  --services: #C2503A;--services-ink: #973A27;--services-2: #EFA08E;
  /* Type */
  --f-display: "SBL Display", "IBM Plex Sans Arabic", "Noto Sans Arabic", Georgia, "Songti SC", "SimSun", serif;
  --f-body: "SBL Sans", "IBM Plex Sans Arabic", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  /* svh cap: on landscape phones a width-only size let the hero title fill the screen (RM-07). */
  --t-display: clamp(3rem, 1.6rem + min(7.2vw, 13svh), 10rem);
  --t-h1: clamp(2.4rem, 1.5rem + 4vw, 5.6rem);
  --t-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.8rem);
  --t-h3: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  --t-lead: clamp(1.08rem, 1rem + .4vw, 1.35rem);
  --t-body: 1.0625rem;
  --t-small: .875rem;
  --t-eyebrow: .75rem;
  /* Space and shape */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --sec: clamp(72px, 9vw, 160px);
  --r-1: 3px; --r-2: 6px; --r-3: 14px;
  --header-h: 72px;
  --ease: cubic-bezier(.2,.7,.1,1);
  --ease-io: cubic-bezier(.7,0,.2,1);
  --dir: 1;
  /* default accent = brand */
  --accent: var(--brand); --accent-ink: var(--brand-ink); --accent-2: #F2B33D;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
  --glow: color-mix(in srgb, var(--accent) calc(var(--glow-a) * 100%), transparent);
}
[dir="rtl"] { --dir: -1; }

/* ---------- Tokens: night ---------- */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #120E0C; --bg-2: #181210; --surface: #1E1713; --surface-2: #261D17;
  --ink: #F4EADC; --ink-2: #D6C7B3; --ink-3: #A39380; --ink-inv: #120E0C;
  --band-bg: #0B0807; --band-ink: #F4EADC;
  --line: rgba(244,234,220,.11); --line-2: rgba(244,234,220,.22);
  --brand: #E7A54A; --brand-ink: #F2BC6E;
  --btn-bg: #E7A54A; --btn-ink: #1A120C; --btn-bg-hover: #F2BC6E;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-2: 0 2px 8px rgba(0,0,0,.4), 0 40px 80px -30px rgba(0,0,0,.85);
  --cutout-shadow: drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(231,165,74,.10));
  --photo-filter: saturate(.85) brightness(.82) sepia(.12);
  --photo-filter-on: saturate(1) brightness(.95);
  --glow-a: .42;
  --scrim: linear-gradient(to top, rgba(18,14,12,.85), rgba(18,14,12,0) 65%);
  --hatch: repeating-linear-gradient(-45deg, rgba(244,234,220,.06) 0 1px, transparent 1px 9px);
  --solar: #F2A04E;   --solar-ink: #F6B670;   --solar-2: #F7C873;
  --glass: #5EC4C6;   --glass-ink: #86D8D9;   --glass-2: #2B8A8F;
  --storage: #7CC98C; --storage-ink: #9DDAAA; --storage-2: #3E8A50;
  --power: #A595F2;   --power-ink: #BFB3F6;   --power-2: #6B57CF;
  --infra: #86AEE0;   --infra-ink: #A8C6EC;   --infra-2: #3A6AA3;
  --services: #F08B73;--services-ink: #F5A694;--services-2: #C2503A;
  --accent-2: #F7C873;
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #120E0C; --bg-2: #181210; --surface: #1E1713; --surface-2: #261D17;
  --ink: #F4EADC; --ink-2: #D6C7B3; --ink-3: #A39380; --ink-inv: #120E0C;
  --band-bg: #0B0807; --band-ink: #F4EADC;
  --line: rgba(244,234,220,.11); --line-2: rgba(244,234,220,.22);
  --brand: #E7A54A; --brand-ink: #F2BC6E;
  --btn-bg: #E7A54A; --btn-ink: #1A120C; --btn-bg-hover: #F2BC6E;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-2: 0 2px 8px rgba(0,0,0,.4), 0 40px 80px -30px rgba(0,0,0,.85);
  --cutout-shadow: drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(231,165,74,.10));
  --photo-filter: saturate(.85) brightness(.82) sepia(.12);
  --photo-filter-on: saturate(1) brightness(.95);
  --glow-a: .42;
  --scrim: linear-gradient(to top, rgba(18,14,12,.85), rgba(18,14,12,0) 65%);
  --hatch: repeating-linear-gradient(-45deg, rgba(244,234,220,.06) 0 1px, transparent 1px 9px);
  --solar: #F2A04E;   --solar-ink: #F6B670;   --solar-2: #F7C873;
  --glass: #5EC4C6;   --glass-ink: #86D8D9;   --glass-2: #2B8A8F;
  --storage: #7CC98C; --storage-ink: #9DDAAA; --storage-2: #3E8A50;
  --power: #A595F2;   --power-ink: #BFB3F6;   --power-2: #6B57CF;
  --infra: #86AEE0;   --infra-ink: #A8C6EC;   --infra-2: #3A6AA3;
  --services: #F08B73;--services-ink: #F5A694;--services-2: #C2503A;
  --accent-2: #F7C873;
}

/* Business-line scoping: one accent per area, never a rainbow. */
.line-brand    { --accent: var(--brand);    --accent-ink: var(--brand-ink); }
.line-solar    { --accent: var(--solar);    --accent-ink: var(--solar-ink);    --accent-2: var(--solar-2); }
.line-glass    { --accent: var(--glass);    --accent-ink: var(--glass-ink);    --accent-2: var(--glass-2); }
.line-storage  { --accent: var(--storage);  --accent-ink: var(--storage-ink);  --accent-2: var(--storage-2); }
.line-power    { --accent: var(--power);    --accent-ink: var(--power-ink);    --accent-2: var(--power-2); }
.line-infra    { --accent: var(--infra);    --accent-ink: var(--infra-ink);    --accent-2: var(--infra-2); }
.line-services { --accent: var(--services); --accent-ink: var(--services-ink); --accent-2: var(--services-2); }
[class*="line-"] { --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg)); --glow: color-mix(in srgb, var(--accent) calc(var(--glow-a) * 100%), transparent); }

:lang(ur) { --f-display: "SBL Urdu", "Noto Nastaliq Urdu", serif; --f-body: "SBL Urdu", "Noto Nastaliq Urdu", serif; }
:lang(zh) { --f-display: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink);
  font: 400 var(--t-body)/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
:lang(ar) body, body:lang(ar) { line-height: 1.85; }
:lang(ur) body, body:lang(ur) { line-height: 2.2; font-size: 1rem; }
img, video, svg, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--accent); color: var(--bg); }
/* accent-ink, not accent: brand orange on day paper is 2.9:1, accent-ink is 5.4:1.
   On dark bands and photo headers the lighter accent reads better. */
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 2px; }
:is(.section--ink, .ftr, .hdr.on-dark:not(.is-solid)) :focus-visible { outline-color: var(--accent); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Typography ---------- */
.display, .h1, .h2, .h3 { font-family: var(--f-display); font-weight: 600; color: var(--ink); text-wrap: balance; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.display { font-size: var(--t-display); line-height: .92; letter-spacing: -.025em; }
.h1 { font-size: var(--t-h1); line-height: 1; }
.h2 { font-size: var(--t-h2); line-height: 1.04; }
.h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 600; }
:lang(ar) .display, :lang(ar) .h1, :lang(ar) .h2 { letter-spacing: 0; line-height: 1.25; font-weight: 700; }
:lang(ar) .display { line-height: 1.12; padding-block-end: .15em; }
/* Arabic display is IBM Plex Sans Arabic 700 since 2026-10-10 (Ahmed): Amiri's
   stacked ligatures crowded the next line. A little room below still helps. */
:lang(ar) .h3 { letter-spacing: 0; font-family: var(--f-body); font-weight: 600; line-height: 1.5; }
:lang(ur) .display, :lang(ur) .h1, :lang(ur) .h2 { letter-spacing: 0; line-height: 1.7; font-size: calc(var(--t-h1) * .8); }
:lang(ur) .display { font-size: calc(var(--t-display) * .62); line-height: 1.8; }
:lang(ur) .h3 { letter-spacing: 0; line-height: 1.9; }
:lang(zh) .display, :lang(zh) .h1, :lang(zh) .h2, :lang(zh) .h3 { letter-spacing: .02em; line-height: 1.15; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
:lang(ar) .lead { line-height: 1.85; }
:lang(ur) .lead { line-height: 2.2; }
.prose { max-width: 66ch; color: var(--ink-2); text-wrap: pretty; }
.prose > * + * { margin-block-start: 1em; }
.small { font-size: var(--t-small); color: var(--ink-3); }
.mono { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .02em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  font: 600 var(--t-eyebrow)/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow::before { content: ""; inline-size: 28px; block-size: 1px; background: currentColor; opacity: .6; }
:lang(ar) .eyebrow, :lang(ur) .eyebrow, :lang(zh) .eyebrow { letter-spacing: 0; font-size: .875rem; }
.accent { color: var(--accent-ink); }
.dot::after { content: "."; color: var(--accent); }
:lang(ar) .dot::after, :lang(ur) .dot::after { content: none; }
.kicker { font: 500 var(--t-small)/1.4 var(--f-mono); color: var(--ink-3); }
/* Monospace faces have no Arabic glyphs and tracking breaks letter joining:
   Arabic-script text set in "mono" styles uses the body face, untracked. */
:is(:lang(ar), :lang(ur)) :is(.mono, .kicker, .media figcaption, .media .cap, figure.cap-below figcaption, .ph) { font-family: var(--f-body); letter-spacing: 0; }
em.serif, .serif-i { font-family: var(--f-display); font-style: italic; font-weight: 500; }

/* ---------- Layout ---------- */
.wrap { inline-size: 100%; max-inline-size: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-inline-size: calc(980px + var(--gutter) * 2); }
.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: calc(var(--sec) * .55); }
.section--flush-top { padding-block-start: 0; }
.section--ink { background: var(--band-bg); color: var(--band-ink); --ink: var(--band-ink); --ink-2: color-mix(in srgb, var(--band-ink) 80%, transparent); --ink-3: color-mix(in srgb, var(--band-ink) 62%, transparent); --line: color-mix(in srgb, var(--band-ink) 16%, transparent); --line-2: color-mix(in srgb, var(--band-ink) 30%, transparent); --bg: var(--band-bg); }
.section--surface { background: var(--surface); }
.section--bg2 { background: var(--bg-2); }
.section--accent { background: var(--accent-soft); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.grid-12 > * { grid-column: span var(--c, 12); min-width: 0; }
.cols { display: grid; gap: clamp(16px, 2.2vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr)); }
.split { display: grid; gap: clamp(24px, 4vw, 72px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split--60 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.split--40 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.stack { display: flex; flex-direction: column; gap: var(--gap, 20px); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }
.rule { block-size: 1px; background: var(--line); border: 0; margin: 0; }
.rule--strong { background: var(--ink); }
.section-head { display: grid; gap: 18px; margin-block-end: clamp(32px, 5vw, 72px); max-inline-size: 60rem; }
.section-head--split { max-inline-size: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
@media (max-width: 900px) {
  .grid-12 > * { grid-column: span 12; }
  .grid-12 > [data-c-md] { grid-column: span var(--c-md, 12); }
  .split, .split--60, .split--40, .section-head--split { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Buttons and links ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-block-size: var(--h); padding-inline: 26px; border-radius: var(--r-1);
  background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-bg);
  font: 600 .95rem/1 var(--f-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease);
  position: relative; isolation: isolate;
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn--glow { box-shadow: 0 0 0 0 var(--glow); }
.btn--glow:hover { box-shadow: 0 0 32px 2px var(--glow); }
.btn--sm { --h: 42px; padding-inline: 18px; font-size: .875rem; }
.btn svg { inline-size: 1.05em; block-size: 1.05em; flex: none; }
.link-arrow { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; text-decoration: none; color: var(--ink); border-block-end: 1px solid var(--line-2); padding-block: 4px; transition: border-color .25s, gap .3s var(--ease); }
.link-arrow:hover { border-color: var(--accent); gap: .85em; }
.link-arrow svg { inline-size: 1em; block-size: 1em; }
.arrow-svg { transform: scaleX(var(--dir)); }
.chip { display: inline-flex; align-items: center; gap: .5em; min-block-size: 32px; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 99px; font-size: .8125rem; color: var(--ink-2); background: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-block; font: 600 .6875rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
:lang(ar) .tag, :lang(ur) .tag, :lang(zh) .tag { letter-spacing: 0; font-size: .8125rem; }
.badge-excl { display: inline-flex; align-items: center; gap: .5em; padding: 6px 12px; border: 1px solid var(--accent); color: var(--accent-ink); border-radius: var(--r-1); font-size: .8125rem; font-weight: 600; }

/* ---------- Media ---------- */
.media { position: relative; overflow: hidden; background: var(--bg-2); border-radius: var(--r-1); aspect-ratio: var(--ratio, auto); }
.media > picture, .media > img, .media > video, .media picture > img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.media > picture { block-size: 100%; }
.media figcaption, .media .cap { position: absolute; inset-inline-start: 14px; inset-block-end: 12px; font: 500 .75rem/1.3 var(--f-mono); color: #F4EADC; text-shadow: 0 1px 2px rgba(0,0,0,.6); z-index: 2; }
.pic { background-color: var(--pic-c, var(--bg-2)); }
.pic img { transition: opacity .5s var(--ease); }
.pic--mono img { filter: var(--photo-filter); transition: filter .7s var(--ease), transform .9s var(--ease); }
.pic--mono:hover img, .pic--mono.is-on img { filter: var(--photo-filter-on); }
.pic-night { display: none; }
:root[data-theme="dark"] .pic-day.has-night { display: none; }
:root[data-theme="dark"] .pic-night { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pic-day.has-night { display: none; } :root:not([data-theme="light"]) .pic-night { display: block; } }
figure.cap-below figcaption { margin-block-start: 10px; font: 500 .75rem/1.4 var(--f-mono); color: var(--ink-3); }
.cutout { filter: var(--cutout-shadow); pointer-events: none; user-select: none; }
.ph { position: relative; display: grid; place-items: center; aspect-ratio: var(--ratio, 4/3); background: var(--hatch), var(--bg-2); border: 1px dashed var(--line-2); border-radius: var(--r-1); color: var(--ink-3); font: 500 .8125rem/1.4 var(--f-mono); text-align: center; padding: 16px; }
.vid { position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: var(--ratio, 16/9); }
.vid video, .vid img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.vid video { opacity: 0; transition: opacity .8s var(--ease); }
.vid.is-playing video { opacity: 1; }
/* Pause control for looping video (WCAG 2.2.2). Hidden where video never plays. */
.vid__toggle { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 3; inline-size: 44px; block-size: 44px; display: grid; place-items: center; border-radius: 50%; color: #F4EADC; background: rgba(10,10,10,.5); border: 1px solid rgba(244,234,220,.35); opacity: .85; transition: opacity .2s, background-color .2s; }
.vid__toggle:hover, .vid__toggle:focus-visible { opacity: 1; background: rgba(10,10,10,.72); }
.vid__toggle:focus-visible { outline-color: #F4EADC; }
.vid__toggle svg { inline-size: 18px; block-size: 18px; }
html.reduced .vid__toggle, html.save-data .vid__toggle, html:not(.js) .vid__toggle { display: none; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-block: 1px solid var(--ink); -webkit-overflow-scrolling: touch; }
.spec { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; min-inline-size: 560px; }
.spec th, .spec td { padding: 14px 16px; text-align: start; border-block-end: 1px solid var(--line); vertical-align: top; }
.spec thead th { font: 600 .75rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
:lang(ar) .spec thead th, :lang(ur) .spec thead th { letter-spacing: 0; font-size: .875rem; }
.spec tbody tr { transition: background-color .2s; }
.spec tbody tr:hover { background: var(--accent-soft); }
.spec td:first-child { font-weight: 600; color: var(--ink); }

/* ---------- Page hero + crumbs ---------- */
.page-hero { padding-block: calc(var(--header-h) + clamp(48px, 8vw, 120px)) clamp(48px, 6vw, 96px); position: relative; }
@media (orientation: landscape) and (max-height: 500px) { .page-hero { padding-block: calc(var(--header-h) + 16px) 32px; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .8125rem; color: var(--ink-3); margin-block-end: 28px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { opacity: .5; }

/* ---------- Header ---------- */
.skip { position: fixed; inset-inline-start: 16px; inset-block-start: 12px; z-index: 200; background: var(--btn-bg); color: var(--btn-ink); padding: 12px 18px; border-radius: var(--r-1); text-decoration: none; font-weight: 600; transform: translateY(-200%); transition: transform .2s; }
.skip:focus-visible { transform: none; }
.hdr { view-transition-name: site-header; position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 100; block-size: var(--header-h); transition: background-color .35s var(--ease), transform .45s var(--ease), border-color .35s; border-block-end: 1px solid transparent; }
.hdr.is-solid { background: var(--bg); border-block-end-color: var(--line); }
.hdr.is-hidden { transform: translateY(-100%); }
/* Keyboard focus inside a hidden header brings it back (2.4.11). */
.hdr:focus-within { transform: none; }
.hdr.menu-open { transform: none; }
.hdr__in { block-size: 100%; display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); }
.hdr__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; min-block-size: 44px; color: var(--ink); }
.hdr__mark { display: block; flex: none; }
.hdr__logo img { block-size: 36px; inline-size: auto; }
.hdr__name { font: 700 1rem/1.1 var(--f-body); white-space: nowrap; }
:is(:lang(ar), :lang(ur)) .hdr__name { letter-spacing: 0; font-size: 1.0625rem; }
:lang(ur) .hdr__name { line-height: 1.9; font-size: .95rem; }
@media (max-width: 360px) { .hdr__name { font-size: .875rem; } }
.logo-light, .logo-dark { display: block; }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } }
.hdr.on-dark:not(.is-solid) .logo-light { display: none; } .hdr.on-dark:not(.is-solid) .logo-dark { display: block; }
.hdr.on-dark:not(.is-solid) { --ink: #F4EADC; --ink-2: #E8DCCB; --line-2: rgba(244,234,220,.3); color: #F4EADC; }
/* Light-topped hero photos (sky, cloud) left the light header ink under 3:1. A dark band
   behind the text line keeps it above 4.5:1 on any photo (A11Y-08, RM-09). */
.hdr { isolation: isolate; }
.hdr.on-dark:not(.is-solid)::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(11,8,7,.72), rgba(11,8,7,.58) 60%, rgba(11,8,7,0)); }
.hdr.on-dark:not(.is-solid) :is(.nav__link, .hdr__name, .tool-btn) { text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 12px; font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--ink); border-radius: var(--r-1); position: relative; }
.nav__link::after { content: ""; position: absolute; inset-inline: 12px; inset-block-end: 8px; block-size: 1px; background: var(--c, var(--accent)); transform: scaleX(0); transform-origin: var(--origin, left); transition: transform .35s var(--ease); }
[dir="rtl"] .nav__link::after { --origin: right; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__item.is-open > .nav__link::after { transform: scaleX(1); }
.nav__link svg { inline-size: 10px; block-size: 10px; transition: transform .3s var(--ease); opacity: .6; }
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }
.mega { position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: -16px; min-inline-size: 560px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-2); border-radius: var(--r-2); padding: 18px; display: grid; grid-template-columns: 1fr 220px; gap: 18px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
/* The last hubs open toward the start edge so they stay inside 1101 to 1380px viewports (RM-02). */
.nav__item[data-hub]:nth-last-child(-n+3) > .mega { inset-inline-start: auto; inset-inline-end: -16px; }
.mega { max-inline-size: calc(100vw - 2 * var(--gutter)); max-block-size: calc(100svh - var(--header-h) - 24px); overflow-y: auto; overscroll-behavior: contain; }
.nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__list { display: grid; gap: 2px; align-content: start; }
.mega__link { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-1); text-decoration: none; transition: background-color .2s; }
.mega__link:hover, .mega__link:focus-visible { background: var(--bg); }
.mega__link b { font-weight: 600; font-size: .95rem; }
.mega__link span { font-size: .8125rem; color: var(--ink-3); line-height: 1.45; }
.mega__media { position: relative; border-radius: var(--r-1); overflow: hidden; background: var(--bg-2); aspect-ratio: 3/4; }
.mega__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity .35s var(--ease), transform .8s var(--ease); }
.hdr__tools { display: flex; align-items: center; gap: 4px; }
.tool-btn { display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; border-radius: var(--r-1); color: var(--ink); transition: background-color .2s; }
.tool-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.tool-btn svg { inline-size: 20px; block-size: 20px; }
.lang { position: relative; }
.lang__btn { font: 600 .8125rem/1 var(--f-body); gap: 6px; display: inline-flex; padding-inline: 10px; }
.lang__menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-2); padding: 6px; min-inline-size: 160px; display: grid; }
.lang__menu a { display: flex; align-items: center; text-align: start; padding: 10px 12px; border-radius: var(--r-1); min-block-size: 44px; color: var(--ink); text-decoration: none; }
.lang__menu a:hover, .lang__menu a[aria-current="true"] { background: var(--bg); }
.theme-ico .sun, .theme-ico .moon { transition: transform .6s var(--ease), opacity .4s; transform-origin: 50% 50%; }
.theme-ico .moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .theme-ico .sun { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="dark"] .theme-ico .moon { opacity: 1; transform: none; }
.theme-btn:active .theme-ico { transform: rotate(-30deg) scale(.9); transition: transform .12s; }
.hdr__cta { margin-inline-start: 8px; }
.burger { display: none; }
@media (max-width: 1100px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: inline-grid; }
  .hdr__tools { margin-inline-start: auto; }
}
/* Mobile menu */
.mnav { position: fixed; inset: 0; z-index: 99; background: var(--bg); padding: calc(var(--header-h) + 16px) var(--gutter) 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; clip-path: circle(0% at var(--mx, 95%) 36px); visibility: hidden; transition: clip-path .7s var(--ease-io), visibility 0s .7s; }
.mnav { overscroll-behavior: contain; }
[dir="rtl"] .mnav { --mx: 5%; }
/* In-dialog close for keyboard and screen reader users; pointer users have the burger X right above it. */
.mnav__close { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 12px; border: 1px solid var(--line-2); border-radius: var(--r-1); color: var(--ink); font-weight: 600; font-size: .875rem; }
.mnav__close:not(:focus-visible) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
.mnav__close svg { inline-size: 18px; block-size: 18px; }
.mnav.is-open { clip-path: circle(150% at var(--mx, 95%) 36px); visibility: visible; transition-delay: 0s; }
.mnav__hub { border-block-end: 1px solid var(--line); }
.mnav__hub > a, .mnav__hub > button { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; min-block-size: 64px; font: 600 clamp(1.6rem, 6vw, 2.2rem)/1.1 var(--f-display); text-decoration: none; text-align: start; color: var(--ink); }
.mnav__sub { display: grid; gap: 2px; padding-block-end: 14px; }
.mnav__sub a { min-block-size: 44px; display: flex; align-items: center; padding-inline-start: 4px; color: var(--ink-2); text-decoration: none; }
.mnav__foot { margin-block-start: auto; padding-block-start: 24px; display: grid; gap: 12px; }

/* ---------- Footer ---------- */
.ftr { background: var(--band-bg); color: var(--band-ink); --ink: var(--band-ink); --ink-2: color-mix(in srgb, var(--band-ink) 78%, transparent); --ink-3: color-mix(in srgb, var(--band-ink) 58%, transparent); --line: color-mix(in srgb, var(--band-ink) 14%, transparent); --line-2: color-mix(in srgb, var(--band-ink) 28%, transparent); position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 120px) 96px; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.ftr__col h3 { font: 600 .75rem/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-block-end: 16px; }
:lang(ar) .ftr__col h3, :lang(ur) .ftr__col h3, :lang(zh) .ftr__col h3 { letter-spacing: 0; font-size: .875rem; }
.ftr__col ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.ftr__col a { color: var(--ink-2); text-decoration: none; display: inline-flex; min-block-size: 36px; align-items: center; }
.ftr__col a:hover { color: var(--ink); text-decoration: underline; }
.ftr__tag { font: 600 clamp(1.6rem, 2.6vw, 2.4rem)/1.15 var(--f-display); max-inline-size: 16ch; margin-block-end: 18px; }
/* Sized so "Smart Building Lines" fits inside the wrap at every width (VD-08). */
.ftr__mark { font: 700 clamp(2rem, 9.4vw, 11.5rem)/.9 var(--f-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px var(--line-2); white-space: nowrap; margin-block: clamp(48px, 7vw, 96px) 12px; user-select: none; overflow: hidden; }
:lang(ar) .ftr__mark, :lang(ur) .ftr__mark { letter-spacing: 0; line-height: 1.6; font-size: clamp(3rem, 11vw, 11rem); padding-block-end: .1em; }
/* A stroke on Amiri/Nastaliq traces every overlapping contour inside the joins
   (VD-09): use a faint solid fill instead. */
:is(:lang(ar), :lang(ur)) .ftr__mark { -webkit-text-stroke: 0; color: color-mix(in srgb, var(--band-ink) 8%, transparent); }
.ftr__reg { margin-block-start: 6px; }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block-start: 20px; border-block-start: 1px solid var(--line); font-size: .8125rem; color: var(--ink-3); }
.ftr__bottom a { color: inherit; }
@media (max-width: 900px) { .ftr__top { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ftr__top { grid-template-columns: 1fr; } }

/* ---------- Floating WhatsApp + cookie ---------- */
.wa { position: fixed; inset-inline-end: 18px; inset-block-end: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 90; inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: #1F8F4E; color: #fff; box-shadow: 0 10px 30px -8px rgba(0,0,0,.45); transition: transform .3s var(--ease); }
.wa:hover { transform: scale(1.06); }
.wa svg { inline-size: 28px; block-size: 28px; }
/* Contact already has a large WhatsApp card; the button would cover the form. */
body[data-page="contact"] .wa { display: none; }
@media (max-width: 760px) {
  .wa { inline-size: 48px; block-size: 48px; inset-inline-end: 12px; inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px)); transition: transform .35s var(--ease), opacity .35s; }
  .wa svg { inline-size: 24px; block-size: 24px; }
  /* Slides away while reading down, back on scroll up (same flag as the header). */
  .wa.is-tucked:not(:focus-visible) { transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; }
  .ftr__bottom { padding-inline-end: 64px; }
}
html.reduced .wa { transition: none; }
/* One-line notice: small, bottom start, clear of the WhatsApp button. */
.cookie { position: fixed; inset-inline-start: 12px; inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 95; max-inline-size: min(640px, calc(100vw - 104px)); background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-1); border-radius: var(--r-2); padding-block: 6px; padding-inline: 14px 6px; display: flex; align-items: center; gap: 12px; font-size: .8125rem; line-height: 1.4; }
.cookie p { margin: 0; }
.cookie a { color: var(--ink); }
.cookie .btn--sm { --h: 44px; flex: none; padding-inline: 16px; }
html.has-cookie { scroll-padding-block-end: 72px; }
@media (max-width: 760px) { .cookie { inset-inline-start: 8px; inset-block-end: calc(8px + env(safe-area-inset-bottom, 0px)); max-inline-size: calc(100vw - 80px); font-size: .75rem; gap: 8px; } }

/* ---------- Forms (base; contact page styles the layout) ---------- */
.field { display: grid; gap: 8px; }
.field label { font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea { inline-size: 100%; min-block-size: 52px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-block-size: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.field .err { font-size: .8125rem; color: #C0392B; }
:root[data-theme="dark"] .field .err { color: #FF8A7A; }
.hp { position: absolute !important; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* ---------- 3D scenes ---------- */
.scene { position: relative; overflow: hidden; }
.scene > canvas { position: absolute; inset: 0; inline-size: 100% !important; block-size: 100% !important; opacity: 0; transition: opacity .9s var(--ease); }
.scene.is-live > canvas { opacity: 1; }
.scene-fallback { position: absolute; inset: 0; transition: opacity .6s var(--ease); }
.scene.is-live > .scene-fallback { opacity: 0; pointer-events: none; }

/* ---------- Reveal (core) ---------- */
/* Content is visible by default; JS adds .rv-ready only when it can animate,
   so no text is hidden if scripts fail. */
.rv-ready [data-reveal]:not(.rv-in) { opacity: 0; transform: translateY(28px); }
.rv-ready [data-reveal="fade"]:not(.rv-in) { transform: none; }
.rv-ready [data-reveal="scale"]:not(.rv-in) { transform: scale(.94); }
.rv-ready [data-reveal="clip"]:not(.rv-in) { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.rv-ready [data-reveal="mask"]:not(.rv-in) { opacity: 1; transform: none; clip-path: inset(0 calc(100% * (1 + var(--dir)) / 2) 0 calc(100% * (1 - var(--dir)) / 2)); }
[data-reveal] { transition: opacity .9s var(--ease), transform 1s var(--ease), clip-path 1.1s var(--ease-io); transition-delay: var(--d, 0s); }
html.reduced [data-reveal] { transition: opacity .4s linear !important; transform: none !important; clip-path: none !important; }

/* ---------- Marquee (core basic; fx.js upgrades) ---------- */
.marquee { overflow: hidden; display: flex; gap: 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* ---------- View transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease); }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease-io); }
/* The header holds still across page navigations: it has its own group with
   no animation, so it never cross-fades. Pages are prerendered, so the new
   header is complete when the new state is captured and shows at once (the
   old "keep the old header, hide the new one" hold is no longer needed).
   During the theme sunset the header has no name, so the circle reveals it
   with the rest of the page. */
::view-transition-group(site-header) { animation-duration: 0s; }
::view-transition-old(site-header) { animation: none; opacity: 0; }
::view-transition-new(site-header) { animation: none; }
html.theme-vt .hdr { view-transition-name: none; }
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt::view-transition-new(root) { z-index: 2; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- Utilities ---------- */
.no-js-hide { }
html:not(.js) .js-only { display: none !important; }
.center { text-align: center; }
.mt-0 { margin-block-start: 0; } .mt-s { margin-block-start: 16px; } .mt-m { margin-block-start: 32px; } .mt-l { margin-block-start: 64px; }
.full-bleed { inline-size: 100%; }
.nowrap { white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
@media print { .hdr, .wa, .cookie, .mnav, .scene canvas { display: none !important; } }