:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.4rem, 1rem + 4vw, 4.75rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* Brand: logo green #00A950, logo charcoal #231F20 */
  --brand-green: #00a950;
  --brand-charcoal: #231f20;

  --color-bg: #f4f4f0;
  --color-surface: #fbfbf9;
  --color-surface-2: #ebebe5;
  --color-border: oklch(0.25 0.01 30 / 0.12);
  --color-text: #1d1a1b;
  --color-text-muted: #5c5a57;
  --color-text-faint: #8a8884;
  --color-primary: #00813d;       /* darker brand green for AA text/buttons on light */
  --color-primary-hover: #006a32;
  --color-accent: var(--brand-green);

  --dark-bg: #141917;
  --dark-surface: #1c2320;
  --dark-text: #eef0ec;
  --dark-muted: #a7aea9;
  --dark-border: oklch(1 0 0 / 0.12);

  --sev-high: #b3261e;
  --sev-med: #a86200;
  --sev-low: #00813d;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-md: 0 10px 30px -12px oklch(0.25 0.02 150 / 0.25);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

body { font-feature-settings: "ss01"; }
a { color: inherit; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--color-primary); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: oklch(0.97 0.004 110 / 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease); }
.header.scrolled { border-bottom-color: var(--color-border); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: var(--space-6); }
.brand img { height: 42px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-8); }
.nav a { text-decoration: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); padding: 10px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-text); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand-green); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: 0 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--text-sm); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn--ghost:hover { background: oklch(1 0 0 / 0.1); }
.btn--light { background: #fff; color: var(--brand-charcoal); }
.btn--light:hover { background: #e8ece8; }
.nav .btn { color: #fff; padding: 0 18px; }
.nav .btn:hover { color: #fff; }
.menu-btn { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.menu-btn svg { width: 24px; height: 24px; }

@media (max-width: 1280px) {
  .menu-btn { display: inline-flex; }
  .nav { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-4) var(--gutter) var(--space-6); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
  .nav.open { opacity: 1; transform: none; visibility: visible; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-base); }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--color-primary); }
  .nav .btn { margin-top: var(--space-4); border-bottom: 0; }
  .brand img { height: 36px; }
}

/* ---------- Type helpers ---------- */
.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--brand-green); }
.h-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; }
.h-section { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.015em; line-height: 1.08; }
.h-sub { font-weight: 600; font-size: var(--text-lg); line-height: 1.25; }
.lead { font-size: var(--text-base); color: var(--color-text-muted); max-width: 60ch; }
.muted { color: var(--color-text-muted); }

