/* ==========================================================================
   Neosilica Energy Solutions — Single Page Website
   style.css — design tokens, base, components and section layouts.
   Source of truth: Figma "Neosilica Energy — Single Page Website v2" (1920 artboard).
   Fluid values scale linearly from the 1920px design (e.g. 120px = 6.25vw).
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --ink: #0a0a0a;
  --black: #000;
  --white: #fff;
  --red: #ef3125;          /* brand red: ticks, rules, borders, icons, text on dark */
  --red-text: #cf2a1f;     /* red text on light surfaces: 4.8:1 on sand, 5.4:1 on white (Figma #ef3125 = 3.8-4.1:1) */
  --red-fill: #cf2a1f;     /* fills behind small white text (badges, numbers, hover): 5.4:1 (Figma = 4.1:1) */
  --red-deep: #520d08;
  --sand: #f6f5f2;
  --stone: #dedcd6;
  --blush: #fdecea;
  --grey-700: #4a4a4a;
  --grey-600: #5c5c5c;
  --muted: #6b6862;
  --grey-500: #858585;     /* metric captions on ink: 5.4:1 (Figma #6e6e6e = 3.9:1) */
  --grey-400: #a3a3a3;
  --grey-300: #c8c8c8;
  --footer-text: #d6d6d6;
  --footer-legal: #b0b0b0;
  --rule-dark: #2e2e2e;
  --btn-outline: #454545;
  --stone-hover: #c9c6be;
  --node-active: #1a0806;
  --error: #c4170c;
  --error-text: #8a1209;
  --success: #1d7a36;
  --success-bg: #edf7ef;
  --success-text: #14532d;

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale (Figma text styles) */
  --fs-display: clamp(2.75rem, 4.375vw, 5.25rem);     /* 84 Display/Hero */
  --fs-display-lg: clamp(2rem, 3.0208vw, 3.625rem);   /* 58 Display/Large */
  --fs-xl: clamp(2rem, 2.7083vw, 3.25rem);            /* 52 Heading/XL */
  --fs-metric: clamp(2.25rem, 3.3333vw, 4rem);        /* 64 Metric/L */
  --fs-m: clamp(1.5rem, 1.7708vw, 2.125rem);          /* 34 Heading/M */
  --fs-s: clamp(1.25rem, 1.25vw, 1.5rem);             /* 24 Heading/S */
  --fs-body-lg: clamp(1rem, 0.9896vw, 1.1875rem);     /* 19 Body/Large */
  --fs-body: 1rem;                                    /* 16 Body */
  --fs-body-sm: 0.875rem;                             /* 14 Body/Small */
  --fs-nav: 0.9375rem;                                /* 15 Nav/Item */
  --fs-btn: 0.875rem;                                 /* 14 Button/Label */
  --fs-index: 0.8125rem;                              /* 13 Label/Index */
  --fs-label: 0.75rem;                                /* 12 Label/Eyebrow */
  --fs-micro: 0.6875rem;                              /* 11 Label/Micro */

  /* Spacing */
  --pad-x: clamp(1.25rem, 6.25vw, 7.5rem);            /* 120 */
  --sec-y: clamp(5.5rem, 8.3333vw, 10rem);            /* 160 */
  --content-max: 105rem;                              /* 1680 */
  --gap-120: clamp(2.5rem, 6.25vw, 7.5rem);
  --gap-88: clamp(3.5rem, 4.5833vw, 5.5rem);
  --gap-80: clamp(2rem, 4.1667vw, 5rem);
  --gap-72: clamp(3rem, 3.75vw, 4.5rem);
  --gap-64: clamp(2rem, 3.3333vw, 4rem);
  --gap-48: clamp(1.5rem, 2.5vw, 3rem);

  --header-h: 96px;
  --drawer-w: 640px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, figure, address { margin: 0; }
