/* ==========================================================================
   Power Line Services — Brand System v1.0
   Tokens and components implemented from "PLSSA Rebrand.dc.html"
   ========================================================================== */

:root {
  /* Colour — core */
  --ink: #0B0B0C;
  --voltage: #F4480A;
  --amber: #FBB417;
  --ember: #C4420A;          /* text-safe accent, 4.6:1 on Paper */
  --current: linear-gradient(104deg, #F4480A, #FBB417);

  /* Colour — neutrals */
  --white: #FFFFFF;
  --paper: #F7F6F4;
  --mist: #E4E1DC;
  --placeholder: #E8E5E0;
  --disabled: #A8A9AD;
  --muted: #6E7075;
  --body: #56585D;
  --graphite: #16181B;

  /* On-dark text */
  --on-dark: #FFFFFF;
  --on-dark-88: rgba(255, 255, 255, .88);
  --on-dark-72: rgba(255, 255, 255, .72);
  --on-dark-62: rgba(255, 255, 255, .62);
  --on-dark-50: rgba(255, 255, 255, .5);
  --on-dark-rule: rgba(255, 255, 255, .12);

  /* Type */
  --f-display: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --f-text: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --f-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-mono: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* Layout */
  --content: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(80px, 9vw, 140px);
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Brand photo overlay — same recipe as the brochure and company card:
     Ink tint deepening toward the bottom + faint Voltage warmth from the start side */
  --photo-warmth: linear-gradient(104deg, rgba(244, 72, 10, .10), rgba(244, 72, 10, 0) 55%);
  --photo-ink: linear-gradient(180deg, rgba(11, 11, 12, .26), rgba(11, 11, 12, .34) 55%, rgba(11, 11, 12, .62));
  --photo-overlay: var(--photo-warmth), var(--photo-ink);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--ember); text-decoration: none; }
a:hover { color: var(--ink); }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200;
  padding: 12px 18px; background: var(--ink); color: var(--white);
  font-family: var(--f-display); font-weight: 700; font-size: 13px;
}
.skip:focus { top: 12px; color: var(--white); }

.container { max-width: var(--content); margin: 0 auto; }
.pad-x { padding-inline: var(--gutter); }
/* a container that carries its own gutter is widened by it, so its content lines up with padded sections */
.container.pad-x { max-width: calc(var(--content) + 2 * var(--gutter)); }

.mono-label {
  font-family: var(--f-mono); font-weight:600;
  font-size: 10px;
  letter-spacing:.12em;
  text-transform: uppercase;
}

/* Eyebrow: short rule + mono caps */
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.eyebrow__rule { width: 22px; height: 2px; background: var(--voltage); flex: none; }
.eyebrow__text {
  font-family: var(--f-mono); font-weight:600; font-size: 11px; letter-spacing:.12em;
  text-transform: uppercase; color: var(--ember);
}
.eyebrow--amber .eyebrow__rule { background: var(--amber); }
.eyebrow--amber .eyebrow__text { color: var(--amber); }
.eyebrow--hero { gap: 14px; margin-bottom: 28px; }
.eyebrow--hero .eyebrow__rule { width: 28px; background: linear-gradient(90deg, var(--voltage), var(--amber)); }
.eyebrow--hero .eyebrow__text { color: var(--amber); }

.h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.04; letter-spacing:-.01em;
  color: var(--ink); text-wrap: balance;
}
.h2--xl { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.02; }
.h2--on-dark { color: var(--on-dark); }

/* Current-lines pattern — 112.5°, angle taken from the bolt edge */
.lines { position: absolute; inset: 0; pointer-events: none; }
.lines--band { inset: -10% 0; background: repeating-linear-gradient(112.5deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 22px); }
.lines--photo { background: repeating-linear-gradient(112.5deg, rgba(11, 11, 12, .16) 0 2px, transparent 2px 26px); }
.lines--cta { background: repeating-linear-gradient(112.5deg, rgba(11, 11, 12, .07) 0 2px, transparent 2px 24px); }

/* --------------------------------------------------------------------------
   Buttons — radius 2px, one gradient button per view
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 20px 34px; border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--f-display); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .2s;
}
.btn--sm { padding: 14px 24px; font-size: 13px; }
.btn--current { background: var(--current); color: var(--ink); font-weight: 800; box-shadow: 0 18px 40px rgba(244, 72, 10, .3); }
.btn--current:hover { transform: translateY(-3px); box-shadow: 0 26px 54px rgba(244, 72, 10, .42); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--ember); color: var(--white); }
.btn--ink-lift { font-weight: 800; }
.btn--ink-lift:hover { background: var(--ink); transform: translateY(-3px); }
.btn--ghost-dark { border-color: rgba(255, 255, 255, .28); color: var(--white); }
.btn--ghost-dark:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); color: var(--white); }
.btn--ghost-ink { border-color: rgba(11, 11, 12, .35); color: var(--ink); }
.btn--ghost-ink:hover { background: rgba(255, 255, 255, .28); color: var(--ink); }
.btn--tertiary { border-color: var(--ink); color: var(--ink); }
.btn--disabled { background: var(--mist); color: var(--disabled); cursor: default; }

.text-link {
  font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--voltage); padding-bottom: 6px;
}
.text-link:hover { color: var(--ember); }

/* --------------------------------------------------------------------------
   View switcher pill (Website / Brand system)
   -------------------------------------------------------------------------- */
.switcher {
  position: fixed; z-index: 90; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(11, 11, 12, .92); backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(11, 11, 12, .28);
}
.switcher a {
  padding: 11px 22px; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255, 255, 255, .66); white-space: nowrap;
  transition: background .3s var(--ease), color .2s;
}
.switcher a:hover { color: var(--white); }
.switcher a[aria-current="page"] { background: var(--current); color: var(--ink); }

/* --------------------------------------------------------------------------
   Top utility bar + language switch (v2)
   -------------------------------------------------------------------------- */
.topbar { background: var(--ink); color: rgba(255, 255, 255, .62); }
.topbar__inner { height: 42px; display: flex; align-items: center; gap: 28px; }
.topbar__item { font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing:.12em; color: rgba(255, 255, 255, .62); }
a.topbar__item:hover { color: var(--amber); }
.topbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: 18px; }
.lang { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; }
.lang__btn {
  min-width: 34px; padding: 5px 11px; border-radius: 999px; text-align: center;
  font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing: .12em; color: rgba(255, 255, 255, .7);
  transition: background .3s var(--ease), color .2s;
}
.lang__btn[lang="ar"] { font-family: var(--f-arabic); font-size: 12px; letter-spacing: 0; padding-block: 3px; }
.lang__btn:hover { color: var(--white); }
.lang__btn[aria-current="true"] { background: var(--current); color: var(--ink); }
@media (max-width: 1140px) { .topbar__util { display: none; } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--mist);
  transition: box-shadow .4s var(--ease);
}
.header.is-scrolled { box-shadow: 0 12px 40px rgba(11, 11, 12, .10); }
.header__bar { height: 88px; display: flex; align-items: center; gap: 32px; transition: height .4s var(--ease); }
.header.is-scrolled .header__bar { height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
/* registered logo: original transparent artwork (Logo bgless.png), never recoloured, retyped or boxed */
.brand__logo { display: block; height: 60px; width: auto; max-width: none; object-fit: contain; transition: height .4s var(--ease); }
.header.is-scrolled .brand__logo { height: 48px; }
@media (max-width: 520px) { .brand__logo { height: 50px; } }
.brand__name { font-family: var(--f-display); font-weight:700; font-style: italic; font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.brand__tag { font-family: var(--f-mono); font-weight:600; font-size: 9px; letter-spacing:.12em; color: var(--muted); margin-top: 4px; }

.nav { display: flex; gap: 6px; margin-inline-start: auto; align-items: center; }
.nav__link {
  position: relative; padding: 10px 16px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; color: var(--ink); transition: background .3s var(--ease);
}
.nav__link:hover { background: #F0EEEA; color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--voltage), var(--amber));
}

.header__actions { display: flex; align-items: center; gap: 16px; margin-inline-start: auto; }
.call { display: flex; align-items: center; gap: 10px; }
.call__icon {
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  background: var(--current); color: var(--ink); font-size: 13px; flex: none;
}
.call__text { display: flex; flex-direction: column; line-height: 1.3; }
.call__label { font-family: var(--f-mono); font-weight:600; font-size: 9px; letter-spacing:.12em; color: var(--muted); }
.call__num { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }
.call:hover .call__num { color: var(--ember); }
.btn--lift:hover { transform: translateY(-2px); }

.burger {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--mist); border-radius: var(--radius); cursor: pointer;
}
.burger span { width: 18px; height: 1.5px; background: var(--ink); display: block; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav { display: none; border-top: 1px solid var(--mist); background: var(--white); }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding-block: 12px 20px; display: grid; gap: 2px; }
.mobile-nav a { display: block; padding: 14px 0; border-bottom: 1px solid #F0EEEA; font-size: 16px; font-weight: 500; color: var(--ink); }
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--ember); }
.mobile-nav .mobile-nav__call { font-family: var(--f-mono); font-weight:600; font-size: 14px; color: var(--ember); border-bottom: 0; }

@media (max-width: 1140px) { .call__text { display: none; } }
@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__bar { gap: 16px; }
}
@media (max-width: 520px) {
  .header .btn--sm { display: none; }
  .brand__tag { display: none; }
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
@keyframes plsDrift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@keyframes plsMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.hero {
  position: relative; overflow: hidden; background: var(--ink);
  min-height: min(86vh, 840px); display: flex; align-items: flex-end;
}
/* Booklet-cover treatment: photo panel cut on the bolt's slant, gradient edge on the cut, cover grade on the photo */
.hero__media, .hero__edge { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 54%; }
.hero__media { clip-path: polygon(calc(22% + 6px) 0, 100% 0, 100% 100%, 6px 100%); }
.hero__edge { background: linear-gradient(180deg, var(--amber), var(--voltage)); clip-path: polygon(22% 0, calc(22% + 6px) 0, 6px 100%, 0 100%); }
.hero__photo { position: absolute; inset: 0; background: url("photos/hero-home.jpg") 50% 42% / cover; }
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(95% 65% at 0% 100%, rgba(244, 72, 10, .34), rgba(244, 72, 10, 0) 62%),
    radial-gradient(70% 45% at 100% 100%, rgba(251, 180, 23, .16), rgba(251, 180, 23, 0) 60%),
    linear-gradient(180deg, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, .04) 22%, rgba(11, 11, 12, .30) 58%, rgba(11, 11, 12, .72) 100%),
    linear-gradient(90deg, rgba(11, 11, 12, .38) 0%, rgba(11, 11, 12, 0) 38%);
}
.hero__copy { max-width: min(600px, 44%); }
[dir="rtl"] .hero__media { clip-path: polygon(0 0, calc(78% - 6px) 0, calc(100% - 6px) 100%, 0 100%); }
[dir="rtl"] .hero__edge { clip-path: polygon(calc(78% - 6px) 0, 78% 0, 100% 100%, calc(100% - 6px) 100%); }
[dir="rtl"] .hero__photo::after {
  background:
    radial-gradient(95% 65% at 100% 100%, rgba(244, 72, 10, .34), rgba(244, 72, 10, 0) 62%),
    radial-gradient(70% 45% at 0% 100%, rgba(251, 180, 23, .16), rgba(251, 180, 23, 0) 60%),
    linear-gradient(180deg, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, .04) 22%, rgba(11, 11, 12, .30) 58%, rgba(11, 11, 12, .72) 100%),
    linear-gradient(-90deg, rgba(11, 11, 12, .38) 0%, rgba(11, 11, 12, 0) 38%);
}
@media (max-width: 900px) {
  .hero { display: block; min-height: 0; }
  .hero__media, .hero__edge { width: 100%; bottom: auto; height: 360px; }
  .hero__media, [dir="rtl"] .hero__media { clip-path: polygon(0 0, 100% 0, 100% calc(82% - 6px), 0 calc(100% - 6px)); }
  .hero__edge, [dir="rtl"] .hero__edge { background: var(--current); clip-path: polygon(0 calc(100% - 6px), 100% calc(82% - 6px), 100% 82%, 0 100%); }
  .hero__photo { background-position: 50% 30%; }
  .hero__photo::after, [dir="rtl"] .hero__photo::after {
    background:
      radial-gradient(95% 65% at 0% 100%, rgba(244, 72, 10, .30), rgba(244, 72, 10, 0) 62%),
      linear-gradient(180deg, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, .1) 40%, rgba(11, 11, 12, .6) 100%);
  }
  .hero__copy { max-width: none; }
  .hero .hero__inner { padding-top: 380px; }
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: clamp(80px, 12vh, 150px); }
.hero__slide { transition: opacity .45s var(--ease); }
.hero__slide.is-swapping { opacity: 0; }
.hero__title {
  max-width: 17ch; font-family: var(--f-display); font-weight:700;
  font-size: clamp(38px, 4.8vw, 74px); line-height: .98; letter-spacing:-.01em;
  color: var(--white); text-wrap: balance;
}
.hero__lede { margin-top: 32px; max-width: 54ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; color: var(--on-dark-72); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
.hero__dots { display: flex; gap: 10px; margin-top: 56px; }
.hero__dot {
  width: 12px; height: 4px; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .28);
  transition: width .5s var(--ease), background .5s;
  /* larger hit area without changing the visual bar */
  position: relative;
}
.hero__dot::after { content: ""; position: absolute; inset: -12px -4px; }
.hero__dot[aria-selected="true"] { width: 34px; background: linear-gradient(90deg, var(--voltage), var(--amber)); }

/* Stat strip — 1px hairline grid */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 1px;
  background: var(--on-dark-rule); border-top: 1px solid var(--on-dark-rule);
}
.stats--hero { margin-top: 64px; }
.stats--band { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); border: 1px solid var(--on-dark-rule); }
.stat { background: var(--ink); padding: 28px 24px 32px; }
.stats--band .stat { padding: 40px 32px; }
.stat__num { font-family: var(--f-display); font-weight:700; font-size: 34px; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.stats--band .stat__num { font-size: clamp(40px, 4vw, 58px); }
.stat__num em { font-style: normal; color: var(--amber); }
.stat__label { margin-top: 10px; color: var(--on-dark-50); }
.stats--band .stat__label { margin-top: 14px; color: rgba(255, 255, 255, .52); }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .1); overflow: hidden; padding: 22px 0; }
.marquee__track { display: flex; width: max-content; animation: plsMarquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; gap: 48px; padding: 0; padding-inline-end: 48px; align-items: center; margin: 0; list-style: none; }
.marquee__item {
  font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .62); white-space: nowrap;
}
.marquee__sep { width: 5px; height: 5px; background: var(--voltage); transform: rotate(45deg); flex: none; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section--white { background: var(--white); border-top: 1px solid var(--mist); }
.section--paper { background: var(--paper); }
.section--ink { position: relative; overflow: hidden; background: var(--ink); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: clamp(40px, 5vw, 72px);
}
.section-head > div { max-width: min(760px, 100%); }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(40px, 5vw, 80px); align-items: start; }

/* Service cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.card {
  background: var(--white); border: 1px solid var(--mist);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 32px 70px rgba(11, 11, 12, .12); border-color: var(--ink); }
.card__media { position: relative; height: 240px; overflow: hidden; background: var(--placeholder); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media::after { content: ""; position: absolute; inset: 0; background: var(--photo-overlay); pointer-events: none; }
.card__caption { position: absolute; z-index: 1; inset-inline-start: 18px; bottom: 16px; font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing:.12em; color: rgba(255, 255, 255, .92); }
.card__index { position: absolute; z-index: 1; top: 14px; inset-inline-end: 16px; padding: 5px 9px; background: var(--white); font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing:.12em; color: var(--ink); }
.card__body { padding: 32px; }
.card__title { margin-bottom: 14px; font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing:-.01em; color: var(--ink); }
.card__text { font-size: 16px; line-height: 1.7; color: var(--body); }

/* Photo frames with mono caption */
.photo { position: relative; overflow: hidden; background: var(--placeholder); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ""; position: absolute; inset: 0; background: var(--photo-overlay); pointer-events: none; }
.photo__caption {
  z-index: 1;
  position: absolute; inset-inline-start: 20px; bottom: 18px; font-family: var(--f-mono); font-weight:600; font-size: 10px;
  letter-spacing:.12em; color: var(--white); text-shadow: 0 1px 8px rgba(11, 11, 12, .8);
}
.photo--4x3 { aspect-ratio: 4 / 3; }
.photo--1x1 { aspect-ratio: 1; }
.photo--3x4 { aspect-ratio: 3 / 4; background: var(--graphite); }
.photo--3x4 .photo__caption { z-index: 1; color: var(--on-dark-72); text-shadow: none; }

/* About */
.about-media { display: grid; gap: 20px; }
.about-media__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.about-media__row .photo__caption { inset-inline-start: 16px; bottom: 14px; font-size: 9px; }
.years-tile { background: var(--ink); aspect-ratio: 1; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; }
.years-tile__num { font-family: var(--f-display); font-weight:700; font-size: clamp(44px, 5vw, 68px); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.years-tile__plus {
  font-family: var(--f-display); font-weight:700; font-size: clamp(44px, 5vw, 68px); line-height: 1; margin-top: -8px;
  background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.years-tile__label { margin-top: 14px; color: rgba(255, 255, 255, .58); }

.about-copy__h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; text-wrap: pretty; }
.lede { margin-top: 28px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.75; color: var(--body); }

.numbered { display: grid; gap: 1px; margin-top: 44px; background: var(--mist); }
.numbered__item { background: var(--white); padding: 30px 0; display: flex; gap: 24px; align-items: flex-start; }
.numbered__index {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--mist); font-family: var(--f-mono); font-weight:600; font-size: 11px; color: var(--ember);
}
.numbered__title { margin-bottom: 10px; font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.numbered__text { font-size: 15px; line-height: 1.7; color: var(--body); }

/* Why choose us (ink band) */
.band-inner { position: relative; }
.why { margin-top: clamp(56px, 7vw, 110px); }
.why__text { margin: 26px 0 40px; max-width: 50ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.75; color: rgba(255, 255, 255, .66); }
.equip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--on-dark-rule); border-top: 1px solid var(--on-dark-rule); border-inline-start: 1px solid var(--on-dark-rule);
}
.equip li {
  background: var(--ink); padding: 20px 22px; font-family: var(--f-display); font-weight: 600; font-size: 15px;
  color: var(--on-dark-88); transition: background .3s;
}
.equip li:hover { background: var(--graphite); }
.arrow-link {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 36px;
  font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--amber);
}
.arrow-link span { font-size: 18px; transition: transform .3s var(--ease); }
.arrow-link:hover { color: var(--white); }
.arrow-link:hover span { transform: translateX(4px); }

/* Benefits */
.benefits { display: grid; gap: 20px; margin-top: 40px; }
.benefit { background: var(--white); border: 1px solid var(--mist); border-inline-start: 3px solid var(--voltage); padding: 30px 32px; }
.benefit:nth-child(even) { border-inline-start-color: var(--amber); }
.benefit__title { margin-bottom: 12px; font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.benefit__text { font-size: 15px; line-height: 1.7; color: var(--body); }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px 32px; margin: 40px 0 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--ink); }
.checks li::before { content: "✓"; color: var(--ember); font-family: var(--f-mono); font-weight:600; font-size: 12px; }