section { position: relative; }
.pad-lg { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.pad-md { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(88vh, 860px); display: grid; align-items: end; color: #fff; overflow: hidden; background: var(--dark-bg); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.15 0.01 150 / 0.55) 0%, oklch(0.15 0.01 150 / 0.15) 35%, oklch(0.13 0.01 150 / 0.85) 100%); }
.hero__content { position: relative; z-index: 1; padding-block: var(--space-32) var(--space-16); display: grid; gap: var(--space-6); }
.hero h1 { font-size: var(--text-3xl); max-width: 16ch; }
.hero h1 em { font-style: normal; color: #7fe0a6; }
.hero p { font-size: var(--text-base); color: #e3e7e3; max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.hero__meta { position: relative; z-index: 1; border-top: 1px solid oklch(1 0 0 / 0.18); }
.hero__meta .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero__meta div { padding: var(--space-6) var(--space-4) var(--space-6) 0; }
.hero__meta strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero__meta span { font-size: var(--text-xs); color: #c9cfca; }
@media (max-width: 720px) {
  .hero__meta .wrap { grid-template-columns: repeat(2, 1fr); }
  .hero__content { padding-block: var(--space-24) var(--space-10); }
}

/* ---------- Intro split ---------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(var(--space-8), 6vw, var(--space-20)); align-items: center; }
.split--rev { grid-template-columns: 1fr 1.1fr; }
.split__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); aspect-ratio: 4/3; }
.stack { display: grid; gap: var(--space-5); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: var(--space-4); border-top: 1px solid var(--color-border); }
.facts div { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.facts dt { font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .08em; }
.facts dd { font-weight: 600; font-size: var(--text-sm); }
@media (max-width: 860px) { .split, .split--rev { grid-template-columns: 1fr; } .split--rev .split__media { order: -1; } }

/* ---------- Supply lines ---------- */
.supply { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.supply__head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-12); }
.supply__grid { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: var(--space-6); }
.line { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--dark-bg); color: #fff; min-height: 320px; display: flex; align-items: flex-end; }
.line--big { grid-row: span 2; min-height: 560px; }
.line img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, oklch(0.12 0.01 150 / 0.88) 100%); }
.line__body { position: relative; z-index: 1; padding: var(--space-8); display: grid; gap: var(--space-2); }
.line__num { font-size: var(--text-xs); letter-spacing: .14em; color: #8fe3b0; font-weight: 600; }
.line h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.1; }
.line p { color: #d6dbd7; font-size: var(--text-sm); max-width: 46ch; }
.line ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-top: var(--space-2); }
.line li { font-size: var(--text-xs); border: 1px solid oklch(1 0 0 / 0.25); padding: 4px 10px; border-radius: 999px; color: #e7ebe8; }
@media (max-width: 860px) { .supply__grid { grid-template-columns: 1fr; } .line--big { grid-row: auto; min-height: 420px; } .line { min-height: 340px; } }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; border-top: 1px solid var(--color-border); margin-top: var(--space-12); }
.process li { list-style: none; padding: var(--space-6) var(--space-5) var(--space-6) 0; border-right: 1px solid var(--color-border); counter-increment: step; }
.process li:last-child { border-right: 0; }
.process li + li { padding-left: var(--space-5); }
.process li::before { content: "0" counter(step); display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--color-primary); margin-bottom: var(--space-3); }
.process h3 { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-2); }
.process p { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 960px) { .process { grid-template-columns: 1fr 1fr; } .process li { border-right: 0; border-bottom: 1px solid var(--color-border); padding-left: 0 !important; } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* ---------- Markets (dark) ---------- */
.dark { background: var(--dark-bg); color: var(--dark-text); }
.dark .eyebrow { color: #7fe0a6; }
.dark .lead, .dark .muted { color: var(--dark-muted); }
.markets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-12); }
.market { border: 1px solid var(--dark-border); border-radius: var(--radius-md); padding: var(--space-8); background: var(--dark-surface); display: grid; gap: var(--space-4); align-content: start; }
.market h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.market h3 small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; color: var(--dark-muted); letter-spacing: .08em; text-transform: uppercase; }
.places { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.places li { padding: 8px 14px; border-radius: var(--radius-sm); background: oklch(1 0 0 / 0.06); font-size: var(--text-sm); }
.market p { font-size: var(--text-sm); color: var(--dark-muted); }
.market--img { padding: 0; overflow: hidden; grid-column: span 2; position: relative; min-height: 340px; display: flex; align-items: flex-end; }
.market--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.market--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.14 0.01 150 / 0.92) 0%, oklch(0.14 0.01 150 / 0.4) 60%, transparent 100%); }
.market--img .market__over { position: relative; z-index: 1; padding: var(--space-10); max-width: 560px; display: grid; gap: var(--space-3); }
.big-stat { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: #7fe0a6; line-height: 1; }
@media (max-width: 860px) { .markets { grid-template-columns: 1fr; } .market--img { grid-column: auto; } }

/* ---------- Why / clients ---------- */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-12); margin-top: var(--space-10); }
.why > div { padding-block: var(--space-5); border-top: 1px solid var(--color-border); display: grid; grid-template-columns: 28px 1fr; gap: var(--space-4); }
.why svg { width: 24px; height: 24px; color: var(--color-primary); margin-top: 2px; }
.why h3 { font-size: var(--text-base); font-weight: 600; }
.why p { font-size: var(--text-sm); color: var(--color-text-muted); }
.clients { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-top: var(--space-6); }
.clients li { border: 1px solid var(--color-border); background: var(--color-surface); padding: 10px 16px; border-radius: 999px; font-size: var(--text-sm); }
@media (max-width: 720px) { .why { grid-template-columns: 1fr; } }