h1, h2, h3 { font-weight: inherit; }
address { font-style: normal; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.text-white { color: var(--white) !important; }
.text-grey-300 { color: var(--grey-300) !important; }
.text-grey-600 { color: var(--grey-600) !important; }
.text-grey-700 { color: var(--grey-700) !important; }

.skip-link {
  position: fixed; left: 1rem; top: -100px; z-index: 2000;
  padding: .75rem 1.25rem; background: var(--ink); color: var(--white);
  font-weight: 600; font-size: var(--fs-btn);
}
.skip-link:focus { top: 1rem; color: var(--white); }

.container-ns,
.hero__content,
.cta__content,
.cta__strip {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--pad-x));
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ---------- Typography ---------- */
.display     { font-size: var(--fs-display);    font-weight: 500; line-height: 1;    letter-spacing: -0.026em; }
.display-lg  { font-size: var(--fs-display-lg); font-weight: 500; line-height: 1.06; letter-spacing: -0.022em; }
.heading-xl  { font-size: var(--fs-xl);         font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; }
.heading-m   { font-size: var(--fs-m);          font-weight: 500; line-height: 1.2;  letter-spacing: -0.012em; }
.heading-s   { font-size: var(--fs-s);          font-weight: 600; line-height: 1.3;  letter-spacing: -0.006em; }
.body-lg     { font-size: var(--fs-body-lg);    font-weight: 400; line-height: 1.6; }
.body        { font-size: var(--fs-body);       font-weight: 400; line-height: 1.65; }
.body-sm     { font-size: var(--fs-body-sm);    font-weight: 400; line-height: 1.6; }
.label {
  font-size: var(--fs-label); font-weight: 600; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.label--red { color: var(--red-text); }
.trust, .tech, .cta, .site-footer { --red-text: var(--red); }
.label--muted { color: var(--muted); }
.index { font-size: var(--fs-index); font-weight: 600; line-height: 1; letter-spacing: 0.1em; color: var(--red-text); }
.metric-value { font-size: var(--fs-metric); font-weight: 400; line-height: .95; letter-spacing: -0.026em; white-space: nowrap; }
.br-lg, .br-md { display: inline; }

/* Section / Eyebrow — 24px red tick + label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: var(--fs-label); font-weight: 600; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase; color: #000000;
}
.eyebrow__tick { width: 24px; height: 1.5px; background: var(--red); flex: none; }
.eyebrow--on-dark { color: var(--grey-300); }
.eyebrow--on-dark-muted { color: var(--grey-400); }
/* Larger section labels for About Us and Our Track Record */
/* Standard section label (About Us, Track Record, each Solution, Leadership): 16px */
.eyebrow { font-size: 1rem; letter-spacing: .16em; }
.eyebrow__tick { width: 32px; }

/* Standard section heading: one size, weight and rhythm for every section */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sec-title { margin: 0; max-width: 1100px; font-size: clamp(1.75rem, 2.5vw, 2rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }

/* Icons — 24px frame, asset rendered at its native size */
.icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; }
.icon > img { flex: none; }
.icon--gauge > img { transform: translateY(-0.45px); }
.icon--twin > img  { transform: translate(0.5px, 0.5px); }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%; background: var(--blush);
}
.icon-badge--sm { width: 44px; height: 44px; }
.icon-badge--ring { width: 52px; height: 52px; background: var(--ink); border: 1px solid var(--red); }

