/* ============================================================================
   COTECH SOLAR — design system
   Editorial, high-contrast, brand-native. Palette derived from the COTECH mark:
   royal blue #2454B4 and signal green #0CB40C on a deep void ground.
   ========================================================================= */

:root {
  /* ground */
  --void: #050c17;
  --void-2: #0a1526;
  --ink: #0b1a2b;
  --paper: #ffffff;
  --paper-2: #f6f8fb;
  --paper-3: #eef2f7;

  /* brand (sampled from the logo) */
  --royal: #2454b4;
  --royal-lt: #4a7fe0;
  --green: #0cb40c;
  --green-lt: #2fd42f;
  --amber: #f5941e;

  /* type */
  --body-c: #46586c;
  --mute: #7b8ea3;
  --hair: rgba(11, 26, 43, 0.10);
  --hair-lt: rgba(255, 255, 255, 0.12);

  --page: 1280px;
  --gut: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sh: 0 24px 70px rgba(5, 12, 23, 0.13);
  --sh-lg: 0 40px 100px rgba(5, 12, 23, 0.22);

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "ss01", "cv05";
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--body-c);
  font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, figure { margin-top: 0; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
::selection { background: var(--royal); color: #fff; }
:focus-visible { outline: 2px solid var(--royal-lt); outline-offset: 3px; }

/* ---------------------------------------------------------------- primitives */
.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--gut); }
.label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--royal); display: inline-flex; align-items: center; gap: 10px;
}
.label::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.5; }
.label.on-dark { color: var(--amber); }
.display { font-size: clamp(34px, 5.2vw, 62px); letter-spacing: -0.04em; }
.serif-num { font-variant-numeric: tabular-nums; }
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--amber);
  color: var(--void); padding: 10px 18px; border-radius: 4px; font-weight: 700;
}
.skip:focus { left: 12px; }

