/* =========================================================================
   HIGH VOLTAGE INDUSTRY — hv.com.sa
   One stylesheet serves BOTH English (left-to-right) and Arabic
   (right-to-left).

   That is why every directional rule below uses a LOGICAL property
   (margin-inline-start, padding-inline, border-inline-end, text-align: start)
   instead of left/right. The browser flips them automatically from the
   dir="rtl" on <html>. Writing `left` here would silently break Arabic.
   ========================================================================= */

/* --- Brand tokens --------------------------------------------------------
   The two brand colours come from the content document's brand notes.
   Everything else is derived from them.                                    */

:root {
  --navy: #122457;
  --navy-deep: #0c1839;
  --navy-soft: #1c3374;
  --orange: #f57f2a;
  --orange-dark: #d8661a;

  --ink: #16202f;
  --muted: #5a6577;
  --line: #dde2ea;
  --bg: #ffffff;
  --bg-alt: #f4f6fa;

  --wrap: 1200px;
  --wrap-pad: clamp(1.25rem, 5vw, 2.5rem);
  --radius: 4px;

  --header-h: 10.5rem;
  --logo-h: 8.5rem;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Barlow Condensed", "Inter", system-ui, sans-serif;

  --shadow: 0 1px 2px rgb(18 36 87 / 6%), 0 8px 24px rgb(18 36 87 / 8%);
}

/* Arabic uses one typeface for everything — Tajawal has the weight range to
   carry headings, and a condensed Latin display face has no Arabic cut. */
html[lang="ar"] {
  --font-body: "Tajawal", system-ui, sans-serif;
  --font-head: "Tajawal", system-ui, sans-serif;
}

/* --- Reset --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Scroll anchoring OFF, and the header is the whole reason.

     The bar is in the flow above everything, so when it shrinks the page
     below it gets shorter. Anchoring exists to hide exactly that — the
     browser quietly shifts the scroll position to keep what you are reading
     still. Here it fed a loop: shrinking moved the scroll position by about
     40px, that carried it back across the threshold that decides the bar's
     height, which grew the bar, which moved the scroll position again. The
     bar flickered between its two sizes for as long as you sat there.

     Nothing else on the page wants anchoring: every image carries width and
     height, so nothing reflows late and there is no jump for it to absorb.
     The thresholds in site.js are the second line of defence — see the note
     there on why the gap between them is wider than the bar's own travel. */
  overflow-anchor: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  line-height: 1.15;
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}

/* Latin-script languages only. Barlow Condensed is already tight; a hair of
   tracking stops the caps runs closing up. Arabic is set in Tajawal and must
   not be tracked at all. */
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3 {
  letter-spacing: 0.01em;
}

p {
  margin: 0;
}

ul,
ol,
dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

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

/* --- Moving between pages ---------------------------------------------------
   Every page here is its own HTML document, and the browser's own answer to
   that is a white flash between the two. This replaces it with a cross-fade:
   the old page fades out, the new one fades in and rises a little, and the
   header does not take part.

   The header is left out on purpose. It carries the lockup and it is the same
   on all seven pages, so fading it into a copy of itself only makes it
   flicker. Naming it lifts it out of the page snapshot into its own, and the
   browser then animates it from where it was to where it lands — which, when
   both pages sit at the top, is nowhere. It simply stays put while the page
   underneath changes.

   The names have to be unique in the document; .site-header is one element.

   This is decoration and nothing depends on it. A browser without
   cross-document view transitions ignores the whole block and navigates the
   way it always did.                                                       */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-page-out 0.22s ease both;
}

/* Starting the new page slightly late keeps the two from being fully opaque
   at the same moment, which is what makes a cross-fade read as muddy. */
::view-transition-new(root) {
  animation: vt-page-in 0.32s 0.06s ease both;
}

@keyframes vt-page-out {
  to {
    opacity: 0;
  }
}

/* The rise is vertical, so it needs no mirroring for Arabic — a horizontal
   slide would have to be flipped, and would fight the direction the reader
   is already moving in. */
@keyframes vt-page-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The reset above reaches elements; these pseudo-elements are outside it,
     so the transition has to be turned off in its own terms. Two ways, because
     the nested at-rule is newer than the pseudo-elements it governs and is not
     everywhere yet — a browser that ignores it still reads the rules below. */
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* --- Layout helpers ------------------------------------------------------ */

.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section-alt {
  background: var(--bg-alt);
}

.section-intro {
  max-inline-size: 62ch;
  margin-block-end: 2.5rem;
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-transform: uppercase;
  margin-block-end: 1.75rem;
  padding-block-end: 0.75rem;
  border-block-end: 3px solid var(--orange);
  display: inline-block;
}

/* An uppercase transform on Arabic does nothing useful and can distort
   letterforms, so it is switched off. */
html[lang="ar"] .section-title,
html[lang="ar"] .eyebrow,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  text-transform: none;
}

.eyebrow {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-block-end: 0.75rem;
}

.lede {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: var(--muted);
  max-inline-size: 68ch;
}