/* ---------- Buttons ---------- */
.btn-primary-ns,
.btn-secondary-ns,
.btn-connect {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 0; cursor: pointer;
  font-size: var(--fs-btn); font-weight: 600; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn-primary-ns { gap: 14px; padding: 19px 31px 19px 29px; }
.btn-primary-ns--light { background: var(--white); color: var(--ink); }
.btn-primary-ns--dark  { background: var(--ink); color: var(--white); }
.btn-primary-ns:hover,
.btn-primary-ns:focus-visible { background: var(--red-fill); border-color: var(--red-fill); color: var(--white); }
.btn-primary-ns--light:hover .btn-arrow,
.btn-primary-ns--light:focus-visible .btn-arrow { filter: brightness(0) invert(1); }
.btn-arrow { width: 17.25px; height: 17.25px; margin: -0.625px; flex: none; transition: transform .3s var(--ease-out), filter .3s ease; }
.btn-primary-ns:hover .btn-arrow { transform: translateX(4px); }
.btn-primary-ns[disabled] { opacity: .6; cursor: progress; }

.btn-secondary-ns { padding: 19px 25px 19px 29px; background: transparent; border-color: var(--btn-outline); color: var(--white); }
.btn-secondary-ns:hover,
.btn-secondary-ns:focus-visible { border-color: var(--red); color: var(--red); }

/* ==========================================================================
   HEADER — solid white from page load (no scroll-based state)
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 1030;
  height: var(--header-h);
  background-color: var(--white);
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
}
.site-header__inner {
  height: 100%;
  max-width: calc(var(--content-max) + 2 * var(--pad-x));
  margin-inline: auto; padding-inline: var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header__brand { position: relative; display: flex; align-items: center; width: 280px; height: 56px; flex: none; }
.site-header__brand .logo { width: 150px; height: auto; }

.site-nav__list { display: flex; align-items: center; gap: 48px; list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  position: relative; display: block; padding: 8px 0;
  font-size: var(--fs-nav); font-weight: 500; line-height: 1; letter-spacing: 0.01em;
  font-size: 1.0625rem; color: #000; white-space: nowrap;
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; width: 280px; height: 56px; flex: none; }
.btn-connect { gap: 10px; padding: 13px 21px; border-color: #0a0a0a; color: var(--white); background: #0a0a0a; }
.btn-connect__arrow { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.btn-connect:hover,
.btn-connect:focus-visible { background: var(--red-fill); border-color: var(--red-fill); color: var(--white); }

.nav-toggle { display: none; }

/* ==========================================================================
   01 HERO
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh; min-height: 100svh;
  background: var(--ink); color: var(--white); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg, .hero__video { width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.hero__video { position: absolute; inset: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Localized reading zone: holds ~.24–.32 across the text column, then fades out so the right side stays fully exposed */
.hero__scrim--h { background: linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.24) 28%, rgba(0,0,0,.12) 50%, rgba(0,0,0,0) 75%); }
.hero__scrim--v { background: linear-gradient(180deg, rgba(10,10,10,.2) 0%, rgba(10,10,10,.12) 16%, rgba(10,10,10,.06) 40%, rgba(10,10,10,.1) 65%, rgba(10,10,10,.35) 100%); }

/* Headline, industry tags and CTA: fill the hero below the header and sit at its vertical centre */
.hero__content {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding-block: var(--header-h) calc(var(--header-h) / 2);
}
.hero__content > * { max-width: 1100px; }
.hero__title { color: var(--white); text-shadow: 0 2px 16px rgba(0,0,0,.2); }
.hero__title .line { display: block; }

/* Industry tags: plain uppercase type with red dot separators (not chips) */
.hero__content .hero__tags {
  display: flex; flex-wrap: nowrap; align-items: center; margin-top: 32px;
  font-size: clamp(0.875rem, 0.95vw, 1.125rem); font-weight: 700; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white); text-shadow: 0 2px 12px rgba(0,0,0,.25); white-space: nowrap;
}
.hero__tags li:not(:last-child)::after { content: "·"; margin-inline: .9em; color: var(--red); }
.hero__cta { margin-top: 44px; gap: 10px; padding: 14px 22px 14px 20px; font-size: .75rem; }
.hero__cta .btn-arrow { width: 13px; height: 13px; margin: 0; }

/* ==========================================================================
   01b ABOUT US
   ========================================================================== */
.who { background: var(--white); padding-block: max(2.5rem, calc(clamp(6rem, 9.1667vw, 11rem) - 80px)) var(--sec-y); }
.who .container-ns { display: flex; flex-direction: column; gap: var(--gap-48); }

/* A · Company overview: copy left, image right */
.who__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap-80); align-items: center; }
.who__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; min-width: 0; }
.who__statement { margin-bottom: 12px; font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
/* SplitText word wrappers stay inline so hyphenated words can still break. */
.who__statement .word { display: inline !important; }
.who__lead { max-width: 680px; color: #000; }
.who__lead + .who__lead { margin-top: -12px; }
/* 5% larger than the 4 / 2.4 frame: grows into the gap beside the copy */
.who__media { position: relative; margin: 0 0 0 -5%; width: 105%; aspect-ratio: 4 / 2.4; overflow: hidden; background: var(--stone); }
.who__img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; object-position: 50% 70%; }

/* B · Business scale & credentials: six figures in one row */
.scale { display: flex; flex-direction: column; gap: 28px; }
/* Each figure takes its natural width; the leftover space is shared equally between them */
.scale__list { display: flex; justify-content: space-between; gap: 24px; }
.scale__item { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 0; border-top: 0px solid var(--ink); }
.scale__item .metric-value { font-size: clamp(2rem, 2.7083vw, 3.25rem); }
.scale__item .label { line-height: 1.5; }

/* ==========================================================================
   Shared section header (title left / lead right, bottom aligned)
   ========================================================================== */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; width: 100%; }