/* CTA band */
.cta { position: relative; overflow: hidden; background: var(--current); padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); }
.cta__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.cta__title { max-width: 24ch; font-family: var(--f-display); font-weight:700; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.06; letter-spacing:-.01em; color: var(--ink); text-wrap: balance; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); padding-top: clamp(64px, 7vw, 110px); padding-bottom: 88px; }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 24px; padding-bottom: 48px; border-bottom: 1px solid var(--on-dark-rule); }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name { font-family: var(--f-display); font-weight:700; font-style: italic; font-size: clamp(22px, 2.6vw, 34px); letter-spacing:-.01em; color: var(--white); }
.wordmark__tag { font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing:.12em; color: var(--amber); margin-top: 10px; }
.socials { display: flex; gap: 12px; }
.socials a {
  width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2);
  color: var(--on-dark-72); font-family: var(--f-display); font-weight: 700; font-size: 13px; transition: background .3s, color .3s;
}
.socials a:hover { background: var(--white); color: var(--ink); }

.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(32px, 4vw, 64px); padding: 56px 0; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__h { margin-bottom: 18px; font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--white); }
.footer__p { margin-bottom: 28px; font-size: 15px; line-height: 1.75; color: var(--on-dark-62); max-width: 58ch; }
.footer__col-h { margin-bottom: 20px; font-family: var(--f-mono); font-size: 10px; letter-spacing:.12em; color: rgba(255, 255, 255, .44); font-weight: 400; }
.footer__links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.footer__links a { font-size: 15px; color: rgba(255, 255, 255, .78); }
.footer__links a:hover { color: var(--amber); }
.footer__address { font-size: 15px; line-height: 1.6; color: var(--on-dark-62); font-style: normal; }
.footer__arabic { font-family: var(--f-arabic); font-size: 14px; line-height: 1.8; color: var(--on-dark-50); direction: rtl; text-align: right; }

.subscribe { display: flex; max-width: 420px; border-bottom: 1px solid rgba(255, 255, 255, .24); }
.subscribe:focus-within { border-bottom-color: var(--amber); }
.subscribe input {
  flex: 1; min-width: 0; background: transparent; border: 0; padding: 14px 0; color: var(--white);
  font-family: var(--f-text); font-size: 15px; outline: none;
}
.subscribe input::placeholder { color: rgba(255, 255, 255, .5); }
.subscribe button { background: transparent; border: 0; padding: 14px 0; padding-inline-start: 16px; color: var(--amber); font-family: var(--f-display); font-weight: 700; font-size: 16px; cursor: pointer; }
.subscribe button:hover { color: var(--white); }

.footer__legal { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding: 26px 0; border-top: 1px solid var(--on-dark-rule); }
.footer__legal p { font-family: var(--f-mono); font-weight:600; font-size: 11px; letter-spacing: .1em; color: rgba(255, 255, 255, .4); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   v2 — interior pages
   -------------------------------------------------------------------------- */
.section--tight { padding-top: clamp(56px, 7vw, 110px); padding-bottom: clamp(56px, 7vw, 110px); }
.section--flush-top { padding-top: 0; padding-bottom: clamp(64px, 8vw, 120px); }
.section--band { padding-top: clamp(64px, 7vw, 110px); padding-bottom: clamp(64px, 7vw, 110px); }
.split--center { align-items: center; }
.h2--sm { font-size: clamp(26px, 3vw, 40px); line-height: 1.1; }
.h2--xs { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.14; margin-bottom: 28px; }
.lede--follow { margin-top: 20px; }
.narrow { max-width: 50ch; }
.narrow-900 { max-width: 900px; }
.btn--fill:hover { background: var(--ink); color: var(--white); }

/* Page hero */
.page-hero { position: relative; overflow: hidden; background: var(--ink); padding-top: clamp(72px, 9vw, 140px); padding-bottom: clamp(72px, 9vw, 140px); }
.page-hero__photo { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; opacity: .32; }
.page-hero__scrim { position: absolute; inset: 0; background: linear-gradient(104deg, rgba(244, 72, 10, .12), rgba(244, 72, 10, 0) 55%), linear-gradient(100deg, rgba(11, 11, 12, .92), rgba(11, 11, 12, .6)); }
.page-hero__inner { position: relative; }
.page-hero__crumb { font-family: var(--f-mono); font-weight:600; font-size: 11px; letter-spacing:.12em; color: var(--amber); }
.page-hero__title {
  margin-top: 18px; max-width: 22ch; font-family: var(--f-display); font-weight:700;
  font-size: clamp(32px, 4.8vw, 72px); line-height: 1.05; letter-spacing:-.01em; color: var(--white); text-wrap: balance;
}
.page-hero__intro { margin-top: 26px; max-width: 56ch; font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, .7); }

/* About */
.photo--16x10 { aspect-ratio: 16 / 10; }
.photo--16x11 { aspect-ratio: 16 / 11; }
.hairline-box { display: grid; gap: 1px; margin-top: 30px; background: var(--mist); border: 1px solid var(--mist); }
.hairline-box > div { background: var(--white); padding: 26px 28px; }
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; margin-top: 12px; }
.benefit-grid .benefit { background: transparent; padding: 32px; }
.benefit-grid .benefit:nth-child(2) { border-inline-start-color: var(--amber); }
.benefit-grid .benefit--ink { border-inline-start-color: var(--ink); }
.two-col-text {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--mist);
}
.two-col-text p { font-size: 16px; line-height: 1.8; color: var(--body); }

/* Services rows */
.svc-rows { display: grid; gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
.svc-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 56px); align-items: center;
}
.svc-row--paper { background: var(--paper); }
.svc-row--white { background: var(--white); }
@media (min-width: 700px) { .svc-row--flip > .photo { order: 2; } }
.svc-row__n { font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing:.12em; color: var(--ember); }
.svc-row__title { margin: 12px 0 16px; font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.14; letter-spacing:-.01em; color: var(--ink); }
.svc-row__body { font-size: 16px; line-height: 1.8; color: var(--body); }
.section--ink .equip { margin-top: 40px; }
/* nine items: a fixed 3 x 3 grid so no row is left half-empty */
.section--ink .equip { grid-template-columns: 1fr; }
@media (min-width: 620px) { .section--ink .equip { grid-template-columns: repeat(3, 1fr); } }
.section--white .checks { margin-top: 36px; }

/* Fleet */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
.fspec { background: var(--white); padding: 36px 32px; }
.fspec__title { margin: 14px 0 10px; font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--ink); }
.fspec__spec { font-family: var(--f-mono); font-weight:600; font-size: 13px; color: var(--ink); padding: 8px 0 14px; border-bottom: 1px solid var(--mist); margin-bottom: 14px; }
.fspec__body { font-size: 15px; line-height: 1.7; color: var(--body); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.feat-grid li {
  background: var(--white); border: 1px solid var(--mist); padding: 20px 22px;
  font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink);
  transition: border-color .3s, transform .3s var(--ease);
}
.feat-grid li:hover { border-color: var(--ink); transform: translateY(-3px); }

/* Content-required slots and banners */
.slot { max-width: 900px; border: 1px dashed #C9C4BC; background: var(--white); padding: clamp(28px, 4vw, 56px); }
.slot__label { font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing:.12em; color: var(--ember); }
.slot__text { margin: 18px 0 0; font-size: 17px; line-height: 1.8; color: var(--body); }
.slot .btn { margin-top: 26px; }
.legacy { background: var(--ink); padding: clamp(32px, 5vw, 72px); }
.legacy p { max-width: 34ch; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.8vw, 36px); line-height: 1.24; color: var(--white); }

/* Downloads */
.dl-list { max-width: 1000px; display: grid; gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
.dl { background: var(--white); padding: 26px 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.dl--pending { opacity: .6; }
.dl__text { flex: 1; min-width: 200px; }
.dl__title { font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.dl__meta { margin-top: 6px; font-family: var(--f-mono); font-weight:600; font-size: 11px; letter-spacing: .12em; color: var(--muted); }

/* Contact */
.details { display: grid; gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
.detail { background: var(--white); padding: 24px 26px; }
.detail__label { font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing:.12em; color: var(--muted); }
.detail__big { display: block; margin-top: 8px; font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--ink); }
.detail__big:hover { color: var(--ember); }
.detail__text { margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--ink); }
.form-card { background: var(--white); border: 1px solid var(--mist); padding: clamp(24px, 3vw, 44px); }
.enquiry { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field__label { font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing:.12em; color: var(--muted); }
.field input, .field textarea { font: inherit; font-size: 16px; color: var(--ink); outline: none; border-radius: 0; }
.field input { border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 10px 0; }
.field textarea { border: 1px solid var(--mist); background: var(--paper); padding: 14px; resize: vertical; }
.field input:focus { border-bottom-color: var(--ember); box-shadow: 0 1px 0 var(--ember); }
.field textarea:focus { border-color: var(--ember); }
.enquiry__submit { justify-self: start; border: 0; }
.enquiry__note { font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing: .12em; color: var(--muted); }

/* Footer — v2 four columns */
.footer { padding-bottom: 0; }
.footer__grid--v2 { grid-template-columns: 2fr 1fr 1fr 1fr; padding: 48px 0; }
@media (max-width: 1080px) { .footer__grid--v2 { grid-template-columns: 1fr 1fr 1fr; } .footer__grid--v2 .footer__about { grid-column: 1 / -1; } }
@media (max-width: 620px) { .footer__grid--v2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .footer__grid--v2 { grid-template-columns: 1fr; } }
.stat dd { margin: 0; }

/* --------------------------------------------------------------------------
   Home page — expanded sections
   -------------------------------------------------------------------------- */
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.section-head--wide > div { max-width: min(620px, 100%); }
.section-head__aside { max-width: 46ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.75; color: rgba(255, 255, 255, .66); }

/* Industries */
.industries { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); }
.industry { background: var(--ink); padding: 34px 30px 38px; display: flex; flex-direction: column; gap: 14px; transition: background .3s var(--ease); }
.industry:hover { background: var(--graphite); }
.industry__n { font-family: var(--f-mono); font-weight:600; font-size: 11px; letter-spacing:.12em; color: var(--amber); }
.industry__title { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--white); }
.industry__body { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .64); }

/* Why choose us */
.why-photo { align-self: stretch; aspect-ratio: auto; min-height: 420px; }
.reasons { display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--mist); }
.reason { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--mist); }
.reason__n { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: var(--white); border: 1px solid var(--mist); font-family: var(--f-mono); font-weight:600; font-size: 11px; color: var(--ember); }
.reason__title { margin-bottom: 6px; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.reason__body { font-size: 15px; line-height: 1.7; color: var(--body); }

/* Load bank range */
.range { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(40px, 5vw, 80px); align-items: center; }
.range__specs { display: grid; gap: 0; margin: 8px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.range__specs div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.range__specs dt { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--white); }
.range__specs dd { margin: 0; font-family: var(--f-mono); font-weight:600; font-size: 14px; color: var(--amber); }
.range__photo { aspect-ratio: 4 / 5; max-width: 480px; justify-self: center; width: 100%; }

/* How we work */
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.process__step { position: relative; padding: 30px 26px 32px; background: var(--paper); border-top: 3px solid var(--mist); }
.process__step:first-child { border-top-color: var(--voltage); }
.process__step:nth-child(2) { border-top-color: #F7762A; }
.process__step:nth-child(3) { border-top-color: #F99A20; }
.process__step:nth-child(4) { border-top-color: var(--amber); }
.process__n { font-family: var(--f-display); font-weight:700; font-size: 40px; line-height: 1; color: var(--mist); }
.process__title { margin: 18px 0 10px; font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--ink); }
.process__body { font-size: 15px; line-height: 1.7; color: var(--body); }

/* Load testing scope */
.equip-groups { display: grid; gap: 0; margin-top: 30px; border-top: 1px solid var(--mist); }
.equip-group { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--mist); }
@media (max-width: 520px) { .equip-group { grid-template-columns: 1fr; gap: 10px; } }
.equip-group__label { font-family: var(--f-mono); font-weight:600; font-size: 11px; letter-spacing:.12em; text-transform: uppercase; color: var(--ember); padding-top: 3px; }
.equip-group ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.equip-group li { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.scope-checks { background: var(--ink); padding: clamp(28px, 3vw, 44px); }
.scope-checks__title { font-family: var(--f-display); font-weight: 700; font-size: 24px; color: var(--white); margin-bottom: 20px; }
.scope-checks__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.scope-checks__list li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 16px; color: rgba(255, 255, 255, .88); }
.scope-checks__list li:last-child { border-bottom: 0; }
.scope-checks__list span { flex: none; font-family: var(--f-mono); font-weight:600; font-size: 11px; color: var(--amber); }

/* In the field */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery__item { position: relative; margin: 0; overflow: hidden; background: var(--placeholder); aspect-ratio: 4 / 3; }
.gallery__item--wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item::after { content: ""; position: absolute; inset: 0; background: var(--photo-overlay); pointer-events: none; }
.gallery__item figcaption { position: absolute; z-index: 1; inset-inline-start: 18px; bottom: 16px; font-family: var(--f-mono); font-weight:600; font-size: 10px; letter-spacing:.12em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
@media (max-width: 860px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery__item--wide { grid-row: auto; aspect-ratio: 16 / 9; } .gallery__item:last-child { grid-column: span 2; aspect-ratio: 16 / 9; } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } .gallery__item--wide, .gallery__item:last-child { grid-column: auto; aspect-ratio: 4 / 3; } }

/* Google reviews */
.reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 32px; }
.reviews__rating { font-family: var(--f-display); font-weight:700; font-size: 44px; line-height: 1; color: var(--white); }
.reviews__count { font-family: var(--f-mono); font-weight:600; font-size: 12px; letter-spacing: .1em; color: rgba(255, 255, 255, .6); }
.stars { color: var(--amber); font-size: 18px; letter-spacing: 2px; }
.stars__off { color: rgba(255, 255, 255, .2); }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); }
.review { margin: 0; background: var(--ink); padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; }
.review__text { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .86); }
.review__by { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--white); }
.review__date { font-family: var(--f-mono); font-weight: 400; font-size: 11px; color: rgba(255, 255, 255, .5); }
.reviews__pending { max-width: 62ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.75; color: rgba(255, 255, 255, .72); }
.reviews__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* FAQ */
.faq { border-top: 1px solid var(--mist); }
.faq__item { border-bottom: 1px solid var(--mist); }
.faq__q { position: relative; list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--ink); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--mist); font-family: var(--f-mono); font-weight: 400; font-size: 16px; color: var(--ember); transition: background .3s var(--ease), color .3s; }
.faq__item[open] .faq__q::after { content: "−"; background: var(--ink); border-color: var(--ink); color: var(--amber); }
.faq__q:hover { color: var(--ember); }
.faq__a { padding: 0 44px 24px 0; font-size: 16px; line-height: 1.75; color: var(--body); }
[dir="rtl"] .faq__q { padding: 22px 0 22px 44px; }
[dir="rtl"] .faq__a { padding: 0 0 24px 44px; }

/* --------------------------------------------------------------------------
   Arabic / right-to-left
   -------------------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] body *:not([dir="ltr"]):not([lang="en"]) {
  font-family: var(--f-arabic) !important;
  letter-spacing: 0 !important;
}
[dir="rtl"] .hero__title,
[dir="rtl"] .page-hero__title,
[dir="rtl"] .h2,
[dir="rtl"] .cta__title,
[dir="rtl"] .legacy p { line-height: 1.35; }
[dir="rtl"] .eyebrow__text,
[dir="rtl"] .mono-label,
[dir="rtl"] .btn,
[dir="rtl"] .text-link,
[dir="rtl"] .marquee__item { text-transform: none; }
[dir="rtl"] { --photo-warmth: linear-gradient(-104deg, rgba(244, 72, 10, .10), rgba(244, 72, 10, 0) 55%); }
[dir="rtl"] .page-hero__scrim { background: linear-gradient(-104deg, rgba(244, 72, 10, .12), rgba(244, 72, 10, 0) 55%), linear-gradient(-100deg, rgba(11, 11, 12, .92), rgba(11, 11, 12, .6)); }
@keyframes plsMarqueeRtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } }
[dir="rtl"] .marquee__track { animation-name: plsMarqueeRtl; }

/* --------------------------------------------------------------------------
   Reveal — content is visible by default; JS opts elements below the fold in
   -------------------------------------------------------------------------- */
.reveal-armed { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-armed.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-armed { opacity: 1; transform: none; }
}

/* ==========================================================================
   Motion layer v1 (creative roadmap, tier 1)
   One vocabulary, each move tied to a meaning:
   current line = progress · bolt wipe = photos · word rise = headlines ·
   breathing glow = dark sections · tilt/magnet = desktop pointer only.
   Everything is static under prefers-reduced-motion.
   ========================================================================== */
@property --glow-x { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --glow-y { syntax: "<percentage>"; inherits: false; initial-value: 30%; }

/* hero photo: WebP/AVIF first, JPEG fallback */
.hero__photo { background-image: image-set(url("photos/hero-home.avif") type("image/avif"), url("photos/hero-home.webp") type("image/webp"), url("photos/hero-home.jpg") type("image/jpeg")); }

/* 1 — current line: a Voltage→Amber rule draws across the top of each section as it enters */
.section, .cta { position: relative; }
.section::before {
  content: ""; position: absolute; z-index: 1; top: 0; inset-inline-start: 0; width: 100%; height: 2px;
  background: var(--current); transform: scaleX(0); transform-origin: left center; opacity: 0;
  transition: transform 1.4s var(--ease), opacity .4s;
}
[dir="rtl"] .section::before { transform-origin: right center; }
.section.is-live::before { transform: scaleX(1); opacity: 1; }

/* 2 — bolt wipe: photos open from the brand's diagonal edge instead of fading */
.wipe-armed { clip-path: polygon(0 0, 16% 0, 0 100%, 0 100%); transition: clip-path 1.25s var(--ease); }
.wipe-armed.is-in { clip-path: polygon(0 0, 116% 0, 100% 100%, 0 100%); }
[dir="rtl"] .wipe-armed { clip-path: polygon(84% 0, 100% 0, 100% 100%, 100% 100%); }
[dir="rtl"] .wipe-armed.is-in { clip-path: polygon(-16% 0, 100% 0, 100% 100%, 0 100%); }
.wipe-armed img { transform: scale(1.08); transition: transform 1.6s var(--ease); }
.wipe-armed.is-in img { transform: none; }

/* 3 — word rise: headlines build word by word; the hero's last word carries the current gradient */
.kw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.kw > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.kw-in .kw > span { transform: none; }
.hero__title .kw--hot > span {
  background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* 4 — breathing glow on Ink sections: slow Voltage/Amber light drifting behind the content (CSS only) */
.section--ink { isolation: isolate; }
.section--ink::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 55% at var(--glow-x) var(--glow-y), rgba(244, 72, 10, .16), transparent 70%),
    radial-gradient(38% 50% at calc(100% - var(--glow-x)) calc(100% - var(--glow-y)), rgba(251, 180, 23, .09), transparent 70%);
  animation: glow-drift 16s ease-in-out infinite alternate;
}
@keyframes glow-drift { 0% { --glow-x: 12%; --glow-y: 18%; } 50% { --glow-x: 34%; --glow-y: 46%; } 100% { --glow-x: 22%; --glow-y: 72%; } }