.rule {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin-block: 2.5rem;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 1rem;
  z-index: 100;
  background: var(--orange);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: 1rem;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

html[lang="ar"] .btn {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

.btn-accent {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.btn-accent:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

.btn-ghost {
  background: transparent;
  border-color: rgb(255 255 255 / 55%);
  color: #fff;
}

.btn-ghost:hover {
  background: rgb(255 255 255 / 12%);
  border-color: #fff;
}

/* Sits on the orange band, so it inverts to white. */
.btn-onaccent {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
  flex-shrink: 0;
}

.btn-onaccent:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* --- Header ---------------------------------------------------------------
   Menu button, logo, globe. Nothing else. Every navigation link lives in the
   side panel further down, at every screen size — which is what lets the logo
   be large without the menu fighting it for room.                           */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: #fff;
  border-block-end: 1px solid var(--line);
  /* Kept out of the page cross-fade — see "Moving between pages" above. */
  view-transition-name: site-header;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-block-size: var(--header-h);
  transition: min-block-size 0.28s ease;
}

/* The logo sits at the start of the bar — left in English, right in Arabic —
   and the controls are pushed to the far end. It is the supplied lockup, used
   whole. */
.brand {
  display: flex;
  align-items: center;
  margin-inline-end: auto;
  text-decoration: none;
}

.brand-logo {
  display: block;
  block-size: var(--logo-h);
  transition: block-size 0.28s ease;
  inline-size: auto;
  max-inline-size: 100%;
  /* Never let a narrow bar squash the artwork — it letterboxes instead. */
  object-fit: contain;
  object-position: left center;
}

html[dir="rtl"] .brand-logo {
  object-position: right center;
}

/* --- The header shrinks once the page is scrolled ---------------------------
   The bar is 10.5rem tall so the owner's lockup can be read at full size,
   which is right at the top of a page and costly everywhere else — it was
   holding a quarter of a laptop screen for the whole scroll.

   Every consumer of the height reads --header-h, including the side panel and
   its preview, so overriding the two custom properties moves all of them at
   once. The transitions live on the properties that consume the variables,
   because custom properties themselves do not transition.

   Specificity note: the steps below set these on :root (0,1,0) and this sets
   them on body.is-scrolled (0,1,1), so the scrolled state wins at every
   width without needing to be repeated inside each media query. */
body.is-scrolled {
  --header-h: 4.75rem;
  --logo-h: 3.25rem;
}

@media (max-width: 699px) {
  body.is-scrolled {
    --header-h: 4rem;
    --logo-h: 2.6rem;
  }
}

/* A shrinking bar is motion, and someone who has asked for less of it should
   get the small header immediately rather than a slide. */
@media (prefers-reduced-motion: reduce) {
  .header-inner,
  .brand-logo {
    transition: none;
  }
}

/* The lockup is 3:1, and it shares the bar with the menu button and the
   globe. Each step down is the largest height whose width still fits beside
   them at that screen size. */
@media (max-width: 999px) {
  :root {
    --logo-h: 6rem;
    --header-h: 8rem;
  }
}

@media (max-width: 699px) {
  :root {
    --logo-h: 4.25rem;
    --header-h: 6rem;
  }
}

@media (max-width: 400px) {
  :root {
    --logo-h: 3rem;
    --header-h: 4.75rem;
  }
}

/* Below this the bar cannot hold a 3:1 lockup beside the menu button and the
   globe at any larger size without squeezing the artwork. */
@media (max-width: 360px) {
  :root {
    --logo-h: 2.5rem;
    --header-h: 4.25rem;
  }
}

/* --- Menu button ---------------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  margin-inline-start: -0.75rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--navy);
  font: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle:hover {
  color: var(--orange);
}

.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  inline-size: 1.5rem;
}

.nav-toggle-bars span {
  display: block;
  block-size: 2px;
  background: currentColor;
}

.nav-toggle-text {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[lang="ar"] .nav-toggle-text {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* The word is a courtesy on a wide screen; the icon carries it on a phone,
   where the accessible name comes from .nav-title inside the panel. */
@media (max-width: 560px) {
  .nav-toggle-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Language dropdown ---------------------------------------------------- */

.lang {
  position: relative;
  flex-shrink: 0;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy);
  cursor: pointer;
}

.lang-btn:hover,
.lang-btn[aria-expanded="true"] {
  color: var(--orange);
  border-color: var(--orange);
}

.lang-btn svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: 60;
  min-inline-size: 11rem;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.lang-menu a {
  display: block;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.lang-menu a:hover {
  background: var(--bg-alt);
}

/* The language you are already reading. */
.lang-menu a[aria-current="true"] {
  color: var(--orange);
  font-weight: 700;
}

.lang-menu a[aria-current="true"]::after {
  content: "✓";
  margin-inline-start: 0.5rem;
}

/* --- Side panel ------------------------------------------------------------
   Slides in from the same edge the menu button sits on: the inline start, so
   left in English and right in Arabic, with no extra markup.               */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(12 24 57 / 45%);
}

.site-nav {
  position: fixed;
  inset-block: var(--header-h) 0;
  inset-inline-start: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  inline-size: min(24rem, 88vw);
  background: #fff;
  border-inline-end: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow-y: auto;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0.22s;
}

/* translateX is a physical transform — the one place a logical property
   cannot do the job, so right-to-left needs the opposite sign. */
html[dir="rtl"] .site-nav {
  transform: translateX(100%);
}

body.nav-open .site-nav {
  transform: translateX(0);
  visibility: visible;
}

.nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-block-end: 1px solid var(--line);
}

.nav-title {
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

html[lang="ar"] .nav-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
}

.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--navy);
  cursor: pointer;
}

.nav-close:hover {
  color: var(--orange);
}

.nav-close svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.nav-list {
  flex-grow: 1;
  padding: 0.5rem 0;
}

.nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-inline-start: 3px solid transparent;
}

html[lang="ar"] .nav-list a {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 1.125rem;
}

.nav-list a:hover {
  background: var(--bg-alt);
  border-inline-start-color: var(--line);
}

.nav-list a[aria-current="page"] {
  color: var(--orange);
  border-inline-start-color: var(--orange);
}

.nav-list .arrow {
  color: var(--orange);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.nav-list a:hover .arrow,
.nav-list a[aria-current="page"] .arrow {
  opacity: 1;
}

.nav-foot {
  padding: 1.5rem;
  border-block-start: 1px solid var(--line);
}

.nav-foot .btn {
  inline-size: 100%;
}

/* The tagline closes the panel, as the brand notes in the content document
   ask for. */
.nav-tagline {
  margin-block-start: 1rem;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

html[lang="ar"] .nav-tagline {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
}

/* --- Menu preview -----------------------------------------------------------
   Hovering a menu item shows that page's own header picture, a line about
   what is on it, and a prompt to open it.

   It sits beside the panel rather than inside it, because .site-nav is a
   scroll container and a scroll container clips both axes — anything hanging
   out of its side would be cut off.

   Decoration only. The seven links work with this never appearing, and below
   the width where it has room it is switched off completely rather than
   squeezed.                                                               */

.nav-preview {
  position: fixed;
  inset-block: var(--header-h) 0;
  /* butted against the panel's outer edge, in whichever direction that is */
  inset-inline-start: min(24rem, 88vw);
  z-index: 44;
  inline-size: 22rem;
  display: none;
  pointer-events: none;
}

.np {
  position: absolute;
  text-decoration: none;
  color: inherit;
  inset-block-start: 2.5rem;
  inset-inline-start: 1.5rem;
  inline-size: 20rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgb(12 24 57 / 22%);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s,
              border-color 0.2s ease;
}

.np.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* Only the card on screen takes the pointer; the panel around it stays
     transparent to it so the page behind is still reachable. */
  pointer-events: auto;
}

.np:hover {
  border-color: var(--orange);
}

.np:hover .np-more .arrow {
  transform: translateX(6px);
}

html[dir="rtl"] .np:hover .np-more .arrow {
  transform: translateX(-6px);
}

.np img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.np-body {
  padding: 1rem 1.15rem 1.15rem;
}

.np-body h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-block-end: 0.45rem;
}

html[lang="ar"] .np-body h3 {
  text-transform: none;
  letter-spacing: 0;
}

.np-body p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  margin-block-end: 0.85rem;
}

.np-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
}