.section-head__title { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 0 1 58.333%; max-width: 980px; }
.section-head__lead { flex: 0 1 33.333%; max-width: 560px; color: var(--grey-600); }

/* ==========================================================================
   02 OUR TRACK RECORD
   ========================================================================== */
.trust { background: var(--ink); color: var(--white); padding-block: var(--sec-y) clamp(5rem, 7.2917vw, 8.75rem); }
.trust .container-ns { display: flex; flex-direction: column; gap: var(--gap-72); }
#trustTitle { margin-bottom: 50px; }
.trust .section-head__lead { color: var(--grey-400); }

.trust__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.metric-dark { display: flex; flex-direction: column; gap: 14px; padding-block: 28px; }
.metric-dark__rule { display: block; height: 1px; background: var(--rule-dark); }
.metric-dark .metric-value { color: var(--white); }
.metric-dark .label { color: var(--grey-500); }

.trusted { display: flex; flex-direction: column; gap: 60px; }
.trusted__rule { display: block; height: 1px; background: rgba(255,255,255,.14); }

.marquee { position: relative; overflow: hidden; }
.marquee__track { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: calc(92px * var(--logo-k)); }
/* Each slot is sized to the logo's visible artwork (inline --w/--h, equal visual area), and the
   image is offset (--l/--t) so the transparent padding baked into the PNGs is cropped away. */
/* --logo-k scales every slot: widest logo = 230 × .7043 ≈ 162px on desktop */
.trusted { --logo-k: .7043; --logo-gap: 68px; }
.client-logo {
  position: relative; flex: none; overflow: hidden;
  width: calc(var(--w, 230) * var(--logo-k) * 1px); height: calc(var(--h, 66) * var(--logo-k) * 1px);
  opacity: .88; transition: opacity .3s ease;
}
.client-logo img {
  position: absolute; max-width: none;
  left: calc(var(--l, 0) * var(--logo-k) * 1px); top: calc(var(--t, 0) * var(--logo-k) * 1px);
  width: calc(var(--iw, 230) * var(--logo-k) * 1px); height: calc(var(--ih, 66) * var(--logo-k) * 1px);
}
.client-logo:hover { opacity: 1; }
/* Marquee mode (enabled by JS) — track holds two copies, scrolls by -50% */
.marquee.is-running {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee.is-running .marquee__track {
  width: max-content; justify-content: flex-start; gap: 0;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
}
.marquee.is-running .client-logo { margin-right: var(--logo-gap); }
.marquee.is-running:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   02b OUR TRACK RECORD (white) — client logo grid
   ========================================================================== */
.clients { background: var(--white); padding-block: clamp(4.5rem, 6.25vw, 7.5rem); }
.clients .container-ns { display: flex; flex-direction: column; gap: var(--gap-64); }
.client-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.client-tile {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  height: clamp(7rem, 7.5vw, 8.5rem); padding: 16px 20px;
  border: 1px solid var(--stone); border-radius: 4px; background: var(--white);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.client-tile:hover { border-color: var(--stone-hover); box-shadow: 0 10px 24px rgba(10,10,10,.06); transform: translateY(-2px); }
.client-tile img { max-width: 100%; height: auto; }

/* ==========================================================================
   03 SOLUTIONS — content left, image right; whitespace separates the three blocks
   ========================================================================== */

.sol {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--gap-80); align-items: stretch;
  max-width: calc(var(--content-max) + 2 * var(--pad-x)); margin-inline: auto;
  /* One solution per screen: fills the viewport below the header, content centred,
     with ~3% of the screen height as breathing room above and below */
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
  align-content: center;
  padding: max(3vh, 2rem) var(--pad-x);
  background: var(--white);
}
/* Extra room after the dark Track Record section */
#digital-solutions { padding-top: clamp(4.5rem, 6.25vw, 7.5rem); }
/* Lift the content 50px: the section centres its content vertically, so shifting 100px
   of padding from top to bottom (Digital) / adding 100px at the bottom (BESS, AMS) moves it up 50px */
@media (min-width: 1200px) {
  #digital-solutions { padding-top: calc(clamp(4.5rem, 6.25vw, 7.5rem) - 50px); padding-bottom: calc(max(3vh, 2rem) + 50px); }
  #battery-energy-storage,
  #asset-management { padding-bottom: calc(max(3vh, 2rem) + 100px); }
}
.sol__content { display: flex; flex-direction: column; gap: clamp(1.75rem, 2.3vw, 2.5rem); min-width: 0; }
/* Shorter image panel, vertically centred beside the content */
/* Image panel spans the full content height (heading to last row) */
.sol__media {
  position: relative;
  min-height: 20rem; margin: 0; overflow: hidden; border-radius: 4px; background: var(--ink);
}
.sol__media img { position: absolute; left: 0; top: -3%; width: 100%; height: 106%; max-width: none; object-fit: cover; object-position: center center; }

.sol__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sol__title { max-width: 720px; }

/* Digital: supported assets as plain content (no box) */
.asset-list { display: flex; flex-direction: column; gap: 12px; }
.asset-list[hidden] { display: none; }
.asset-list__items { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; color: var(--ink); }
.asset-list__items li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.asset-list__items svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--red-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sol__lead { max-width: 640px; font-size: var(--fs-body); line-height: 1.6; color: var(--grey-700); }

/* Inline list with red dot separators; --stack / --grid variants use red bullets */
.dot-list { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--grey-700); }
/* Inline variant: a red dot leads every item, so no separator is ever left hanging at a line end */
.dot-list:not(.dot-list--stack):not(.dot-list--grid) > li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dot-list:not(.dot-list--stack):not(.dot-list--grid) > li::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--red); }
/* Solutions lists: black, semibold */
.sol .dot-list { color: #000; font-weight: 600; }
.dot-list--stack { flex-direction: column; gap: 10px; }
.dot-list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.dot-list--stack > li, .dot-list--grid > li { position: relative; padding-left: 16px; }
.dot-list--stack > li::before, .dot-list--grid > li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--red);
}