/* 5 — hero depth: the photo drifts slower than the page (desktop), with room to move */
@media (min-width: 901px) {
  .hero__photo { inset: -8% 0; will-change: transform; }
}

/* 6 — stat tiles: a charge bar fills under each figure; 24/7 gets a live pulse */
.stats--hero .stat { position: relative; }
.stats--hero .stat::after {
  content: ""; position: absolute; inset-inline-start: 24px; bottom: 16px; height: 2px; width: calc(100% - 48px);
  background: linear-gradient(90deg, var(--voltage), var(--amber)); transform-origin: left center;
  transform: scaleX(var(--charge, .6)); animation: charge 1.8s var(--ease) both; animation-delay: calc(.6s + var(--i, 0) * .15s);
}
[dir="rtl"] .stats--hero .stat::after { transform-origin: right center; }
.stats--hero .stat:nth-child(1) { --i: 0; --charge: .55; }
.stats--hero .stat:nth-child(2) { --i: 1; --charge: .7; }
.stats--hero .stat:nth-child(3) { --i: 2; --charge: .85; }
.stats--hero .stat:nth-child(4) { --i: 3; --charge: 1; }
@keyframes charge { from { transform: scaleX(0); } }
.stats--hero .stat:nth-child(4) .stat__label::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 0 rgba(251, 180, 23, .6); animation: live 2s ease-out infinite; vertical-align: 1px;
}
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(251, 180, 23, .55); } 100% { box-shadow: 0 0 0 10px rgba(251, 180, 23, 0); } }

/* 7 — tactile desktop: magnetic primary buttons, cards tilt toward the pointer */
.btn--current, .btn--ink-lift { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s; }
.is-magnet { transform: translate3d(var(--mx, 0), var(--my, 0), 0); }
.card { transform-style: preserve-3d; }
.card.is-tilt { transform: perspective(900px) translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s linear, box-shadow .35s var(--ease), border-color .35s; }

/* closing band: the video is the hero of this band — shown clearly, with a dark shade only behind the text */
.cta { background: var(--ink); }
.cta__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(1.1) contrast(1.05); pointer-events: none; transform: scaleX(-1); }
[dir="rtl"] .cta__video { transform: none; }
.cta__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 12, .8) 0%, rgba(11, 11, 12, .5) 38%, rgba(11, 11, 12, .05) 72%, rgba(11, 11, 12, 0) 100%),
              linear-gradient(0deg, rgba(11, 11, 12, .35), rgba(11, 11, 12, 0) 45%); }
[dir="rtl"] .cta__shade { transform: scaleX(-1); }
.cta::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--current); }
.cta .cta__title { color: var(--white); }
.cta .btn--ink { background: var(--current); color: var(--ink); box-shadow: 0 16px 36px rgba(244, 72, 10, .32); }
.cta .btn--ink:hover { background: var(--current); color: var(--ink); }
.cta .btn--ghost-ink { border-color: rgba(255, 255, 255, .5); color: var(--white); }
.cta .btn--ghost-ink:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
@media (max-width: 900px) { .cta__shade { background: linear-gradient(180deg, rgba(11, 11, 12, .55), rgba(11, 11, 12, .78)); } }
.cta__pause {
  position: absolute; z-index: 3; inset-inline-end: 16px; bottom: 16px; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(11, 11, 12, .35); cursor: pointer; border-radius: 50%;
}
.cta__pause span { width: 10px; height: 11px; border-inline: 3px solid var(--white); }
.cta__pause.is-paused span { width: 0; height: 0; border: 6px solid transparent; border-inline-start: 10px solid var(--white); border-inline-end: 0; margin-inline-start: 3px; }
[dir="rtl"] .cta__pause.is-paused span { transform: scaleX(-1); }
.cta__pause:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .section::before { transform: none; opacity: 1; transition: none; }
  .wipe-armed, [dir="rtl"] .wipe-armed { clip-path: none; }
  .wipe-armed img { transform: none; }
  .kw > span { transform: none; transition: none; }
  .section--ink::after, .stats--hero .stat::after, .stats--hero .stat:nth-child(4) .stat__label::before { animation: none; }
}

/* ==========================================================================
   Tier 2 (creative roadmap): services scroll story · range explorer · drawing timeline
   ========================================================================== */

/* ---- Services scroll story ----
   Phones: stacked photo cards. Desktop: steps scroll past a pinned photo that swaps per step. */
.story { display: grid; gap: 28px; }
.story__media { display: none; }
.story__steps { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.story__step { background: var(--white); border: 1px solid var(--mist); }
.story__photo { aspect-ratio: 3 / 2; }
.story__photo img { width: 100%; height: 100%; object-fit: cover; }
.story__step > :not(.story__photo) { margin-inline: 26px; }
.story__n { display: block; margin-top: 24px; font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .12em; color: var(--ember); }
.story__title { margin-top: 10px; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; color: var(--ink); }
.story__text { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--body); max-width: 46ch; }
.story__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 26px 28px; padding: 0; list-style: none; }
.story__tags li { padding: 6px 11px; border: 1px solid var(--mist); background: var(--paper); font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

@media (min-width: 981px) {
  .story { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
  .story__media { display: block; position: sticky; top: 120px; height: min(68vh, 620px); overflow: hidden; background: var(--ink); }
  .story__frame { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
  .story__frame.is-active { opacity: 1; transform: none; }
  .story__frame img { width: 100%; height: 100%; object-fit: cover; }
  .story__frame::after { content: ""; position: absolute; inset: 0; background: var(--photo-overlay); }
  .story__meter { position: absolute; z-index: 2; inset-inline: 24px; bottom: 22px; height: 3px; background: rgba(255, 255, 255, .22); }
  .story__meter span { display: block; height: 100%; width: 100%; background: var(--current); transform-origin: left center; transform: scaleX(var(--story, .25)); transition: transform .8s var(--ease); }
  [dir="rtl"] .story__meter span { transform-origin: right center; }
  .story__steps { gap: 0; }
  .story__step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; background: none; border: 0; border-top: 1px solid var(--mist); opacity: .32; transition: opacity .6s var(--ease); }
  .story__step:last-child { min-height: 52vh; }
  .story__step.is-active { opacity: 1; }
  .story__step > :not(.story__photo) { margin-inline: 0; }
  .story__photo { display: none; }
  .story__n { margin-top: 0; }
  .story__tags { margin: 22px 0 0; }
  .story__tags li { background: var(--white); }
}

/* ---- Load bank range explorer (on Ink) ---- */
.explorer { margin: 30px 0 28px; padding: 26px 26px 28px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); }
.explorer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.explorer__k { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.explorer__switch { display: inline-flex; border: 1px solid rgba(255, 255, 255, .24); }
.explorer__switch button { min-width: 52px; min-height: 36px; padding: 0 14px; border: 0; background: transparent; color: rgba(255, 255, 255, .72); font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; cursor: pointer; }
.explorer__switch button[aria-pressed="true"] { background: var(--current); color: var(--ink); }
.explorer__switch button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.explorer__label { display: block; font-size: 14px; color: rgba(255, 255, 255, .6); }
.explorer__value { display: block; margin-top: 4px; font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; color: var(--white); font-variant-numeric: tabular-nums; }
[dir="rtl"] .explorer__value { text-align: right; }
.explorer__range { width: 100%; margin: 18px 0 8px; height: 28px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --fill: 43%; }
.explorer__range:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.explorer__range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--voltage), var(--amber) var(--fill), rgba(255, 255, 255, .18) var(--fill)); }
.explorer__range::-moz-range-track { height: 4px; background: rgba(255, 255, 255, .18); }
.explorer__range::-moz-range-progress { height: 4px; background: linear-gradient(90deg, var(--voltage), var(--amber)); }
.explorer__range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--white); border: 4px solid var(--voltage); box-shadow: 0 0 0 6px rgba(244, 72, 10, .18); }
.explorer__range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 4px solid var(--voltage); }
.explorer__scale { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, .5); }
.explorer__note { min-height: 3.2em; margin: 16px 0 20px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.explorer__cta { width: 100%; justify-content: center; text-align: center; }

/* ---- How we work: a Current line draws across the steps as the section scrolls ---- */
.process { position: relative; }
.process__track { position: absolute; top: -12px; inset-inline: 0; height: 3px; background: var(--mist); list-style: none; pointer-events: none; }
.process__track span { display: block; height: 100%; background: var(--current); transform-origin: left center; transform: scaleX(var(--p, 0)); }
[dir="rtl"] .process__track span { transform-origin: right center; }
.process__step { transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.process__n { transition: color .6s var(--ease); }
.process__step.is-reached { background: var(--white); box-shadow: 0 18px 40px rgba(11, 11, 12, .07); }
.process__step.is-reached .process__n { color: var(--voltage); }
.process[data-mode="none"] .process__track { display: none; }
.process[data-mode="v"] .process__track { top: 0; bottom: 0; inset-inline: auto; inset-inline-start: -14px; width: 3px; height: auto; }
.process[data-mode="v"] .process__track span { height: 100%; width: 100%; transform-origin: center top; transform: scaleY(var(--p, 0)); }

@media (prefers-reduced-motion: reduce) {
  .story__frame, .story__step, .story__meter span, .process__step, .process__n { transition: none; }
  .process__track span { transform: none; }
}
/* range: the taller copy column (explorer) scrolls past a pinned photo on desktop */
@media (min-width: 981px) { .range { align-items: start; } .range__photo { position: sticky; top: 120px; } }

/* ==========================================================================
   Home: client testimonials + request-a-quote lead form
   ========================================================================== */
/* Testimonials (on Ink) — lead quote larger; placeholders are visibly marked until real, approved quotes exist */
.quotes { display: grid; gap: 20px; margin-bottom: 56px; }
@media (min-width: 900px) { .quotes { grid-template-columns: 1.35fr 1fr 1fr; } }
.quote { position: relative; margin: 0; padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-top: 3px solid transparent; border-image: none; }
.quote::before { content: ""; position: absolute; inset-inline: -1px; top: -3px; height: 3px; background: var(--current); }
.quote__mark { font-family: Georgia, "Times New Roman", serif; font-size: 72px; line-height: .6; height: 34px; background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote__text { margin: 0; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .9); }
.quote--lead .quote__text { font-family: var(--f-display); font-weight: 600; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--white); }
.quote__by { margin-top: auto; display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
.quote__name { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--white); }
.quote__role { font-size: 14px; color: rgba(255, 255, 255, .56); }
.quote__sector { justify-self: start; margin-top: 6px; padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .2); font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.quote--empty { border-style: dashed; background: transparent; }
.quote--empty .quote__text, .quote--empty .quote__name, .quote--empty .quote__role { color: rgba(255, 255, 255, .38); font-style: italic; }
.quote__flag { align-self: flex-start; padding: 5px 10px; background: var(--amber); color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.reviews__sub { margin-bottom: 18px; font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }

/* Request a quote */
.lead { display: grid; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (min-width: 981px) { .lead { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.lead__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 30px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--mist); }
.lead__steps li { display: flex; gap: 12px; align-items: baseline; font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.lead__steps span { font-size: 12px; color: var(--ember); letter-spacing: .08em; }
.lead__direct { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; }
.lead__direct a { font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--voltage); padding-bottom: 2px; }
.lead__direct a:hover { color: var(--ember); }
.lead__form { position: relative; padding: clamp(26px, 3vw, 40px); background: var(--paper); border: 1px solid var(--mist); box-shadow: 0 30px 70px rgba(11, 11, 12, .08); }
.lead__form::before { content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 4px; background: var(--current); }
.lead__grid { display: grid; gap: 22px 24px; }
@media (min-width: 620px) { .lead__grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field select { font: inherit; font-size: 16px; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 10px 0; border-radius: 0; outline: none; cursor: pointer; }
.field select:focus { border-bottom-color: var(--ember); box-shadow: 0 1px 0 var(--ember); }
.lead__form .field textarea { background: var(--white); }
.lead__form .field input::placeholder { color: var(--disabled, #A8A9AD); }
.lead__submit { width: 100%; justify-content: center; margin-top: 28px; border: 0; }
.lead__note { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; }
.lead__form.is-flash { animation: lead-flash 1.2s var(--ease); }
@keyframes lead-flash { 0% { box-shadow: 0 0 0 0 rgba(244, 72, 10, .45), 0 30px 70px rgba(11, 11, 12, .08); } 100% { box-shadow: 0 0 0 18px rgba(244, 72, 10, 0), 0 30px 70px rgba(11, 11, 12, .08); } }
@media (prefers-reduced-motion: reduce) { .lead__form.is-flash { animation: none; } }

/* ---- Lead zone v2: Ink section, real site photo, timeline + two-step form card ---- */
.lead-zone { overflow: hidden; }
.lead-zone__bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: 30% 50%; opacity: .28;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 40%, transparent 72%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 40%, transparent 72%); }
[dir="rtl"] .lead-zone__bg { transform: scaleX(-1); }
.lead-zone .lead { position: relative; }
.lead__lede { margin-top: 18px; max-width: 46ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: rgba(255, 255, 255, .72); }
.lead__timeline { position: relative; display: grid; gap: 22px; margin: 36px 0 0; padding: 0; list-style: none; }
.lead__timeline::before { content: ""; position: absolute; top: 18px; bottom: 18px; inset-inline-start: 17px; width: 2px; background: linear-gradient(180deg, var(--voltage), var(--amber)); opacity: .55; }
.lead__timeline li { position: relative; display: flex; gap: 18px; align-items: flex-start; }
.lead__dot { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); border: 2px solid var(--voltage); font-family: var(--f-display); font-weight: 700; font-size: 12px; color: var(--white); }
.lead__timeline li:nth-child(n+3) .lead__dot { border-color: var(--amber); }
.lead__timeline b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--white); }
.lead__timeline p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .6); max-width: 42ch; }
.lead-zone .lead__direct { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-top: 36px; }
.lead__tile { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); text-decoration: none; transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.lead__tile span { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.lead__tile b { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--white); }
.lead__tile:hover { border-color: var(--amber); background: rgba(251, 180, 23, .08); transform: translateY(-2px); }
.lead-zone .lead__form { background: var(--white); border: 0; border-radius: 2px; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.lead__step { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.lead__step + .lead__chips { margin-top: 0; }
.lead__grid + .lead__step { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--mist); }
.lead__step span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--current); font-size: 13px; color: var(--ink); }
.lead__chips { margin: 0 0 24px; padding: 0; border: 0; }
.lead__chips legend { margin-bottom: 12px; }
.chip-opt { display: inline-flex; margin: 0 8px 8px 0; cursor: pointer; }
[dir="rtl"] .chip-opt { margin: 0 0 8px 8px; }
.chip-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-opt span { padding: 9px 14px; border: 1px solid var(--mist); background: var(--paper); font-size: 14px; color: var(--ink); transition: border-color .2s, background .2s, color .2s; }
.chip-opt:hover span { border-color: var(--ink); }
.chip-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: inset 0 -3px 0 var(--voltage); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--voltage); outline-offset: 2px; }
.lead-zone .lead__form .field textarea { background: var(--paper); }
.lead-zone .lead__note { color: var(--muted); }
.lead__submit span { margin-inline-start: 6px; }

/* Google review cards inside the testimonials row */
.quote__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quote__src { font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.quote--google .quote__text { font-family: var(--f-text); }
a.quote__name { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); justify-self: start; }
a.quote__name:hover { border-color: var(--amber); }
.lead-zone .lead__direct .lead__tile { padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .16); font-size: inherit; }
.lead-zone .lead__direct .lead__tile:hover { border-color: var(--amber); color: inherit; }
.quote--google.quote--lead .quote__text { font-family: var(--f-text); font-weight: 500; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; }
/* lead zone background v2: sharp stock substation, fully visible, shaded only where the copy sits */
.lead-zone__bg { opacity: 1; -webkit-mask-image: none; mask-image: none; background-position: 50% 45%; }
.lead-zone__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 11, 12, .9) 0%, rgba(11, 11, 12, .78) 38%, rgba(11, 11, 12, .5) 62%, rgba(11, 11, 12, .38) 100%),
              linear-gradient(180deg, rgba(11, 11, 12, .45) 0%, rgba(11, 11, 12, 0) 30%, rgba(11, 11, 12, 0) 70%, rgba(11, 11, 12, .6) 100%); }
[dir="rtl"] .lead-zone__bg::after { transform: none; }
@media (max-width: 980px) { .lead-zone__bg::after { background: linear-gradient(180deg, rgba(11, 11, 12, .82), rgba(11, 11, 12, .9)); } }

/* ==========================================================================
   What we do v2: rich service panels (description, what's included, tags, CTAs) + specialist testing strip
   ========================================================================== */
.story__body { padding: 26px 26px 30px; }
.story__step > .story__body { margin-inline: 0; }
.story__kicker { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ember); }
.story__kicker span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--current); color: var(--ink); font-weight: 700; letter-spacing: 0; font-size: 12px; }
.story__body .story__title { margin-top: 16px; font-size: clamp(24px, 2.4vw, 34px); }
.story__body .story__text { margin-top: 14px; max-width: 58ch; }
.story__incl-h { margin-top: 24px; font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.story__incl { display: grid; gap: 10px 22px; margin: 12px 0 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .story__incl { grid-template-columns: 1fr 1fr; } }
.story__incl li { position: relative; padding-inline-start: 26px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.story__incl li::before { content: ""; position: absolute; inset-inline-start: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--current); }
.story__incl li::after { content: ""; position: absolute; inset-inline-start: 5px; top: 7px; width: 6px; height: 3px; border-inline-start: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
[dir="rtl"] .story__incl li::after { transform: rotate(45deg) scaleX(-1); }
.story__body .story__tags { margin: 20px 0 0; }
.story__tags li { font-size: 10px; padding: 5px 9px; }
.story__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--mist); }
.story__cta .btn span { margin-inline-start: 6px; }

@media (min-width: 981px) {
  .story__step { min-height: 74vh; padding: 48px 0; opacity: .38; }
  .story__step.is-active { opacity: 1; }
  .story__body { padding: 0; }
  .story__media { top: 110px; height: min(74vh, 660px); }
  .story__cap { position: absolute; z-index: 2; inset-inline: 24px; bottom: 40px; display: grid; gap: 6px; color: var(--white); }
  .story__cap span { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--amber); }
  .story__cap b { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; }
  .story__frame::after { background: linear-gradient(180deg, rgba(11, 11, 12, 0) 45%, rgba(11, 11, 12, .78)), var(--photo-overlay); }
}
.story__cap { display: none; }
@media (min-width: 981px) { .story__cap { display: grid; } }

/* specialist testing strip */
.specialist { margin-top: clamp(56px, 7vw, 96px); }
.specialist__k { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.specialist__k::before { content: ""; width: 22px; height: 2px; background: var(--voltage); }
.specialist__grid { display: grid; gap: 20px; }
@media (min-width: 820px) { .specialist__grid { grid-template-columns: 1fr 1fr; } }
.spec-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 34px 32px 32px; background: var(--ink); color: var(--white); overflow: hidden; isolation: isolate; }
.spec-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--current); }
.spec-card::after { content: ""; position: absolute; z-index: -1; width: 70%; height: 140%; inset-inline-end: -20%; top: -40%; background: radial-gradient(closest-side, rgba(244, 72, 10, .22), transparent); }
.spec-card + .spec-card::after { background: radial-gradient(closest-side, rgba(251, 180, 23, .16), transparent); }
.spec-card__k { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.spec-card__h { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--white); }
.spec-card__p { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .7); max-width: 52ch; }
.spec-card__cta { margin-top: auto; padding-top: 12px; align-self: flex-start; font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--white); text-decoration: none; border-bottom: 2px solid var(--voltage); }
.spec-card__cta:hover { color: var(--amber); border-color: var(--amber); }