html[lang="ar"] .np-more {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* The arrow already flips for right-to-left elsewhere in this stylesheet. */
.np-more .arrow {
  transition: transform 0.25s ease;
}

.np.is-on .np-more .arrow {
  transform: translateX(3px);
}

html[dir="rtl"] .np.is-on .np-more .arrow {
  transform: translateX(-3px);
}

/* Only when the panel is open, and only where there is room for it beside
   the panel without covering the page. 24rem panel + 22rem preview + margin. */
@media (min-width: 1100px) {
  body.nav-open .nav-preview {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np,
  .np-more .arrow {
    transition: none;
  }

  .np {
    transform: none;
  }

  .np.is-on .np-more .arrow {
    transform: none;
  }
}

/* --- Hero ---------------------------------------------------------------- */

/* The photograph is a licensed stock substation shot, not our own plant — see IMAGE-CREDITS.md
   at the repo root. It is atmosphere behind the words, so a heavy
   navy wash sits over it: the headline has to stay readable, and the picture
   must not read as a photo OF this company's facility. */
.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  background:
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/assets/img/hero-video-poster-sm.jpg");
  background-size: cover;
  background-position: center;
}

@media (min-width: 900px) {
  .hero::before {
    background-image: url("/assets/img/hero-video-poster.jpg");
  }
}

/* Sits between that still and the navy wash. It is only ever given a source
   on a wide screen with motion allowed — see site.js — so on a phone this
   element stays empty and the still behind it is what shows. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

/* The wash is strongest where the text sits and eases off towards the far
   edge, so the photograph is still visible. `to left` in right-to-left
   because the text moves to the other side — a logical gradient direction
   does not exist, so this is switched explicitly. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgb(12 24 57 / 96%) 0%,
    rgb(18 36 87 / 90%) 45%,
    rgb(18 36 87 / 62%) 100%
  );
}

html[dir="rtl"] .hero::after {
  background: linear-gradient(
    to left,
    rgb(12 24 57 / 96%) 0%,
    rgb(18 36 87 / 90%) 45%,
    rgb(18 36 87 / 62%) 100%
  );
}

.hero-inner {
  max-inline-size: 60ch;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  text-transform: uppercase;
}

html[lang="ar"] .hero h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.3;
}

.hero .lede {
  color: rgb(255 255 255 / 82%);
  margin-block-start: 1.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-start: 2.25rem;
}

/* On a phone the two calls to action end up one above the other, and two
   stacked buttons of different widths read as a mistake rather than as a
   hierarchy — "Explore our offering" is the longer label, so the secondary
   button was coming out 38px wider than the primary one.

   One per row and stretched, so they are the same width by construction and a
   thumb gets the whole width to aim at. The stack is forced here rather than
   left to flex-wrap, because wrapping happens at whatever width the labels
   happen to need — translate or reword one and the layout moves. This does
   not. */
@media (max-width: 479px) {
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* --- Page header (inner pages) ------------------------------------------- */

.page-header {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* Only pages that set `headerImg` get a photograph; the rest keep the plain
   navy band. Same treatment as the hero — the picture is atmosphere under a
   heavy wash, which is also what keeps the headline readable. */
.page-header.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--header-img);
  background-size: cover;
  background-position: center;
}

.page-header.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgb(12 24 57 / 95%) 0%,
    rgb(18 36 87 / 89%) 50%,
    rgb(18 36 87 / 66%) 100%
  );
}

/* The wash is heaviest under the text, so it has to start from the other side
   in Arabic. CSS gradients have no logical direction to do this for us. */
html[dir="rtl"] .page-header.has-image::after {
  background: linear-gradient(
    to left,
    rgb(12 24 57 / 95%) 0%,
    rgb(18 36 87 / 89%) 50%,
    rgb(18 36 87 / 66%) 100%
  );
}

.page-header h1,
.page-header h2 {
  color: #fff;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  text-transform: uppercase;
}

html[lang="ar"] .page-header h1 {
  line-height: 1.35;
}

.page-header .lede {
  color: rgb(255 255 255 / 82%);
  margin-block-start: 1rem;
}

/* --- Statistics strip ----------------------------------------------------
   Four figures under the hero, divided by hairlines.

   The cells are padded on BOTH sides. They used to be padded on one only,
   which put every figure hard against the rule to its left in English — and
   because padding-inline-end flips with the writing direction, Arabic got the
   clearance and English got none. A one-sided inset cannot be right in both
   directions.

   Padding both sides would normally push the first figure off the page's own
   column. So the band pulls its own inset back by exactly what the cells add,
   and the figures land on the column line again. That is why it is done with
   a token rather than a repeated clamp: the two have to agree, and this way
   they cannot drift apart.

   It is done on the band and not with :first-child because the grid reflows to
   three columns, then two, then one — and at two columns the third cell starts
   a row without being anybody's first child.                                */

.stats {
  background: var(--bg-alt);
  border-block-end: 1px solid var(--line);
}

.stats-grid {
  /* never wider than the column's own inset, so the pull-back below can never
     drag the band off the side of a narrow screen */
  --stat-pad: min(1.5rem, var(--wrap-pad));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 1px;
  padding-block: 0;
  padding-inline: calc(var(--wrap-pad) - var(--stat-pad));
}

.stat {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  padding-inline: var(--stat-pad);
  border-inline-end: 1px solid var(--line);
}

.stat:last-child {
  border-inline-end: 0;
}

/* --- and they arrive one after another -------------------------------------
   The band sits under the hero, so on a tall screen it is already in view and
   this reads as the page settling; further down a small screen it waits until
   it is scrolled to.

   The hidden state is only ever applied by script (.can-animate), so with
   JavaScript off the four figures are simply there. The stagger follows source
   order, which the grid lays out in the reading direction — so it runs left to
   right in English and right to left in Arabic without a second rule, and the
   movement itself is vertical, which needs no mirroring at all.            */

.stats.can-animate .stat {
  opacity: 0;
}

.stats.is-in .stat {
  animation: stat-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.stats.is-in .stat:nth-child(2) {
  animation-delay: 0.08s;
}

.stats.is-in .stat:nth-child(3) {
  animation-delay: 0.16s;
}

.stats.is-in .stat:nth-child(4) {
  animation-delay: 0.24s;
}

@keyframes stat-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats.can-animate .stat {
    opacity: 1;
  }

  .stats.is-in .stat {
    animation: none;
  }
}

.stat-value {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  unicode-bidi: plaintext;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--muted);
  margin-block-start: 0.35rem;
}

/* --- Cards --------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.5rem;
}

.card-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--orange);
  border-radius: var(--radius);
}

/* A card that leads with a picture: the image spans the full width and the
   orange rule moves from the top of the card to the foot of the image. */
.card.has-image {
  padding: 0 0 1.75rem;
  overflow: hidden;
  border-block-start: 1px solid var(--line);
}