/* Digital: T5 → T1 technology stack */
.tiers-stack { display: flex; flex-direction: column; gap: 8px; }
.tier-row { display: grid; grid-template-columns: minmax(150px, 32%) minmax(0, 1fr); border-left: 3px solid var(--red); background: var(--sand); }
.tier-row__name { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 20px; background: rgba(10,10,10,.05); }
.tier-row__title { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
.tier-row .dot-list { align-self: center; padding: 16px 20px; }

/* BESS: numbered process steps */
.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.process__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; }
.process__step:not(:last-child)::before { content: ""; position: absolute; top: 22px; left: 22px; width: calc(100% + 8px); height: 1px; background: var(--stone-hover); }
.process__num {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--white);
  font-size: var(--fs-body-sm); font-weight: 600; line-height: 1;
}
.process__step p { padding-right: 8px; font-size: var(--fs-body-sm); font-weight: 600; line-height: 1.35; }

/* Cards with a red left rule (BESS scale/applications, AMS ROC/TAM/CAM) */
.sol-cards { display: flex; flex-direction: column; gap: 12px; }
.sol-cards--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sol-card { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 24px 24px; border-left: 3px solid var(--red); background: var(--sand); }
.sol-card__title { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
.sol-card__title span { color: var(--red-text); }
.sol-card__meta { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; color: var(--red-text); }

/* ==========================================================================
   04 TECHNOLOGY — ecosystem map (1680 × 980 design canvas, % positioned)
   ========================================================================== */
.tech { position: relative; isolation: isolate; background: var(--ink); color: var(--white); padding-block: var(--sec-y); overflow: hidden; }
.tech__bg { position: absolute; inset: 0; z-index: -1; }
.tech__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .14; }
.tech__inner { display: flex; flex-direction: column; gap: var(--gap-72); }

.eco { position: relative; width: 100%; aspect-ratio: 1680 / 980; container-type: inline-size; }
.eco__glow { position: absolute; left: 27.381%; top: 10.204%; width: 45.238%; aspect-ratio: 1; pointer-events: none; }
.eco__glow img { width: 100%; height: 100%; }
.eco__connectors { position: absolute; inset: 0; pointer-events: none; }
.eco__connectors img,
.eco__connectors svg { width: 100%; height: 100%; overflow: visible; }
.eco__connectors svg path { transition: stroke-opacity .35s ease, stroke-width .35s ease; }
.eco__connectors svg path.is-lit { stroke-opacity: 1; stroke-width: 2.5px; }