/* services page: land below the sticky header when jumping to #svc-0N */
.svc-row { scroll-margin-top: 120px; }
.story__cta .arrow-link { color: var(--ink); border-bottom: 2px solid var(--voltage); padding-bottom: 2px; }
.story__cta .arrow-link:hover { color: var(--ember); }

/* What's included v2: one column, tick aligned to the first line, wrapped lines indent under the text */
.story__incl { grid-template-columns: 1fr !important; gap: 0; margin-top: 10px; border-top: 1px solid var(--mist); max-width: 560px; }
.story__incl li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; padding-inline-start: 0; border-bottom: 1px solid var(--mist); line-height: 1.5; }
.story__incl li::before { position: static; flex: none; width: 18px; height: 18px; margin-top: 2px;
  background: var(--current) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.story__incl li::after { content: none; }

/* ==========================================================================
   Home About v2: photo collage + location badge · turnkey flow · Vision / Mission / Values
   ========================================================================== */
.about-x { display: grid; gap: clamp(48px, 6vw, 96px); align-items: center; }
@media (min-width: 981px) { .about-x { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.about-x__media { position: relative; padding-bottom: 56px; padding-inline-end: 56px; }
.about-x__main { aspect-ratio: 4 / 3.3; }
.about-x__main img, .about-x__inset img { width: 100%; height: 100%; object-fit: cover; }
.about-x__inset { position: absolute; inset-inline-end: 0; bottom: 0; width: 42%; aspect-ratio: 1; border: 6px solid var(--white); box-shadow: 0 24px 60px rgba(11, 11, 12, .22); }
.about-x__badge { position: absolute; inset-inline-start: 22px; bottom: 80px; z-index: 2; display: grid; gap: 4px; max-width: 58%; padding: 14px 18px; background: var(--ink); color: var(--white); font-family: var(--f-display); font-weight: 700; font-size: 15px; line-height: 1.35; box-shadow: 0 18px 40px rgba(11, 11, 12, .3); }
.about-x__badge::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--current); }
.about-x__badge span { font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.about-x__copy .lede { margin-top: 20px; }
.about-x__flow { margin-top: 30px; padding: 20px 22px; background: var(--paper); border-inline-start: 3px solid var(--voltage); }
.about-x__flow-k { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.about-x__flow ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin: 12px 0 0; padding: 0; list-style: none; }
.about-x__flow li { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.about-x__flow li span { font-size: 11px; color: var(--ember); letter-spacing: .06em; }
.about-x__flow li + li::before { content: ""; width: 26px; height: 2px; margin: 0 14px; background: var(--current); }
.about-x__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }
.about-x__talk { color: var(--ink); border-bottom: 2px solid var(--voltage); padding-bottom: 2px; }
.about-x__talk:hover { color: var(--ember); }
.about-x__pillars { display: grid; gap: 20px; margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 900px) { .about-x__pillars { grid-template-columns: 1fr 1fr 1.25fr; } }
.pillar { position: relative; padding: 30px 28px 32px; background: var(--paper); border: 1px solid var(--mist); }
.pillar::before { content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 3px; background: var(--voltage); }
.pillar + .pillar::before { background: linear-gradient(90deg, var(--voltage), var(--amber)); }
.pillar--values::before { background: var(--amber); }
.pillar__k { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--ink); }
.pillar__p { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--body); }
.pillar--values { background: var(--ink); border-color: var(--ink); }
.pillar--values .pillar__k { color: var(--white); }
.pillar--values ul { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.pillar--values li { display: grid; gap: 3px; padding-inline-start: 16px; border-inline-start: 2px solid var(--amber); }
.pillar--values b { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--white); }
.pillar--values span { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .64); }
@media (max-width: 620px) { .about-x__media { padding-bottom: 40px; padding-inline-end: 28px; } .about-x__badge { bottom: 56px; max-width: 70%; font-size: 13px; } }
/* fixes: tick = svg over gradient (comma-separated layers); wipe ends as a clean rectangle; collage keeps its shadow */
.story__incl li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat, var(--current); border-radius: 50%; }
.wipe-armed.is-in, [dir="rtl"] .wipe-armed.is-in { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 620px) { .about-x__badge { top: 14px; bottom: auto; inset-inline-start: 14px; } }

/* What we do v3 (desktop): only the service in view is shown — the others stay hidden until scrolled to */
@media (min-width: 981px) {
  .story__step { min-height: 86vh; border-top: 0; opacity: 0; transform: translateY(28px); pointer-events: none;
    transition: opacity .55s var(--ease), transform .7s var(--ease); }
  .story__step.is-active, .story__step:focus-within { opacity: 1; transform: none; pointer-events: auto; }
  .story__step:last-child { min-height: 70vh; }
}
@media (min-width: 981px) and (prefers-reduced-motion: reduce) { .story__step { transform: none; transition: none; } }

/* ==========================================================================
   Industries v2: photo sector cards with what we test + CTA
   ========================================================================== */
.sectors { display: grid; gap: 18px; }
@media (min-width: 640px) { .sectors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .sectors { grid-template-columns: repeat(4, 1fr); } }
.sector { position: relative; display: flex; min-height: 520px; overflow: hidden; background: var(--graphite); isolation: isolate; }
.sector__img { position: absolute; inset: 0; z-index: -2; }
.sector__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.sector::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 11, 12, .15) 0%, rgba(11, 11, 12, .45) 35%, rgba(11, 11, 12, .92) 68%, #0B0B0C 100%); }
.sector::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--current); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
[dir="rtl"] .sector::after { transform-origin: right; }
.sector:hover .sector__img img, .sector:focus-within .sector__img img { transform: scale(1.08); }
.sector:hover::after, .sector:focus-within::after { transform: scaleX(1); }
.sector__body { display: flex; flex-direction: column; margin-top: auto; padding: 28px 26px 26px; width: 100%; }
.sector__n { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--current); font-family: var(--f-display); font-weight: 700; font-size: 12px; color: var(--ink); }
.sector__title { margin-top: 16px; font-family: var(--f-display); font-weight: 700; font-size: 23px; line-height: 1.2; color: var(--white); }
.sector__text { margin-top: 10px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.sector__k { margin-top: 18px; font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.sector__tests { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.sector__tests li { padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); font-size: 12px; color: rgba(255, 255, 255, .9); }
.sector__cta { align-self: flex-start; margin-top: 20px; font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--white); text-decoration: none; border-bottom: 2px solid var(--voltage); padding-bottom: 2px; }
.sector__cta:hover { color: var(--amber); border-color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .sector__img img, .sector::after { transition: none; } }
/* Industries v2.1: photo on top (clear, full colour), copy below on Ink */
.sector { flex-direction: column; min-height: 0; background: #141518; border: 1px solid rgba(255, 255, 255, .1); }
.sector::before { content: none; }
.sector__img { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.sector__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, 0) 55%, rgba(20, 21, 24, .85) 100%); }
.sector__body { position: relative; flex: 1; margin-top: -30px; padding: 0 24px 26px; }
.sector__cta { margin-top: auto; padding-top: 20px; }
.sector__tests { margin-bottom: 4px; }

/* ==========================================================================
   Why choose us v2: head row · photo with brand quote · icon cards · key features · CTA bar
   ========================================================================== */
.why2__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 60px; margin-bottom: clamp(36px, 4vw, 56px); }
.why2__head > div { max-width: 640px; }
.why2__lede { max-width: 38ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--ink); border-inline-start: 3px solid var(--voltage); padding-inline-start: 18px; }
.why2__grid { display: grid; gap: 24px; }
@media (min-width: 981px) { .why2__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; } }
.why2__visual { position: relative; margin: 0; min-height: 440px; }
.why2__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why2__visual::after { background: linear-gradient(180deg, rgba(11, 11, 12, .05) 30%, rgba(11, 11, 12, .85) 100%); }
.why2__quote { position: absolute; z-index: 2; inset-inline: 28px; bottom: 28px; margin: 0; }
.why2__qmark { display: block; font-family: Georgia, serif; font-size: 64px; line-height: .6; height: 30px; background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why2__quote p { margin-top: 10px; max-width: 30ch; font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; color: var(--white); }
.why2__quote em { font-style: normal; color: var(--amber); }
.why2__cards { display: grid; gap: 16px; }
@media (min-width: 620px) { .why2__cards { grid-template-columns: 1fr 1fr; } }
.why-card { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; background: var(--white); border: 1px solid var(--mist); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.why-card::before { content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 3px; background: var(--current); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
[dir="rtl"] .why-card::before { transform-origin: right; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(11, 11, 12, .08); border-color: transparent; }
.why-card:hover::before { transform: scaleX(1); }
.why-card__icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--ink); color: var(--amber); }
.why-card__n { position: absolute; top: 26px; inset-inline-end: 24px; font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; color: var(--mist); }
.why-card__title { margin-top: 22px; font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--ink); }
.why-card__body { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--body); }
.why2__features { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; padding: 22px 26px; background: var(--ink); }
.why2__features-k { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.why2__features ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.why2__features li { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .16); font-size: 13px; color: rgba(255, 255, 255, .88); }
.why2__features li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--current); }
.why2__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mist); }
.why2__cta p { font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink); }
.why2__cta div { display: flex; flex-wrap: wrap; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .why-card, .why-card::before { transition: none; } }
.why-card__n { color: #B9B4AC; right: 24px; left: auto; inset-inline-end: auto; }
[dir="rtl"] .why-card__n { right: auto; left: 24px; }

/* Why choose us v2.1: icon in a soft tinted circle; number becomes a large faint watermark in the far corner */
.why-card { overflow: hidden; isolation: isolate; padding: 30px 28px 34px; }
.why-card__icon { width: 58px; height: 58px; border-radius: 50%; background: rgba(244, 72, 10, .09); color: var(--ember); box-shadow: inset 0 0 0 1px rgba(244, 72, 10, .18); }
.why-card__icon svg { width: 26px; height: 26px; }
.why-card:hover .why-card__icon { background: var(--current); color: var(--ink); box-shadow: none; }
.why-card__n, [dir="rtl"] .why-card__n { top: auto; bottom: -14px; right: 16px; left: auto; z-index: -1; font-size: 88px; line-height: 1; letter-spacing: -.02em; color: #F1EEE9; }
[dir="rtl"] .why-card__n { right: auto; left: 16px; }
.why-card__title { margin-top: 24px; }
.why-card__body { max-width: 34ch; }

/* ==========================================================================
   Load bank range v2: head row · four spec tiles · fleet photo + size explorer card
   ========================================================================== */
.range2__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 60px; margin-bottom: clamp(36px, 4vw, 56px); }
.range2__head > div:first-child { max-width: 620px; }
.range2__intro { max-width: 44ch; }
.range2__intro p { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: rgba(255, 255, 255, .72); }
.range2__intro .arrow-link { display: inline-block; margin-top: 14px; }
.range2__grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1061px) { .range2__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.range2__specs { display: grid; gap: 16px; }
@media (min-width: 620px) { .range2__specs { grid-template-columns: 1fr 1fr; } }
.rspec { position: relative; display: flex; flex-direction: column; padding: 26px 24px 26px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .12); transition: border-color .35s var(--ease), background .35s var(--ease); }
.rspec:hover { border-color: rgba(251, 180, 23, .5); background: rgba(255, 255, 255, .06); }
.rspec--main { background: linear-gradient(160deg, rgba(244, 72, 10, .16), rgba(255, 255, 255, .03) 60%); border-color: rgba(244, 72, 10, .35); }
.rspec__top { display: flex; align-items: center; gap: 12px; }
.rspec__icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(251, 180, 23, .12); color: var(--amber); }
.rspec__title { font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.rspec__value { margin-top: 20px; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--white); font-variant-numeric: tabular-nums; }
.rspec--main .rspec__value { font-size: clamp(26px, 2.4vw, 34px); background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent; }
[dir="rtl"] .rspec__value { text-align: right; }
.rspec__body { margin-top: 12px; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .62); }
.range2__tool { display: grid; background: #141518; border: 1px solid rgba(255, 255, 255, .12); }
.range2__photo { aspect-ratio: 16 / 8; }
.range2__photo img { width: 100%; height: 100%; object-fit: cover; }
.range2__cap { position: absolute; z-index: 2; inset-inline-start: 18px; bottom: 14px; font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.range2__tool .explorer { margin: 0; border: 0; background: none; padding: 26px 26px 28px; }
.rspec--main .rspec__value { font-size: clamp(22px, 1.9vw, 28px); }
.rspec--main .rspec__value[dir="ltr"] { white-space: nowrap; }

/* ==========================================================================
   How we work v2: icon nodes on the drawn line · step label · deliverable · CTA
   ========================================================================== */
.process--v2 { gap: 20px; }
.process--v2 .process__step { display: flex; flex-direction: column; padding: 0 22px 26px; background: none; border-top: 0; box-shadow: none; }
.process--v2 .process__step.is-reached { background: none; box-shadow: none; }
.process__node { position: relative; z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 2px solid var(--mist); color: var(--muted); transition: border-color .5s var(--ease), color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.process--v2 .process__step.is-reached .process__node { border-color: transparent; background: var(--current); color: var(--ink); box-shadow: 0 12px 28px rgba(244, 72, 10, .28); }
.process--v2 .process__n { margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--muted); }
.process--v2 .process__step.is-reached .process__n { color: var(--ember); }
.process--v2 .process__title { margin: 8px 0 10px; font-size: 22px; }
.process--v2 .process__body { flex: 1; }
.process__get { margin-top: 18px; padding: 12px 14px; background: var(--paper); border-inline-start: 3px solid var(--voltage); font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--ink); }
.process__get span { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
/* line runs through the node centres */
.process--v2[data-mode="h"] .process__track { top: 31px; inset-inline: 54px; }
.process--v2[data-mode="v"] .process__track { inset-inline-start: 53px; top: 32px; bottom: 60px; }
.process--v2[data-mode="v"] .process__step { padding-inline-start: 22px; }
.process__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: clamp(32px, 4vw, 48px); padding: 22px 26px; background: var(--ink); }
.process__cta p { font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 1.4vw, 20px); color: var(--white); }
.process__cta div { display: flex; flex-wrap: wrap; gap: 12px; }
.process__cta .btn--ghost-ink { border-color: rgba(255, 255, 255, .4); color: var(--white); }
.process__cta .btn--ghost-ink:hover { background: rgba(255, 255, 255, .1); color: var(--white); }
@media (prefers-reduced-motion: reduce) { .process__node { transition: none; } }
/* How we work v2.1 fixes */
.process__get { min-height: 84px; }
.process--v2[data-mode="h"] .process__track { inset-inline-start: 54px; inset-inline-end: calc(25% - 69px); }
.process--v2[data-mode="v"] .process__step { position: relative; padding: 0 0 30px; padding-inline-start: 86px; }
.process--v2[data-mode="v"] .process__node { position: absolute; top: 0; inset-inline-start: 0; }
.process--v2[data-mode="v"] .process__n { margin-top: 6px; }
.process--v2[data-mode="v"] .process__track { inset-inline-start: 31px; top: 32px; bottom: 90px; }
.process--v2[data-mode="v"] .process__get { min-height: 0; }

/* ==========================================================================
   Scope of work v2: grouped equipment cards with icons + dark "what a load test proves" panel
   ========================================================================== */
.scope2__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 60px; margin-bottom: clamp(36px, 4vw, 52px); }
.scope2__head > div { max-width: 640px; }
.scope2__lede { max-width: 38ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; color: var(--ink); border-inline-start: 3px solid var(--voltage); padding-inline-start: 18px; }
.scope2__grid { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 981px) { .scope2__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.scope2__groups { display: grid; gap: 16px; align-content: start; }
@media (min-width: 620px) { .scope2__groups { grid-template-columns: 1fr 1fr; } .sgroup:first-child { grid-column: 1 / -1; } }
.sgroup { padding: 24px 24px 22px; background: var(--white); border: 1px solid var(--mist); transition: border-color .35s var(--ease), box-shadow .35s var(--ease); }
.sgroup:hover { border-color: rgba(244, 72, 10, .45); box-shadow: 0 18px 40px rgba(11, 11, 12, .06); }
.sgroup__head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--mist); }
.sgroup__icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(244, 72, 10, .09); color: var(--ember); }
.sgroup__title { flex: 1; font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.sgroup__count { min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 14px; background: var(--paper); font-family: var(--f-display); font-weight: 700; font-size: 12px; color: var(--muted); }
.sgroup__list { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .sgroup:first-child .sgroup__list { grid-template-columns: 1fr 1fr; column-gap: 28px; } .sgroup:first-child .sgroup__list li:nth-last-child(2) { border-bottom: 0; } }
.sgroup__list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--mist); font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.sgroup__list li:last-child { border-bottom: 0; }
.sgroup__list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--current); transform: rotate(45deg); }
.scope2__ask { grid-column: 1 / -1; padding: 16px 20px; border: 1px dashed #D6D1C9; font-size: 15px; color: var(--body); }
.scope2__ask a { margin-inline-start: 6px; font-family: var(--f-display); font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--voltage); text-decoration: none; }
.scope2__ask a:hover { color: var(--ember); }
.scope2__checks { position: relative; display: flex; flex-direction: column; padding: 32px 30px 30px; background: var(--ink); overflow: hidden; isolation: isolate; }
.scope2__checks::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--current); }
.scope2__checks::after { content: ""; position: absolute; z-index: -1; width: 80%; height: 70%; inset-inline-end: -30%; bottom: -30%; background: radial-gradient(closest-side, rgba(244, 72, 10, .22), transparent); }
.scope2__checks-k { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.scope2__checks-h { margin-top: 10px; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--white); }
.scope2__list { display: grid; margin: 20px 0 26px; padding: 0; list-style: none; }
.scope2__list li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 16px; color: rgba(255, 255, 255, .9); }
.scope2__list li:last-child { border-bottom: 0; }
.scope2__n { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(251, 180, 23, .45); border-radius: 50%; font-family: var(--f-display); font-weight: 700; font-size: 11px; color: var(--amber); transition: background .25s, color .25s; }
.scope2__list li:hover .scope2__n { background: var(--current); border-color: transparent; color: var(--ink); }
.scope2__cta { margin-top: auto; align-self: flex-start; }
.scope2__cta span { margin-inline-start: 6px; }
/* Scope of work v2.1: photo banners on each equipment card + photo head on the checks panel */
.sgroup { padding-top: 0; overflow: hidden; }
.sgroup__img { position: relative; margin: 0 -24px 18px; aspect-ratio: 16 / 7; overflow: hidden; }
.sgroup:first-child .sgroup__img { aspect-ratio: 16 / 5; }
.sgroup__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sgroup__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, 0) 50%, rgba(11, 11, 12, .35)), linear-gradient(104deg, rgba(244, 72, 10, .10), rgba(244, 72, 10, 0) 55%); }
.sgroup:hover .sgroup__img img { transform: scale(1.05); }
.sgroup__head { position: relative; }
.sgroup__icon { margin-top: -44px; width: 54px; height: 54px; background: var(--white); box-shadow: 0 10px 24px rgba(11, 11, 12, .12), inset 0 0 0 1px rgba(244, 72, 10, .2); z-index: 1; }
.scope2__checks { padding-top: 0; }
.scope2__photo { position: relative; margin: 0 -30px 26px; aspect-ratio: 16 / 7; overflow: hidden; }
.scope2__photo img { width: 100%; height: 100%; object-fit: cover; }
.scope2__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .1) 30%, #0B0B0C 100%); }
@media (prefers-reduced-motion: reduce) { .sgroup__img img { transition: none; } }