.card.has-image img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-block-end: 3px solid var(--orange);
  margin-block-end: 0.5rem;
}

.card.has-image > :not(img) {
  margin-inline: 1.75rem;
}

.card-plain {
  border-block-start-color: var(--navy);
}

.card h3 {
  font-size: 1.25rem;
  text-transform: uppercase;
}

.card p {
  color: var(--muted);
  flex-grow: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--orange);
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

/* The arrow is a physical glyph — flip it so it points the way the reader
   is going. */
html[dir="rtl"] .arrow {
  display: inline-block;
  transform: scaleX(-1);
}

/* --- Feature band (navy) ------------------------------------------------- */

.feature-band {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem);
}

/* Same treatment as the page headers: the picture is texture under a heavy
   wash, and the wash is what keeps the heading readable. */
.feature-band.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--band-img);
  background-size: cover;
  background-position: center;
}

.feature-band.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgb(12 24 57 / 95%) 0%,
    rgb(18 36 87 / 90%) 50%,
    rgb(18 36 87 / 70%) 100%
  );
}

html[dir="rtl"] .feature-band.has-image::after {
  background: linear-gradient(
    to left,
    rgb(12 24 57 / 95%) 0%,
    rgb(18 36 87 / 90%) 50%,
    rgb(18 36 87 / 70%) 100%
  );
}

.feature-inner {
  max-inline-size: 70ch;
}

.feature-band h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  text-transform: uppercase;
  margin-block: 1rem 1rem;
}

.feature-band p {
  color: rgb(255 255 255 / 82%);
  margin-block-end: 1.25rem;
}

.mark {
  display: block;
  inline-size: 3rem;
  block-size: 3rem;
  object-fit: contain;
}

/* The mark is a navy hexagon, so on the two dark bands it would sink into the
   background. A white chip keeps the real brand colours instead of recolouring
   the mark to suit the surface. */
.feature-band .mark,
.footer-brand .mark {
  box-sizing: content-box;
  padding: 0.55rem;
  background: #fff;
  border-radius: 50%;
}

/* --- Production line gallery -----------------------------------------------
   Photographs of our own plant, so unlike every other picture on this site
   they are evidence rather than atmosphere: no wash over them, and a caption
   under each.                                                              */

.gallery-note {
  margin-block-end: 2rem;
}

.line-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 1.5rem;
}

.line-gallery figure {
  margin: 0;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.line-gallery img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.line-gallery figcaption {
  padding: 0.9rem 1.1rem;
  font-size: 0.9375rem;
  color: var(--navy);
  font-weight: 500;
  border-block-start: 3px solid var(--orange);
}

/* --- Lift cards (Services portfolio) ---------------------------------------
   The photograph rises out of a navy frame on hover. Purely a hover effect,
   so nothing is hidden behind it — the label is always readable.          */

/* Fixed three across rather than auto-fit. There are six cards and the owner
   wants them as three and three; auto-fit was packing four on a wide screen
   and leaving a row of two. Stepping down the site's usual 999 / 699 ladder
   keeps the rows even at every width: 3+3, then 2+2+2, then stacked. */
.lift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 999px) {
  .lift-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 699px) {
  .lift-grid {
    grid-template-columns: 1fr;
  }
}

/* The grid stretches every card to its row, but the navy box inside was
   sizing to its own content, so a card whose label wrapped to two lines stood
   taller than its neighbours. It fills the card now. */
.lift {
  perspective: 1000px;
  display: flex;
}

.lift-in {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 1px 3px rgb(18 36 87 / 12%);
}

.lift:hover .lift-in,
.lift:focus-within .lift-in {
  transform: rotateX(4deg) translateZ(8px);
  box-shadow: 0 18px 34px rgb(18 36 87 / 28%);
}

.lift img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  transform: translateZ(0);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.lift:hover img,
.lift:focus-within img {
  transform: translateZ(40px) scale(0.94);
}

/* Two lines are reserved whether the label needs them or not. Without it the
   pictures line up but the boxes below them do not, which reads as sloppier
   than uneven cards. 2 x 1.4 line-height = 2.8em. */
.lift span {
  display: block;
  margin-block-start: 0.7rem;
  min-block-size: 2.8em;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  transform: translateZ(18px);
}

/* A lift and a tilt are exactly the motion someone turns off. */
@media (prefers-reduced-motion: reduce) {
  .lift-in,
  .lift:hover .lift-in,
  .lift:focus-within .lift-in,
  .lift img,
  .lift:hover img,
  .lift:focus-within img,
  .lift span {
    transform: none;
  }
}

/* --- Three pieces of apparatus ----------------------------------------------
   These three lists have been rebuilt more than once. Bullets were dull; bare
   numbers that opened on hover said nothing at all. The answer was not a
   better way to hide the text — it was to stop treating them as lists.

   Each one is now drawn as the thing it actually describes:

     Radiator capabilities   the corrugated fin profile of a radiator panel
     Electrical systems      a single-line busbar diagram with drops
     Technology & equipment  a rack of instrument faceplates

   One rule holds across all three, and it is the lesson from the earlier
   attempts: EVERY ANIMATION HERE IS DECORATIVE. The pulses, sweeps and glows
   live on pseudo-elements and dedicated spans. No word of text depends on an
   animation having run, and no text sits below full opacity at rest.       */

/* --- 1. Fin profile (Radiators — manufacturing capabilities) ----------------
   A radiator panel seen end-on is a row of tall narrow corrugations. Each
   capability is one fin. Hovering fills that fin from the bottom, the way the
   real thing fills with oil.                                              */

.fins {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: 66ch;
  display: grid;
  gap: 0.55rem;
}

/* Each capability is one radiator panel: a ribbed strip of pressed steel with
   the text beside it. The ribs are the real corrugation — look at the
   photographs in the gallery above and it is the same profile. */
.fins li {
  position: relative;
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  align-items: stretch;
  gap: 0 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.fins li:hover,
.fins li:focus-within {
  border-color: #c3cee0;
  box-shadow: var(--shadow);
}

/* the ribbed strip */
.fin {
  position: relative;
  min-block-size: 3.9rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      90deg,
      #ffffff 0 1px,
      #dbe2ee 1px 5px,
      #b6c2d7 5px 7px,
      #dbe2ee 7px 11px
    );
  box-shadow: inset -1px 0 0 var(--line);
}

/* the same ribbing in orange, rising through the strip on hover — the way a
   panel fills with oil */
.fin::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 40%) 0 1px,
      var(--orange) 1px 5px,
      var(--orange-dark) 5px 7px,
      var(--orange) 7px 11px
    );
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.45s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.fins li:hover .fin::after,
.fins li:focus-within .fin::after {
  transform: scaleY(1);
}