/* ---------- Insight cards ---------- */
.insights-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-10); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--color-primary)); }
.tag[data-cat="shipping"] { --dot: #c2410c; }
.tag[data-cat="outsourcing"] { --dot: #0f766e; }
.tag[data-cat="supplychain-tech"] { --dot: #1d4ed8; }
.tag[data-cat="ai"] { --dot: #00a950; }
.card h3 { font-size: var(--text-base); font-weight: 600; line-height: 1.35; }
.card p { font-size: var(--text-sm); color: var(--color-text-muted); }
.impact { margin-top: auto; padding-top: var(--space-4); border-top: 1px dashed var(--color-border); font-size: var(--text-sm); }
.impact b { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); margin-bottom: 4px; }
.src { font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; min-height: 32px; }
.src:hover { color: var(--color-primary); text-decoration: underline; }
.sev { font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.sev--high { color: var(--sev-high); background: oklch(0.6 0.2 25 / 0.1); }
.sev--medium { color: var(--sev-med); background: oklch(0.7 0.15 70 / 0.12); }
.sev--low { color: var(--sev-low); background: oklch(0.6 0.15 150 / 0.1); }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Compliance band ---------- */
.license { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-12); align-items: start; }
.license dl { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); }
.license dl div { padding: var(--space-5) var(--space-4) var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.license dt { font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .08em; }
.license dd { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .license { grid-template-columns: 1fr; } .license dl { grid-template-columns: 1fr 1fr; } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(var(--space-8), 6vw, var(--space-20)); }
.contact__list { list-style: none; display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.contact__list li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); }
.contact__list svg { width: 22px; height: 22px; color: #7fe0a6; margin-top: 3px; }
.contact__list a { text-decoration: none; }
.contact__list a:hover { text-decoration: underline; }
.contact__list small { display: block; font-size: var(--text-xs); color: var(--dark-muted); text-transform: uppercase; letter-spacing: .08em; }
form.enquiry { background: var(--dark-surface); border: 1px solid var(--dark-border); border-radius: var(--radius-lg); padding: clamp(var(--space-6), 4vw, var(--space-10)); display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--text-xs); font-weight: 600; color: var(--dark-muted); text-transform: uppercase; letter-spacing: .08em; }
.field input, .field select, .field textarea { width: 100%; background: oklch(1 0 0 / 0.05); border: 1px solid var(--dark-border); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--dark-text); min-height: 48px; font-size: var(--text-base); }
.field select option { color: #111; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #7fe0a6; box-shadow: 0 0 0 3px oklch(0.8 0.15 155 / 0.2); }
.field .err { font-size: var(--text-xs); color: #ff9a8f; min-height: 1em; }
.form-note { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--dark-muted); }
.form-status { grid-column: 1 / -1; font-size: var(--text-sm); color: #7fe0a6; min-height: 1.2em; }
.form-status a { color: #fff; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { form.enquiry { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { background: #0e1210; color: var(--dark-muted); padding-block: var(--space-16) var(--space-8); font-size: var(--text-sm); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-10); }
.footer img { height: 40px; width: auto; margin-bottom: var(--space-4); }
.footer h2 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--dark-text); margin-bottom: var(--space-4); font-weight: 600; }
.footer ul { list-style: none; display: grid; gap: var(--space-2); }
.footer a { text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__base { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--dark-border); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Insights page ---------- */
.page-hero { background: var(--dark-bg); color: var(--dark-text); position: relative; overflow: hidden; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.14 0.01 150 / 0.95) 0%, oklch(0.14 0.01 150 / 0.55) 100%); }
.page-hero .wrap { position: relative; z-index: 1; padding-block: clamp(var(--space-16), 9vw, var(--space-24)); display: grid; gap: var(--space-5); }
.page-hero h1 { font-size: var(--text-2xl); max-width: 20ch; }
.page-hero .eyebrow { color: #7fe0a6; }
.page-hero p { color: #cfd5d0; max-width: 62ch; }
.updated { font-size: var(--text-xs); color: #b7beb9; display: inline-flex; align-items: center; gap: 8px; }
.updated::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 0 4px oklch(0.75 0.17 152 / 0.25); }

.watch { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.watch__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.watch__item h3 { font-size: var(--text-sm); font-weight: 600; }
.watch__item p { font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 960px) { .watch { grid-template-columns: 1fr 1fr; } }
@media (max-width: 340px) { .watch { grid-template-columns: 1fr; } }

.outlook { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.outlook li { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); max-width: none; }
.outlook li span.n { font-family: var(--font-display); font-weight: 700; color: var(--color-primary); font-size: var(--text-lg); }
.outlook a { color: var(--color-text-muted); font-size: var(--text-xs); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-8); position: sticky; top: 76px; z-index: 5; background: var(--color-bg); padding-block: var(--space-3); }
.filter { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.filter:hover { color: var(--color-text); border-color: oklch(0.25 0.01 30 / 0.3); }
.filter[aria-pressed="true"] { background: var(--brand-charcoal); color: #fff; border-color: var(--brand-charcoal); }
.filter .count { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 4px; }
.feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.feed .card { animation: fadeUp .5s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .feed { grid-template-columns: 1fr; } }

.solutions { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--dark-border); margin-top: var(--space-10); }
.solution { padding: var(--space-8) var(--space-8) var(--space-8) 0; border-bottom: 1px solid var(--dark-border); display: grid; gap: var(--space-3); }
.solution:nth-child(even) { padding-left: var(--space-8); border-left: 1px solid var(--dark-border); }
.solution h3 { font-size: var(--text-lg); font-weight: 600; color: #fff; }
.solution .chal { font-size: var(--text-sm); color: var(--dark-muted); }
.solution .chal b, .solution .ans b { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 2px; }
.solution .chal b { color: #ffb38a; }
.solution .ans b { color: #7fe0a6; }
.solution .ans { font-size: var(--text-sm); color: var(--dark-text); }
@media (max-width: 760px) { .solutions { grid-template-columns: 1fr; } .solution, .solution:nth-child(even) { padding: var(--space-6) 0; border-left: 0; } }

.disclaimer { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-8); max-width: 80ch; }

/* reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .hero::after { background: linear-gradient(180deg, oklch(0.14 0.01 150 / 0.7) 0%, oklch(0.14 0.01 150 / 0.55) 45%, oklch(0.12 0.01 150 / 0.92) 100%); }
  .market--img::after { background: linear-gradient(180deg, transparent 0%, oklch(0.14 0.01 150 / 0.35) 40%, oklch(0.14 0.01 150 / 0.92) 100%); }
  .market--img img { opacity: .9; }
  .market--img { min-height: 400px; }
  .market--img .market__over { padding: var(--space-6); }
  .watch { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .watch__item { padding: var(--space-4); }
}

/* ---------- Language switcher ---------- */
.lang { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; gap: 2px; order: 3; flex-shrink: 0; }
.lang button { min-width: 40px; min-height: 34px; padding: 0 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); letter-spacing: .04em; cursor: pointer; }
.lang button[data-lang="ar"] { font-family: 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; }
.lang button:hover { color: var(--color-text); }
.lang button[aria-pressed="true"] { background: var(--brand-charcoal); color: #fff; }
.header__inner .nav { margin-inline-start: auto; }
@media (max-width: 900px) {
  .lang { order: 0; margin-inline-start: auto; }
  .menu-btn { order: 1; }
}
@media (max-width: 380px) { .lang button { min-width: 34px; padding: 0 7px; } .brand img { height: 30px; } }

/* ---------- RTL / Arabic ---------- */
[dir="rtl"] body, [dir="rtl"] .h-display, [dir="rtl"] .h-section, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .btn, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] button { font-family: 'IBM Plex Sans Arabic', var(--font-body); }
[dir="rtl"] .lang button[data-lang="en"], [dir="rtl"] .lang button[data-lang="fr"] { font-family: var(--font-body); }
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] .eyebrow, [dir="rtl"] .tag, [dir="rtl"] .impact b, [dir="rtl"] .field label, [dir="rtl"] .facts dt, [dir="rtl"] .license dt, [dir="rtl"] .contact__list small, [dir="rtl"] .footer h2, [dir="rtl"] .market h3 small, [dir="rtl"] .solution b { text-transform: none; }
[dir="rtl"] .h-display, [dir="rtl"] .h-section { line-height: 1.3; }
[dir="rtl"] .eyebrow { font-size: var(--text-sm); }
[dir="rtl"] .hero h1 { max-width: 20ch; }
[dir="rtl"] .market--img::after { background: linear-gradient(270deg, oklch(0.14 0.01 150 / 0.92) 0%, oklch(0.14 0.01 150 / 0.4) 60%, transparent 100%); }
[dir="rtl"] .page-hero::after { background: linear-gradient(270deg, oklch(0.14 0.01 150 / 0.95) 0%, oklch(0.14 0.01 150 / 0.55) 100%); }
[dir="rtl"] .process li { padding: var(--space-6) 0 var(--space-6) var(--space-5); border-right: 0; border-left: 1px solid var(--color-border); }
[dir="rtl"] .process li:last-child { border-left: 0; }
[dir="rtl"] .process li + li { padding-left: var(--space-5); padding-right: var(--space-5); }
[dir="rtl"] .solution:nth-child(even) { padding-left: 0; padding-right: var(--space-8); border-left: 0; border-right: 1px solid var(--dark-border); }
[dir="rtl"] .filter .count { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .skip { left: auto; right: -999px; }
[dir="rtl"] .skip:focus { right: 8px; }
[dir="rtl"] [aria-hidden="true"]:not(svg) { display: inline-block; }
[dir="rtl"] .src span[aria-hidden="true"] { transform: scaleX(-1); }
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 960px) { [dir="rtl"] .process li { border-left: 0; padding: var(--space-6) 0 !important; } }
@media (max-width: 760px) { [dir="rtl"] .solution:nth-child(even) { padding: var(--space-6) 0; border-right: 0; } }
@media (max-width: 720px) {
  [dir="rtl"] .market--img::after { background: linear-gradient(180deg, transparent 0%, oklch(0.14 0.01 150 / 0.35) 40%, oklch(0.14 0.01 150 / 0.92) 100%); }
}

/* ---------- Solar ---------- */
.page-hero--solar img { opacity: .55; }
.page-hero h1 em { font-style: normal; color: #7fe0a6; }
.srcl { font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; min-height: 28px; margin-inline-end: var(--space-3); }
.srcl:hover { color: var(--color-primary); text-decoration: underline; }
.dark .srcl { color: var(--dark-muted); }
.dark .srcl:hover { color: #7fe0a6; }
[dir="rtl"] .srcl span[aria-hidden="true"] { transform: scaleX(-1); display: inline-block; }
.sstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-10); }
.sstat { background: var(--dark-surface); border: 1px solid var(--dark-border); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; }
.sstat strong { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 1.8vw, 2.75rem); white-space: nowrap; line-height: 1; color: #7fe0a6; direction: ltr; unicode-bidi: isolate; justify-self: start; }
.sstat p { font-size: var(--text-sm); color: var(--dark-text); }
@media (max-width: 960px) { .sstats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sstats { grid-template-columns: 1fr; } }
.srange-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.srange { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; display: flex; flex-direction: column; }
.srange img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.srange__body { padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.srange h3 { font-size: var(--text-base); font-weight: 600; line-height: 1.3; }
.srange p { font-size: var(--text-sm); color: var(--color-text-muted); }
.srange ul { list-style: none; display: grid; gap: 6px; padding: 0; }
.srange li { font-size: var(--text-xs); font-weight: 500; color: var(--color-text); padding-inline-start: 14px; position: relative; max-width: none; }
.srange li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green); }
@media (max-width: 1100px) { .srange-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .srange-grid { grid-template-columns: 1fr; } }
.tscroll { margin-top: var(--space-10); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.tscroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ctable { width: 100%; min-width: 900px; border-collapse: collapse; font-size: var(--text-sm); }
.ctable th, .ctable td { padding: 14px 16px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.ctable thead th { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; background: var(--color-surface-2, #f3f4f1); }
.ctable thead th small { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); margin-top: 2px; }
.ctable thead th.is-rec small { color: var(--color-primary); font-weight: 600; }
.ctable tbody th { font-weight: 600; color: var(--color-text); width: 18%; position: sticky; inset-inline-start: 0; background: var(--color-surface); }
.ctable thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; }
.ctable td { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ctable td.is-rec { color: var(--color-text); }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }
.ctable .srcrow td { display: table-cell; }
.ctable .srcrow .srcl { display: flex; }
.recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.rec { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-2); background: var(--color-surface); }
.rec strong { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-primary); direction: ltr; unicode-bidi: isolate; justify-self: start; }
.rec p { font-size: var(--text-sm); font-weight: 500; }
.rec__by { font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 900px) { .recs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .recs { grid-template-columns: 1fr; } }
.sguides { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-10); }
.sguide { background: var(--dark-surface); border: 1px solid var(--dark-border); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.sguide__tech { font-size: var(--text-xs); font-weight: 600; color: #7fe0a6; letter-spacing: .08em; text-transform: uppercase; }
.sguide h3 { font-size: var(--text-lg, 1.25rem); font-weight: 600; }
.sguide p { font-size: var(--text-sm); color: var(--dark-muted); }
@media (max-width: 860px) { .sguides { grid-template-columns: 1fr; } }
/* home solar feature */
.line-solar { margin-top: var(--space-4); position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--dark-bg); color: #fff; min-height: 380px; display: flex; align-items: center; }
.line-solar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.line-solar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.14 0.01 150 / 0.92) 0%, oklch(0.14 0.01 150 / 0.6) 55%, oklch(0.14 0.01 150 / 0.1) 100%); }
[dir="rtl"] .line-solar::after { background: linear-gradient(270deg, oklch(0.14 0.01 150 / 0.92) 0%, oklch(0.14 0.01 150 / 0.6) 55%, oklch(0.14 0.01 150 / 0.1) 100%); }
.line-solar__body { position: relative; z-index: 1; padding: var(--space-10); display: grid; gap: var(--space-3); max-width: 620px; }
.line-solar h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.line-solar p { color: #d6dbd7; font-size: var(--text-sm); }
.line-solar ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.line-solar li { font-size: var(--text-xs); border: 1px solid oklch(1 0 0 / 0.25); border-radius: 999px; padding: 4px 12px; }
.line-solar .btn { justify-self: start; margin-top: var(--space-2); }
@media (max-width: 720px) { .line-solar { align-items: flex-end; min-height: 520px; } .line-solar::after, [dir="rtl"] .line-solar::after { background: linear-gradient(180deg, oklch(0.14 0.01 150 / 0.2) 0%, oklch(0.14 0.01 150 / 0.75) 40%, oklch(0.14 0.01 150 / 0.95) 100%); } .line-solar__body { padding: var(--space-6); } }
[dir="rtl"] .sguide__tech { text-transform: none; }
[dir="rtl"] .ctable td { unicode-bidi: plaintext; text-align: right; }

/* ---------- Sample solutions (cases) ---------- */
.cs-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-10); border-bottom: 1px solid var(--color-border); }
.cs-tabs button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 0; background: none; font: inherit; font-weight: 600; font-size: var(--text-sm); color: var(--color-text-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; min-height: 48px; }
.cs-tabs button:hover { color: var(--color-text); }
.cs-tabs button[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--brand-green); }
.cs-tabs button:focus-visible, .cs-seg button:focus-visible, .cs-draw:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cs-ico { width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.cs-ico--villa { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 11l9-7 9 7v9H3z'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
.cs-ico--farm { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='M12 13c-4 0-6-3-6-6 3 0 6 2 6 6zM12 11c0-4 3-6 6-6 0 3-2 6-6 6z'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E"); }
.cs-ico--factory { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 21V10l6 4V10l6 4V6h6v15z'/%3E%3C/svg%3E"); }
.cs-ico--building { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='3' width='14' height='18'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2'/%3E%3C/svg%3E"); }
.cs-body { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-6); align-items: start; }
.cs-stage { position: sticky; top: 88px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-4); }
.cs-controls { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cs-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; background: var(--color-bg); }
.cs-seg button { border: 0; background: none; font: inherit; font-size: var(--text-xs); font-weight: 600; padding: 8px 16px; border-radius: 999px; color: var(--color-text-muted); cursor: pointer; min-height: 36px; }
.cs-seg button[aria-pressed="true"] { background: var(--brand-charcoal); color: #fff; }
.cs-draw { border-radius: var(--radius-sm); overflow: hidden; }
.cs-svg { display: block; width: 100%; height: auto; }
.cs-cap { font-size: var(--text-sm); color: var(--color-text); min-height: 3em; }
.cs-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.cs-legend li { display: inline-flex; align-items: center; gap: 8px; max-width: none; }
.cs-legend li::before { content: ""; width: 22px; height: 0; border-top: 3px dashed var(--c); }
.cs-legend .lg-sun { --c: #008f45; } .cs-legend .lg-bat { --c: #b87400; } .cs-legend .lg-grid { --c: #3B6EA8; } .cs-legend .lg-gen { --c: #C2410C; }
.cs-spec { background: var(--dark-bg); color: var(--dark-text); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-3); }
.cs-spec .eyebrow { color: #7fe0a6; }
.cs-spec h3 { font-family: var(--font-display); font-size: var(--text-lg, 1.35rem); font-weight: 700; line-height: 1.2; }
.cs-spec h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--dark-muted); margin-top: var(--space-2); font-weight: 600; }
.cs-assume, .cs-note, .cs-africa { font-size: var(--text-sm); color: var(--dark-muted); }
.cs-africa strong { color: var(--dark-text); }
.cs-spec dl { display: grid; gap: 0; }
.cs-spec dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-3); padding: 9px 0; border-bottom: 1px solid var(--dark-border); font-size: var(--text-sm); }
.cs-spec dt { color: var(--dark-muted); }
.cs-spec dd { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.cs-spec dd small { display: block; font-weight: 400; color: var(--dark-muted); font-size: var(--text-xs); }
.cs-spec .srcl { color: var(--dark-muted); }
.cs-spec .srcl:hover { color: #7fe0a6; }
[dir="rtl"] .cs-spec h4 { text-transform: none; letter-spacing: 0; }
[dir="rtl"] .cs-spec dd { text-align: right; }
@media (max-width: 1000px) { .cs-body { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cs-draw { overflow-x: auto; } .cs-svg { min-width: 640px; } }
@media (max-width: 560px) { .cs-tabs { flex-wrap: nowrap; overflow-x: auto; } .cs-tabs button { padding: 10px 12px; white-space: nowrap; } .cs-stage { padding: var(--space-3); } }
/* drawing */
.cs-svg text { font-family: var(--font-body); }
[dir="rtl"] .cs-svg text { font-family: 'IBM Plex Sans Arabic', var(--font-body); }
.cs-svg .sky { fill: #eef5f0; transition: fill .4s; }
.cs-svg.is-night .sky { fill: #1a2230; }
.cs-svg .ground { fill: #e9e1cf; }
.cs-svg.is-night .ground { fill: #2a2924; }
.cs-svg .sun { fill: #F5B301; } .cs-svg .ray { stroke: #F5B301; stroke-width: 3; stroke-linecap: round; }
.cs-svg .moon { fill: #e7e3c8; } .cs-svg .star { fill: #fff; opacity: .8; }
.cs-svg .wall { fill: #f6f1e7; stroke: #231F20; stroke-width: 2; }
.cs-svg.is-night .wall { fill: #3a3a36; stroke: #9aa29c; }
.cs-svg .parapet, .cs-svg .roof { fill: #d9cfbd; stroke: #231F20; stroke-width: 2; }
.cs-svg.is-night .parapet, .cs-svg.is-night .roof { fill: #4a4943; stroke: #9aa29c; }
.cs-svg .win { fill: #cfe3ea; stroke: #231F20; stroke-width: 1.5; }
.cs-svg.is-night .win { fill: #f5cf63; stroke: #9aa29c; }
.cs-svg .door { fill: #8a6f52; stroke: #231F20; stroke-width: 1.5; }
.cs-svg .roller { fill: #c9ccc8; }
.cs-svg .shop { fill: #ece5d6; stroke: #231F20; stroke-width: 2; }
.cs-svg.is-night .shop { fill: #46443e; }
.cs-svg .awning { fill: #00A950; stroke: #231F20; stroke-width: 1.5; }
.cs-svg .glass { fill: #cfe3ea; stroke: #231F20; stroke-width: 1; }
.cs-svg .tank { fill: #bfc8c4; stroke: #231F20; stroke-width: 1.5; }
.cs-svg .pump { fill: #3B6EA8; stroke: #231F20; stroke-width: 1.5; }
.cs-svg .crop { fill: #4c9a4a; stroke: none; }
.cs-svg .frame { stroke: #231F20; stroke-width: 2; } .cs-svg .thin { stroke-width: 1; }
.cs-svg.is-night .frame { stroke: #9aa29c; }
.cs-svg .frame-fill { fill: #231F20; }
.cs-svg .palm path { fill: none; stroke: #3d7a3a; stroke-width: 5; stroke-linecap: round; }
.cs-svg .pv-face { fill: #1f3a5f; stroke: #0f1d30; stroke-width: 1.5; }
.cs-svg .pv-cell { stroke: #6d8fb8; stroke-width: .8; }
.cs-svg .pv-glint { stroke: #a9c6e8; stroke-width: 1.5; }
.cs-svg.is-night .pv-face { fill: #17233a; }
.cs-svg .dim line { stroke: #00813d; stroke-width: 1.5; }
.cs-svg .dim text { fill: #00813d; font-size: 17px; font-weight: 700; }
.cs-svg.is-night .dim line { stroke: #7fe0a6; } .cs-svg.is-night .dim text { fill: #7fe0a6; }
.cs-svg .lbl { fill: #231F20; font-size: 17px; } .cs-svg .lbl.b { font-weight: 700; } .cs-svg .lbl.sub { font-size: 15px; fill: #4a544e; }
.cs-svg.is-night .lbl { fill: #eef0ec; } .cs-svg.is-night .lbl.sub { fill: #b9c2bc; }
.cs-svg .inv rect:first-child, .cs-svg .bat rect, .cs-svg .meter rect:first-child, .cs-svg .gen rect:first-child { fill: #fff; stroke: #231F20; stroke-width: 2; }
.cs-svg .screen { fill: #0f2a1c !important; stroke: none !important; }
.cs-svg .led { fill: #00A950; } .cs-svg .led2 { fill: #F5B301; }
.cs-svg .bat .cell { fill: #e5e2da; stroke: none; } .cs-svg .bat .cell.on { fill: #D98E04; }
.cs-svg .bat.is-dim { opacity: .45; }
.cs-svg .mtxt { font-size: 16px; fill: #231F20; }
.cs-svg .pylon path { fill: none; stroke: #55605a; stroke-width: 2.5; } .cs-svg .pylon .wire { stroke-width: 1.5; }
.cs-svg.is-night .pylon path { stroke: #9aa29c; }
.cs-svg .nogrid circle { fill: #fff; stroke: #C2410C; stroke-width: 2.5; } .cs-svg .nogrid path { fill: none; stroke: #55605a; stroke-width: 2.5; } .cs-svg .nogrid line { stroke: #C2410C; stroke-width: 3; }
.cs-svg .gen circle { fill: #e5e2da; stroke: #231F20; stroke-width: 2; } .cs-svg .gen.is-on circle { fill: #C2410C; }
.cs-svg .track { fill: none; stroke: #c9c4b8; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.cs-svg .track--opt { stroke-dasharray: 2 8; }
.cs-svg.is-night .track { stroke: #4b5450; }
.cs-svg .flow { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 12; animation: cs-flow 1.1s linear infinite; }
.cs-svg .flow--sun { stroke: #008f45; } .cs-svg .flow--bat { stroke: #b87400; } .cs-svg .flow--grid { stroke: #3B6EA8; } .cs-svg .flow--gen { stroke: #C2410C; }
.cs-svg.is-night .flow--sun { stroke: #2fd17a; } .cs-svg.is-night .flow--grid { stroke: #6fa3dc; } .cs-svg.is-night .flow--gen { stroke: #f07040; }
.cs-svg .mk--sun { fill: #008f45; } .cs-svg .mk--bat { fill: #b87400; } .cs-svg .mk--grid { fill: #3B6EA8; } .cs-svg .mk--gen { fill: #C2410C; }
.cs-svg.is-night .mk--sun { fill: #2fd17a; } .cs-svg.is-night .mk--grid { fill: #6fa3dc; } .cs-svg.is-night .mk--gen { fill: #f07040; }
@keyframes cs-flow { to { stroke-dashoffset: -28; } }
.is-static .cs-svg .flow { animation: none; stroke-dasharray: none; }
@media (prefers-reduced-motion: reduce) { .cs-svg .flow { animation: none; stroke-dasharray: none; } }
.cases-sec { background: var(--color-surface-offset, #ecebe4); }
.cs-disclaimer { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); max-width: 90ch; }
.cs-svg .dim--warn line { stroke: #C2410C; } .cs-svg .dim--warn text { fill: #C2410C; }
.cs-svg.is-night .dim--warn line { stroke: #ff8a5c; } .cs-svg.is-night .dim--warn text { fill: #ff8a5c; }
.cs-warn { font-size: var(--text-xs); background: oklch(0.65 0.17 45 / 0.18); border: 1px solid oklch(0.7 0.17 45 / 0.5); color: #ffc7a8; border-radius: var(--radius-sm); padding: 6px 10px; justify-self: start; }

@media (max-width: 1000px) { .cs-stage { position: static; } }
.line-solar__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.line-solar__actions .btn { margin-top: 0; }
.hero h1 { max-width: 18ch; }
.hero__meta-solar strong { color: #7fe0a6; }
.hero__meta-solar strong::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-inline-end: .35em; border-radius: 50%; background: #F5B301; box-shadow: 0 0 0 4px oklch(0.82 0.16 85 / 0.25); vertical-align: .05em; }
.supply .line-solar { margin-top: 0; margin-bottom: var(--space-4); }
.nav a[href^="./solar.html"]::before, .nav a[href^="./solar.html?"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #F5B301; margin-inline-end: 6px; vertical-align: .12em; }
.cs-swipe { display: none; }
@media (max-width: 700px) {
  .cs-drawwrap { position: relative; }
  .cs-drawwrap::after { content: ""; position: absolute; inset-block: 0; right: 0; width: 36px; pointer-events: none; background: linear-gradient(to right, transparent, var(--color-surface)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .cs-swipe { display: block; margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
}

/* Header robustness (Nova P1) */
.brand, .brand img { flex-shrink: 0; }
.nav a, .nav .btn { white-space: nowrap; }
/* Cases layout fixes (Nova P2) */
.cs-drawwrap { min-width: 0; max-width: 100%; }
@media (max-width: 1180px) { .cs-body { grid-template-columns: 1fr !important; } .cs-stage { position: static !important; } }
@media (max-height: 760px) { .cs-stage { position: static !important; } }
.cs-seg button { min-height: 44px; }
@media (min-width: 1281px) and (max-width: 1480px) { .nav { gap: var(--space-5); } .header__inner { gap: var(--space-4); } }