/* ==========================================================================
   In the field v2: masonry gallery of real site photos · category filters · lightbox
   ========================================================================== */
.field2__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 60px; margin-bottom: 28px; }
.field2__head > div { max-width: 680px; }
.field2__lede { margin-top: 16px; max-width: 56ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: var(--body); }
.gal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.gal-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--mist); background: var(--white); font: inherit; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.gal-filters button span { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: var(--paper); font-size: 11px; color: var(--muted); }
.gal-filters button:hover { border-color: var(--ink); }
.gal-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: inset 0 -3px 0 var(--voltage); }
.gal-filters button[aria-pressed="true"] span { background: var(--current); color: var(--ink); }
.gal-filters button:focus-visible { outline: 2px solid var(--voltage); outline-offset: 2px; }
.gal { columns: 2; column-gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .gal { columns: 3; } }
@media (min-width: 1180px) { .gal { columns: 4; column-gap: 16px; } }
.gal__item { break-inside: avoid; margin-bottom: 14px; }
@media (min-width: 1180px) { .gal__item { margin-bottom: 16px; } }
.gal__item.is-hidden { display: none; }
.gal__link { position: relative; display: block; overflow: hidden; background: var(--placeholder); }
.gal__link img { display: block; width: 100%; height: auto; transition: transform .9s var(--ease); }
.gal__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, 0) 50%, rgba(11, 11, 12, .82) 100%); opacity: .75; transition: opacity .4s var(--ease); }
.gal__link:hover img, .gal__link:focus-visible img { transform: scale(1.05); }
.gal__link:hover::after, .gal__link:focus-visible::after { opacity: 1; }
.gal__link:focus-visible { outline: 3px solid var(--voltage); outline-offset: 2px; }
.gal__cap { position: absolute; z-index: 1; inset-inline: 16px; bottom: 14px; display: grid; gap: 6px; font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--white); }
.gal__tag { justify-self: start; padding: 3px 8px; background: var(--current); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.gal__zoom { position: absolute; z-index: 1; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(11, 11, 12, .55); color: var(--white); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease); }
.gal__link:hover .gal__zoom, .gal__link:focus-visible .gal__zoom { opacity: 1; transform: none; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px; padding: 24px; background: rgba(11, 11, 12, .94); }
.lightbox[hidden] { display: none; }
.lightbox__fig { grid-column: 2; margin: 0; display: grid; justify-items: center; gap: 14px; max-height: 100%; }
.lightbox__fig img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox__fig figcaption { display: flex; gap: 18px; align-items: baseline; font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--white); }
.lightbox__count { font-size: 12px; letter-spacing: .12em; color: var(--amber); }
.lightbox__nav, .lightbox__close { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--white); font-size: 30px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--current); border-color: transparent; color: var(--ink); }
.lightbox__nav:focus-visible, .lightbox__close:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }
[dir="rtl"] .lightbox__nav { transform: scaleX(-1); }
.lightbox__close { position: absolute; top: 18px; inset-inline-end: 18px; font-size: 26px; }
@media (max-width: 700px) {
  .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 60px 12px 16px; }
  .lightbox__fig { grid-column: 1 / -1; grid-row: 1; }
  .lightbox__nav--prev { grid-column: 1; grid-row: 2; justify-self: end; }
  .lightbox__nav--next { grid-column: 2; grid-row: 2; justify-self: start; }
  .lightbox__fig img { max-height: calc(100vh - 200px); }
}
body.lb-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .gal__link img, .gal__zoom { transition: none; } }

/* ==========================================================================
   FAQ v2: sticky side (title, contact tiles, ask CTA) · topic filters · numbered accordion cards
   ========================================================================== */
.faq2__grid { display: grid; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (min-width: 981px) { .faq2__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .faq2__side { position: sticky; top: 120px; } }
.faq2__lede { margin-top: 18px; max-width: 42ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: var(--body); }
.faq2__contact { display: grid; gap: 10px; margin-top: 28px; }
.faq2__tile { display: grid; gap: 3px; padding: 14px 18px; background: var(--white); border: 1px solid var(--mist); border-inline-start: 3px solid var(--voltage); text-decoration: none; transition: border-color .25s, transform .25s var(--ease); }
.faq2__tile:hover { border-color: var(--ink); border-inline-start-color: var(--voltage); transform: translateX(3px); }
[dir="rtl"] .faq2__tile:hover { transform: translateX(-3px); }
.faq2__tile span { font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.faq2__tile b { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.faq2__ask { margin-top: 20px; }
.faq2__ask span { margin-inline-start: 6px; }
.faq2__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.faq2__tabs button { min-height: 40px; padding: 0 16px; border: 1px solid var(--mist); background: var(--white); font: inherit; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; }
.faq2__tabs button:hover { border-color: var(--ink); }
.faq2__tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: inset 0 -3px 0 var(--voltage); }
.faq2__tabs button:focus-visible { outline: 2px solid var(--voltage); outline-offset: 2px; }
.faq--v2 { display: grid; gap: 10px; border-top: 0; }
.faq--v2 .faq__item { background: var(--white); border: 1px solid var(--mist); transition: border-color .3s, box-shadow .3s; }
.faq--v2 .faq__item[hidden] { display: none; }
.faq--v2 .faq__item:hover { border-color: #CFC9C0; }
.faq--v2 .faq__item[open] { border-color: transparent; box-shadow: 0 18px 44px rgba(11, 11, 12, .08), inset 3px 0 0 var(--voltage); }
[dir="rtl"] .faq--v2 .faq__item[open] { box-shadow: 0 18px 44px rgba(11, 11, 12, .08), inset -3px 0 0 var(--voltage); }
.faq--v2 .faq__q { display: flex; align-items: center; gap: 16px; padding: 20px 64px 20px 22px; font-size: 17px; }
[dir="rtl"] .faq--v2 .faq__q { padding: 20px 22px 20px 64px; }
.faq--v2 .faq__q::after { inset-inline-end: 20px; width: 32px; height: 32px; border-radius: 50%; }
.faq--v2 .faq__item[open] .faq__q::after { background: var(--current); border-color: transparent; color: var(--ink); }
.faq__n { flex: none; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.faq--v2 .faq__item[open] .faq__n { color: var(--ember); }
.faq--v2 .faq__a { padding: 0 64px 22px 50px; font-size: 16px; line-height: 1.75; color: var(--body); }
[dir="rtl"] .faq--v2 .faq__a { padding: 0 50px 22px 64px; }
.faq--v2 .faq__item[open] .faq__a { animation: faq-in .35s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 620px) { .faq--v2 .faq__a, [dir="rtl"] .faq--v2 .faq__a { padding: 0 20px 20px; } .faq--v2 .faq__q { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .faq--v2 .faq__item[open] .faq__a { animation: none; } }
[dir="rtl"] .faq2__tile b, [dir="rtl"] .lead__tile b { text-align: right; }

/* ================= Projects (from the PLS project references, 2026-10-07) ================= */
.lightbox__nav[hidden] { display: grid; visibility: hidden; }

/* Summary band */
.prj-sum__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; background: var(--mist); border: 1px solid var(--mist); }
@media (min-width: 860px) { .prj-sum__stats { grid-template-columns: repeat(4, 1fr); } }
.prj-sum__stats > div { background: var(--white); padding: clamp(22px, 2.6vw, 34px); }
.prj-sum__stats dd { margin: 0; display: grid; gap: 8px; }
.prj-sum__stats b { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.prj-sum__stats > div:first-child b { background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prj-sum__stats span { font-size: 14px; line-height: 1.45; color: var(--body); }
.prj-sum__cities { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 22px; }
.prj-sum__cities span { margin-inline-end: 6px; font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.prj-sum__cities b { padding: 6px 12px; border: 1px solid var(--mist); background: var(--paper); font-weight: 600; font-size: 14px; color: var(--ink); }

/* Featured project */
.prj-feat { scroll-margin-top: 110px; }
.prj-feat__grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (min-width: 981px) { .prj-feat__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.prj-feat__photos { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; aspect-ratio: 5 / 4; }
.prj-feat__ph { position: relative; overflow: hidden; background: var(--placeholder); }
.prj-feat__ph--1 { grid-row: 1 / span 3; }
.prj-feat__ph a { display: block; width: 100%; height: 100%; }
.prj-feat__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.prj-feat__ph a:hover img { transform: scale(1.04); }
.prj-feat__ph a:hover .gal__zoom, .prj-feat__ph a:focus-visible .gal__zoom { opacity: 1; transform: none; }
.prj-feat__ph a:focus-visible { outline: 3px solid var(--voltage); outline-offset: -3px; }
.prj-feat__lede { margin-top: 18px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--ink); }
.prj-feat__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 28px 0 0; background: var(--mist); border: 1px solid var(--mist); }
.prj-feat__facts > div { background: var(--white); padding: 16px 18px; }
.prj-feat__facts .prj-feat__wide { grid-column: 1 / -1; }
.prj-feat__facts dt, .prj__k { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.prj-feat__facts dd { margin: 6px 0 0; font-weight: 600; font-size: 16px; color: var(--ink); }
.prj-feat__note { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--body); }
@media (max-width: 520px) {
  .prj-feat__photos { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .prj-feat__ph { aspect-ratio: 1; }
  .prj-feat__ph--1 { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .prj-feat__ph--4 { display: none; }
}

/* Project cards */
.prj-grid { display: grid; gap: 22px; margin-top: 8px; }
@media (min-width: 680px) { .prj-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .prj-grid { grid-template-columns: repeat(3, 1fr); } }
.prj { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--mist); scroll-margin-top: 120px; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.prj[hidden] { display: none; }
.prj:target { border-color: var(--voltage); box-shadow: 0 0 0 3px rgba(244, 72, 10, .18); }
.prj__photos { margin: 0; padding: 0; list-style: none; }
.prj__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--placeholder); }
.prj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.prj__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 11, 12, .35)); pointer-events: none; }
a.prj__media:hover img, .prj--link:hover .prj__media img { transform: scale(1.04); }
a.prj__media:focus-visible { outline: 3px solid var(--voltage); outline-offset: -3px; }
.prj__zoom { position: absolute; z-index: 1; bottom: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; background: rgba(11, 11, 12, .7); color: var(--white); font-weight: 600; font-size: 13px; }
.prj__media--none { display: grid; place-items: center; background: var(--ink) radial-gradient(closest-side at 70% 30%, rgba(244, 72, 10, .3), transparent); }
.prj__media--none::after { content: none; }
.prj__media--none span { font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 3.4vw, 48px); background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prj__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.prj__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.prj__type { padding: 4px 9px; font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: rgba(251, 180, 23, .22); }
.prj__type--ups { background: rgba(244, 72, 10, .12); color: var(--ember); }
.prj__type--bat { background: var(--ink); color: var(--amber); }
.prj__sector { font-size: 13px; color: var(--muted); }
.prj__title { margin-top: 12px; font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; color: var(--ink); }
.prj__loc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; font-size: 14px; color: var(--body); }
.prj__loc svg { flex: none; color: var(--voltage); margin-inline-end: -8px; }
.prj__client span { color: var(--muted); }
.prj__client bdi { font-weight: 600; color: var(--ink); }
.prj__facts { display: flex; gap: 1px; margin: 16px 0 0; background: var(--mist); border: 1px solid var(--mist); }
.prj__facts > div { flex: 1; background: var(--paper); padding: 10px 12px; }
.prj__facts dt { font-family: var(--f-display); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.prj__facts dd { margin: 4px 0 0; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.prj__scope { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--body); }
.prj__k { margin-top: 16px; }
.prj__banks { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.prj__banks li { padding: 5px 10px; border: 1px solid var(--mist); background: var(--white); font-weight: 600; font-size: 13px; color: var(--ink); }
.prj--link { color: inherit; text-decoration: none; }
.prj--link:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(11, 11, 12, .35); }
.prj--link:focus-visible { outline: 3px solid var(--voltage); outline-offset: 3px; }
.prj__more { margin-top: auto; padding-top: 18px; font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--ink); }
.prj__more span { display: inline-block; transition: transform .3s var(--ease); }
.prj--link:hover .prj__more span { transform: translateX(4px); }
[dir="rtl"] .prj--link:hover .prj__more span { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) { .prj, .prj__media img, .prj-feat__ph img { transition: none; } .prj--link:hover { transform: none; } }

/* Client ribbon */
.clients { display: grid; gap: 14px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--mist); }
.clients__k { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.clients__list { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0; padding: 0; list-style: none; }
.clients__list li { display: inline-flex; align-items: center; font-family: var(--f-display); font-weight: 700; font-size: clamp(15px, 1.25vw, 18px); color: var(--ink); }
.clients__list li + li::before { content: ""; width: 5px; height: 5px; margin: 0 16px; border-radius: 50%; background: var(--voltage); }
.clients--dark { border-top-color: var(--on-dark-rule); }
.clients--dark .clients__k { color: var(--on-dark-62); }
.clients--dark .clients__list li { color: var(--white); }

/* Projects CTA */
.prj-cta__inner { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .prj-cta__inner { grid-template-columns: minmax(0, 1.4fr) auto; } }
.prj-cta__inner p:not(.eyebrow) { margin-top: 16px; max-width: 58ch; font-size: 16px; line-height: 1.75; color: var(--on-dark-72); }
.prj-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Home: selected projects */
.home-prj__aside { display: grid; gap: 18px; justify-items: start; max-width: 44ch; }
.home-prj__aside p { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; color: var(--body); }

/* Services rows: included list, project references, CTA */
.svc-row__incl { display: grid; margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--mist); }
.svc-row__incl li { position: relative; padding: 9px 0; padding-inline-start: 28px; border-bottom: 1px solid var(--mist); font-size: 15px; line-height: 1.5; color: var(--ink); }
.svc-row__incl li::before { content: ""; position: absolute; inset-inline-start: 0; top: 11px; width: 18px; height: 18px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat, var(--current); }
.svc-row__refs { margin-top: 20px; }
.svc-row__refs p { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.svc-row__refs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.svc-row__refs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--mist); background: var(--white); font-weight: 600; font-size: 13px; color: var(--ink); text-decoration: none; transition: border-color .2s; }
.svc-row__refs a span { color: var(--ember); }
.svc-row__refs a:hover { border-color: var(--ink); }
.svc-row__cta { margin-top: 24px; }

/* Fleet: deployed on recent projects */
.deployed__grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (min-width: 981px) { .deployed__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .deployed__copy { position: sticky; top: 120px; } }
.deployed__copy .photo { margin: 28px 0 22px; }
.deployed__copy .arrow-link { color: var(--ink); }
.deployed__table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.deployed__table thead th { padding: 0 14px 12px; text-align: start; font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.deployed__table tbody th, .deployed__table td { padding: 16px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--mist); }
.deployed__table tbody th { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--ink); white-space: nowrap; }
[dir="rtl"] .deployed__table tbody th { text-align: right; }
.deployed__table ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.deployed__table a { color: var(--body); text-decoration: underline; text-decoration-color: var(--mist); text-underline-offset: 3px; }
.deployed__table a:hover { color: var(--ink); text-decoration-color: var(--voltage); }
.kind { display: inline-block; padding: 3px 8px; font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; }
.kind--ac { background: rgba(251, 180, 23, .22); color: var(--ink); }
.kind--dc { background: var(--ink); color: var(--amber); }
@media (max-width: 620px) {
  .deployed__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .deployed__table tr { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--mist); }
  .deployed__table tbody th, .deployed__table td { padding: 0; border: 0; }
  .deployed__table td:last-child { grid-column: 1 / -1; }
}