.fin-n {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgb(255 255 255 / 75%);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Stays navy on the orange fill. White here measured 2.64:1, under the 3:1
   floor for text this size; navy on the orange is 4.87:1. */
.fins li:hover .fin-n,
.fins li:focus-within .fin-n {
  color: var(--navy-deep);
  text-shadow: 0 1px 0 rgb(255 255 255 / 35%);
}

.fins p {
  align-self: center;
  padding-block: 0.7rem;
  padding-inline-end: 1.1rem;
  color: var(--ink);
  line-height: 1.5;
  transition: transform 0.3s ease;
}

.fins li:hover p,
.fins li:focus-within p {
  transform: translateX(4px);
}

html[dir="rtl"] .fins li:hover p,
html[dir="rtl"] .fins li:focus-within p {
  transform: translateX(-4px);
}

/* --- 2. Service strip (Services — electrical systems) -----------------------
   Seven services in one scrolling row.

   Seven does not divide into an even grid — it was landing 5 + 2 — and a
   single row cannot be uneven, so the row scrolls rather than wraps. The
   marks are drawn here rather than photographed: the pictures that were here
   before were borrowed from other sections and depicted none of these
   services.

   Every label is on screen in full; scrolling moves the row, it does not
   hide anything behind an interaction.                                    */

.strip {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding-block-end: 0.5rem;
  /* the row is a scroll container, so it is focusable and needs to say so */
  border-radius: var(--radius);
}

.strip:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.strip-track {
  display: flex;
  gap: 0.9rem;
  inline-size: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  max-inline-size: none;
}

.strip-track li {
  flex: 0 0 auto;
  inline-size: 13rem;
  scroll-snap-align: start;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 0.7rem 0.7rem 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
              transform 0.25s ease, background-color 0.25s ease;
}

.strip-track li:hover {
  background: #fff;
  border-color: var(--orange);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.strip-track img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.strip-text {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .strip-track li,
  
  .strip {
    scroll-behavior: auto;
  }

  .strip-track li:hover {
    transform: none;
  }
}

/* --- 3. Instrument rack (Services — technology and equipment) ---------------
   Twelve machines as twelve faceplates. Dark on the light band so the block
   reads as equipment rather than as more cards, with a status lamp and a
   sweep of light across the plate on hover.                               */

.rack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
  gap: 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
}

.rack li {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

/* faint machined ruling, so the plate is not a flat rectangle */
.rack li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    180deg,
    rgb(255 255 255 / 4%) 0 1px,
    transparent 1px 7px
  );
}

/* the sweep */
.rack li::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  z-index: -1;
  inline-size: 55%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgb(245 127 42 / 24%) 50%,
    transparent 100%
  );
  transition: transform 0.65s cubic-bezier(0.35, 0.9, 0.35, 1);
}

.rack li:hover,
.rack li:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgb(12 24 57 / 34%);
}

.rack li:hover::after,
.rack li:focus-within::after {
  transform: translateX(320%);
}

html[dir="rtl"] .rack li:hover::after,
html[dir="rtl"] .rack li:focus-within::after {
  transform: translateX(-320%);
}

.rack-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: 0.55rem;
}

.rack-n {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

/* status lamp */
.rack-led {
  flex: none;
  inline-size: 0.42rem;
  block-size: 0.42rem;
  border-radius: 50%;
  background: var(--orange);
  animation: lamp 2.6s ease-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
}

@keyframes lamp {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgb(245 127 42 / 55%); }
  35%           { box-shadow: 0 0 0 0.32rem rgb(245 127 42 / 0%); }
}

/* the hairline that runs out from under the index on hover */
.rack-rule {
  flex: 1;
  block-size: 1px;
  background: rgb(255 255 255 / 14%);
  transform: scaleX(0.25);
  transform-origin: left center;
  transition: transform 0.4s ease, background-color 0.4s ease;
}

html[dir="rtl"] .rack-rule {
  transform-origin: right center;
}

.rack li:hover .rack-rule,
.rack li:focus-within .rack-rule {
  transform: scaleX(1);
  background: rgb(245 127 42 / 55%);
}

/* The longest machine names run to two lines and the shortest to one, which
   left the rack's rows at different heights. Two lines are reserved for every
   plate so the rows match. 2 x 1.5 line-height = 3em. */
.rack p {
  font-size: 0.9375rem;
  line-height: 1.5;
  min-block-size: 3em;
  color: #eaeff8;
}

/* Everything that moves above is decoration, so a reader who has asked for
   less motion loses the movement and nothing else. */
@media (prefers-reduced-motion: reduce) {
  .fin::after,
  .fin-n,
  .fins p,
  .rack li,
  .rack li::after,
  .rack-rule {
    transition: none;
  }

  .rack-led {
    animation: none;
  }

  .fins li:hover p,
  .fins li:focus-within p,
  .rack li:hover,
  .rack li:focus-within {
    transform: none;
  }

  /* the fin still fills, it just does not slide up */
  .fins li:hover .fin::after,
  .fins li:focus-within .fin::after {
    transform: scaleY(1);
  }
}

/* --- "Show all" disclosure --------------------------------------------------
   Both long lists put a few items on screen and the rest behind this. It is
   a <details>, so it works with no JavaScript and the hidden items are still
   in the markup — a reader who never opens it loses nothing to search
   engines or a screen reader.                                              */

.more {
  margin-block-start: 1.25rem;
}

.more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

html[lang="ar"] .more summary {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* Safari draws its own triangle unless both of these are switched off. */
.more summary::-webkit-details-marker {
  display: none;
}

.more summary::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}