.eco__hub {
  position: absolute; left: 41.071%; top: 33.673%; width: 17.857%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border-radius: 50%; text-align: center; white-space: nowrap;
  background-image: linear-gradient(135deg, var(--red) 25%, var(--red-deep) 75%);
  box-shadow: 0 0 80px rgba(239,49,37,.45);
}
.eco__hub .heading-s { font-size: clamp(1rem, 1.4286cqi, 1.5rem); }
.eco__hub .label { font-size: clamp(.625rem, .7143cqi, .75rem); }

.eco__nodes { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.eco-node {
  position: absolute; width: 16.667%;
  display: flex; flex-direction: column; align-items: center; gap: clamp(6px, .5952cqi, 10px); text-align: center;
}
.eco-node--iot       { left: 41.667%; top: 82.245%; }
.eco-node--scada     { left: 8.553%;  top: 59.271%; }
.eco-node--ems       { left: 11.379%; top: 26.044%; }
.eco-node--apm       { left: 41.667%; top: 8.776%; }
.eco-node--analytics { left: 71.954%; top: 26.044%; }
.eco-node--ams       { left: 74.780%; top: 59.271%; }
.eco-node__point {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: clamp(48px, 4.0476cqi, 68px); height: clamp(48px, 4.0476cqi, 68px); border-radius: 50%;
  background: var(--ink); border: 1.5px solid var(--red);
  box-shadow: 0 0 24px rgba(239,49,37,.35);
  transition: transform .35s var(--ease-out), box-shadow .35s ease, background-color .35s ease;
}
.eco-node .heading-s { font-size: clamp(1.0625rem, 1.4286cqi, 1.5rem); }
.eco-node .label { font-size: clamp(.625rem, .7143cqi, .75rem); }
.eco-node .body-sm { font-size: clamp(.75rem, .8333cqi, .875rem); }
.eco-node:hover .eco-node__point,
.eco-node.is-active .eco-node__point { transform: scale(1.08); background: var(--node-active); box-shadow: 0 0 40px rgba(239,49,37,.7); }

.flows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-48); }
.flow { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); }

.cyber { display: flex; align-items: center; gap: 24px; font-size: var(--fs-label); font-weight: 600; line-height: 1.5; letter-spacing: .18em; color: var(--grey-300); }
.cyber__dot { width: 6px; height: 6px; background: var(--red); flex: none; }
.cyber__lead { text-transform: uppercase; }

/* ==========================================================================
   09 LEADERSHIP
   ========================================================================== */
.leadership { background: var(--sand); padding-block: var(--sec-y); }
.leadership__inner { display: flex; flex-direction: column; gap: var(--gap-64); }
.leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.leader {
  display: flex; align-items: center; gap: 22px; min-width: 0; padding: 20px;
  border-radius: 4px; background: var(--white); transition: box-shadow .4s ease, transform .4s var(--ease-out);
}
.leader:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(10,10,10,.07); }
.leader__photo { flex: none; width: 96px; height: 121px; overflow: hidden; border-radius: 4px; background: var(--ink); }
.leader__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%; transition: transform .6s var(--ease-out); }
.leader:hover .leader__photo img { transform: scale(1.05); }
.leader__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.leader__role { color: var(--red-text); line-height: 1.45; }
.leader__years { margin-top: 6px; color: var(--muted); }

/* ==========================================================================
   10 CONTACT — final CTA
   ========================================================================== */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 64px;
  min-height: 100vh; min-height: 100svh;
  padding-top: clamp(3rem, 8.9vh, 6rem); padding-bottom: clamp(3rem, 8.9vh, 6rem);
  background: var(--ink); color: var(--white);
}
.cta__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cta__bg { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cta__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.6) 55%, rgba(10,10,10,.96) 100%); }
/* Headline fills the space above the contact strip and sits at its vertical centre */
.cta__content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; text-align: center; }
.cta__title { max-width: 1400px; color: var(--white); }
.cta__lead { max-width: 760px; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding-top: 16px; }
.cta__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-64); }
.contact-col { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.22); }
.contact-col .body { color: var(--white); }
.contact-col a:hover, .contact-col a:focus-visible { color: var(--red); }
.contact-col ul { display: flex; flex-direction: column; gap: 4px; color: var(--white); }
address.contact-col { font-style: normal; margin-bottom: 0; }

/* ==========================================================================
   11 FOOTER
   ========================================================================== */
