/* ==========================================================================
   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/amiri-arabic-400-normal.woff2) format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "SBL Display"; src: url(/assets/fonts/amiri-arabic-700-normal.woff2) format("woff2"); font-weight: 600 800; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+FB50-FDFF,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+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+FB50-FDFF,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+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+FB50-FDFF,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+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+FB50-FDFF,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+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
/* 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", "Amiri", "Noto Naskh 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;
  --t-display: clamp(3rem, 1.6rem + 7.2vw, 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); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
[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; }
.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; }
: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; }

/* ---------- 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; }
.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 { 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%); }
.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; }
.hdr__logo img { block-size: 38px; inline-size: auto; }
.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; }
.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; }
.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 button { text-align: start; padding: 10px 12px; border-radius: var(--r-1); min-block-size: 44px; color: var(--ink); }
.lang__menu button:hover, .lang__menu button[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; }
.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; }
[dir="rtl"] .mnav { --mx: 5%; }
.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; }
.ftr__mark { font: 700 clamp(4rem, 15vw, 15rem)/.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; }
.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; }
.cookie { position: fixed; inset-inline-start: 18px; inset-block-end: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 95; max-inline-size: min(420px, calc(100vw - 104px)); 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; gap: 12px; font-size: .875rem; }
.cookie .row { --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: none; 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); }
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; } }