.more[open] summary::after {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.more summary:hover,
.more summary:focus-visible {
  background: var(--navy);
  color: #fff;
}

.more summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* One label for each state, so the button says what the next click does. */
.more[open] .more-open,
.more:not([open]) .more-shut {
  display: none;
}

.more > .fins,
.more > .rack {
  margin-block-start: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .more summary,
  .more summary::after {
    transition: none;
  }
}

/* --- Lead section: paragraph + timed slideshow ------------------------------
   The text is the argument; the pictures illustrate it. Everything here is
   built so the paragraph reads perfectly with the slideshow frozen — the
   rule this page has been rebuilt around more than once.               */

.lead-split {
  display: grid;
  grid-template-columns: 1fr minmax(min(20rem, 100%), 26rem);
  gap: 2rem 3rem;
  align-items: center;
}

@media (max-width: 899px) {
  .lead-split {
    grid-template-columns: 1fr;
  }
}

.lead-text p {
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.7;
  color: var(--ink);
  max-inline-size: 62ch;
}

.slideshow {
  display: grid;
  gap: 0.75rem;
}

.slide-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: 0.75rem;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.slide.is-on {
  opacity: 1;
}

/* The timer, made visible. It fills, and the picture changes when it is
   full — the bar IS the clock, not a decoration alongside one. */
.slide-bar {
  block-size: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.slide-bar span {
  display: block;
  block-size: 100%;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}

html[dir="rtl"] .slide-bar span {
  transform-origin: right center;
}

/* Named so the script can listen for it finishing. The animation is what
   advances the slideshow, so a background tab — where animations do not
   run — simply waits instead of racing through the pictures unseen. */
@keyframes slide-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.slideshow.is-running .slide-bar span {
  animation: slide-fill var(--slide-ms, 4200ms) linear forwards;
}

.slideshow.is-paused .slide-bar span {
  animation-play-state: paused;
}

.slide-dots {
  display: flex;
  gap: 0.4rem;
}

.slide-dots button {
  inline-size: 2rem;
  block-size: 1.1rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* The hit area is deliberately larger than the mark it draws — a 4px target
   is not one. */
.slide-dots button::before {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: background-color 0.25s ease;
}

.slide-dots button:hover::before {
  background: #b9c3d6;
}

.slide-dots button[aria-current]::before {
  background: var(--navy);
}

.slide-dots button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Reduced motion: no timer, no cross-fade. The dots still work, so all three
   pictures stay reachable — the motion goes, the content does not. */
@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: none;
  }

  .slideshow.is-running .slide-bar span {
    animation: none;
    transform: scaleX(1);
  }

  .slide-dots button::before {
    transition: none;
  }
}

/* The certification line under the standards band. Sits quieter than the
   statement above it — it supports that claim rather than competing with it. */
.cert-line {
  margin-block-start: 0.9rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid rgb(255 255 255 / 22%);
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.92;
}

/* --- The four commitments (Quality page) ------------------------------------
   One row per commitment, picture and text alternating sides.

   Consistency was the brief, so every row is identical in structure and
   differs only in which side the picture sits on. The image ratio, the number
   badge, the heading size, the paragraph measure and the three points are the
   same in all four — the rhythm comes from the alternation, not from varying
   the parts.

   `order` is a logical property, so Arabic mirrors the whole pattern with no
   second rule.                                                            */

.pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  counter-reset: pillar;
}

.pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.pillar:nth-child(even) .pillar-media {
  order: 2;
}

@media (max-width: 899px) {
  .pillar {
    grid-template-columns: 1fr;
  }

  /* Stacked, the picture always leads — alternating it there just reads as a
     mistake rather than as rhythm. */
  .pillar:nth-child(even) .pillar-media {
    order: 0;
  }
}

.pillar-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.pillar-media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The number sits on the picture rather than in the text, so the four rows
   stay countable at a glance while scrolling. */
.pillar-n {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  min-inline-size: 3.4rem;
  padding: 0.5rem 0.9rem;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  border-end-end-radius: var(--radius);
}

html[lang="ar"] .pillar-n {
  letter-spacing: 0;
  font-weight: 800;
}

.pillar-body h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  margin-block-end: 0.9rem;
}

.pillar-body > p {
  color: var(--muted);
  line-height: 1.7;
  max-inline-size: 60ch;
  margin-block-end: 1.35rem;
}

.pillar-points {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: 60ch;
  display: grid;
  gap: 0.55rem;
}

.pillar-points li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
}

/* The same orange diamond the site already uses for a checked item. */
.pillar-points li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55rem;
  inset-inline-start: 0;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  background: var(--orange);
  transform: rotate(45deg);
}

/* --- Radiator build options -------------------------------------------------
   Page 1 of the owner's catalogue. The wording is what matters here, so the
   card is mostly text and the mark beside it is small and quiet. The marks
   are drawn rather than lifted: two of the catalogue's illustrations have
   another company's badge inside the artwork.                             */

.opt-grid {
  display: grid;
  /* 15rem so all four sit on one row at desktop rather than breaking 3 + 1 */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
}

.opt {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0 1.1rem;
  align-items: start;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
              transform 0.25s ease;
}