/* Copyright line only — contact details and solutions live in the CTA strip above */
.site-footer { background: var(--black); color: var(--footer-text); padding-block: 32px; }
.site-footer__legal { display: flex; align-items: center; justify-content: center; text-align: center; }
.site-footer__legal .label { margin: 0; line-height: 1.6; color: var(--footer-legal); }

/* ==========================================================================
   REACH US — contact drawer
   Behaviour comes from Bootstrap 5 Offcanvas JS (focus trap, ESC, backdrop,
   scroll lock, focus return); only the state classes it toggles are styled.
   ========================================================================== */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.offcanvas {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1045;
  display: flex; flex-direction: column; max-width: 100%; outline: 0;
  visibility: hidden; transform: translateX(100%);
  transition: transform .4s cubic-bezier(.55, 0, .45, 1);
}
.offcanvas.showing,
.offcanvas.show:not(.hiding) { transform: none; }
.offcanvas.showing,
.offcanvas.show { visibility: visible; transition: transform .55s var(--ease-out); }
.offcanvas.hiding { visibility: visible; transition: transform .4s cubic-bezier(.55, 0, .45, 1); }
@media (prefers-reduced-motion: reduce) { .offcanvas, .offcanvas.show, .offcanvas.hiding { transition: none; } }
.offcanvas-backdrop { position: fixed; inset: 0; z-index: 1040; background-color: rgba(10,10,10,.55); }
.offcanvas-backdrop.fade { opacity: 0; transition: opacity .45s ease; }
.offcanvas-backdrop.show { opacity: 1; }

.contact-drawer {
  width: min(var(--drawer-w), 100vw);
  background: var(--white); color: var(--ink);
  box-shadow: -24px 0 64px rgba(0,0,0,.25);
}
.contact-drawer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none;
  padding: 48px 56px 0;
}
.contact-drawer__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-drawer__eyebrow span { width: 32px; height: 2px; background: var(--red); }
.contact-drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--stone); background: var(--white);
  cursor: pointer; transition: border-color .25s ease, transform .35s var(--ease-out);
}
.contact-drawer__close:hover { border-color: var(--ink); transform: rotate(90deg); }
.contact-drawer__body { display: flex; flex-direction: column; gap: 28px; padding: 28px 56px max(48px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }

.contact-form { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.contact-form > .btn-primary-ns { margin-top: 10px; }
.field { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.field__input {
  width: 100%; height: 52px; padding: 13px 17px; border: 1px solid var(--stone); border-radius: 2px;
  background: var(--sand); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.65;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.field__input::placeholder { color: var(--muted); opacity: 1; }
.field__input:hover { border-color: var(--stone-hover); }
.field__input:focus { outline: none; border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px rgba(239,49,37,.18); }
.field__input--area { height: 112px; min-height: 112px; resize: vertical; }
.field.has-error .field__input { border-color: var(--error); background: var(--white); }
.field__error { font-size: var(--fs-body-sm); line-height: 1.4; color: var(--error); }
.field__error:empty { display: none; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-status { width: 100%; font-size: var(--fs-body-sm); line-height: 1.5; }
.form-status:empty { display: none; }
.form-status.is-success { padding: 14px 16px; background: var(--success-bg); border-left: 3px solid var(--success); color: var(--success-text); }
.form-status.is-error { padding: 14px 16px; background: var(--blush); border-left: 3px solid var(--error); color: var(--error-text); }

.contact-drawer__rule { display: block; height: 1px; flex: none; background: var(--stone); }
.direct-contact { display: flex; flex-direction: column; gap: 12px; }
.direct-contact li { display: flex; align-items: center; gap: 14px; font-size: var(--fs-body); line-height: 1.65; }
.direct-contact a { color: var(--ink); }
.direct-contact a:hover, .direct-contact a:focus-visible { color: var(--red-text); }

.connect-with-us { display: flex; align-items: center; gap: 16px; }
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--stone); color: var(--ink);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.social-icon:hover, .social-icon:focus-visible { background: var(--red-fill); border-color: var(--red-fill); color: var(--white); }

/* ---------- Mobile menu (shown ≤1199px, see responsive.css) ---------- */
.mobile-menu { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Animation helpers ---------- */
.split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

[tabindex="-1"]:focus { outline: none; }

/* Hide hero copy until the intro timeline starts (class added inline in <head>, removed by animations.js or a 3s safety timeout). */
.anim-pending .hero__content { opacity: 0; }