/* About: track record */
.about-track__grid { display: grid; gap: 32px; align-items: end; }
@media (min-width: 900px) { .about-track__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.about-track__grid .btn { margin-top: 26px; }
.about-track__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; background: var(--on-dark-rule); border: 1px solid var(--on-dark-rule); }
.about-track__stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: clamp(18px, 2vw, 28px); background: var(--ink); }
.about-track__stats dt { font-size: 13px; line-height: 1.4; color: var(--on-dark-62); }
.about-track__stats dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3vw, 42px); line-height: 1; color: var(--white); }
.about-track__stats > div:first-child dd { background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* A flush-top section continues the one above it: no current line across its heading */
.section--flush-top::before { content: none; }

/* ================= Fleet: nav dropdown, model cards, datasheet pages (from Canva sheets, 2026-10-07) ================= */
.nav__link[aria-current="true"]::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--voltage), var(--amber));
}
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item--menu .nav__link { padding-inline-end: 6px; }
.nav__toggle { display: grid; place-items: center; width: 28px; height: 36px; margin-inline-start: -2px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; transition: background .2s; }
.nav__toggle:hover { background: #F0EEEA; }
.nav__toggle svg { transition: transform .25s var(--ease); }
.nav__item.is-open .nav__toggle svg { transform: rotate(180deg); }
.mega {
  position: absolute; top: calc(100% + 10px); inset-inline-start: 50%; z-index: 70; width: min(860px, calc(100vw - 48px));
  transform: translate(-50%, 6px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s;
}
[dir="rtl"] .mega { transform: translate(50%, 6px); }
.mega::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; } /* hover bridge */
.nav__item.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .2s, transform .25s var(--ease); }
[dir="rtl"] .nav__item.is-open .mega { transform: translate(50%, 0); }
.mega__inner {
  display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 0; background: var(--white); border: 1px solid var(--mist);
  position: relative;
  box-shadow: 0 30px 60px -20px rgba(11, 11, 12, .28);
}
.mega__inner::before { content: ""; position: absolute; inset: -1px -1px auto; height: 3px; background: var(--current); }
.mega__col { padding: 22px 20px; }
.mega__col + .mega__col { border-inline-start: 1px solid var(--mist); }
.mega__col--dc ul { columns: 2; column-gap: 14px; }
.mega__h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--ink); }
.mega__h:hover { color: var(--ember); }
.mega__n { margin-inline-start: auto; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 11px; background: var(--paper); font-size: 11px; color: var(--muted); }
.mega ul { margin: 0; padding: 0; list-style: none; }
.mega li { break-inside: avoid; }
.mega li a { display: grid; gap: 1px; padding: 7px 8px; margin-inline: -8px; border-radius: var(--radius); transition: background .2s; }
.mega li a:hover, .mega li a:focus-visible { background: var(--paper); }
.mega li a[aria-current="page"] { background: rgba(251, 180, 23, .16); }
.mega li b { font-weight: 600; font-size: 14px; color: var(--ink); }
.mega li span { font-size: 12px; color: var(--muted); }
[dir="rtl"] .mega li b, [dir="rtl"] .mega li span { text-align: right; }
.mega__all { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; padding: 13px; border-top: 1px solid var(--mist); background: var(--paper); font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.mega__all:hover { color: var(--ember); }
@media (prefers-reduced-motion: reduce) { .mega, .nav__item.is-open .mega, .nav__toggle svg { transition: none; } }
.kind--acc { background: var(--paper); color: var(--ink); border: 1px solid var(--mist); }

/* Mobile nav: fleet group */
.mobile-nav__group details { border-bottom: 1px solid #F0EEEA; }
.mobile-nav__group summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; }
.mobile-nav__group summary::-webkit-details-marker { display: none; }
.mobile-nav__group summary a { flex: 1; border-bottom: 0; }
.mobile-nav__chev { width: 44px; height: 44px; display: grid; place-items: center; }
.mobile-nav__chev::before { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .25s var(--ease); }
.mobile-nav__group details[open] .mobile-nav__chev::before { transform: rotate(-135deg); }
.mobile-nav__sub { margin: 8px 0 4px; font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mobile-nav__group ul { padding-block: 0 8px; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.mobile-nav__group ul a { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid #F6F4F1; font-size: 14px; }
.mobile-nav__group ul a span { font-size: 12px; font-weight: 400; color: var(--muted); }
@media (max-width: 380px) { .mobile-nav__group ul { grid-template-columns: 1fr; } }
.mobile-nav.is-open { max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; }

/* Fleet groups and model cards */
.fleet-group { scroll-margin-top: 110px; }
.fleet-group__lede { max-width: 46ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; color: var(--body); }
.fleet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .fleet-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .fleet-grid { grid-template-columns: repeat(4, 1fr); } }
.fcard a { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--mist); color: inherit; transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.section--white .fcard a { background: var(--paper); }
.fcard a:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(11, 11, 12, .35); }
.fcard a:focus-visible { outline: 3px solid var(--voltage); outline-offset: 3px; }
.fcard__img { display: block; aspect-ratio: 1; overflow: hidden; background: #F8F5F5; }
.fcard__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.fcard a:hover .fcard__img img { transform: scale(1.04); }
.fcard__body { display: grid; gap: 4px; padding: 16px 16px 18px; border-top: 1px solid var(--mist); }
.fcard__form { font-family: var(--f-display); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.fcard__model { font-family: var(--f-display); font-weight: 700; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.25; color: var(--ink); }
.fcard__head { font-size: 14px; color: var(--body); }
[dir="rtl"] .fcard__model, [dir="rtl"] .fcard__head { text-align: right; }
.fcard__more { margin-top: 8px; font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .fcard a, .fcard__img img { transition: none; } .fcard a:hover { transform: none; } }

/* Model datasheet page */
.model-hero { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 80px); background: var(--paper); border-bottom: 1px solid var(--mist); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: clamp(20px, 3vw, 36px); font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--body); text-decoration: underline; text-decoration-color: var(--mist); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--voltage); }
.crumbs [aria-current] { font-weight: 600; color: var(--ink); }
.model-hero__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .model-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.model-hero__img { background: #F8F5F5; border: 1px solid var(--mist); aspect-ratio: 1; }
.model-hero__img img { width: 100%; height: 100%; object-fit: contain; }
.model-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ember); }
.model-hero__title { margin-top: 14px; font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
[dir="rtl"] .model-hero__title, [dir="rtl"] .model-hero__rating { text-align: right; }
.model-hero__rating { margin-top: 10px; font-family: var(--f-display); font-weight: 700; font-size: clamp(18px, 1.8vw, 24px); background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
[dir="rtl"] .model-hero__rating { margin-inline-start: 0; }
.model-hero__lede { margin-top: 18px; max-width: 54ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: var(--body); }
.model-hero__quick { display: grid; gap: 1px; margin: 24px 0 0; background: var(--mist); border: 1px solid var(--mist); }
.model-hero__quick > div { padding: 14px 16px; background: var(--white); }
.model-hero__quick dt, .spec-table th, .dims dt { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.model-hero__quick dd { margin: 6px 0 0; font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--ink); }
[dir="rtl"] .model-hero__quick dd, [dir="rtl"] .spec-table td, [dir="rtl"] .dims dd { text-align: right; }
.model-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.model-body { display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 981px) { .model-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.spec-table { width: 100%; margin-top: 20px; border-collapse: collapse; border-top: 2px solid var(--ink); }
.spec-table th, .spec-table td { padding: 14px 0; text-align: start; vertical-align: top; border-bottom: 1px solid var(--mist); }
.spec-table th { width: 34%; padding-inline-end: 16px; padding-top: 17px; }
.spec-table td { font-size: 15px; line-height: 1.6; color: var(--ink); }
.model-sub { margin-top: 30px; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 14px 0 0; background: var(--mist); border: 1px solid var(--mist); }
@media (max-width: 520px) { .dims { grid-template-columns: 1fr 1fr; } }
.dims > div { padding: 14px; background: var(--paper); }
.dims dd { margin: 6px 0 0; font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.model-note { margin-top: 12px; font-size: 15px; color: var(--body); }
.model-about__p { margin-top: 20px; font-size: 16px; line-height: 1.8; color: var(--body); }
.model-feat { display: grid; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--mist); }
.model-feat li { position: relative; padding: 10px 0; padding-inline-start: 28px; border-bottom: 1px solid var(--mist); font-size: 15px; line-height: 1.5; color: var(--ink); }
.model-feat li::before { content: ""; position: absolute; inset-inline-start: 0; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat, var(--current); }
[dir="rtl"] .model-feat[dir="ltr"] li { padding-inline-start: 28px; text-align: left; }
.model-used { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.model-used a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--mist); background: var(--paper); font-weight: 600; font-size: 13px; color: var(--ink); }
.model-used a span { color: var(--ember); }
.model-used a:hover { border-color: var(--ink); }
.model-enq { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding: 20px 22px; background: var(--ink); color: var(--white); }
.model-enq p { max-width: 40ch; font-size: 15px; line-height: 1.6; color: var(--on-dark-88); }
.model-enq .btn--ink { background: var(--white); color: var(--ink); }
.model-pn { display: flex; flex-wrap: wrap; gap: 10px; }
.model-pn a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--mist); background: var(--white); font-weight: 600; font-size: 14px; color: var(--ink); }
.model-pn a:hover { border-color: var(--ink); }
.mobile-nav__group ul { padding-inline: 0; }

/* ================= Header audit v2 (2026-10-07): readable topbar, 44px+ targets, real phone icon ================= */
/* Topbar: 12px text (was 10px), icons, mail kept on phones as an icon, language pill with 32px+ targets */
.topbar__inner { height: 44px; gap: 24px; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .78); }
.topbar__item svg { flex: none; color: var(--amber); }
a.topbar__item:hover, a.topbar__item:focus-visible { color: var(--white); }
.topbar__mail .topbar__label { text-transform: lowercase; letter-spacing: .02em; }
.lang { padding: 3px; }
.lang__btn { display: inline-grid; place-items: center; min-width: 40px; min-height: 30px; padding: 0 12px; font-size: 11px; color: rgba(255, 255, 255, .78); }
.lang__btn[lang="ar"] { font-size: 15px; padding-block: 0; }
@media (max-width: 1140px) { .topbar__util { display: none; } }
@media (max-width: 620px) {
  .topbar__inner { height: 44px; gap: 8px; }
  .topbar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar__item { min-width: 44px; justify-content: center; }
  .topbar__item svg { width: 18px; height: 18px; }
  .topbar__end { gap: 6px; }
  .lang__btn { min-height: 36px; min-width: 44px; }
}

/* Call: SVG handset in a 48px Current button (44px on phones), live pulse ring, larger label + number */
.call { gap: 12px; padding: 4px; margin: -4px; border-radius: 999px; }
.call__icon {
  position: relative; width: 48px; height: 48px; font-size: 0; color: var(--ink);
  box-shadow: 0 8px 20px -8px rgba(244, 72, 10, .55); transition: transform .3s var(--ease), box-shadow .3s;
}
.call__icon svg { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.call__icon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--voltage);
  opacity: 0; animation: call-ring 2.8s var(--ease) infinite;
}
@keyframes call-ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.call:hover .call__icon, .call:focus-visible .call__icon { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(244, 72, 10, .7); }
.call:hover .call__icon svg { transform: rotate(-14deg); }
.call:focus-visible { outline: 3px solid var(--voltage); outline-offset: 2px; }
.call__label { font-size: 11px; letter-spacing: .1em; }
.call__num { font-size: 17px; letter-spacing: .01em; }
.header.is-scrolled .call__icon { width: 44px; height: 44px; }
@media (max-width: 520px) { .call__icon { width: 44px; height: 44px; } .call__icon svg { width: 20px; height: 20px; } }
@media (prefers-reduced-motion: reduce) { .call__icon::after { animation: none; } .call__icon, .call__icon svg { transition: none; } }

/* Logo legibility (2026-10-07): the registered lockup is wide-icon + small wordmark, so it needs height to read.
   80px desktop (wordmark ~13px cap), 64px scrolled, 64px tablet, 58px phone. Artwork unchanged — size only. */
.header__bar { height: 104px; }
.brand__logo { height: 80px; }
.header.is-scrolled .header__bar { height: 80px; }
.header.is-scrolled .brand__logo { height: 64px; }
@media (max-width: 980px) { .header__bar { height: 88px; } .brand__logo { height: 66px; } .header.is-scrolled .header__bar { height: 76px; } .header.is-scrolled .brand__logo { height: 58px; } }
@media (max-width: 520px) { .header__bar { height: 80px; } .brand__logo { height: 60px; } .header.is-scrolled .header__bar { height: 72px; } .header.is-scrolled .brand__logo { height: 54px; } }
@media (min-width: 981px) and (max-width: 1200px) { .brand__logo { height: 70px; } .nav__link { padding-inline: 12px; } }

/* ================= Footer v2 (2026-10-07): brand band on paper, 4 scannable columns, AA contrast, 44px targets ================= */
.footer { padding: 0; background: var(--ink); }
/* Brand band — light ground for the black registered logo */
.footer__brand { position: relative; background: var(--paper); border-top: 1px solid var(--mist); }
.footer__brand::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--current); }
.footer__brand-in { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; padding-block: clamp(28px, 3.5vw, 40px); }
.footer__logo { flex: none; display: block; }
.footer__logo img { display: block; height: 84px; width: auto; }
.footer__tagline { flex: 1 1 320px; max-width: 46ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; color: var(--ink); }
.footer__brand-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-inline-start: auto; }

/* Main */
.footer__main { padding-top: clamp(48px, 5vw, 72px); }
.footer__cols { display: grid; gap: 40px 32px; grid-template-columns: 1fr 1fr; padding-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 1000px) { .footer__cols { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; } }
.footer__about { grid-column: 1 / -1; }
@media (min-width: 1000px) { .footer__about { grid-column: auto; } }
.footer__blurb { max-width: 44ch; font-size: 15px; line-height: 1.75; color: var(--on-dark-72); }
.footer .socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.footer .socials a { display: inline-flex; align-items: center; gap: 10px; width: auto; height: auto; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--white); transition: background .25s, border-color .25s, color .25s; }
.footer .socials a svg { width: 16px; height: 16px; color: var(--amber); }
.footer .socials a:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.footer .socials a:hover svg { color: var(--ink); }
.footer__col-h { margin-bottom: 14px; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.footer__links { display: grid; gap: 0; }
.footer__links a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--on-dark-88); transition: color .2s; }
.footer__links a:hover { color: var(--amber); }
.footer a:focus-visible, .footer button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.footer__links--contact { gap: 6px; }
.footer__links--contact a, .footer__hours { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 8px; font-size: 15px; line-height: 1.5; color: var(--on-dark-88); }
.footer__hours { color: var(--on-dark-72); }
.footer__ci { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -4px; border-radius: 50%; background: rgba(251, 180, 23, .12); color: var(--amber); }
.footer__ci svg { width: 16px; height: 16px; }
.footer__links--contact em { display: block; margin-top: 4px; font-style: normal; font-weight: 600; font-size: 13px; color: var(--amber); }
.footer__links--contact a:hover em { text-decoration: underline; text-underline-offset: 3px; }

/* Legal */
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 22px 0 26px; border-top: 1px solid var(--on-dark-rule); }
.footer__legal p { font-family: var(--f-text); font-weight: 500; font-size: 13px; letter-spacing: .02em; color: var(--on-dark-62); }
.footer__cities { letter-spacing: .12em !important; text-transform: uppercase; font-size: 12px !important; }
.footer__top-btn { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--white); }
.footer__top-btn:hover { background: var(--current); border-color: transparent; color: var(--ink); }

@media (max-width: 640px) {
  .footer__brand-in { flex-direction: column; align-items: flex-start; }
  .footer__tagline { flex: none; }
  .footer__logo img { height: 72px; }
  .footer__brand-cta { margin-inline-start: 0; width: 100%; }
  .footer__brand-cta .btn { flex: 1 1 auto; justify-content: center; }
  .footer__contact { grid-column: 1 / -1; }
  .footer__links a { min-height: 44px; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .footer__top-btn { margin-inline-start: 0; }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ================= Hero v2 (2026-10-07): one scene per message, crossfade + slow drift, pause control, timed dots ================= */
.hero--v2 .hero__media { background: var(--graphite); }
.hero__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__frame.is-active { opacity: 1; }
.hero__frame picture, .hero__frame img { display: block; width: 100%; height: 100%; }
.hero__frame img { object-fit: cover; transform: scale(1.04); }
.hero__frame.is-active img { animation: heroDrift 9s linear both; }
@keyframes heroDrift { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 60% at 0% 100%, rgba(244, 72, 10, .30), rgba(244, 72, 10, 0) 62%),
    linear-gradient(180deg, rgba(11, 11, 12, .10) 0%, rgba(11, 11, 12, 0) 30%, rgba(11, 11, 12, .18) 60%, rgba(11, 11, 12, .62) 100%),
    linear-gradient(90deg, rgba(11, 11, 12, .45) 0%, rgba(11, 11, 12, 0) 34%);
}
[dir="rtl"] .hero__shade {
  background:
    radial-gradient(90% 60% at 100% 100%, rgba(244, 72, 10, .30), rgba(244, 72, 10, 0) 62%),
    linear-gradient(180deg, rgba(11, 11, 12, .10) 0%, rgba(11, 11, 12, 0) 30%, rgba(11, 11, 12, .18) 60%, rgba(11, 11, 12, .62) 100%),
    linear-gradient(-90deg, rgba(11, 11, 12, .45) 0%, rgba(11, 11, 12, 0) 34%);
}
/* Scene caption on the photo (top-end corner), honest "Illustration" tag */
.hero__cap {
  position: absolute; z-index: 3; top: 24px; inset-inline-end: var(--gutter);
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 12px; max-width: calc(54% - 2 * var(--gutter));
  background: rgba(11, 11, 12, .62); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px; font-weight: 600; color: var(--white);
}
.hero__cap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(251, 180, 23, .22); flex: none; }
.hero__cap-ill { padding-inline-start: 10px; border-inline-start: 1px solid rgba(255, 255, 255, .24); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-62); }

/* Controls: timed dots + pause + counter */
.hero__controls { display: flex; align-items: center; gap: 18px; margin-top: 48px; }
.hero--v2 .hero__dots { margin-top: 0; gap: 8px; }
.hero--v2 .hero__dot { position: relative; width: 44px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero--v2 .hero__dot::after { content: none; }
.hero--v2 .hero__dot span { position: absolute; inset-inline: 0; top: 10px; height: 4px; overflow: hidden; background: rgba(255, 255, 255, .26); border-radius: 2px; transition: background .3s; }
.hero--v2 .hero__dot:hover span { background: rgba(255, 255, 255, .5); }
.hero--v2 .hero__dot span::after { content: ""; position: absolute; inset: 0; background: var(--current); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .hero--v2 .hero__dot span::after { transform-origin: right; }
.hero--v2 .hero__dot[aria-current="true"] span::after { transform: scaleX(1); }
.hero--v2 .hero__dot.is-timing span::after { animation: heroTimer 7s linear both; }
.hero--v2.is-paused .hero__dot.is-timing span::after { animation-play-state: paused; }
@keyframes heroTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero--v2 .hero__dot:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 2px; }
.hero__pause { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.hero__pause:hover { background: var(--white); color: var(--ink); }
.hero__pause:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.hero__pause .i-play { display: none; }
.hero__pause[aria-pressed="true"] .i-play { display: block; }
.hero__pause[aria-pressed="true"] .i-pause { display: none; }
.hero__count { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--on-dark-62); }
.hero__count b { color: var(--white); }
.hero--v2.is-paused .hero__frame.is-active img { animation-play-state: paused; }

/* Hero stats: verified figures, bigger and clearer labels */
.hero--v2 .stats--hero .stat__label { font-size: 12px; letter-spacing: .1em; color: var(--on-dark-72); }

@media (max-width: 900px) {
  .hero__cap { top: auto; bottom: auto; inset-inline-end: 16px; inset-inline-start: auto; top: 16px; max-width: calc(100% - 32px); font-size: 12px; }
  .hero__controls { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__frame { transition: none; }
  .hero__frame.is-active img, .hero--v2 .hero__dot.is-timing span::after { animation: none; }
}

/* ================= Services page v2 (2026-10-07) ================= */
/* Sticky service nav */
.svc-nav { position: sticky; top: 80px; z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--mist); }
@media (max-width: 980px) { .svc-nav { top: 76px; } }
@media (max-width: 520px) { .svc-nav { top: 72px; } }
.svc-nav__list { display: flex; gap: 6px; margin-block: 0; padding-block: 10px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.svc-nav__list::-webkit-scrollbar { display: none; }
.svc-nav__list li { flex: 1 0 auto; }
.svc-nav a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; border: 1px solid transparent; border-radius: 999px; white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--ink); transition: background .2s, border-color .2s; }
.svc-nav a:hover { background: var(--paper); border-color: var(--mist); }
.svc-nav a[aria-current="true"] { background: var(--ink); color: var(--white); }
.svc-nav a:focus-visible { outline: 3px solid var(--voltage); outline-offset: 2px; }
.svc-nav__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(251, 180, 23, .18); color: var(--ink); flex: none; }
.svc-nav__icon svg { width: 17px; height: 17px; }
.svc-nav a[aria-current="true"] .svc-nav__icon { background: var(--current); }
.svc-nav__n { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.svc-nav a[aria-current="true"] .svc-nav__n { color: var(--amber); }

/* Service rows */
.svc2-list { display: grid; gap: clamp(28px, 4vw, 48px); }
.svc2 { display: grid; gap: clamp(24px, 3.5vw, 56px); align-items: start; padding: clamp(20px, 3vw, 40px); background: var(--white); border: 1px solid var(--mist); scroll-margin-top: 170px; }
@media (min-width: 981px) {
  .svc2 { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .svc2:nth-child(even) .svc2__media { order: 2; }
  .svc2__media { position: sticky; top: 170px; }
}
.svc2__media { aspect-ratio: 4 / 3; }
.svc2__badge { position: absolute; z-index: 2; top: 16px; inset-inline-start: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(11, 11, 12, .78); color: var(--white); }
[dir="rtl"] .svc2__badge { padding: 6px 6px 6px 14px; }
.svc2__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--current); color: var(--ink); }
.svc2__icon svg { width: 19px; height: 19px; }
.svc2__badge b { font-size: 13px; letter-spacing: .1em; }
.svc2__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.svc2__text { margin-top: 14px; font-size: 16px; line-height: 1.75; color: var(--body); }
.svc2__k { margin-top: 24px; font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.svc2 .svc-row__incl { margin-top: 10px; }
.svc2__fleet ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.svc2__fleet a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 8px 8px; border: 1px solid var(--mist); background: var(--paper); color: var(--ink); transition: border-color .2s, transform .2s var(--ease); }
.svc2__fleet a:hover { border-color: var(--ink); transform: translateY(-2px); }
.svc2__fleet img { width: 48px; height: 48px; object-fit: contain; background: #F8F5F5; flex: none; }
.svc2__fleet span { display: grid; gap: 2px; }
.svc2__fleet b { font-size: 14px; }
.svc2__fleet small { font-size: 12px; color: var(--muted); }
[dir="rtl"] .svc2__fleet b, [dir="rtl"] .svc2__fleet small { text-align: right; }
.svc2__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--mist); }
.svc2__call { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }

/* Equipment groups (ink) */
.eqg { display: grid; gap: 16px; }
@media (min-width: 860px) { .eqg { grid-template-columns: repeat(3, 1fr); } }
.eqg__card { padding: 26px 24px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.eqg__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--on-dark-rule); }
.eqg__head h3 { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--white); }
.eqg__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--current); color: var(--ink); flex: none; }
.eqg__n { margin-inline-start: auto; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .1); font-size: 12px; color: var(--on-dark-72); }
.eqg ul { margin: 6px 0 0; padding: 0; list-style: none; }
.eqg li { padding: 11px 0; border-bottom: 1px solid var(--on-dark-rule); font-size: 16px; color: var(--on-dark-88); }
.eqg li:last-child { border-bottom: 0; }
.eqg__ask { margin-top: 24px; font-size: 16px; color: var(--on-dark-72); }
.eqg__ask a { margin-inline-start: 6px; font-weight: 700; color: var(--white); border-bottom: 2px solid var(--voltage); }
.eqg__ask a:hover { color: var(--amber); }

/* What a load test proves */
.proves { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .proves { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .proves { grid-template-columns: repeat(4, 1fr); } }
.proves li { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 18px; border: 1px solid var(--mist); background: var(--paper); font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--ink); }
.proves__n { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--current) border-box; font-size: 13px; font-weight: 700; }

/* Process */
.svc-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 760px) { .svc-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .svc-steps { grid-template-columns: repeat(4, 1fr); } }
.svc-steps__item { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; background: var(--white); border: 1px solid var(--mist); }
.svc-steps__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; background: var(--current); color: var(--ink); }
.svc-steps__n { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.svc-steps__item h3 { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--ink); }
.svc-steps__item p { font-size: 15px; line-height: 1.65; color: var(--body); }
.svc-steps__get { margin-top: auto !important; padding-top: 14px; border-top: 1px solid var(--mist); color: var(--ink) !important; font-weight: 600; }
.svc-steps__get span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.svc-nav__list li { flex: 0 0 auto; }
@media (min-width: 1200px) { .svc-nav__list { justify-content: space-between; } }
.svc-nav__list { position: relative; }

/* ================= About page v2 (2026-10-07) ================= */
/* Who we are */
.ab-who { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 981px) { .ab-who { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ab-facts { display: grid; gap: 1px; margin: 28px 0 0; background: var(--mist); border: 1px solid var(--mist); }
@media (min-width: 620px) { .ab-facts { grid-template-columns: 1fr 1fr; } }
.ab-facts > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 16px 18px; background: var(--white); }
.ab-facts__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(251, 180, 23, .18); color: var(--ink); }
.ab-facts__icon svg { width: 20px; height: 20px; }
.ab-facts dt { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ab-facts dd { margin: 4px 0 0; font-weight: 600; font-size: 15px; line-height: 1.45; color: var(--ink); }
.ab-who__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.ab-link { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.ab-who__media { position: relative; padding-bottom: 56px; padding-inline-end: 56px; }
.ab-who__main { aspect-ratio: 4 / 3; }
.ab-who__inset { position: absolute; bottom: 0; inset-inline-end: 0; width: 42%; aspect-ratio: 1; border: 6px solid var(--paper); box-shadow: 0 24px 48px -24px rgba(11, 11, 12, .45); }
.ab-who__tile { position: absolute; top: 24px; inset-inline-start: -16px; display: grid; gap: 4px; max-width: 200px; padding: 18px 20px; background: var(--ink); color: var(--white); box-shadow: 0 20px 40px -20px rgba(11, 11, 12, .6); transition: transform .3s var(--ease); }
.ab-who__tile:hover { transform: translateY(-3px); }
.ab-who__tile b { font-family: var(--f-display); font-size: 44px; line-height: 1; background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-who__tile span { font-size: 13px; line-height: 1.4; color: var(--on-dark-72); }
@media (max-width: 620px) { .ab-who__media { padding-bottom: 40px; padding-inline-end: 28px; } .ab-who__tile { inset-inline-start: 12px; top: 12px; padding: 12px 14px; } .ab-who__tile b { font-size: 32px; } }

.ab-aside { max-width: 52ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.75; color: var(--body); }

/* Turnkey */
.ab-turnkey { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; position: relative; }
@media (min-width: 860px) { .ab-turnkey { grid-template-columns: repeat(3, 1fr); } .ab-turnkey::before { content: ""; position: absolute; top: 44px; inset-inline: 40px; height: 2px; background: var(--current); opacity: .5; } }
.ab-turnkey li { position: relative; padding: 24px 24px 26px; background: var(--paper); border: 1px solid var(--mist); }
.ab-turnkey__n { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: var(--current); font-weight: 700; font-size: 13px; color: var(--ink); }
.ab-turnkey h3 { font-family: var(--f-display); font-weight: 700; font-size: 21px; color: var(--ink); }
.ab-turnkey p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--body); }

/* Vision & mission */
.ab-vm { display: grid; gap: 20px; }
@media (min-width: 860px) { .ab-vm { grid-template-columns: 1fr 1fr; } }
.ab-vm__card { position: relative; padding: clamp(26px, 3vw, 40px); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.ab-vm__card::before { content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 3px; background: var(--current); }
.ab-vm__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--current); color: var(--ink); }
.ab-vm__k { margin-top: 20px; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.ab-vm__p { margin-top: 12px; font-family: var(--f-display); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--white); }

/* Values */
.ab-values { display: grid; gap: 16px; }
@media (min-width: 860px) { .ab-values { grid-template-columns: repeat(3, 1fr); } }
.ab-value { padding: 28px 26px; background: var(--white); border: 1px solid var(--mist); transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.ab-value:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(11, 11, 12, .35); }
.ab-value__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(251, 180, 23, .18); color: var(--ink); transition: background .3s; }
.ab-value:hover .ab-value__icon { background: var(--current); }
.ab-value h3 { margin-top: 18px; font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--ink); }
.ab-value p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--body); }
@media (prefers-reduced-motion: reduce) { .ab-value { transition: none; } .ab-value:hover { transform: none; } }

/* Why (reuses .why-card) */
.ab-why { display: grid; gap: 16px; }
@media (min-width: 680px) { .ab-why { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ab-why { grid-template-columns: repeat(4, 1fr); } }

/* Next steps */
.ab-next { display: grid; gap: 16px; }
@media (min-width: 760px) { .ab-next { grid-template-columns: 1.3fr 1fr; } }
.ab-next__card { display: flex; flex-direction: column; gap: 12px; min-height: 180px; padding: 28px; border: 1px solid var(--mist); background: var(--white); color: var(--ink); transition: transform .3s var(--ease), border-color .3s; }
.ab-next__card:hover { transform: translateY(-4px); border-color: var(--ink); }
.ab-next__card--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.ab-next__k { font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.ab-next__card--dark .ab-next__k { color: var(--amber); }
.ab-next__card b { font-family: var(--f-display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; }
.ab-next__go { margin-top: auto; font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.ab-next__card:focus-visible { outline: 3px solid var(--voltage); outline-offset: 3px; }

/* ================= Contact page v2 (2026-10-07) ================= */
.ct-quick { position: relative; z-index: 3; margin-top: -48px; }
.ct-quick__grid { display: grid; gap: 14px; }
@media (min-width: 860px) { .ct-quick__grid { grid-template-columns: repeat(3, 1fr); } }
.ct-tile { display: grid; gap: 6px; align-content: start; padding: 24px 24px 22px; background: var(--white); border: 1px solid var(--mist); box-shadow: 0 20px 40px -28px rgba(11, 11, 12, .45); color: var(--ink); transition: transform .3s var(--ease), border-color .3s; }
.ct-tile:hover { transform: translateY(-4px); border-color: var(--ink); }
.ct-tile:focus-visible { outline: 3px solid var(--voltage); outline-offset: 3px; }
.ct-tile--primary { background: var(--ink); border-color: var(--ink); color: var(--white); }
.ct-tile__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 50%; background: rgba(251, 180, 23, .18); color: var(--ink); }
.ct-tile--primary .ct-tile__icon { background: var(--current); }
.ct-tile__k { font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.ct-tile--primary .ct-tile__k { color: var(--amber); }
.ct-tile b { font-family: var(--f-display); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; }
[dir="rtl"] .ct-tile b[dir="ltr"] { text-align: right; }
.ct-tile__go { margin-top: 6px; font-weight: 600; font-size: 14px; color: var(--body); }
.ct-tile--primary .ct-tile__go { color: var(--on-dark-72); }

.ct-main { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 1000px) { .ct-main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .ct-info { position: sticky; top: 110px; } }
.ct-form-card { padding: clamp(24px, 3vw, 44px); background: var(--white); border: 1px solid var(--mist); }
.ct-form__lede { margin-top: 10px; font-size: 15px; color: var(--body); }
.ct-form { display: grid; gap: 28px; margin-top: 24px; }
.ct-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.ct-step__h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.ct-step__h span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--current); font-size: 13px; }
.ct-form .field__label { font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ink); }
.ct-form .lead__chips .field__label { margin-bottom: 12px; }
.ct-form .chip-opt span { display: inline-flex; align-items: center; min-height: 44px; }
.ct-form .chip-opt input:focus-visible + span { outline: 3px solid var(--voltage); outline-offset: 2px; }
.ct-grid { display: grid; gap: 20px; }
@media (min-width: 620px) { .ct-grid { grid-template-columns: 1fr 1fr; } .ct-grid .field--full { grid-column: 1 / -1; } }
.ct-form .field input { min-height: 48px; padding: 12px 14px; border: 1px solid var(--mist); background: var(--paper); }
.ct-form .field input:focus, .ct-form .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(244, 72, 10, .18); background: var(--white); }
.ct-form .field input::placeholder, .ct-form .field textarea::placeholder { color: #8A8C91; }
.req { color: var(--ember); }
.field.is-error input, .field.is-error textarea { border-color: #C42B1C; background: #FFF6F5; }
.field__err { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #B42318; }
.field__err::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #B42318; color: var(--white); font-size: 11px; }
.ct-summary { margin-top: 18px; padding: 16px 18px; border: 2px solid #B42318; background: #FFF6F5; }
.ct-summary p { font-weight: 700; color: #B42318; }
.ct-summary ul { margin: 8px 0 0; padding-inline-start: 18px; }
.ct-summary a { color: #B42318; text-decoration: underline; }
.ct-summary:focus { outline: 3px solid #B42318; outline-offset: 2px; }
.ct-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-top: 20px; border-top: 1px solid var(--mist); }
.ct-submit__note { max-width: 40ch; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ct-done { display: grid; gap: 12px; justify-items: start; margin-top: 24px; padding: 28px; background: var(--paper); border: 1px solid var(--mist); }
.ct-done:focus { outline: 3px solid var(--voltage); outline-offset: 2px; }
.ct-done__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--current); color: var(--ink); }
.ct-done h3 { font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--ink); }
.ct-done p { font-size: 15px; line-height: 1.65; color: var(--body); }
.ct-done__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-done__again { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.ct-info { display: grid; gap: 16px; }
.ct-info__card, .ct-next { padding: 26px; background: var(--white); border: 1px solid var(--mist); }
.ct-info__h { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--ink); }
.ct-info__list { display: grid; gap: 14px; margin: 16px 0 18px; padding: 0; list-style: none; }
.ct-info__list li { display: flex; gap: 12px; align-items: flex-start; }
.ct-info__list svg { flex: none; width: 22px; height: 22px; color: var(--voltage); margin-top: 2px; }
.ct-info__list b { display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ct-info__list span { font-size: 15px; line-height: 1.55; color: var(--ink); }
.ct-map { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper) repeating-linear-gradient(45deg, transparent 0 14px, rgba(11, 11, 12, .03) 14px 15px); border: 1px solid var(--mist); }
.ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ct-map__btn { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; color: var(--ink); }
.ct-map__btn svg { width: 30px; height: 30px; color: var(--voltage); }
.ct-map__btn span { font-family: var(--f-display); font-weight: 700; font-size: 16px; }
.ct-map__btn small { font-size: 12px; color: var(--muted); }
.ct-map__btn:hover span { text-decoration: underline; }
.ct-map__btn:focus-visible { outline: 3px solid var(--voltage); outline-offset: -3px; }
.ct-info__dir { margin-top: 14px; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.ct-next ol { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.ct-next li { display: flex; gap: 14px; }
.ct-next li > span { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--current) border-box; font-size: 12px; font-weight: 700; }
.ct-next b { font-family: var(--f-display); font-size: 15px; color: var(--ink); }
.ct-next p { margin-top: 2px; font-size: 14px; line-height: 1.55; color: var(--body); }
@media (prefers-reduced-motion: reduce) { .ct-tile { transition: none; } .ct-tile:hover { transform: none; } }
.ct-done[hidden], .ct-form[hidden] { display: none; }
.field__err[hidden], .ct-summary[hidden] { display: none; }
.ct-grid { align-items: start; }

/* ================= Fleet page v2 (2026-10-07) ================= */
.fl-cap { position: relative; z-index: 3; margin-top: -44px; }
.fl-cap__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mist); border: 1px solid var(--mist); box-shadow: 0 20px 40px -28px rgba(11, 11, 12, .45); }
@media (min-width: 980px) { .fl-cap__grid { grid-template-columns: repeat(4, 1fr); } }
.fl-cap__item { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--white); }
.fl-cap__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--current); color: var(--ink); }
.fl-cap__item b { display: block; font-family: var(--f-display); font-size: 15px; color: var(--ink); }
.fl-cap__item span span { font-size: 13px; color: var(--body); }
[dir="rtl"] .fl-cap__item span[dir="ltr"] { display: block; text-align: right; }

.fl-finder { position: sticky; top: 80px; z-index: 40; margin-top: 28px; background: rgba(247, 246, 244, .95); backdrop-filter: blur(14px); border-block: 1px solid var(--mist); }
.fl-finder[hidden] { display: none; }
@media (max-width: 980px) { .fl-finder { top: 76px; } }
@media (max-width: 520px) { .fl-finder { top: 72px; position: relative; } }
.fl-finder__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block: 12px; }
.fl-finder__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fl-finder__k { margin-inline-end: 4px; font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fl-finder button { min-height: 40px; padding: 0 14px; border: 1px solid var(--mist); border-radius: 999px; background: var(--white); font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.fl-finder button:hover { border-color: var(--ink); }
.fl-finder button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.fl-finder button:focus-visible { outline: 3px solid var(--voltage); outline-offset: 2px; }
.fl-finder__count { margin-inline-start: auto; font-weight: 600; font-size: 14px; color: var(--body); }
.fleet-group[hidden], .fcard[hidden], .fl-empty[hidden] { display: none; }
.fl-empty { padding-block: 40px; text-align: center; }
.fl-empty span { display: block; font-size: 16px; color: var(--body); }
.fl-empty button { margin-inline-start: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font: inherit; font-weight: 700; cursor: pointer; }

/* Cards v2 */
.fcard__img { position: relative; }
.fcard__used { position: absolute; top: 10px; inset-inline-start: 10px; padding: 4px 9px; background: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--amber); }
.fcard__form { display: flex; align-items: center; gap: 8px; }
.fcard__apps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fcard__apps span { padding: 2px 8px; border: 1px solid var(--mist); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--body); background: var(--white); }
.section--white .fcard__apps span { background: var(--paper); }
.fcard__meta { font-size: 12px; color: var(--muted); }
[dir="rtl"] .fcard__meta { text-align: right; }

/* Help band */
.fl-help { display: grid; gap: 24px; align-items: end; }
@media (min-width: 980px) { .fl-help { grid-template-columns: minmax(0, 1.2fr) auto; } }
.fl-help p:not(.eyebrow) { margin-top: 14px; max-width: 56ch; font-size: 16px; line-height: 1.7; color: var(--on-dark-72); }
.fl-help__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Features */
.fl-feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.fl-feat li { position: relative; padding: 16px 16px; padding-inline-start: 48px; background: var(--white); border: 1px solid var(--mist); font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.fl-feat li::before { content: ""; position: absolute; inset-inline-start: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat, var(--current); }
@media (max-width: 520px) { .fl-cap__item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .fl-cap__icon { width: 38px; height: 38px; } }

/* ================= Projects page v2 (2026-10-07) ================= */
.page-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.prj-sum2 { position: relative; z-index: 3; margin-top: -44px; }
.prj-sum2 .prj-sum__stats { box-shadow: 0 20px 40px -28px rgba(11, 11, 12, .45); }
.prj-finder { margin: 0 0 28px; }
.prj__facts { flex-wrap: wrap; }
.prj__banks a { display: inline-block; padding: 5px 10px; margin: -5px -10px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--mist); text-underline-offset: 3px; }
.prj__banks li:has(a) { border-color: var(--ink); }
.prj__banks a:hover { color: var(--ember); text-decoration-color: var(--voltage); }
.prj__svc { align-self: flex-start; margin-top: auto; padding-top: 16px; min-height: 44px; display: inline-flex; align-items: flex-end; font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.prj__svc:hover { color: var(--ember); }
.prj__k { margin-top: 18px; }
.prj-feat__svc { margin-top: 18px; color: var(--ink); }
.prj-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 20px 24px; background: var(--paper); border: 1px solid var(--mist); }
.prj-next p { font-size: 16px; color: var(--body); }
.prj-next b { color: var(--ink); }
.fl-empty span button { margin-inline-start: 8px; }

/* ================= Clients & sites scroller (2026-10-07) ================= */
.logos { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--mist); }
.logos--dark { border-top-color: var(--on-dark-rule); }
.logos__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.logos__k { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.logos__k span { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--current); color: var(--ink); letter-spacing: 0; }
.logos--dark .logos__k { color: var(--on-dark-62); }
.logos__pause { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--mist); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; }
.logos--dark .logos__pause { background: transparent; border-color: rgba(255, 255, 255, .24); color: var(--white); }
.logos__pause:hover { border-color: var(--ink); }
.logos__pause:focus-visible { outline: 3px solid var(--voltage); outline-offset: 2px; }
.logos__pause .i-play { display: none; }
.logos__pause[aria-pressed="true"] .i-play { display: block; }
.logos__pause[aria-pressed="true"] .i-pause { display: none; }