.opt:hover {
  border-color: #c3cee0;
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.opt-mark {
  inline-size: 3.4rem;
  block-size: 3.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.opt-mark svg {
  inline-size: 2.4rem;
  block-size: 2.4rem;
}

.opt-line line {
  stroke: var(--navy);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.opt-pipe {
  fill: none;
  stroke: var(--navy);
  stroke-width: 3.4;
  stroke-linecap: round;
}

.opt-body {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 2.2;
}

.opt-fill {
  fill: var(--orange);
}

.opt-hole {
  fill: #fff;
}

.opt-hole-lg {
  fill: var(--orange);
}

.opt-arrow {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.opt-spray circle {
  fill: var(--navy);
}

.opt-body-text h3 {
  font-size: 1.15rem;
  margin-block-end: 0.4rem;
}

.opt-body-text p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .opt {
    transition: none;
  }

  .opt:hover {
    transform: none;
  }
}

/* --- Radiator specification -------------------------------------------------
   The schematic and the spec table sit side by side on a wide screen and
   stack on a narrow one. The schematic is drawn here rather than lifted from
   the catalogue PDF, whose diagram carries another company's logo.        */

.spec-split {
  display: grid;
  grid-template-columns: minmax(min(16rem, 100%), 20rem) 1fr;
  gap: 2rem 2.5rem;
  align-items: start;
}

@media (max-width: 899px) {
  .spec-split {
    grid-template-columns: 1fr;
  }
}

.rad-fig {
  margin: 0;
  padding: 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: sticky;
  inset-block-start: 1.5rem;
}

@media (max-width: 899px) {
  .rad-fig {
    position: static;
  }
}

.rad-fig svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.rad-fig figcaption {
  margin-block-start: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

/* A technical drawing is not mirrored in Arabic — the dimension letters are
   read left to right in both languages, and flipping it would put NP on the
   wrong end of the stack. */
.rad-panels rect {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 2;
}

.rad-panels line {
  stroke: var(--navy);
  stroke-width: 1.4;
  opacity: 0.4;
}

.rad-pipe {
  fill: var(--navy);
}

.rad-cap {
  fill: var(--orange);
}

.rad-dim {
  stroke: var(--orange);
  stroke-width: 1.6;
}

/* Extension lines, as on a real drawing — they carry the dimension away from
   the part instead of running the arrow through it. */
.rad-ext line {
  stroke: var(--orange);
  stroke-width: 1;
  opacity: 0.45;
}

.rad-lab {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  fill: var(--orange);
}

/* The table is the widest thing on the page, so it gets its own scroller
   rather than pushing the whole document sideways. */
.spec-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.spec-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.spec-table th,
.spec-table td {
  padding: 0.7rem 1rem;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--line);
}

.spec-table thead th {
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

html[lang="ar"] .spec-table thead th {
  text-transform: none;
  letter-spacing: 0;
}

.spec-table tbody th {
  font-weight: 600;
  color: var(--navy);
}

.spec-table tbody tr:nth-child(even) {
  background: var(--bg-alt);
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
  border-block-end: 0;
}

.spec-ind span {
  display: inline-block;
  min-inline-size: 2ch;
  padding: 0.1rem 0.4rem;
  background: var(--orange);
  border-radius: 3px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

/* --- Product code builder ---------------------------------------------------
   The catalogue prints this as a static seven-cell table. Here the options
   are set and the part number assembles itself.                           */

.codegen {
  display: grid;
  gap: 1.5rem;
}

.code-out {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.code-out-label {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}

html[lang="ar"] .code-out-label {
  text-transform: none;
  letter-spacing: 0;
}

.code-value {
  flex: 1 1 auto;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  word-break: break-all;
}

.code-copy {
  flex: none;
  padding: 0.5rem 1rem;
  border: 2px solid rgb(255 255 255 / 35%);
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease;
}

html[lang="ar"] .code-copy {
  text-transform: none;
  letter-spacing: 0;
}

.code-copy:hover,
.code-copy:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
}

.code-copy.is-done {
  background: var(--orange);
  border-color: var(--orange);
}

.code-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1rem;
}

.code-field {
  display: grid;
  gap: 0.4rem;
}

.code-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}

.code-unit {
  color: var(--muted);
  font-weight: 400;
}

.code-field select,
.code-field input {
  inline-size: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-block-end-width: 2px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.code-field select:focus-visible,
.code-field input:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgb(245 127 42 / 25%);
}

.code-derived {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .code-copy,
  .code-field select,
  .code-field input {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prod-card,
  .prod-card img {
    transition: none;
  }

  .prod-card:hover img,
  .prod-card:focus-within img {
    transform: none;
  }
}

/* --- Industries ---------------------------------------------------------- */

/* Seven sectors never fill an auto-fit grid evenly — it was landing 3 + 3 + 1,
   with one card stranded on its own row. Fixed columns instead, with the lead
   sector spanning two of them, so the count comes out exact:

     4 columns : 2 + 1 + 1  /  1 + 1 + 1 + 1   = 8 cells, two full rows
     2 columns : 2  /  1+1  /  1+1  /  1+1     = 8 cells, four full rows
     1 column  : stacked

   grid-auto-rows: 1fr is what keeps every card the same size. Rows would
   otherwise each take the height of their own tallest card, and the two rows
   would come out different; 1fr makes them all match the tallest row.

   Where the height itself comes from is in the card rules below. It is not an
   aspect ratio: it used to be, and that broke twice — the spanning card had no
   ratio to fall back on and collapsed to nothing at tablet widths, and at
   desktop widths six of the seven backs were taller than the ratio allowed and
   had their text cut off top and bottom. */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.sector-grid > :first-child {
  grid-column: span 2;
}

@media (max-width: 999px) {
  .sector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 699px) {
  .sector-grid {
    grid-template-columns: 1fr;
  }

  .sector-grid > :first-child {
    grid-column: auto;
  }
}

.flip-hint {
  margin-block-end: 2rem;
}

/* --- Sector cards ----------------------------------------------------------
   Each card turns over to show what we do for that sector. Three things the
   effect gets wrong if you only build the hover case:

   1. A phone has no hover. site.js toggles .is-flipped on tap, and the hint
      above the grid says so.
   2. A keyboard has no hover either, so :focus-within turns the card too and
      the cards carry tabindex="0".
   3. Someone who has asked for less motion should not get a spin — the
      reduced-motion block at the end of this section swaps the turn for a
      cross-fade.

   Both faces are always in the markup, so the text is read by screen readers
   and indexed by search engines whichever way the card is facing.          */

/* One cell holding one child, so .sector-flip stretches to whatever height
   the row settles on without a percentage that would need a definite parent. */
.sector {
  display: grid;
  perspective: 1200px;
  border-radius: var(--radius);
}

.sector:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.sector-flip {
  position: relative;
  grid-area: 1 / 1;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sector:hover .sector-flip,
.sector:focus-within .sector-flip,
.sector.is-flipped .sector-flip {
  transform: rotateY(180deg);
}

/* In Arabic the page reads the other way, so the card turns the other way —
   otherwise the motion runs against the direction of reading. */
html[dir="rtl"] .sector:hover .sector-flip,
html[dir="rtl"] .sector:focus-within .sector-flip,
html[dir="rtl"] .sector.is-flipped .sector-flip {
  transform: rotateY(-180deg);
}

.sector-face {
  display: flex;
  overflow: hidden;
  border-radius: var(--radius);
  border-block-end: 4px solid var(--orange);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* The front is lifted out of flow and laid over the back. That is the whole
   trick: the BACK is the face left in normal flow, so the card is as tall as
   its own words need, and the picture is stretched to match rather than the
   words being cut to fit the picture. */
.sector-front {
  position: absolute;
  inset: 0;
  align-items: flex-end;
}

.sector-front img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The wash starts below the top third, so the picture stays legible while the
   label sits on solid navy. */
.sector-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(12 24 57 / 0%) 30%,
    rgb(12 24 57 / 72%) 62%,
    rgb(12 24 57 / 94%) 100%
  );
}

.sector-front span {
  position: relative;
  z-index: 1;
  padding: 1.25rem;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}

html[lang="ar"] .sector-front span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
}

.sector-back {
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  /* A floor, so a two-word sector is not a letterbox next to a wordy one.
     Above it the text decides. */
  min-block-size: 13rem;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  transform: rotateY(180deg);
}

html[dir="rtl"] .sector-back {
  transform: rotateY(-180deg);
}

.sector-back h3 {
  font-size: 1.125rem;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[lang="ar"] .sector-back h3 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.0625rem;
}

.sector-back p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 88%);
}

html[lang="ar"] .sector-back p {
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* A spin is exactly the kind of motion someone disables it to avoid, so the
   card cross-fades instead — same information, no rotation. */
@media (prefers-reduced-motion: reduce) {
  .sector-flip,
  html[dir="rtl"] .sector:hover .sector-flip,
  html[dir="rtl"] .sector:focus-within .sector-flip,
  html[dir="rtl"] .sector.is-flipped .sector-flip,
  .sector:hover .sector-flip,
  .sector:focus-within .sector-flip,
  .sector.is-flipped .sector-flip {
    transform: none;
  }

  .sector-face {
    backface-visibility: visible;
    transition: opacity 0.2s linear;
  }

  .sector-back,
  html[dir="rtl"] .sector-back {
    transform: none;
    opacity: 0;
  }

  .sector:hover .sector-back,
  .sector:focus-within .sector-back,
  .sector.is-flipped .sector-back {
    opacity: 1;
  }
}

/* --- Transformer model (Quality page) --------------------------------------
   A wireframe transformer beside the test list. Hovering or focusing a test
   lights the part it measures — see js/transformer.js.                     */

.model-hint {
  margin-block-end: 2rem;
}

.model-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.model-stage {
  aspect-ratio: 1 / 0.86;
  inline-size: 100%;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius);
}

.model-stage canvas {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

.test-list {
  display: grid;
  gap: 0.1rem;
}

.test-list li {
  position: relative;
  padding-block: 0.6rem;
  padding-inline: 2rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  cursor: default;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.test-list li::before {
  content: "";
  position: absolute;
  inset-block-start: 1.05rem;
  inset-inline-start: 0.75rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background: var(--orange);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.test-list li:hover,
.test-list li:focus-visible {
  background: var(--bg-alt);
  color: var(--navy);
  outline: none;
}

.test-list li:focus-visible {
  box-shadow: inset 0 0 0 2px var(--orange);
}

.test-list li:hover::before,
.test-list li:focus-visible::before {
  transform: rotate(45deg) scale(1.4);
}

/* Stacked on a narrow screen, with the model capped so it never pushes the
   list off the first screenful. */
@media (max-width: 860px) {
  .model-split {
    grid-template-columns: 1fr;
  }

  .model-stage {
    max-inline-size: 26rem;
    margin-inline: auto;
  }
}

/* --- Product carousel ------------------------------------------------------
   One row of cards that scrolls itself. It is built on a real scroll
   container, not a transform, so a phone can swipe it and a keyboard can page
   it while the animation runs — see site.js.                                */

.carousel {
  position: relative;
}

.carousel-viewport {
  overflow-x: auto;
  /* A horizontally scrolling box cannot leave the other axis visible — CSS
     forces it to auto — so the popout below is given room to grow into
     instead of being allowed to escape. */
  overflow-y: hidden;
  padding-block: 2.25rem;
  /* The row already advertises itself by moving; a scrollbar under it is
     noise. Manual scrolling still works. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-viewport::-webkit-scrollbar {
  display: none;
}

.carousel-viewport:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.carousel-track {
  display: flex;
  gap: 1.25rem;
  inline-size: max-content;
  padding-block: 0.25rem;
}

.prod-card {
  position: relative;
  flex: 0 0 auto;
  inline-size: min(19rem, 78vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0 0 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: box-shadow 0.3s ease;
}

/* The card cannot clip its own contents any more, or the picture could not
   lift out of it. */
.prod-card img {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #fff;
  border-block-end: 3px solid var(--orange);
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
  margin-block-end: 0.5rem;
  transform-origin: center top;
  transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.38s ease, border-radius 0.38s ease;
}

/* The popout. The carousel already stops moving while the pointer is on it,
   so the picture holds still to be looked at. */
.prod-card:hover,
.prod-card:focus-within {
  z-index: 5;
  box-shadow: var(--shadow);
}

.prod-card:hover img,
.prod-card:focus-within img {
  transform: scale(1.16) translateY(-7%);
  border-radius: var(--radius);
  box-shadow: 0 18px 38px rgb(12 24 57 / 34%);
}

.prod-card h3,
.prod-card .spec,
.prod-card p {
  margin-inline: 1.5rem;
}

.prod-card h3 {
  font-size: 1.1875rem;
  text-transform: uppercase;
  line-height: 1.2;
}

html[lang="ar"] .prod-card h3 {
  text-transform: none;
  font-size: 1.125rem;
  line-height: 1.45;
}

.prod-card p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* The range is what a buyer scans for, so it gets its own badge rather than
   sitting in the body copy. unicode-bidi keeps "10 kVA - 40 MVA" in Latin
   order inside an Arabic page. */
.spec {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: rgb(245 127 42 / 12%);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--orange-dark);
  white-space: nowrap;
  unicode-bidi: plaintext;
}

/* Nothing moves on its own for a reader who has asked for less motion; the
   row is still there to be scrolled by hand. */
@media (prefers-reduced-motion: reduce) {
  .carousel-viewport {
    scroll-behavior: auto;
  }
}

/* --- Closing call-to-action band (orange) -------------------------------- */

.cta-band {
  background: var(--orange);
  color: #fff;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cta-band h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  text-transform: uppercase;
}

.cta-band p {
  color: rgb(255 255 255 / 92%);
  margin-block-start: 0.5rem;
  max-inline-size: 55ch;
}

/* --- Contact page -------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.detail-list {
  margin-block-end: 3rem;
}

.detail-list > div {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: 1rem;
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--line);
}

.detail-list dt {
  font-weight: 600;
  color: var(--navy);
}

.detail-list dd {
  margin: 0;
  color: var(--muted);
}

.detail-list a {
  color: var(--orange-dark);
}

/* --- Forms --------------------------------------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--orange);
  border-radius: var(--radius);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
}

.field input,
.field textarea {
  font: inherit;
  color: var(--ink);
  padding: 0.7rem 0.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--orange);
  outline: 2px solid rgb(245 127 42 / 30%);
  outline-offset: 0;
}

.field [aria-invalid="true"] {
  border-color: #c0392b;
}

.contact-form .btn {
  align-self: flex-start;
}

.form-status {
  font-size: 0.9375rem;
  min-block-size: 1.5rem;
}

.form-status.is-ok {
  color: #1c7a4a;
  font-weight: 600;
}

.form-status.is-error {
  color: #c0392b;
  font-weight: 600;
}

.form-note {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* The spam trap. Kept out of sight without display:none, which some bots
   check for. */
.trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--navy-deep);
  color: rgb(255 255 255 / 75%);
  padding-block: clamp(2.5rem, 6vw, 4rem) 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 2.5rem;
  padding-block-end: 2.5rem;
}

.footer-brand .mark {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-end: 0.75rem;
}

.footer-name {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

html[lang="ar"] .footer-name {
  text-transform: none;
}

.footer-tagline {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-block-start: 0.35rem;
}

html[lang="ar"] .footer-tagline {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
}

.footer-parent {
  font-size: 0.875rem;
  margin-block-start: 0.75rem;
  color: rgb(255 255 255 / 55%);
}

.footer-col h2 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-block-end: 1rem;
}

html[lang="ar"] .footer-col h2 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
}

.footer-col li {
  margin-block-end: 0.55rem;
}

.footer-col a {
  color: rgb(255 255 255 / 75%);
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer-col a:hover {
  color: var(--orange);
  text-decoration: underline;
}

.footer-col p {
  font-size: 0.9375rem;
  margin-block-end: 0.75rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  border-block-start: 1px solid rgb(255 255 255 / 12%);
  font-size: 0.875rem;
  color: rgb(255 255 255 / 55%);
}