/* ------------------------------------------------------------------ buttons */
.cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px;
  font-weight: 700; font-size: 14.5px; letter-spacing: 0.01em; border: 1px solid transparent;
  transition: all 0.35s var(--ease); cursor: pointer; position: relative; overflow: hidden;
}
.cta span { position: relative; z-index: 2; }
.cta i { font-style: normal; transition: transform 0.35s var(--ease); position: relative; z-index: 2; }
.cta:hover i { transform: translateX(5px); }
.cta--solid { background: var(--royal); color: #fff; }
.cta--solid::before {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: translateY(101%); transition: transform 0.4s var(--ease);
}
.cta--solid:hover::before { transform: translateY(0); }
.cta--amber { background: var(--amber); color: var(--void); }
.cta--amber::before {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform: translateY(101%); transition: transform 0.4s var(--ease);
}
.cta--amber:hover::before { transform: translateY(0); }
.cta--ghost { border-color: var(--hair-lt); color: #fff; }
.cta--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }
.cta--line { border-color: var(--hair); color: var(--ink); }
.cta--line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.tlink { color: var(--royal); font-weight: 700; font-size: 14px; display: inline-flex; gap: 7px; align-items: center; }
.tlink::after { content: "→"; transition: transform 0.3s var(--ease); }
.tlink:hover::after { transform: translateX(5px); }

/* ------------------------------------------------------------------- header */
/* ------------------------------------------------------------- anniversary */
.anniv {
  background: linear-gradient(100deg, #071a33 0%, var(--royal) 34%, #0d6f4e 68%, #071a33 100%);
  background-size: 260% 100%;
  color: #eaf2ff; font-size: 13px; font-weight: 600; letter-spacing: 0.015em;
  position: relative; overflow: hidden;
  animation: anniv-flow 18s linear infinite;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
}
@keyframes anniv-flow { to { background-position: -260% 0; } }
/* travelling gold sheen sweeping across the ribbon */
.anniv::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(245,200,120,0.3), transparent);
  transform: skewX(-18deg); animation: anniv-sheen 7s ease-in-out infinite;
}
@keyframes anniv-sheen { 0% { left: -45%; } 60%,100% { left: 135%; } }
.anniv .wrap { position: relative; z-index: 1; padding-block: 7px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* gold "20TH" anniversary medallion */
.anniv__badge {
  display: inline-flex; align-items: baseline; gap: 1px; flex: none;
  padding: 3px 10px; border-radius: 999px; line-height: 1;
  background: linear-gradient(135deg, #ffe19a, #f5941e 55%, #d97a06);
  color: #3a1d00; box-shadow: 0 2px 10px rgba(245,148,30,0.4), inset 0 1px 0 rgba(255,255,255,0.55);
}
.anniv__badge b { font-size: 14px; font-weight: 900; letter-spacing: -0.02em; color: #3a1d00; }
.anniv__badge i { font-size: 9px; font-weight: 800; font-style: normal; letter-spacing: 0.04em; }
.anniv__txt { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* "20 Years" rendered in celebratory gold */
.anniv__txt b {
  font-weight: 800;
  background: linear-gradient(120deg, #ffe6ad, #ffb454); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.anniv__mut { color: #b9cbe4; font-weight: 500; }
.anniv__sep { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(245,148,30,0.7); flex: none; }
/* right-side CTA pill */
.anniv__cta {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12px; font-weight: 700; color: #fff; padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35); transition: all 0.3s var(--ease);
}
.anniv__cta span { transition: transform 0.3s var(--ease); }
.anniv__cta:hover { background: var(--amber); border-color: var(--amber); color: #2a1600; }
.anniv__cta:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .anniv, .anniv::before { animation: none; } }
@media (max-width: 900px) { .anniv__cta { display: none; } }
@media (max-width: 620px) { .anniv { font-size: 11.5px; } .anniv .wrap { gap: 10px; } .anniv__txt { gap: 8px; } .anniv__mut:last-of-type, .anniv__sep:last-of-type { display: none; } }
@media (max-width: 620px) { .anniv { font-size: 11px; } .anniv .wrap { gap: 6px; } .anniv__star { display: none; } }

/* Solid, always-visible header pinned to the top — no floating/translucent bar,
   no collapsing utility strip. */
.shell { position: sticky; top: 0; z-index: 500; background: #fff; }
.shell__bar {
  background: var(--void); color: #93a7bd; font-size: 12.5px; letter-spacing: 0.01em;
}
.shell__bar .wrap { display: flex; justify-content: space-between; gap: 20px; padding-block: 9px; }
.shell__bar a:hover { color: var(--amber); }
.shell__bar-l { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 0; }
.shell__bar-l .dot { font-style: normal; opacity: 0.4; margin: 0 9px; }
.shell__bar-l a { white-space: nowrap; }
/* phone numbers read left-to-right even inside the Arabic (RTL) bar */
[dir="rtl"] .shell__bar-l a[href^="tel:"] { direction: ltr; unicode-bidi: embed; }
.shell__nav { background: #fff; border-bottom: 1px solid var(--hair); transition: box-shadow 0.3s var(--ease); }
.shell.is-stuck .shell__nav { box-shadow: 0 6px 26px rgba(5, 12, 23, 0.08); }
.shell__nav .wrap { display: flex; align-items: center; gap: 30px; padding-block: 14px; }
.mark { flex: none; }
.mark img { height: 46px; width: auto; max-width: none; display: block; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: block; padding: 9px 13px; font-size: 14.5px; font-weight: 600; color: var(--ink);
  position: relative; letter-spacing: -0.005em;
}
.nav__link::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 1.5px;
  background: var(--royal); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__item:hover .nav__link::after, .nav__link.is-here::after { transform: scaleX(1); }
.nav__item:hover .nav__link { color: var(--royal); }
.drop {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0;
  background: #fff; border: 1px solid var(--hair); box-shadow: var(--sh); padding: 10px;
  min-width: 260px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 0.3s var(--ease); display: grid; gap: 1px;
}
.drop--wide { grid-template-columns: 1fr 1fr; min-width: 460px; }
.nav__item:hover .drop, .nav__item:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.drop a {
  padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 9px; transition: all 0.2s;
}
.drop a::before { content: ""; width: 0; height: 1px; background: var(--royal); transition: width 0.25s var(--ease); }
.drop a:hover { color: var(--royal); background: var(--paper-2); }
.drop a:hover::before { width: 12px; }
.shell__act { display: flex; align-items: center; gap: 12px; }
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid var(--hair);
  border-radius: 8px; background: #fff; cursor: pointer; font: inherit; color: var(--ink);
  font-size: 12.5px; font-weight: 700; transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.lang__btn svg { color: var(--mute); }
.lang:hover .lang__btn, .lang:focus-within .lang__btn { border-color: var(--royal); color: var(--royal); }
.lang:hover .lang__btn svg, .lang:focus-within .lang__btn svg { color: var(--royal); }
.lang__drop { left: auto; right: 0; min-width: 150px; }
[dir="rtl"] .lang__drop { right: auto; left: 0; }
.lang__drop a.is-on { color: var(--royal); font-weight: 700; }
.lang__drop a.is-on::before { width: 12px; }
.burger { display: none; margin-left: auto; width: 44px; height: 40px; border: 1px solid var(--hair); background: #fff; cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after {
  position: absolute; left: 50%; translate: -50% 0; width: 18px; height: 1.5px; background: var(--ink); transition: all 0.3s var(--ease);
}
.burger span { top: 50%; }
.burger span::before { content: ""; top: -6px; left: 50%; }
.burger span::after { content: ""; top: 6px; left: 50%; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; rotate: 45deg; }
.burger[aria-expanded="true"] span::after { top: 0; rotate: -45deg; }
.drawer {
  display: none; position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); background: var(--void);
  transform: translateX(101%); transition: transform 0.45s var(--ease); z-index: 600;
  padding: 90px 32px 40px; overflow-y: auto;
}
.drawer.is-open { transform: none; }
.drawer a { display: block; color: #cfdcea; font-size: 17px; font-weight: 600; padding: 13px 0; border-bottom: 1px solid var(--hair-lt); }
.drawer a:hover { color: var(--amber); }
.drawer .sub { color: #7b8ea3; font-size: 14px; padding-left: 16px; font-weight: 500; }

/* --------------------------------------------------------------------- hero */
.hero { position: relative; min-height: min(94vh, 900px); display: flex; align-items: flex-end; background: var(--void); overflow: hidden; }
.hero .wrap { padding-top: clamp(30px, 5vh, 60px); }
.hero__lead { text-shadow: 0 1px 14px rgba(4, 14, 28, 0.6); }
.hero__frames { position: absolute; inset: 0; }
.frame {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.05); transition: opacity 1.6s var(--ease);
}
.frame.is-on { opacity: 1; animation: drift 12s linear forwards; }
@keyframes drift { to { transform: scale(1.13); } }
/* Light veil only: the photography must stay crisp and colourful. Legibility
   comes from a soft left scrim + text shadow, not from washing the image out. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4,14,28,0.86) 0%, rgba(4,14,28,0.58) 34%, rgba(4,14,28,0.06) 62%, rgba(4,14,28,0.0) 100%),
    linear-gradient(0deg, rgba(4,14,28,0.72) 0%, transparent 34%);
}
.hero__grid {
  position: absolute; inset: 0; opacity: 0.4;
  background-image: linear-gradient(var(--hair-lt) 1px, transparent 1px), linear-gradient(90deg, var(--hair-lt) 1px, transparent 1px);
  background-size: 90px 90px; mask-image: radial-gradient(circle at 30% 50%, #000, transparent 78%);
}
.hero__glow {
  position: absolute; width: 52vw; height: 52vw; right: -16%; top: -24%; border-radius: 50%;
  background: radial-gradient(circle, rgba(36,84,180,0.26) 0%, rgba(12,180,12,0.07) 46%, transparent 66%);
  filter: blur(24px); mix-blend-mode: screen;
}
/* anniversary badge — the first thing the eye lands on */
.hero__badge {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px;
  padding: 9px 18px 9px 14px; border: 1px solid rgba(245,148,30,0.5);
  background: rgba(245,148,30,0.12); backdrop-filter: blur(8px);
  color: #ffd9a3; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero__badge b { color: var(--amber); font-size: 15px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.hero__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(245,148,30,0.7); animation: beat 2.4s infinite; }
@keyframes beat { 70% { box-shadow: 0 0 0 9px rgba(245,148,30,0); } 100% { box-shadow: 0 0 0 0 rgba(245,148,30,0); } }
.hero .wrap { position: relative; z-index: 3; width: 100%; padding-block: 0 clamp(40px, 7vh, 76px); }
.hero__copy { max-width: 900px; }
.hero__kicker {
  color: var(--amber); font-size: 12.5px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; opacity: 0; transform: translateY(14px);
}
.hero__kicker::before { content: ""; width: 30px; height: 2px; background: var(--amber); }
.hero h1 {
  color: #fff; font-size: clamp(38px, 5.6vw, 80px); line-height: 0.98; letter-spacing: -0.045em;
  font-weight: 800; margin: 0 0 22px; opacity: 0; transform: translateY(22px); max-width: 16ch;
  text-shadow: 0 3px 34px rgba(4, 14, 28, 0.55);
}
.hero h1 em { font-style: normal; color: var(--amber); }
.hero__lead {
  color: #cbd9e8; font-size: clamp(16.5px, 1.4vw, 20px); line-height: 1.55; max-width: 580px; margin: 0 0 36px;
  opacity: 0; transform: translateY(16px); font-weight: 400;
}
.is-typed { opacity: 1 !important; transform: none !important; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.hero__kicker.is-typed { transition-delay: 0.05s; }
.hero h1.is-typed { transition-delay: 0.14s; }
.hero__lead.is-typed { transition-delay: 0.24s; }
.hero__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero__trust {
  color: #cfdcea; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  margin: 0 0 clamp(34px, 5vh, 56px); text-shadow: 0 1px 10px rgba(4,14,28,0.7);
}

/* hero chapter index */
.chapters { display: flex; gap: 0; border-top: 1px solid var(--hair-lt); }
.chapters button {
  flex: 1; background: none; border: none; border-right: 1px solid var(--hair-lt); cursor: pointer;
  padding: 20px 18px 18px; text-align: left; color: #7f93a9; transition: all 0.4s var(--ease); position: relative;
}
.chapters button:last-child { border-right: none; }
.chapters button::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--amber);
  transition: width 0.5s var(--ease);
}
.chapters button.is-on::before { width: 100%; }
.chapters button.is-on { color: #fff; }
.chapters button:hover { color: #cfdcea; background: rgba(255, 255, 255, 0.03); }
.chapters em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; display: block; margin-bottom: 6px; opacity: 0.6; }
.chapters b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }

/* ------------------------------------------------------------------ section */
.sec { padding-block: clamp(30px, 3vw, 46px); position: relative; }
.sec--paper { background: var(--paper-2); }
.sec--void { background: var(--void); color: #a8bccf; }
.sec--void h2, .sec--void h3 { color: #fff; }
.sec__head { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: end; margin-bottom: clamp(20px, 2.2vw, 30px); }
.sec__head p { color: var(--mute); margin: 0; font-size: 16px; }
.sec--void .sec__head p { color: #93a7bd; }
.sec__head h2 { margin: 16px 0 0; }
.sec__head--mid { grid-template-columns: 1fr; text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: clamp(22px, 2.4vw, 30px); }
.sec__head--mid .label { justify-content: center; }
/* compact head: keeps a section title from eating a whole screen */
.sec__head--tight { margin-bottom: clamp(24px, 2.6vw, 34px); align-items: center; }
.sec__head--tight h2 { font-size: clamp(24px, 2.5vw, 33px); margin-top: 10px; }
.sec__head--tight p { font-size: 15px; }
/* answer-first lead paragraph (SEO/GEO snippet-friendly) */
.ans-lead { font-size: 15.5px; line-height: 1.65; color: var(--body-c); max-width: 900px; margin: 0 0 22px; }
.ans-lead a { color: var(--royal); font-weight: 600; }

/* ---------------------------------------------------- company intro (PPT p5)
   Factory photograph left, profile + the six headline figures right. */
.intro { background: var(--paper); }
.intro .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.intro__shot { position: relative; overflow: hidden; }
.intro__shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 1s var(--ease); }
.intro__shot:hover img { transform: scale(1.04); }
.intro__shot::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 92px; height: 5px;
  background: linear-gradient(90deg, var(--amber), var(--green));
}
.intro h2 { font-size: clamp(24px, 2.5vw, 34px); margin: 14px 0 16px; }
.intro > .wrap > div > p { font-size: 15.5px; margin: 0 0 20px; }
.intro__figs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); margin-top: 26px;
}
.fig { background: #fff; padding: 18px 16px; transition: background 0.4s var(--ease); }
.fig:hover { background: var(--paper-2); }
.fig b {
  display: block; font-size: clamp(21px, 2vw, 27px); color: var(--royal); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.fig b i { font-style: normal; font-size: 0.6em; color: var(--green); margin-left: 2px; }
.fig span { display: block; margin-top: 7px; font-size: 11px; color: var(--mute); letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; }

/* ------------------------------------------------------------- manifesto ---
   Editorial opener: oversized statement + supporting column. */
.manifesto .wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 4.5vw, 76px); align-items: stretch; }
.manifesto__quote {
  font-size: clamp(23px, 2.55vw, 35px); line-height: 1.32; color: var(--ink); font-weight: 700; letter-spacing: -0.03em;
  margin: 0; position: relative; padding-left: clamp(20px, 2.4vw, 40px);
}
/* oversized brand quote mark — the editorial cue big manufacturers use */
.manifesto__quote::before {
  content: "\201C"; position: absolute; left: -6px; top: -0.32em;
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(56px, 7vw, 104px); line-height: 1;
  color: var(--royal); opacity: 0.16; font-weight: 700;
}
.manifesto__quote b { color: var(--royal); font-weight: 700; }
/* Brand green is a highlight, never a paragraph: it underlines the phrase
   rather than colouring the whole run (large areas of #0CB40C read cheap). */
.manifesto__quote em {
  font-style: normal; color: var(--ink); position: relative;
  background: linear-gradient(transparent 62%, rgba(12, 180, 12, 0.22) 62%);
}
.manifesto__side {
  background: linear-gradient(165deg, var(--paper-2), #fff); border: 1px solid var(--hair); border-radius: 14px;
  padding: clamp(24px, 2.6vw, 34px); align-self: start; box-shadow: var(--shadow-sm, 0 10px 30px rgba(5,12,23,0.05));
}
.manifesto__side p { font-size: 15px; line-height: 1.6; margin: 0 0 16px; color: var(--ink-2, #33465c); }
.manifesto__side p:first-of-type { font-weight: 600; color: var(--ink); }
.manifesto__rule { width: 46px; height: 4px; background: linear-gradient(90deg, var(--amber), var(--green)); border-radius: 4px; margin-bottom: 22px; }

/* --------------------------------------------------------------- range ---
   Product families as a tight hairline grid. Card and shot share one white
   ground so the product reads as printed on the page, never as a pasted box. */
/* Product cards on a deep-blue ground (not black — the page must feel alive).
   The shot sits on a white "platform": the studio background of each photo
   fuses with the platform, so there is no pasted-box edge and no risky cut-out
   on white products (the ESS cabinets would lose their edges). */
.prange {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.09); border-block: 1px solid rgba(255,255,255,0.09);
  max-width: var(--page); margin-inline: auto;
}
.pcard { background: #10294a; display: flex; flex-direction: column; position: relative; transition: background 0.5s var(--ease); overflow: hidden; }
.pcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(36,84,180,0.5), transparent 62%);
  transition: opacity 0.6s var(--ease);
}
.pcard:hover::after { opacity: 1; }
.pcard:hover { background: #16345c; }
.pcard__shot {
  position: relative; z-index: 2; margin: clamp(16px, 1.4vw, 22px); margin-bottom: 0;
  aspect-ratio: 5 / 4; background: #fff; overflow: hidden; display: flex; border-radius: 3px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.pcard__shot img { width: 100%; height: 100%; object-fit: contain; padding: 4% 7%; transition: transform 0.7s var(--ease); }
.pcard:hover .pcard__shot img { transform: scale(1.07); }
.pcard__body { position: relative; z-index: 2; padding: clamp(20px, 1.8vw, 26px) clamp(18px, 1.7vw, 24px) clamp(24px, 2.2vw, 28px); display: flex; flex-direction: column; flex: 1; }
.pcard em {
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; color: var(--amber);
  font-variant-numeric: tabular-nums; display: block; margin-bottom: 10px;
}
.pcard h3 { font-size: clamp(17px, 1.4vw, 20px); margin: 0 0 9px; letter-spacing: -0.025em; color: #fff; }
.pcard h3 a { transition: color 0.3s; }
.pcard:hover h3 a { color: var(--blue-soft, #7fb6ea); }
.pcard > .pcard__body > p { font-size: 13.5px; color: #90a6bd; margin: 0 0 16px; flex: 1; line-height: 1.55; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pcard__tags span {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: #a9c8ea;
  background: rgba(36, 84, 180, 0.26); border: 1px solid rgba(80, 140, 220, 0.28); padding: 4px 8px;
}
.pcard .tlink { font-size: 13px; margin-top: auto; color: #7fb6ea; }

/* --------------------------------------------------------------- metrics --- */
.metrics { background: var(--void); position: relative; overflow: hidden; }
/* dark section: headings and lead copy must invert, else they vanish */
.metrics h2, .metrics h3 { color: #fff; }
.metrics .sec__head p { color: #93a7bd; }
.metrics::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 15% 0%, rgba(36,84,180,0.30), transparent 52%),
              radial-gradient(ellipse at 88% 100%, rgba(12,180,12,0.16), transparent 50%);
}
.metrics .wrap { position: relative; z-index: 2; }
/* Legacy metric grid (kept for the About + Projects pages). */
.metrics__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); border-radius: 10px; overflow: hidden; }
.metric { padding: clamp(24px, 2.6vw, 38px) clamp(18px, 2vw, 30px); border-right: 1px solid rgba(255,255,255,0.13); transition: background 0.45s var(--ease); position: relative; }
.metric:last-child { border-right: none; }
.metric:hover { background: rgba(36, 84, 180, 0.24); }
.metric strong {
  display: block;
  font-size: clamp(44px, 5vw, 68px); color: #fff; font-weight: 800; letter-spacing: -0.05em; line-height: 0.92;
  font-variant-numeric: tabular-nums;
}
.metric strong span { font-size: inherit; color: inherit; font-weight: inherit; display: inline; margin: 0; letter-spacing: inherit; text-transform: none; }
.metric strong i {
  font-style: normal; font-size: 0.52em; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--amber), #ffcf7a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--amber);
}
.metric strong::after { content: ""; display: block; width: 34px; height: 3px; background: linear-gradient(90deg, var(--amber), var(--green)); margin-top: 14px; border-radius: 3px; }
.metric .metric__label { display: block; margin-top: 12px; font-size: 12px; color: #b6c8db; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; }

/* 20-year growth timeline — alternating milestone cards on a central gradient
   rail (the premium horizontal-timeline pattern used by CATL / LONGi / Envision). */
.tl2 { position: relative; display: flex; min-height: 246px; align-items: center; padding-inline: 4px; max-width: 1120px; margin-inline: auto; }
.tl2__line {
  position: absolute; left: 2%; right: 2%; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 3px;
  background: linear-gradient(90deg, #58aee6, var(--royal) 30%, #7c4dff 58%, var(--amber) 82%, var(--green));
  box-shadow: 0 0 20px rgba(36,84,180,0.5);
}
.tl2__line::after {
  content: ""; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green);
}
.tl2n { position: relative; flex: 1; height: 246px; }
.tl2n__dot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--blue-soft));
  border: 3px solid var(--navy); box-shadow: 0 0 0 2px var(--c, var(--blue-soft)), 0 0 14px var(--c, var(--blue-soft)); z-index: 3;
}
.tl2n.is-now .tl2n__dot { background: var(--amber); border-color: var(--navy); width: 19px; height: 19px; box-shadow: 0 0 0 3px var(--amber), 0 0 22px rgba(245,148,30,0.7); }
.tl2n__card {
  position: absolute; left: 5px; right: 5px; padding: 13px 15px 14px; text-align: left;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.13); border-top: 3px solid var(--c, var(--blue-soft)); border-radius: 8px;
  backdrop-filter: blur(4px); transition: all 0.4s var(--ease);
}
.tl2n:hover .tl2n__card { background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.28); }
.tl2n.is-now .tl2n__card { background: linear-gradient(160deg, rgba(245,148,30,0.2), rgba(255,255,255,0.03)); border-color: rgba(245,148,30,0.4); border-top-color: var(--amber); }
/* per-milestone accent colours across the two decades */
.tl2n:nth-child(1) { --c: #58aee6; }
.tl2n:nth-child(2) { --c: #2454B4; }
.tl2n:nth-child(3) { --c: #6c5ce7; }
.tl2n:nth-child(4) { --c: #00b8a9; }
.tl2n:nth-child(5) { --c: #0CB40C; }
.tl2n:nth-child(6) { --c: #f5941e; }
/* connector stub from the card to the rail dot */
.tl2n__card::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 2px; height: 24px; background: var(--c, rgba(255,255,255,0.3)); opacity: 0.7;
}
.tl2n--up .tl2n__card { bottom: calc(50% + 30px); }
.tl2n--up .tl2n__card::after { bottom: -24px; }
.tl2n--down .tl2n__card { top: calc(50% + 30px); }
.tl2n--down .tl2n__card::after { top: -24px; }
.tl2n__card b {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.05em; color: var(--c, var(--blue-soft));
  font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.tl2n.is-now .tl2n__card b { color: var(--amber); }
.tl2n__card strong { display: block; font-size: clamp(17px, 1.7vw, 22px); color: #fff; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 4px; }
.tl2n__card span { display: block; font-size: 11.5px; color: #9db3c9; line-height: 1.4; }
@media (max-width: 860px) {
  .tl2 { flex-direction: column; min-height: 0; align-items: stretch; padding-left: 26px; }
  .tl2__line { left: 6px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; transform: none; }
  .tl2__line::after { right: auto; left: 50%; top: auto; bottom: -2px; transform: translateX(-50%); }
  .tl2n { height: auto; flex: none; padding: 7px 0; }
  .tl2n__dot { left: -20px; top: 24px; transform: none; }
  .tl2n__card { position: static; left: 0; right: 0; }
  .tl2n__card::after { display: none; }
}

/* ---------------------------------------------------------------- pillars ---
   Sticky statement on the left, numbered value rows on the right — the layout
   Sungrow / CATL / BYD use for "why us", instead of four flat centred boxes. */
.why { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 4vw, 70px); align-items: start; }
.why__aside { position: sticky; top: 120px; }
.why__aside h2 { font-size: clamp(26px, 2.9vw, 38px); margin: 14px 0 16px; }
.why__aside p { font-size: 15.5px; color: var(--mute); margin: 0 0 22px; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.pillar { background: var(--paper); padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 26px); transition: background 0.45s var(--ease); position: relative; }
.pillar:hover { background: var(--paper-2); }
.pillar::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--royal), var(--green)); transition: width 0.5s var(--ease); }
.pillar:hover::before { width: 100%; }
.pillar em {
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: var(--royal);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px;
}
.pillar em::after { content: ""; width: 16px; height: 1px; background: var(--hair); }
.pillar h3 { font-size: 17px; margin: 12px 0 8px; letter-spacing: -0.02em; }
.pillar p { font-size: 14px; color: var(--mute); margin: 0; line-height: 1.6; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } .why__aside { position: static; } }

/* ------------------------------------------------------------------ proof --- */
.proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); display: block; }
.shot:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter 0.6s; }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,12,23,0.85) 0%, rgba(5,12,23,0.1) 55%); }
.shot:hover img { transform: scale(1.07); }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; z-index: 2; }
.shot em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.shot b { display: block; color: #fff; font-size: 16px; font-weight: 700; margin-top: 7px; letter-spacing: -0.02em; }
.shot:first-child b { font-size: 22px; }

/* ------------------------------------------------------------ case grid --- */
.segbar { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 24px; }
.segbar button {
  padding: 9px 20px; border: 1px solid var(--hair); background: #fff; cursor: pointer; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--body-c); transition: all 0.25s var(--ease);
}
.segbar button:hover { border-color: var(--royal); color: var(--royal); transform: translateY(-1px); }
.segbar button.is-on { background: linear-gradient(120deg, var(--royal), #1c63c8); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(36,84,180,0.28); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.case { background: #fff; display: flex; flex-direction: column; transition: background 0.4s var(--ease); }
.case[hidden] { display: none; }
.case:hover { background: var(--paper-2); }
.case__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.case__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.case:hover .case__img img { transform: scale(1.05); }
.case__cap {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 5px 11px;
  background: rgba(6, 25, 43, 0.82); backdrop-filter: blur(4px); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.case__body { padding: clamp(16px, 1.6vw, 22px); display: flex; flex-direction: column; flex: 1; }
.case__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.case__seg { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--royal); }
.case__yr { font-size: 11.5px; font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums; }
.case h3 { font-size: 16px; margin: 0 0 6px; letter-spacing: -0.02em; line-height: 1.25; }
.case__loc { font-size: 13px; color: var(--body-c); margin: 0 0 4px; font-weight: 600; }
.case__loc::before { content: "◍ "; color: var(--amber); }
.case__prod { font-size: 12.5px; color: var(--mute); margin: 0 0 14px; flex: 1; line-height: 1.5; }
.case .tlink { font-size: 12.5px; }
@media (max-width: 1000px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cases { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- partners --- */
.partners { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.partners + .partners { margin-top: 12px; }
.partners__track { display: flex; width: max-content; align-items: center; animation: slide 70s linear infinite; }
.partners--rev .partners__track { animation-direction: reverse; animation-duration: 84s; }
.partners:hover .partners__track { animation-play-state: paused; }
/* strips are pre-rendered rows of the real client logos, duplicated to loop seamlessly */
.partners__track img { height: 86px; width: auto; flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- news page --- */
.news-intro { padding-block: clamp(22px, 2.4vw, 34px) 0; }
.news-lead { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; max-width: 940px; margin: 0; }
.news-lead a { color: var(--royal); }
.news-sec { padding-block: clamp(26px, 3vw, 40px); }
.ngrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); }
.ncard {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hair);
  border-radius: 14px; overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.ncard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg, 0 24px 50px rgba(5,12,23,0.13)); border-color: transparent; }
.ncard__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); }
.ncard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.ncard:hover .ncard__img img { transform: scale(1.06); }
.ncard__cat {
  position: absolute; left: 12px; top: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: #fff; background: rgba(36,84,180,0.92); padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(3px);
}
.ncard__body { padding: clamp(16px, 1.6vw, 22px); display: flex; flex-direction: column; flex: 1; }
.ncard__body time { font-size: 12px; font-weight: 700; color: var(--mute); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.ncard__body h3 { font-size: clamp(16px, 1.4vw, 19px); margin: 8px 0 8px; letter-spacing: -0.02em; line-height: 1.28; transition: color 0.3s; }
.ncard:hover .ncard__body h3 { color: var(--royal); }
.ncard__body p { font-size: 13.5px; color: var(--mute); margin: 0 0 16px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ncard__more { margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--royal); display: inline-flex; align-items: center; gap: 7px; }
.ncard__more i { font-style: normal; transition: transform 0.3s var(--ease); }
.ncard:hover .ncard__more i { transform: translateX(4px); }
/* featured first card spans two columns with a side-by-side layout */
.ncard--feat { grid-column: span 2; flex-direction: row; }
.ncard--feat .ncard__img { flex: 1.15; aspect-ratio: auto; min-height: 260px; }
.ncard--feat .ncard__body { flex: 1; justify-content: center; }
.ncard--feat .ncard__body h3 { font-size: clamp(20px, 2vw, 27px); }
.ncard--feat .ncard__body p { -webkit-line-clamp: 4; font-size: 14.5px; }
@media (max-width: 900px) {
  .ngrid { grid-template-columns: repeat(2, 1fr); }
  .ncard--feat { grid-column: span 2; flex-direction: column; }
  .ncard--feat .ncard__img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) { .ngrid { grid-template-columns: 1fr; } .ncard--feat { grid-column: span 1; } }

/* ---------------------------------------------------------------- journal --- */
.journal__list { border-top: 1px solid var(--hair); }
.post {
  display: grid; grid-template-columns: 132px 1fr 168px; gap: clamp(16px, 2.2vw, 36px);
  align-items: center; padding-block: 15px; border-bottom: 1px solid var(--hair);
  transition: background 0.4s var(--ease); position: relative;
}
.post:first-child { border-top: none; }
.post:hover { background: var(--paper-2); }
.post__meta { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.post__meta em { font-style: normal; display: block; color: var(--royal); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; margin-bottom: 3px; }
.post h3 { font-size: clamp(16px, 1.3vw, 19px); margin: 0 0 4px; letter-spacing: -0.02em; line-height: 1.25; transition: color 0.3s; }
.post:hover h3 { color: var(--royal); }
.post p { font-size: 13.5px; color: var(--mute); margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); border-radius: 6px; }
.post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.post:hover .post__thumb img { transform: scale(1.06); }

/* ------------------------------------------------------------------- call --- */
.call { background: var(--void); position: relative; overflow: hidden; }
.call::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 78% 50%, rgba(36,84,180,0.34), transparent 55%),
              radial-gradient(ellipse at 10% 90%, rgba(12,180,12,0.14), transparent 48%);
}
.call .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: center; }
.call h2 { font-size: clamp(28px, 3.6vw, 50px); color: #fff; margin: 18px 0 16px; }
.call p { color: #9db2c7; margin: 0; max-width: 520px; }
.call__acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ----------------------------------------------------------------- masthead */
.masthead { background: var(--void); color: #fff; padding-block: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--hair-lt); }
.masthead__top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr; gap: clamp(28px, 4vw, 60px); padding-bottom: 56px; }
.masthead img { height: 46px; width: auto; margin-bottom: 20px; }
.masthead__top > div:first-child p { color: #8ba1b8; font-size: 14px; max-width: 320px; margin: 0; }
.masthead h4 { color: #fff; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 18px; font-weight: 700; }
.masthead a { display: block; color: #93a7bd; font-size: 14px; padding: 6px 0; transition: all 0.25s var(--ease); }
.masthead a:hover { color: var(--amber); transform: translateX(4px); }
.masthead__addr p { color: #8ba1b8; font-size: 13.5px; margin: 12px 0 0; line-height: 1.6; }
.masthead__addr b { color: #cfdcea; display: block; font-size: 13px; margin-bottom: 2px; }
.masthead__end { border-top: 1px solid var(--hair-lt); padding-block: 22px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: #6d8299; }

/* ---------------------------------------------------------------- page top */
.masthead-page {
  color: #fff; position: relative; overflow: hidden; padding-block: clamp(44px, 5vw, 68px);
  background: linear-gradient(120deg, #123f8a 0%, var(--royal) 42%, #1c63c8 68%, #0f7d4a 116%);
}
.masthead-page::before {
  content: ""; position: absolute; inset: 0; opacity: 0.4;
  background-image: linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 84px 84px; mask-image: radial-gradient(circle at 18% 45%, #000, transparent 74%);
}
.masthead-page::after {
  content: ""; position: absolute; right: -10%; top: -46%; width: 44vw; height: 44vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(12,180,12,0.34), rgba(245,148,30,0.1) 46%, transparent 66%); filter: blur(8px);
}
.masthead-page .wrap { position: relative; z-index: 2; }
.masthead-page.has-shot { background-size: cover; background-position: center; }
.masthead-page h1 { color: #fff; font-size: clamp(30px, 4vw, 52px); margin: 12px 0 14px; max-width: 900px; }
.masthead-page p { color: #dbe7f5; font-size: 16.5px; max-width: 640px; margin: 0; }
.masthead-page .mh-note { color: #bcd0ea; font-size: 13.5px; max-width: 620px; margin-top: 12px; }
.mh-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.mh-chips span {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; color: #fff;
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.1); backdrop-filter: blur(4px);
}
.mh-chips span:last-child { background: linear-gradient(120deg, rgba(245,148,30,0.95), rgba(245,148,30,0.75)); border-color: transparent; }
.crumbs { display: flex; gap: 9px; font-size: 12px; color: #bcd0ea; margin-bottom: 4px; }
.crumbs a:hover { color: var(--amber); }

/* ----------------------------------------------------------------- lineup */
.lineup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.line[id], #compare { scroll-margin-top: 130px; }
.growth-jumps, .growth-actions, .growth-share { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.growth-jumps { padding-block: 22px; }
.growth-jumps a { padding: 10px 16px; border: 1px solid var(--hair); border-radius: 4px; font-size: 14px; color: var(--royal); }
.growth-detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: start; }
.growth-detail p, .growth-tool p { line-height: 1.75; margin-block: 18px; }
.growth-detail h3 { margin-top: 28px; }
.growth-specs { padding: 28px; background: var(--paper-2); border: 1px solid var(--hair); border-radius: 8px; }
.growth-specs dl div { display: flex; justify-content: space-between; gap: 18px; padding-block: 14px; border-bottom: 1px solid var(--hair); }
.growth-specs dt { font-weight: 600; }
.growth-specs dd { text-align: end; margin: 0; overflow-wrap: anywhere; }
.growth-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-block: 26px; }
.growth-cards article { border: 1px solid var(--hair); padding: 24px; background: var(--paper-2); border-radius: 8px; }
.growth-cards h3 { font-size: 21px; margin-bottom: 12px; }
.growth-cards p { line-height: 1.65; margin-bottom: 14px; }
.growth-cards a, .growth-share a { color: var(--royal); }
.priority-series__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.priority-series .growth-jumps { margin-bottom: 0; }
.priority-series h3, .module-docs h3, .growth-specs dd { overflow-wrap: anywhere; }
.module-docs { margin-top: 28px; }
.model-links p, #module-datasheets > .wrap > p { line-height: 1.75; }
.growth-share { border-top: 1px solid var(--hair); padding-block: 22px; font-size: 14px; }
.growth-share button { border: 1px solid var(--hair); padding: 12px 16px; background: var(--paper-2); color: var(--ink); cursor: pointer; }
.growth-tool { padding: 24px; background: var(--paper-2); border: 1px solid var(--hair); border-radius: 8px; margin-block: 32px; }
.growth-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-block: 22px; }
.growth-fields label { font-size: 14px; font-weight: 600; }
.growth-fields input { display: block; width: 100%; padding: 12px; border: 1px solid var(--hair); border-radius: 4px; margin-top: 8px; background: #fff; color: var(--ink); }
.mdtable caption { text-align: start; padding: 16px 0; font-size: 14px; }
.growth-compare td { min-width: 130px; }
.growth-compare th:first-child { min-width: 160px; }
:is(.growth-jumps,.growth-share,.growth-tool,.growth-detail) :is(a,button,input):focus-visible, .tbl-wrap:focus-visible { outline: 3px solid var(--royal); outline-offset: 4px; }
[data-email-fallback][hidden] { display: none; }
@media (max-width: 760px) { .growth-detail, .growth-cards, .growth-fields { grid-template-columns: 1fr; } .growth-specs { padding: 20px; } .growth-share { align-items: flex-start; } .growth-share strong { flex-basis: 100%; } }
.line { background: #fff; padding: clamp(28px, 3vw, 40px); transition: background 0.4s var(--ease); position: relative; }
.line:hover { background: var(--paper-2); }
.line h3 { font-size: 20px; margin: 0 0 10px; letter-spacing: -0.025em; }
.line > p { font-size: 14.5px; color: var(--mute); margin: 0 0 20px; }
.line dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 0 0 24px; }
.line dl div { border-top: 1px solid var(--hair); padding-top: 9px; }
.line dt { font-size: 11px; color: var(--mute); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.line dd { margin: 3px 0 0; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.line__acts { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------- docs */
.docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.doc { background: #fff; padding: 30px 34px; transition: background 0.4s; }
.doc:hover { background: var(--paper-2); }
.doc h3 { font-size: 17px; margin: 0 0 14px; }
.doc h3 a:hover { color: var(--royal); }
.doc__files { display: flex; flex-direction: column; gap: 9px; }
.doc__files a { font-size: 13.5px; color: var(--body-c); display: flex; gap: 9px; align-items: center; transition: color 0.25s; }
.doc__files a::before { content: "PDF"; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; color: #fff; background: var(--royal); padding: 3px 5px; }
.doc__files a:hover { color: var(--royal); }

/* ------------------------------------------------------------------ timeline */
.timeline { border-left: 1px solid var(--hair); margin-left: 8px; }
.tl { display: grid; grid-template-columns: 110px 1fr; gap: 28px; padding: 22px 0 22px 34px; position: relative; }
.tl::before {
  content: ""; position: absolute; left: -5px; top: 30px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--hair); transition: all 0.4s var(--ease);
}
.tl:hover::before { border-color: var(--amber); background: var(--amber); scale: 1.3; }
.tl b { font-size: 22px; color: var(--royal); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tl p { margin: 0; font-size: 15px; }

/* --------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.contact__intro { margin-bottom: 22px; }
.contact__intro h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 10px 0 10px; }
.contact__intro p { font-size: 15px; color: var(--body-c); margin: 0; max-width: 420px; }
.offices { display: grid; gap: 14px; }
.office {
  position: relative; background: linear-gradient(165deg, var(--paper-2), #fff); border: 1px solid var(--hair);
  border-radius: 12px; padding: 18px 20px 18px 52px; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.office:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 14px 34px rgba(5,12,23,0.08)); border-color: transparent; }
.office__pin { position: absolute; left: 16px; top: 18px; font-size: 20px; line-height: 1; }
.office h3 { font-size: 15.5px; margin: 0 0 8px; letter-spacing: -0.01em; }
.office p { font-size: 13.5px; margin: 0 0 5px; color: var(--body-c); line-height: 1.5; }
.office__mob { color: var(--mute); font-size: 12.5px; }
.office a { color: var(--royal); font-weight: 600; }
.office--social { padding: 18px 20px; }
.office--social h3 { margin-bottom: 12px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border: 1px solid var(--hair); border-radius: 16px; padding: clamp(26px, 3vw, 40px); background: #fff; box-shadow: var(--shadow-lg, 0 24px 50px rgba(5,12,23,0.1)); }
.form__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 2px solid var(--paper-2); margin-bottom: 4px; }
.form__head h3 { font-size: clamp(19px, 1.9vw, 24px); margin: 0; letter-spacing: -0.025em; }
.form__badge { font-size: 11.5px; font-weight: 700; color: var(--green); background: rgba(12,180,12,0.09); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.form label { display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.form label:has(textarea), .form .wide { grid-column: 1 / -1; }
.form input, .form textarea {
  padding: 12px 0; border: none; border-bottom: 1px solid var(--hair); font: inherit; font-size: 15px;
  color: var(--ink); background: transparent; transition: border-color 0.3s; letter-spacing: -0.01em;
}
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--royal); }
.form textarea { min-height: 110px; resize: vertical; }
.form button { grid-column: 1 / -1; justify-self: start; }
.form .status { grid-column: 1 / -1; font-size: 14px; font-weight: 600; color: var(--green); padding: 12px 14px; background: rgba(12, 180, 12, 0.07); }
.form .status.is-bad { color: #c0392b; background: rgba(192, 57, 43, 0.07); }
.form .fine { grid-column: 1 / -1; font-size: 12px; color: var(--mute); margin: 0; }
.hp { position: absolute; left: -9999px; }

/* ------------------------------------------------------------------ article */
.article { max-width: 740px; margin-inline: auto; }
.article > img { margin-bottom: 34px; width: 100%; border-radius: 16px; box-shadow: var(--shadow-lg, 0 24px 50px rgba(5,12,23,0.13)); }
/* lead paragraph reads larger, like an editorial standfirst */
.article > p:first-of-type { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.65; color: var(--ink); font-weight: 500; }
.article h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 38px 0 14px; }
.article h3 { font-size: 20px; margin: 28px 0 12px; }
.article p { font-size: 17px; line-height: 1.75; margin: 0 0 20px; }
.article ul { list-style: none; padding: 0; margin: 0 0 24px; }
.article li { font-size: 16px; padding-left: 26px; position: relative; margin-bottom: 11px; }
.article li::before { content: ""; position: absolute; left: 0; top: 12px; width: 13px; height: 1px; background: var(--amber); }
.article a { color: var(--royal); font-weight: 600; }
.article strong { color: var(--ink); }
.news-source { margin: 34px 0 0; padding: 16px 18px; border-left: 3px solid var(--amber); background: var(--surface, #f5f7fa); color: var(--muted); font-size: 14px; line-height: 1.6; }
.news-source a { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------- faq
   Two-column: sticky question-panel left, boxed accordion cards right. */
.faq__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(30px, 4vw, 64px); align-items: start; }
.faq__aside { position: sticky; top: 120px; }
.faq__aside h2 { font-size: clamp(24px, 2.7vw, 34px); margin: 14px 0 14px; }
.faq__aside p { font-size: 15px; color: var(--mute); margin: 0 0 22px; }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq__list details {
  background: #fff; border: 1px solid var(--hair); border-radius: 3px;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s;
}
.faq__list details[open] { border-color: rgba(36,84,180,0.35); box-shadow: var(--sh-sm); }
.faq__list summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 22px; font-size: 16px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.015em; transition: color 0.25s;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; width: 20px; height: 20px; flex: none; position: relative; transition: transform 0.3s var(--ease);
}
.faq__list summary::before {
  content: "+"; position: absolute; right: 22px; font-size: 22px; font-weight: 400; color: var(--royal);
  transition: transform 0.3s var(--ease); line-height: 1; pointer-events: none;
}
.faq__list details[open] summary { color: var(--royal); }
.faq__list details[open] summary::before { content: "−"; }
.faq__list details p { margin: 0; padding: 0 22px 20px; font-size: 14.5px; line-height: 1.7; color: var(--body-c); }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } .faq__aside { position: static; } }

/* ------------------------------------------------------------------ socials */
.socials { display: flex; gap: 8px; align-items: center; }
.socials a {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair); border-radius: 50%; transition: all 0.28s var(--ease); color: var(--body-c);
}
.socials svg { width: 15px; height: 15px; fill: currentColor; }
.socials a:hover { background: var(--royal); border-color: var(--royal); color: #fff; transform: translateY(-2px); }
/* socials in the top utility bar (dark strip, top-right) */
.shell__bar-r { display: flex; align-items: center; gap: 16px; }
.shell__bar-txt { color: #93a7bd; }
.socials--bar { gap: 4px; }
.socials--bar a { width: 26px; height: 26px; border-color: rgba(255,255,255,0.18); color: #b7c8d9; }
.socials--bar svg { width: 12px; height: 12px; }
.socials--bar a:hover { background: var(--amber); border-color: var(--amber); color: var(--void); transform: none; }
@media (max-width: 640px) { .shell__bar-txt { display: none; } }
.socials--foot { margin-top: 20px; }
.socials--foot a { border-color: rgba(255,255,255,0.18); color: #9fb4c8; }
.socials--foot a:hover { background: var(--amber); border-color: var(--amber); color: var(--void); }
.socials--contact a { width: 40px; height: 40px; }
.socials--contact svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ floats */
.totop, .wa {
  position: fixed; right: 22px; z-index: 400; display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease), opacity 0.3s;
}
.totop { bottom: 22px; width: 42px; height: 42px; background: var(--ink); border: none; cursor: pointer; }
.totop svg { width: 20px; fill: #fff; }
.totop:hover { transform: translateY(-4px); }
.wa { bottom: 76px; width: 50px; height: 50px; background: #25d366; border-radius: 50%; }
.wa svg { width: 27px; fill: #fff; }
.wa:hover { transform: scale(1.08); }

/* ------------------------------------------------------------------- rise */
/* Content is visible before scripts execute, even below the initial viewport.
   Motion changes position only; it must never gate access to text or links. */
[data-rise] { opacity: 1; transform: none; }
[data-rise].is-risen { animation: content-rise 0.9s var(--ease) both; }
@keyframes content-rise {
  from { transform: translateY(18px); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .frame.is-on { animation: none; }
  .partners__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .metrics__grid, .pillars, .prange { grid-template-columns: repeat(2, 1fr); }
  .proof__grid { grid-template-columns: repeat(2, 1fr); }
  .shot:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
  .manifesto .wrap, .call .wrap, .contact { grid-template-columns: 1fr; }
  .call__acts { justify-content: flex-start; }
  .masthead__top { grid-template-columns: 1fr 1fr; }
  .post { grid-template-columns: 110px 1fr; }
  .post__thumb { display: none; }
}
@media (max-width: 900px) {
  .nav, .shell__act .lang, .shell__act .cta { display: none; }
  .burger { display: block; }
  .drawer { display: block; }
  .lineup, .docs { grid-template-columns: 1fr; }
  .sec__head { grid-template-columns: 1fr; gap: 18px; }
  .chapters { display: none; }
  .form { grid-template-columns: 1fr; }
  .shell__bar .wrap { justify-content: center; }
  .shell__bar span:first-child { display: none; }
}
@media (max-width: 560px) {
  .metrics__grid, .pillars, .proof__grid, .masthead__top, .prange { grid-template-columns: 1fr; }
  .shot:first-child { grid-column: auto; }
  .post { grid-template-columns: 1fr; gap: 8px; }
  .line dl { grid-template-columns: 1fr; }
}

/* ==========================================================================
   RTL — Arabic. The layout is mostly flex/grid so the inline axis auto-mirrors
   under dir="rtl"; these overrides fix the few physically-anchored pieces.
   ========================================================================== */
[dir="rtl"] .nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .burger { margin-left: 0; margin-right: auto; }
[dir="rtl"] .skip { left: auto; right: -999px; }
/* mobile drawer slides in from the (physical) left in RTL */
[dir="rtl"] .drawer { inset: 0 auto 0 0; transform: translateX(-101%); }
[dir="rtl"] .drawer.is-open { transform: none; }
[dir="rtl"] .drawer .sub { padding-left: 0; padding-right: 16px; }
/* directional CTA / link arrows follow the reading direction */
[dir="rtl"] .cta i,
[dir="rtl"] .tlink::after,
[dir="rtl"] .anniv__cta span,
[dir="rtl"] .ncard__more i,
[dir="rtl"] .hero__acts .cta i { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .cta:hover i { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .tlink:hover::after { transform: scaleX(-1) translateX(5px); }
/* the WhatsApp / back-to-top float sit on the physical left in RTL */
[dir="rtl"] .wa { right: auto; left: 22px; }
[dir="rtl"] .totop { right: auto; left: 22px; }
/* keep numeric/spec text and the anniversary counters LTR inside RTL flow */
[dir="rtl"] .metric strong,
[dir="rtl"] .fig b,
[dir="rtl"] .tl2n__card b,
[dir="rtl"] time,
[dir="rtl"] .office__tel { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .metric strong,
[dir="rtl"] .fig b { display: inline-flex; }
/* left-anchored decorative rules flip to the right */
[dir="rtl"] .intro__shot::after { left: auto; right: 0; }
[dir="rtl"] .label::before { margin-right: 0; margin-left: 10px; }

/* ------------------------------------------------------- guides / md tables */
.tbl-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--hair); border-radius: 10px; }
.mdtable { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
.mdtable th, .mdtable td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: top; }
.mdtable thead th { background: var(--paper-2); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
.mdtable tbody tr:last-child td { border-bottom: none; }
.mdtable tbody tr:hover { background: var(--paper-2); }
.mdtable td:first-child { font-weight: 600; color: var(--ink); }
.mdtable strong { color: var(--royal); }
.article .tbl-wrap { margin-inline: 0; }
/* related products + sibling guides (content cluster links) */
.guide-rel, .guide-more { margin-top: 40px; padding-top: 26px; border-top: 2px solid var(--paper-2); }
.guide-rel h3, .guide-more h3 { font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px; }
.guide-rel__list { display: flex; flex-wrap: wrap; gap: 12px; }
.guide-more__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.guide-more__list a { color: var(--royal); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.guide-more__list a::before { content: "→"; color: var(--amber); }
[dir="rtl"] .mdtable th, [dir="rtl"] .mdtable td { text-align: right; }
[dir="rtl"] .guide-more__list a::before { content: "←"; }