/* viewport: full-bleed with soft fade at both edges */
.logos__viewport { display: grid; gap: 12px; margin-inline: calc(var(--gutter) * -1); 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); }
.logos__row { overflow: hidden; }
.logos__track { display: flex; width: max-content; animation: logosScroll 46s linear infinite; }
.logos__row--rev .logos__track { animation-direction: reverse; animation-duration: 52s; }
[dir="rtl"] .logos__track { animation-name: logosScrollRtl; }
@keyframes logosScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes logosScrollRtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } }
.logos:hover .logos__track, .logos:focus-within .logos__track, .logos.is-paused .logos__track { animation-play-state: paused; }
.logos__group { display: flex; gap: 12px; margin: 0; padding: 0; padding-inline-end: 12px; list-style: none; }

.logos__item { display: flex; align-items: center; gap: 12px; min-width: 240px; min-height: 64px; padding: 10px 18px 10px 10px; border: 1px solid var(--mist); border-radius: 999px; background: var(--white); color: var(--ink); white-space: nowrap; transition: border-color .25s, background .25s, transform .25s var(--ease); }
[dir="rtl"] .logos__item { padding: 10px 10px 10px 18px; }
.section--white .logos__item, .home-prj .logos__item { background: var(--paper); }
.logos__item:hover { border-color: var(--ink); transform: translateY(-2px); }
.logos__item:focus-visible { outline: 3px solid var(--voltage); outline-offset: 2px; }
.logos__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(251, 180, 23, .18); color: var(--ink); transition: background .25s; }
.logos__item:hover .logos__icon { background: var(--current); }
.logos__txt { display: grid; gap: 1px; }
.logos__txt b { font-family: var(--f-display); font-size: 15px; font-weight: 700; }
.logos__txt small { font-size: 12px; color: var(--muted); }
.logos--dark .logos__item { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: var(--white); }
.logos--dark .logos__item:hover { border-color: rgba(255, 255, 255, .5); }
.logos--dark .logos__icon { background: rgba(251, 180, 23, .16); color: var(--amber); }
.logos--dark .logos__item:hover .logos__icon { background: var(--current); color: var(--ink); }
.logos--dark .logos__txt small { color: var(--on-dark-62); }

/* No motion: static, wrapped, no clones */
@media (prefers-reduced-motion: reduce) {
  .logos__viewport { margin-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .logos__track { width: auto; animation: none; }
  .logos__group { flex-wrap: wrap; padding: 0; }
  .logos__group--clone, .logos__pause { display: none; }
}
.logos.is-offscreen .logos__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .logos__group li[aria-hidden] { display: none; } }

/* ================= Fleet model pages v2 (2026-10-07): facts, datasheet downloads, phone action bar ================= */
.model-hero__img { position: relative; }
.model-hero__badge { position: absolute; top: 14px; inset-inline-start: 14px; padding: 6px 12px; background: var(--ink); font-weight: 700; font-size: 12px; color: var(--amber); }
.model-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 24px 0 0; background: var(--mist); border: 1px solid var(--mist); }
.model-facts > div { padding: 14px 16px; background: var(--white); }
.model-facts__wide { grid-column: 1 / -1; }
.model-facts dt { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.model-facts dd { margin: 6px 0 0; font-weight: 600; font-size: 16px; color: var(--ink); }
[dir="rtl"] .model-facts dd[dir="ltr"] { text-align: right; }
.model-facts ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.model-facts li { padding: 4px 12px; border: 1px solid var(--mist); border-radius: 999px; background: var(--paper); font-size: 13px; }
.model-dl { display: inline-flex; align-items: center; gap: 10px; }
.model-dl small { padding-inline-start: 10px; border-inline-start: 1px solid currentColor; font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: .7; text-transform: none; }
.model-hero__call { margin-top: 16px; font-size: 15px; color: var(--body); }
.model-hero__call a { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--voltage); }
.ds-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--mist); background: var(--paper); }
.ds-card__icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 12px; background: var(--current); color: var(--ink); }
.ds-card > div { flex: 1 1 220px; display: grid; gap: 4px; }
.ds-card b { font-family: var(--f-display); font-size: 16px; color: var(--ink); }
.ds-card span { font-size: 14px; line-height: 1.5; color: var(--body); }
.model-svc { margin-top: 22px; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }

/* phone action bar */
.model-bar { position: fixed; z-index: 55; inset-inline: 12px; bottom: 12px; display: flex; gap: 8px; padding: 8px; background: rgba(11, 11, 12, .94); backdrop-filter: blur(10px); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(11, 11, 12, .6); transform: translateY(140%); transition: transform .35s var(--ease); }
.model-bar[hidden] { display: none; }
.model-bar.is-shown { transform: none; }
.model-bar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 52px; min-height: 48px; padding: 0 14px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-weight: 700; font-size: 14px; color: var(--white); }
.model-bar__btn--main { flex: 1; background: var(--current); color: var(--ink); }
.model-bar__btn svg { width: 20px; height: 20px; }
.model-bar__btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
@media (min-width: 900px) { .model-bar { display: none !important; } }
@media (max-width: 899px) { body:has(.model-bar.is-shown) .footer { padding-bottom: 76px; } }
@media (prefers-reduced-motion: reduce) { .model-bar { transition: none; } }

/* Downloads: company profile + datasheets per unit */
.dl-list--wide { max-width: none; margin-top: 16px; }
.dl-sheets { margin-top: clamp(40px, 5vw, 64px); }
.dl-sheets__lede { margin-top: 10px; max-width: 60ch; font-size: 16px; color: var(--body); }
.dl-sheets__k { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dl-sheets__k span { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--current); color: var(--ink); letter-spacing: 0; }
.dl-sheets__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .dl-sheets__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1150px) { .dl-sheets__list { grid-template-columns: repeat(3, 1fr); } }
.dl-sheet { display: flex; align-items: center; gap: 10px; padding: 8px; padding-inline-end: 10px; background: var(--white); border: 1px solid var(--mist); }
.dl-sheet__info { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.dl-sheet__info img { width: 56px; height: 56px; object-fit: contain; background: #F8F5F5; flex: none; }
.dl-sheet__info span { display: grid; min-width: 0; }
.dl-sheet__info b { font-size: 15px; }
.dl-sheet__info small { font-size: 12px; color: var(--muted); }
[dir="rtl"] .dl-sheet__info b, [dir="rtl"] .dl-sheet__info small { text-align: right; }
.dl-sheet__info:hover b { color: var(--ember); }
.dl-sheet__btns { display: flex; gap: 6px; flex: none; }
.dl-sheet__btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 52px; min-height: 44px; padding: 0 10px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font-weight: 700; font-size: 13px; }
.dl-sheet__btn + .dl-sheet__btn { background: var(--white); color: var(--ink); }
.dl-sheet__btn:hover { background: var(--current); border-color: transparent; color: var(--ink); }
.dl-sheet__btn svg { width: 16px; height: 16px; }
.dl-sheet__btn:focus-visible, .dl-sheet__info:focus-visible { outline: 3px solid var(--voltage); outline-offset: 2px; }
.ds-card .model-dl span, .ds-card .model-dl small { color: inherit; font-size: inherit; line-height: 1; }
.ds-card .model-dl small { font-size: 11px; }

/* ================= Home "What we do" v4 (2026-10-07): tab showcase, AI illustrations ================= */
.wwd-sec__aside { display: grid; gap: 16px; justify-items: start; max-width: 44ch; }
.wwd-sec__aside p { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; color: var(--body); }
.wwd { display: grid; gap: 20px; }
/* without JS: tabs hidden, all panels stacked */
.wwd:not(.is-ready) .wwd__tabs { display: none; }
.wwd:not(.is-ready) .wwd__panels { display: grid; gap: 20px; }
@media (min-width: 1000px) { .wwd.is-ready { grid-template-columns: minmax(280px, .9fr) minmax(0, 2.1fr); align-items: start; gap: 28px; } }
.wwd__tabs { display: flex; flex-direction: column; gap: 8px; }
.wwd__tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--mist); background: var(--white); font: inherit; text-align: start; color: var(--ink); cursor: pointer; position: relative; overflow: hidden; transition: border-color .25s, background .25s, transform .25s var(--ease); }
.wwd__tab::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--current); transform: scaleY(0); transition: transform .3s var(--ease); }
.wwd__tab:hover { border-color: var(--ink); }
.wwd__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.wwd__tab[aria-selected="true"]::before { transform: scaleY(1); }
.wwd__tab:focus-visible { outline: 3px solid var(--voltage); outline-offset: 2px; }
.wwd__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(251, 180, 23, .18); color: var(--ink); transition: background .25s; }
.wwd__tab[aria-selected="true"] .wwd__icon { background: var(--current); }
.wwd__tt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.wwd__n { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ember); }
.wwd__tab[aria-selected="true"] .wwd__n { color: var(--amber); }
.wwd__tt b { font-family: var(--f-display); font-size: 16px; line-height: 1.25; }
.wwd__tt small { font-size: 12px; color: var(--muted); }
.wwd__tab[aria-selected="true"] .wwd__tt small { color: var(--on-dark-62); }
.wwd__arrow { opacity: 0; transition: opacity .2s, transform .25s var(--ease); }
.wwd__tab[aria-selected="true"] .wwd__arrow { opacity: 1; transform: translateX(4px); }
[dir="rtl"] .wwd__tab[aria-selected="true"] .wwd__arrow { transform: translateX(-4px); }

.wwd__panel { display: grid; background: var(--white); border: 1px solid var(--mist); }
.wwd.is-ready .wwd__panel:not(.is-active) { display: none; }
.wwd.is-ready .wwd__panel.is-active { animation: wwdIn .45s var(--ease) both; }
@keyframes wwdIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 1300px) { .wwd__panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.wwd__panel:focus-visible { outline: 3px solid var(--voltage); outline-offset: 2px; }
.wwd__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--graphite); }
@media (min-width: 1300px) { .wwd__media { aspect-ratio: auto; min-height: 100%; } }
.wwd__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s linear; }
.wwd.is-ready .wwd__panel.is-active .wwd__media img { transform: scale(1.06); }
.wwd__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 11, 12, .55)); pointer-events: none; }
.wwd__media figcaption { position: absolute; z-index: 1; inset-inline-start: 16px; bottom: 14px; display: flex; gap: 10px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.wwd__media figcaption span { padding: 3px 8px; background: var(--current); color: var(--ink); letter-spacing: .06em; }
.wwd__body { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); }
.wwd__kicker { font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ember); }
.wwd__title { margin-top: 8px; font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; color: var(--ink); }
.wwd__text { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--body); }
.wwd__incl { display: grid; margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--mist); }
.wwd__incl li { position: relative; padding: 9px 0; padding-inline-start: 28px; border-bottom: 1px solid var(--mist); font-size: 14px; line-height: 1.45; color: var(--ink); }
.wwd__incl li::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat, var(--current); }
.wwd__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; padding-top: 22px; }
.wwd__more { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }

/* tablet / phone: tabs become a horizontal chip rail */
@media (max-width: 999px) {
  .wwd__tabs { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; }
  .wwd__tabs::-webkit-scrollbar { display: none; }
  .wwd__tab { flex: 0 0 auto; width: auto; scroll-snap-align: start; padding: 10px 14px; border-radius: 999px; gap: 10px; }
  .wwd__tab::before, .wwd__arrow, .wwd__tt small { display: none; }
  .wwd__icon { width: 34px; height: 34px; }
  .wwd__tt { display: flex; align-items: center; gap: 8px; }
  .wwd__tt b { font-size: 14px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .wwd.is-ready .wwd__panel.is-active { animation: none; } .wwd__media img, .wwd__tab, .wwd__tab::before { transition: none; } .wwd.is-ready .wwd__panel.is-active .wwd__media img { transform: none; } }

/* What we do v4.1: image full width on top at its natural 16:9 (no tall crop, no zoom), text in two columns below */
@media (min-width: 1300px) { .wwd__panel { grid-template-columns: 1fr; } .wwd__media { aspect-ratio: 16 / 9; min-height: 0; } }
.wwd__media { aspect-ratio: 16 / 9; }
.wwd.is-ready .wwd__panel.is-active .wwd__media img, .wwd__media img { transform: none; transition: none; }
@media (min-width: 760px) { .wwd__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; } .wwd__body > .wwd__kicker, .wwd__body > .wwd__title, .wwd__body > .wwd__text { grid-column: 1; } .wwd__body > .wwd__incl { grid-column: 2; grid-row: 1 / span 4; margin-top: 4px; } .wwd__body > .wwd__cta { grid-column: 1; margin-top: 0; padding-top: 18px; } }

/* What we do: auto-rotation progress + pause control */
.wwd__nav { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wwd:not(.is-ready) .wwd__nav { display: none; }
.wwd__timer { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--current); transform: scaleX(0); transform-origin: left; pointer-events: none; }
[dir="rtl"] .wwd__timer { transform-origin: right; }
.wwd__tab.is-timing .wwd__timer { animation: wwdTimer 7s linear both; }
.wwd.is-paused .wwd__tab.is-timing .wwd__timer { animation-play-state: paused; }
.wwd.is-stopped .wwd__timer { display: none; }
@keyframes wwdTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wwd__auto { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--mist); border-radius: 999px; background: var(--white); font: inherit; font-weight: 600; font-size: 13px; color: var(--ink); cursor: pointer; }
.wwd__auto[hidden] { display: none; }
.wwd__auto:hover { border-color: var(--ink); }
.wwd__auto:focus-visible { outline: 3px solid var(--voltage); outline-offset: 2px; }
.wwd__auto .i-play { display: none; }
.wwd__auto[aria-pressed="true"] .i-play { display: block; }
.wwd__auto[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 999px) { .wwd__tab .wwd__timer { inset-inline: 14px; bottom: 4px; height: 2px; border-radius: 2px; } .wwd__auto { align-self: flex-end; } }
@media (prefers-reduced-motion: reduce) { .wwd__timer { display: none; } }

/* ================= Home About v3 (2026-10-07) ================= */
.hab__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 981px) { .hab__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.hab__media { position: relative; padding-bottom: 48px; padding-inline-end: 72px; }
.hab__main { aspect-ratio: 4 / 5; overflow: hidden; background: var(--graphite); }
.hab__main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hab__unit { position: absolute; bottom: 0; inset-inline-end: 0; width: 46%; max-width: 240px; display: grid; background: var(--white); border: 1px solid var(--mist); box-shadow: 0 24px 48px -24px rgba(11, 11, 12, .45); color: var(--ink); transition: transform .3s var(--ease); }
.hab__unit:hover { transform: translateY(-4px); }
.hab__unit:focus-visible { outline: 3px solid var(--voltage); outline-offset: 3px; }
.hab__unit img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #F8F5F5; }
.hab__unit span { display: grid; gap: 2px; padding: 12px 14px; font-size: 12px; line-height: 1.35; color: var(--body); border-top: 1px solid var(--mist); }
.hab__unit b { font-family: var(--f-display); font-size: 28px; line-height: 1; background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hab__badge { position: absolute; top: 16px; inset-inline-start: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(11, 11, 12, .78); backdrop-filter: blur(6px); font-size: 13px; font-weight: 600; color: var(--white); }
.hab__badge svg { color: var(--amber); }
.hab__lede { margin-top: 18px; max-width: 58ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: var(--body); }
.hab__facts { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.hab__facts li { display: flex; gap: 14px; align-items: flex-start; }
.hab__ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(251, 180, 23, .18); color: var(--ink); }
.hab__facts li > span:last-child { display: grid; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--body); }
.hab__facts b { font-family: var(--f-display); font-size: 16px; color: var(--ink); }
[dir="rtl"] .hab__facts span[dir="ltr"] { text-align: right; }
.hab__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: none; }
.hab__flow li { position: relative; display: grid; gap: 6px; padding: 14px 12px 0 0; border-top: 3px solid var(--mist); font-family: var(--f-display); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ink); }
[dir="rtl"] .hab__flow li { padding: 14px 0 0 12px; }
.hab__flow li:first-child { border-top-color: var(--voltage); }
.hab__flow li:nth-child(2) { border-top-color: #F87C12; }
.hab__flow li:nth-child(3) { border-top-color: var(--amber); }
.hab__flow li span { font-size: 11px; letter-spacing: .12em; color: var(--ember); }
.hab__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* condensed vision / mission / values */
.hab__vmv { display: grid; gap: 1px; margin-top: clamp(40px, 5vw, 64px); background: var(--mist); border: 1px solid var(--mist); }
@media (min-width: 900px) { .hab__vmv { grid-template-columns: 1fr 1fr 1fr; } }
.hab__vm { padding: 22px 24px; background: var(--paper); }
.hab__vm p:not(.hab__k) { margin-top: 8px; font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--ink); }
.hab__k { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.hab__vm--values { background: var(--ink); }
.hab__vm--values .hab__k { color: var(--amber); }
.hab__vm--values ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.hab__vm--values li { padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--white); }
.hab__more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: var(--white); font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.hab__more:hover { color: var(--ember); }
@media (max-width: 620px) {
  .hab__media { padding-inline-end: 0; padding-bottom: 0; }
  .hab__main { aspect-ratio: 4 / 3; }
  .hab__unit { position: relative; width: 100%; max-width: none; grid-template-columns: 96px 1fr; align-items: center; margin-top: 12px; }
  .hab__unit span { border-top: 0; border-inline-start: 1px solid var(--mist); }
  .hab__flow li { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .hab__unit { transition: none; } .hab__unit:hover { transform: none; } }
.hab__unit picture, .hab__main picture { display: block; }
.hab__unit img { height: auto; }
.hab__main picture { height: 100%; }
.hab__unit { max-width: 280px; width: 50%; }
.hab__unit img { object-fit: cover; background: #EDEDED; }
@media (max-width: 620px) { .hab__unit { width: 100%; max-width: none; grid-template-columns: 140px 1fr; } }
/* About v3.1: no product image — photo full width of its column, stat as a dark tile on the photo */
.hab__media { padding: 0; }
.hab__stat { position: absolute; bottom: 16px; inset-inline-end: 16px; display: grid; gap: 4px; max-width: 180px; padding: 14px 16px; background: var(--ink); color: var(--on-dark-72); font-size: 13px; line-height: 1.35; box-shadow: 0 16px 32px -16px rgba(11, 11, 12, .6); }
.hab__stat b { font-family: var(--f-display); font-size: 34px; line-height: 1; background: var(--current); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 620px) { .hab__stat { bottom: 12px; inset-inline-end: 12px; padding: 10px 12px; } .hab__stat b { font-size: 26px; } }
@media (max-width: 620px) { .hab__stat { position: static; max-width: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; box-shadow: none; } .hab__stat b { font-size: 26px; } }

/* --------------------------------------------------------------------------
   WhatsApp chat button (every page, bottom corner)
   -------------------------------------------------------------------------- */
.wa-float { position: fixed; z-index: 60; inset-inline-end: 20px; bottom: 20px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 14px 32px -10px rgba(11, 11, 12, .55); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -10px rgba(11, 11, 12, .6); }
.wa-float:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (max-width: 899px) { .wa-float { width: 52px; height: 52px; inset-inline-end: 14px; bottom: 14px; } body:has(.model-bar.is-shown) .wa-float { bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } .wa-float:hover { transform: none; } }
.ct-tile__alt { font-family: var(--f-display); font-weight: 600; font-size: 15px; opacity: .8; }
[dir="rtl"] .ct-tile__alt { text-align: right; }
@media print { .wa-float { display: none; } }
.footer__legal { padding-inline-end: 76px; }
@media (max-width: 899px) { .footer__legal { padding-inline-end: 0; padding-bottom: 64px; } }