/* grafikslb.com
   One stylesheet. Written with logical properties throughout, so the Arabic
   site mirrors from the document direction rather than from a second sheet.
   Colours are taken from the supplied logo files. */

:root {
  /* Both schemes are declared, so form controls, scrollbars and the caret
     follow the reader's system preference, which is the default and stays the
     default. The header toggle does not carry a palette of its own: it narrows
     this one declaration to a single value, and every light-dark() pair below
     resolves against it. One token list, two values each, nothing to keep in
     step by hand.

     Read a pair as light-dark(what it is on paper, what it is at night). Where
     a token has one value it has one value in both schemes, on purpose. */
  color-scheme: light dark;

  /* from Assets/Logos: #404c4c slate, #429ea1 teal, #70c4c2 light teal, #8f9999 grey */
  --slate: #404c4c;
  --slate-deep: light-dark(#26302f, #2a3534);
  --slate-mid: #5c6a6a;
  /* --teal carries graphics, --teal-text carries type, and the two part
     company in the dark: #429ea1 is 3.16:1 on white, which is a rule or a
     tick but never a sentence, and #2e6e6e is 5.88:1 on white and 1.4:1 on
     the dark page. Both are re-derived rather than reused. */
  --teal: light-dark(#429ea1, #4fb3b6);
  --teal-text: light-dark(#2e6e6e, #7fd3d1);
  --teal-light: #70c4c2;
  --grey: #8f9999;
  --warn: light-dark(#8c4a2f, #e0917a);

  --body: light-dark(#333333, #dbe2e1);
  --muted: light-dark(#555555, #a8b4b3);
  --faint: light-dark(#767f7f, #8b9897);
  --bg: light-dark(#ffffff, #141a1a);
  --bg-alt: light-dark(#f4f6f5, #1b2222);
  --line: light-dark(#dfe5e4, #313c3b);
  /* 3.9:1 on the dark page, so a field or a ghost button still has a boundary
     you can find */
  --line-strong: light-dark(#c6d0cf, #6b7a78);

  /* Roles, not colours. Everything below names what a value is for rather than
     what it looks like, because in the dark scheme some of these move in
     opposite directions from the brand colour they share here. --slate-deep is
     the deep slate SURFACE (the utility strip, .band--dark, the footer);
     --ink-strong is the same colour used as TYPE. In dark the surface goes up
     a step and the type goes light, so the two cannot stay one token. */
  --ink-strong: light-dark(#26302f, #f0f4f3);
  --surface-card: light-dark(#ffffff, #232c2b);
  --field-bg: light-dark(#fdfdfc, #151c1b);
  --head-bg: light-dark(rgba(255, 255, 255, 0.94), rgba(20, 26, 26, 0.92));

  /* type and rules on the deep slate surface, which is dark in both schemes.
     Only the quietest of them moves: the surface itself goes up a step in the
     dark, and #7f8f8e would have fallen to 3.75:1 on it. */
  --on-deep: #d9e0df;
  --on-deep-strong: #ffffff;
  --on-deep-muted: #b8c4c3;
  --on-deep-dim: #a9b7b6;
  --on-deep-faint: #9fb0af;
  --on-deep-quiet: light-dark(#7f8f8e, #9aa9a8);

  /* filled accents. The ground and the type on it are one pair, so the dark
     scheme flips both together rather than leaving white type on a light
     teal ground. */
  --accent-solid: light-dark(#2e6e6e, #6fc8c6);
  --accent-solid-ink: light-dark(#ffffff, #10201f);
  --btn-primary-hover-bg: light-dark(#26302f, #8fd6d4);
  --btn-primary-hover-ink: light-dark(#ffffff, #10201f);
  --util-cta-hover-bg: light-dark(#429ea1, #8fd6d4);
  --util-cta-hover-ink: light-dark(#ffffff, #10201f);

  /* diagram tints */
  --tint-1: light-dark(#e4f1f0, #1d3736);
  --tint-2: light-dark(#eef4f3, #1a2b2a);
  --tint-4: light-dark(#f6ece7, #33261f);
  --tint-5: light-dark(#f0ddd4, #432e23);
  --tint-spec: light-dark(#eaf4f3, #1d3736);

  /* The interactive window draws real glass, so its clear pane is a light
     surface in both schemes and its ink stays dark. Only the brightness of the
     glass moves, in step with the photographs. */
  --pane-solar-1: light-dark(#dfe8e6, #c2cdca);
  --pane-solar-2: light-dark(#f4f6f4, #d6dcd8);
  --pane-solar-3: light-dark(#cfdedb, #b3c1bd);
  --pane-solar-ink: light-dark(#555555, #354140);
  --pane-solar-ink-strong: light-dark(#26302f, #16201f);
  /* the muted tier, for the covers label: on-deep-muted's counterpart for the
     light glass, a step lighter than --pane-solar-ink and still >=4.5:1 on the
     glass's lightest and dark-scheme darkest stops alike. */
  --pane-solar-ink-muted: light-dark(#5c5c5c, #3a4645);
  --pane-solar-accent: light-dark(#2e6e6e, #17494a);
  --pane-solar-tick: light-dark(#429ea1, #2e6e6e);
  /* Both panes' hover state is a filled teal chip. It is deliberately the same
     pair in both schemes: one pane is dark glass and one is light glass, so
     the chip's ground has nothing to invert against. */
  --pane-cta-hover-bg: #2e6e6e;
  --pane-cta-hover-fg: #ffffff;

  /* The four things the scheme changes that are not colours, so light-dark()
     cannot carry them: whether a photograph is dimmed, the white ground the
     one mark with no dark artwork was drawn for, and which of a supplied pair
     of logo files is on screen. A custom property holds any token, not only a
     colour, so these ride the same layer as everything else. Their dark values
     are the one block in this file written twice, below. */
  --photo-filter: none;
  --mark-ground: transparent;
  --mark-pad: 0;
  --show-light: block;
  --show-dark: none;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans-ar: "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --band: clamp(3.5rem, 7vw, 6.5rem);
  --radius: 4px;

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem);
  --step-3: clamp(1.625rem, 1.4rem + 1.1vw, 2.375rem);
  --step-4: clamp(2rem, 1.6rem + 2vw, 3.25rem);
}

/* ------------------------------------------------------------ scheme state */

/* The reader's own answer, kept in localStorage and written onto <html> by a
   few lines in the head before the first paint. Narrowing color-scheme is the
   whole switch: every light-dark() pair above follows it, and so do the form
   controls, the scrollbars and the caret. With script blocked the attribute is
   never set, the toggle never appears, and the media query below still runs. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The non-colour half of the dark scheme. Two blocks with identical bodies:
   one for the system preference, one for the override that outranks it. There
   is no selector that expresses "dark by either route", so this is written
   out rather than made clever. Order matters, and the specificity is equal,
   so the override has to come second. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --photo-filter: brightness(0.85);
    --mark-ground: #ffffff;
    --mark-pad: 0.5rem 0.75rem;
    --show-light: none;
    --show-dark: block;
  }
}
:root[data-theme="dark"] {
  --photo-filter: brightness(0.85);
  --mark-ground: #ffffff;
  --mark-pad: 0.5rem 0.75rem;
  --show-light: none;
  --show-dark: block;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 5rem;
}

body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] body { font-family: var(--sans-ar); line-height: 1.85; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { line-height: 1.45; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
h4 { font-size: var(--step-0); }

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; }

p { text-wrap: pretty; }

a { color: var(--teal-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink-strong); }

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

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

:focus-visible {
  outline: 2px solid var(--teal-text);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 0.75rem;
  z-index: 300;
  padding: 0.7rem 1.1rem;
  background: var(--slate-deep);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.skip:focus { inset-block-start: 0.75rem; color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.narrow > * { max-width: 68ch; }

/* ---------------------------------------------------------------- header */

.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--head-bg);
  backdrop-filter: saturate(1.4) blur(8px);
  border-block-end: 1px solid var(--line);
}

.site-head-in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.brand { flex: none; display: block; }
.brand-mark { width: clamp(112px, 14vw, 148px); height: auto; }

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.75rem, 2vw, 2rem);
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.4vw, 1.35rem);
  font-size: var(--step--1);
  font-weight: 500;
}
.nav-list a {
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.35rem;
  border-block-end: 2px solid transparent;
  white-space: nowrap;
}
.nav-list a:hover { color: var(--ink-strong); }
.nav-list a[aria-current="page"] {
  color: var(--ink-strong);
  border-block-end-color: var(--teal);
}

.lang ul { display: flex; gap: 0.1rem; }
.lang { flex: none; }
.lang ul { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lang li + li { border-inline-start: 1px solid var(--line); }
.lang a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--faint);
  text-decoration: none;
}
.lang a:hover { color: var(--ink-strong); background: var(--bg-alt); }
.lang a[aria-current="true"] { color: #fff; background: var(--slate); }

.burger { display: none; }

/* ---------------------------------------------------------------- utility bar */
/* The always-visible contact strip: mail, phone, WhatsApp and a survey
   request, inside .site-head but outside .site-nav, so the mobile nav
   collapse below (which hides .site-nav under 64rem) never touches it. */

.util-bar { background: var(--slate-deep); }
.util-bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-block: 0.35rem;
}
.util-list {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
  min-width: 0;
}
.util-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.6rem;
  border-radius: var(--radius);
  color: var(--on-deep);
  text-decoration: none;
}
.util-link:hover { color: var(--on-deep-strong); background: rgba(255, 255, 255, 0.1); }
.util-ic { width: 1.15rem; height: 1.15rem; flex: none; }
.util-text { display: none; font-size: var(--step--1); font-weight: 600; white-space: nowrap; }

/* The right-hand end of the strip. Grouping the toggle with the survey button
   keeps space-between doing what it did before, with the contact links at one
   edge and everything else at the other. */
.util-end { display: flex; align-items: center; flex: none; gap: 0.3rem; }

/* The scheme toggle. Hidden until the inline script in the head marks the
   document as scripted: without script it could not do anything, and a dead
   control is worse than no control. The system preference still applies in
   that case, through the media query, which is the behaviour this replaces
   rather than the behaviour it removes.

   Which icon and which label is on screen is decided by --show-light and
   --show-dark, the same pair the logo swap uses, so the button is correct at
   first paint and no script has to keep its accessible name up to date. */
.theme-toggle { display: none; }
.js .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font: inherit;
  color: var(--on-deep);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--on-deep-strong); background: rgba(255, 255, 255, 0.1); }
.theme-ic { width: 1.2rem; height: 1.2rem; }
/* In the light scheme the button offers the dark one, and the other way round. */
.theme-ic--moon, .theme-lab--dark { display: var(--show-light); }
.theme-ic--sun, .theme-lab--light { display: var(--show-dark); }

/* The focus ring is teal ink on a page, and this strip is not a page: at
   #2e6e6e on deep slate it was 1.3:1 and effectively invisible. On the strip
   it becomes the light teal, 6.7:1 on the same ground in both schemes. */
.util-bar :focus-visible { outline-color: var(--teal-light); }

.util-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 2.75rem;
  padding-inline: 0.85rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--accent-solid-ink);
  background: var(--accent-solid);
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
}
.util-cta:hover { background: var(--util-cta-hover-bg); color: var(--util-cta-hover-ink); }
.util-cta-full { display: none; }

@media (min-width: 64rem) {
  .util-text { display: inline; }
  .util-cta-short { display: none; }
  .util-cta-full { display: inline; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.3rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.16s, color 0.16s, border-color 0.16s;
}
.btn--primary { background: var(--accent-solid); color: var(--accent-solid-ink); }
.btn--primary:hover { background: var(--btn-primary-hover-bg); color: var(--btn-primary-hover-ink); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink-strong); background: transparent; }
.btn--ghost:hover { border-color: var(--slate-deep); background: var(--slate-deep); color: #fff; }
/* Only ever used inside .band--dark, which is a deep slate surface in both
   schemes, so this pair is deliberately literal and does not invert. */
.btn--light { background: #fff; color: #26302f; }
.btn--light:hover { background: var(--teal-light); color: #26302f; }
/* .band--dark a (0,1,1) and .band--dark a:hover (0,2,1) otherwise outrank the
   two rules above and paint this button's label pale teal on white. */
.band--dark a.btn--light { color: #26302f; }
.band--dark a.btn--light:hover { color: #26302f; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block-start: 1.75rem; }

/* ---------------------------------------------------------------- bands */

.band { padding-block: var(--band); }
.band--alt { background: var(--bg-alt); }
.band--dark { background: var(--slate-deep); color: var(--on-deep); }
.band--dark h2, .band--dark h3, .band--dark h4 { color: var(--on-deep-strong); }
.band--dark a { color: var(--teal-light); }
.band--dark a:hover { color: var(--on-deep-strong); }
.band > .wrap + .wrap { margin-block-start: clamp(2rem, 4vw, 3.25rem); }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-block-end: 0.9rem;
}
html[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; }

.lede { font-size: var(--step-1); color: var(--muted); margin-block-start: 1.1rem; max-width: 62ch; }
.lede--section { margin-block-end: 2.25rem; }
.band--dark .lede { color: var(--on-deep-muted); }
.body-lg { font-size: var(--step-1); margin-block-start: 1.1rem; }
.band h2 + .body-lg, .band h2 + .prose p { margin-block-start: 1.4rem; }

.footnote { font-size: var(--step--1); color: var(--faint); margin-block-start: 1.5rem; }
.footnote--invert { color: var(--on-deep-faint); }
.hint { font-size: var(--step--1); color: var(--faint); margin-block-start: 0.6rem; }
.sources { font-size: var(--step--1); color: var(--on-deep-faint); margin-block-start: 1.75rem; max-width: 78ch; }

.pricing-note {
  margin-block-start: 1.75rem;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--teal);
  font-size: var(--step--1);
  color: var(--muted);
}
.band--dark .pricing-note, .band--contact .pricing-note { color: inherit; }

.prose p + p { margin-block-start: 1.1rem; }
.prose h2 + p { margin-block-start: 1.4rem; }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--media { grid-template-columns: 1fr 1fr; align-items: center; }
  .split--spec { grid-template-columns: 1fr 1fr; }
  .split--credential { grid-template-columns: 1.2fr 0.8fr; align-items: center; }
}
.split-media img, .hero-media img { border-radius: var(--radius); }

/* An fr track is min-content wide before it is anything else, so a child that
   refuses to get narrower takes the width it wants and the other track keeps
   what is left. A photograph that fails to load is exactly such a child: the
   alt text lays out as one long min-content line and drags the track open,
   which is what squashed the copy beside the installation steps down to a
   sliver. Item 8.13 gave the media hero min-width: 0 for this reason; every
   other track that can hold a photograph needs the same, and the ones that
   cannot are no worse for having it. */
.split > *, .hero-in > *, .contact-grid > *, .gsa-row > * { min-width: 0; }

/* ---------------------------------------------------------------- hero */

.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero-in { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) {
  .hero--media .hero-in { grid-template-columns: 1.1fr 0.9fr; }
}
.hero-in--narrow .hero-copy { max-width: 68ch; }
.hero--plain { padding-block-end: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------- the interactive window */

.hero--home { padding-block-start: clamp(2rem, 4vw, 3.5rem); }
.hero-home-in { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.hero--home h1 { max-width: 30ch; }
.hero--home .lede { max-width: 58ch; }

.window-legend {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-block-end: 0.75rem;
}
html[lang="ar"] .window-legend { letter-spacing: 0; text-transform: none; }

.window-frame {
  position: relative;
  padding: 10px;
  background: linear-gradient(180deg, var(--slate) 0%, var(--slate-deep) 100%);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 18px 40px -28px rgba(38, 48, 47, 0.55);
}

.window-panes {
  position: relative;
  display: grid;
  gap: 10px;
  overflow: hidden;
  border-radius: 2px;
}
@media (min-width: 48rem) {
  .window-panes { grid-template-columns: 1fr 1fr; }
}

.pane {
  position: relative;
  display: block;
  isolation: isolate;
  min-height: clamp(15rem, 30vw, 22rem);
  padding: clamp(1.35rem, 2.8vw, 2.25rem);
  overflow: hidden;
  text-decoration: none;
  transition: filter 0.3s ease;
}
.pane-body { display: block; }

/* the glass itself, and the light across it */
.pane-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.pane--safety .pane-glass { background: linear-gradient(155deg, #33403f 0%, #1d2726 55%, #22302f 100%); }
.pane--solar .pane-glass { background: linear-gradient(155deg, var(--pane-solar-1) 0%, var(--pane-solar-2) 45%, var(--pane-solar-3) 100%); }

.pane-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 22px);
}
.pane--solar .pane-glass::after {
  background-image: repeating-linear-gradient(112deg, rgba(38, 48, 47, 0.05) 0 1px, transparent 1px 22px);
}

.pane-sheen {
  position: absolute;
  inset-block: -30%;
  inset-inline-start: calc(var(--sheen, 0.5) * 100% - 22%);
  width: 44%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16) 45%, transparent);
  transform: skewX(-12deg);
  transition: inset-inline-start 0.45s cubic-bezier(0.22, 0.7, 0.3, 1), opacity 0.3s;
  opacity: 0.75;
  pointer-events: none;
}
.pane--solar .pane-sheen { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75) 45%, transparent); }

.pane-index {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.55;
  margin-block-end: 0.6rem;
}
.pane-label {
  display: block;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-block-end: 0.5rem;
}
html[lang="ar"] .pane-label { letter-spacing: 0; line-height: 1.4; }
.pane-line { display: block; font-size: var(--step--1); max-width: 34ch; }

.pane--safety { color: #cfdad9; }
.pane--safety .pane-label { color: #fff; }
.pane--safety .pane-index { color: var(--teal-light); }
.pane--solar { color: var(--pane-solar-ink); }
.pane--solar .pane-label { color: var(--pane-solar-ink-strong); }
.pane--solar .pane-index { color: var(--pane-solar-accent); }
/* a:hover (0,1,1) otherwise outranks the plain-class rules above (0,1,0) when
   the pane itself, an <a>, is hovered or focused, repainting the body line,
   the covers label and the cover list with --ink-strong, a theme token that
   inverts with the scheme. Each pane's glass is a fixed colour regardless of
   scheme, so its ink has to stay fixed too, in every state: same guard as
   .band--dark a:hover above. */
.pane--safety:hover, .pane--safety:focus-visible { color: #cfdad9; }
.pane--solar:hover, .pane--solar:focus-visible { color: var(--pane-solar-ink); }

.pane-covers { display: block; margin-block-start: 1.35rem; }
.pane-covers-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block-end: 0.5rem;
}
/* Opacity against a fixed glass background is a second way to fail contrast,
   independent of the a:hover collision above: 0.6 opacity blended toward the
   solar pane's near-white glass fell to 2.7:1, at rest, in every scheme. Every
   other quiet label in the file (.secondary-label, .band--dark .lede) is a
   solid muted-tier colour rather than a translucency trick, so this follows
   that rather than inventing a new pattern. */
.pane--safety .pane-covers-label { color: var(--on-deep-muted); }
.pane--solar .pane-covers-label { color: var(--pane-solar-ink-muted); }
html[lang="ar"] .pane-covers-label { letter-spacing: 0; text-transform: none; }
.pane-cover {
  display: block;
  font-size: var(--step--1);
  padding-block: 0.3rem;
  padding-inline-start: 1rem;
  position: relative;
}
.pane-cover::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.95em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1px;
}
.pane--safety .pane-cover::before { background: var(--teal-light); }
.pane--solar .pane-cover::before { background: var(--pane-solar-tick); }

.pane-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: 1.5rem;
  padding: 0.6rem 1.05rem;
  font-size: var(--step--1);
  font-weight: 700;
  border-radius: var(--radius);
  transition: background-color 0.18s, color 0.18s;
}
.pane--safety .pane-cta { color: #fff; background: rgba(255, 255, 255, 0.1); }
.pane--solar .pane-cta { color: var(--pane-solar-ink-strong); background: rgba(38, 48, 47, 0.07); }
.pane--safety:hover .pane-cta, .pane--safety:focus-visible .pane-cta { background: var(--pane-cta-hover-bg); color: var(--pane-cta-hover-fg); }
.pane--solar:hover .pane-cta, .pane--solar:focus-visible .pane-cta { background: var(--pane-cta-hover-bg); color: var(--pane-cta-hover-fg); }

.dest-arrow {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}
[dir="rtl"] .dest-arrow { transform: rotate(-135deg); }

.window-mullion {
  display: none;
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 5px);
  width: 10px;
  background: linear-gradient(90deg, rgba(38, 48, 47, 0.55), var(--slate) 40%, var(--slate-deep));
  pointer-events: none;
}
@media (min-width: 48rem) { .window-mullion { display: block; } }

/* the film edge, which tracks the pointer across the glass */
.film-edge {
  display: none;
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--teal-light) 12%, var(--teal-light) 88%, transparent);
  box-shadow: 0 0 12px 1px rgba(112, 196, 194, 0.45);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.window.is-live .film-edge { display: block; }
.window.is-tracking .film-edge { opacity: 0.85; }

@media (hover: hover) and (min-width: 48rem) {
  /* Dim the background layer only, not the whole pane: .pane-glass is the
     absolutely-positioned glass/sheen behind the text (z-index: -1), so
     hovering one pane can never darken the sibling pane's readable text. */
  .window.is-live .pane .pane-glass { filter: saturate(0.86) brightness(0.97); }
  .window.is-live .pane.is-active .pane-glass { filter: none; }
  .window.is-live .pane.is-active .pane-label::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-block-start: 0.5rem;
    background: var(--teal);
  }
}

.window-hint { font-size: var(--step--1); color: var(--faint); margin-block-start: 0.85rem; }

.secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  padding-block-start: 0.5rem;
}
.secondary-label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--faint);
}
.secondary ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.secondary a { font-size: var(--step--1); font-weight: 500; }

/* ---------------------------------------------------------------- readers */

.readers { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); align-items: start; }
@media (min-width: 62rem) { .readers { grid-template-columns: repeat(3, 1fr); } }
.reader { background: var(--bg); padding: clamp(1.35rem, 2.6vw, 2rem); }
.band--alt .reader { background: var(--bg-alt); }
.reader-who {
  margin-block-start: 0.5rem;
  font-size: var(--step--1);
  color: var(--faint);
}
.reader .ticks { margin-block-start: 1.25rem; }
.reader .ticks li { font-size: var(--step--1); color: var(--muted); }

/* ---------------------------------------------------------------- image band */

.image-band { margin: 0; }
/* Written .photo.image-band-media, not .image-band-media, so it outranks the
   .photo box rules further down whatever the order of the two blocks: the band
   crops to a fixed strip height and sets its own shape rather than the shape of
   the file. */
.photo.image-band-media { aspect-ratio: auto; }
.photo.image-band-media img {
  width: 100%;
  height: clamp(14rem, 34vw, 26rem);
  object-fit: cover;
  object-position: center;
}
.image-band figcaption {
  padding-block: 1rem 0;
  font-size: var(--step--1);
  color: var(--faint);
}

/* ---------------------------------------------------------------- credential */

.credential { background: var(--bg-alt); border-block: 1px solid var(--line); }
.credential-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  padding-block: 1.15rem;
}
.credential-in img { width: 232px; height: auto; }
.credential-in p {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  padding-inline-start: 1.5rem;
  border-inline-start: 1px solid var(--line-strong);
}
@media (max-width: 34rem) {
  .credential-in p { padding-inline-start: 0; border-inline-start: 0; }
}

.credential-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface-card);
  border-radius: var(--radius);
}
.credential-card img { width: 100%; max-width: 340px; height: auto; margin-inline: auto; }
.credential-card figcaption {
  margin-block-start: 1.25rem;
  font-size: var(--step--1);
  color: var(--muted);
  text-align: center;
}

/* SafetyShield G2 is supplied in one colourway, so there is no second file to
   swap to. It is never inverted or run through a filter, because a filtered
   manufacturer's mark is a different mark. In the dark it gets the white
   ground it was drawn against; in the light --mark-pad is 0 and --mark-ground
   is transparent, so the rule costs the light page nothing. */
.product-mark {
  box-sizing: content-box;
  width: 210px;
  height: auto;
  margin-block-start: 1.5rem;
  padding: var(--mark-pad);
  background: var(--mark-ground);
  border-radius: var(--radius);
}

/* A mark whose owner supplies light-ground and dark-ground artwork. Both files
   are in the document and CSS shows one, because <picture media="(prefers-
   color-scheme: dark)"> answers the operating system and cannot be told that
   the reader has overruled it. The hidden one is display: none, so it is out
   of the accessibility tree and its alt text is not read twice. */
.mark { display: block; }
.mark--light { display: var(--show-light); }
.mark--dark { display: var(--show-dark); }

/* The reserved box, and the reason a broken photograph is now only a gap.
   picture() writes --photo-ratio from the same measured pixel dimensions it
   writes into the img's width and height, so this box is the shape the file
   actually is and nothing moves when the file arrives. overflow: hidden is the
   part that matters when it does not arrive: alt text renders inside the box
   and is clipped to it instead of setting the width of the element and, with
   it, of the grid track. Alt text is still in the accessibility tree and still
   read out; it just cannot lay anything out. */
.photo {
  aspect-ratio: var(--photo-ratio);
  overflow: hidden;
}
.photo img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  /* The filter is photographs only, and only in the dark, where a bright pane
     of glass against a dark page glares. .photo is set by the picture() helper
     and by nothing else, so no logo and no manufacturer's mark is caught. */
  filter: var(--photo-filter);
}

/* ---------------------------------------------------------------- content bits */

.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 44rem) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--bg); padding: clamp(1.35rem, 2.6vw, 2rem); }
.band--alt .card { background: var(--bg); }
.band--dark .cards { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.12); }
.band--dark .card { background: var(--slate-deep); }
.card p { margin-block-start: 0.6rem; font-size: var(--step-0); color: var(--muted); }
.band--dark .card p { color: var(--on-deep-muted); }
.card--link { display: flex; flex-direction: column; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: auto;
  padding-block-start: 1.1rem;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.card-link:hover { text-decoration: underline; }

.facts { display: grid; gap: 1px; background: var(--line); }
.band--dark .facts { background: rgba(255, 255, 255, 0.14); }
@media (min-width: 44rem) { .facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .band--dark .facts { grid-template-columns: repeat(3, 1fr); } }
/* An odd-length list in the 2-column (non-dark) layout leaves a trailing
   empty coloured cell that reads as a missing certification. Scoped to
   :not(.band--dark) because .band--dark .facts goes to 3 columns above, where
   this rule would misfire on an unrelated item count. */
.band:not(.band--dark) .facts .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fact { background: var(--bg); padding: 1.1rem 1.25rem; }
.band--alt .fact { background: var(--bg-alt); }
.band--dark .fact { background: var(--slate-deep); }
.fact dt {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}
.band--dark .fact dt { color: var(--on-deep-strong); }
.fact dd { margin: 0.3rem 0 0; font-size: var(--step--1); color: var(--muted); }
.band--dark .fact dd { color: var(--on-deep-dim); }
.facts-heading {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-block-end: 1rem;
}
html[lang="ar"] .facts-heading { letter-spacing: 0; text-transform: none; }

/* The test footage note moved off the dark proof band and into the system
   disclosure, which is a light surface, so it is drawn from tokens now and
   keeps its old treatment where a dark band still holds it. */
.footage {
  margin-block-start: clamp(2.25rem, 4.5vw, 3.25rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--teal);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.footage p { margin-block-start: 0.6rem; color: var(--muted); }
.band--dark .footage {
  border-color: rgba(255, 255, 255, 0.18);
  border-inline-start-color: var(--teal-light);
  background: transparent;
}
.band--dark .footage p { color: inherit; }

.steps { counter-reset: s; display: grid; gap: 1.5rem; margin-block-start: 2rem; }
.steps > li {
  counter-increment: s;
  position: relative;
  padding-inline-start: 3.25rem;
}
.steps > li::before {
  content: counter(s);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--teal-text);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.steps p { margin-block-start: 0.35rem; color: var(--muted); }
.band--dark .steps > li::before { color: var(--teal-light); border-color: rgba(255, 255, 255, 0.28); }
.band--dark .steps p { color: var(--on-deep-muted); }

.ticks { display: grid; gap: 0.85rem; margin-block-start: 1.5rem; }
.ticks li { position: relative; padding-inline-start: 1.6rem; }
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--teal);
  border-radius: 1px;
}

/* ------------------------------------------------------------- disclosure */

/* Progressive disclosure, on native <details>. The client's brief was that a
   customer should read a short page and an engineer should still be able to
   drill in, so the technical depth is all still here, one summary row away.
   The rows are drawn in the same seamed grid as .cards, .certs and .products:
   1px lines in --line, a tinted row when open, tokens only, so the whole
   component follows the dark scheme without a second copy.
   Everything positional is logical, so the indicator sits at the inline end in
   both directions and turns the right way in Arabic. */

.disclose-stack {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.disclose + .disclose { border-block-start: 1px solid var(--line); }

.disclose-sum {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.05rem, 2.2vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.75rem);
  cursor: pointer;
  list-style: none;
}
/* Both halves of removing the default triangle: the marker is not generated
   at all once the summary is a flex box, and Safari's own marker needs this. */
.disclose-sum::-webkit-details-marker { display: none; }
.disclose-sum:hover { background: var(--bg-alt); }
.disclose[open] > .disclose-sum { background: var(--bg-alt); border-block-end: 1px solid var(--line); }
/* Inside the outline rather than outside it, so a focused row does not paint
   over the seam above and below it. */
.disclose-sum:focus-visible { outline-offset: -3px; }

.disclose-title {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  text-wrap: balance;
}
html[lang="ar"] .disclose-title { letter-spacing: 0; }

.disclose-more {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.55rem;
  margin-inline-start: auto;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--teal-text);
}
.disclose-lab { white-space: nowrap; }
.disclose-lab--show { display: block; }
.disclose-lab--hide { display: none; }
.disclose[open] > .disclose-sum .disclose-lab--show { display: none; }
.disclose[open] > .disclose-sum .disclose-lab--hide { display: block; }
@media (max-width: 30rem) { .disclose-lab { display: none !important; } }

/* Two borders of a square turned 45 degrees: a chevron pointing down when the
   section is closed and up when it is open. The borders are logical, so the
   corner that is drawn moves to the other side in Arabic, and the rotation is
   mirrored with it or the same corner would point the wrong way. The turn is
   a transition, which the reduced-motion block at the end of this file cuts. */
.disclose-ic {
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-0.13rem) rotate(45deg);
  transition: transform 0.18s ease;
}
[dir="rtl"] .disclose-ic { transform: translateY(-0.13rem) rotate(-45deg); }
.disclose[open] > .disclose-sum .disclose-ic { transform: translateY(0.1rem) rotate(-135deg); }
[dir="rtl"] .disclose[open] > .disclose-sum .disclose-ic { transform: translateY(0.1rem) rotate(135deg); }

.disclose-body {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.75rem, 3.5vw, 2.75rem);
}
.disclose-body > *:first-child { margin-block-start: 0; }
.disclose-prose p + p { margin-block-start: 1.1rem; }
.disclose-sub { margin-block-start: clamp(2.25rem, 4.5vw, 3.25rem); }
.disclose-sub > h3 { font-size: var(--step-2); }
.disclose-sub > h3 + p { margin-block-start: 1.1rem; }
.disclose-sub p + p { margin-block-start: 1.1rem; }
.disclose-body .diagram:first-child { margin-block-start: clamp(2rem, 4vw, 3rem); }

/* One question at a time, inside the questions disclosure. Same component,
   quieter: no label beside the chevron, no tinted row, and the question is a
   plain span rather than a heading, because the set already has one. */
/* No frame of its own: it is already inside one, and the row it opens under
   supplies the line above the first question. */
.disclose-stack--qa {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.disclose--qa > .disclose-sum { padding-inline: 0; padding-block: 1.05rem; }
.disclose--qa > .disclose-sum:hover { background: transparent; }
.disclose--qa > .disclose-sum:hover .disclose-title { color: var(--teal-text); }
.disclose--qa[open] > .disclose-sum { background: transparent; border-block-end: 0; padding-block-end: 0.35rem; }
.disclose--qa .disclose-title { font-size: var(--step-0); }
.disclose--qa > .disclose-body { padding: 0 0 1.15rem; color: var(--muted); }

.certs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-block-start: 2rem; }
.cert { background: var(--bg-alt); display: grid; gap: 0.25rem; padding: 1.1rem 1.25rem; }
@media (min-width: 44rem) { .cert { grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: baseline; } }
.cert dt { font-weight: 700; color: var(--ink-strong); }
.cert dd { margin: 0; font-size: var(--step--1); color: var(--muted); }

.products { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-block-start: 2rem; }
.product { background: var(--bg); padding: 1.25rem; }
.band--alt .product { background: var(--bg-alt); }
@media (min-width: 50rem) { .product { grid-template-columns: 18rem 1fr; display: grid; gap: 1.75rem; align-items: baseline; } }
.product dt { font-weight: 700; color: var(--ink-strong); }
.product dd { margin: 0.3rem 0 0; color: var(--muted); font-size: var(--step-0); }
@media (min-width: 50rem) { .product dd { margin-block-start: 0; } }

/* One category of the Madico range, repeated down a landing page. */
.range-cat + .range-cat { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
.range-cat h3 { font-size: var(--step-1); color: var(--ink-strong); }
.range-cat > p { margin-block-start: 0.7rem; color: var(--muted); max-width: 62ch; }

.table-scroll { overflow-x: auto; margin-block-start: 1.75rem; }
.spec { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.spec th, .spec td { text-align: start; padding: 0.8rem 1rem; border-block-end: 1px solid var(--line); vertical-align: baseline; }
.spec th { font-weight: 500; color: var(--muted); width: 45%; }
.spec td { font-weight: 600; color: var(--ink-strong); }

.legal h2 { font-size: var(--step-2); margin-block-start: 2.5rem; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { margin-block-start: 0.9rem; }
.legal hr { margin-block: 2.5rem 1.5rem; border: 0; border-block-start: 1px solid var(--line); }

/* ---------------------------------------------------------------- diagrams */

.diagram { margin-block-start: clamp(2rem, 4vw, 3rem); }
.dg-title {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-block-end: 1.25rem;
}
html[lang="ar"] .dg-title { letter-spacing: 0; text-transform: none; }
.band--dark .dg-title { color: var(--on-deep-faint); }
.dg-note { margin-block-start: 1.5rem; font-size: var(--step--1); color: var(--faint); max-width: 78ch; }
.band--dark .dg-note { color: var(--on-deep-faint); }

/* The two panel SVG edge section and its numbered legend were withdrawn on
   1 August 2026, so the geometry, panel and callout rules went with them. */

/* The load path was only ever drawn on the dark band. It is inside the system
   disclosure now, which is a light surface, so the defaults are tokens and the
   dark treatment is kept as an override for wherever a dark band still holds
   it. Nothing about the geometry changed. */
.lp-flow { display: grid; gap: 0.75rem; counter-reset: lp; }
@media (min-width: 56rem) { .lp-flow { grid-template-columns: repeat(5, 1fr); } }
.lp-step {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lp-n {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--teal-text);
  letter-spacing: 0.1em;
}
.lp-name { font-weight: 700; color: var(--ink-strong); }
.lp-note { font-size: var(--step--1); color: var(--muted); }
.lp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: -0.75rem;
  inset-block-start: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--teal);
  border-top: 2px solid var(--teal);
  transform: translateY(-50%) rotate(45deg);
}
.band--dark .lp-step { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.band--dark .lp-n { color: var(--teal-light); }
.band--dark .lp-name { color: var(--on-deep-strong); }
.band--dark .lp-note { color: var(--on-deep-dim); }
.band--dark .lp-step:not(:last-child)::after { border-right-color: var(--teal-light); border-top-color: var(--teal-light); }
[dir="rtl"] .lp-step:not(:last-child)::after { transform: translateY(-50%) rotate(-135deg); }
@media (max-width: 55.99rem) {
  .lp-step:not(:last-child)::after {
    inset-inline-end: auto;
    inset-inline-start: 1.35rem;
    inset-block-start: auto;
    inset-block-end: -0.7rem;
    transform: rotate(135deg);
  }
  [dir="rtl"] .lp-step:not(:last-child)::after { transform: rotate(135deg); }
}

.gsa-scale { margin-block-end: 1.75rem; }
.gsa-axis { font-size: var(--step--1); font-weight: 700; color: var(--faint); }
.gsa-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-block-start: 0.5rem; }
.gsa-cell {
  padding-block: 0.6rem;
  text-align: center;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-strong);
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
}
.band--alt .gsa-cell { background: var(--bg); }
.gsa-cell[data-cat="1"] { background: var(--tint-1); }
.gsa-cell[data-cat="2"] { background: var(--tint-2); }
.gsa-cell[data-cat="4"] { background: var(--tint-4); }
.gsa-cell[data-cat="5"] { background: var(--tint-5); }
.gsa-ends { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--faint); margin-block-start: 0.4rem; }

.gsa-row { display: grid; gap: 0.5rem; padding-block: 1rem; border-block-start: 1px solid var(--line); }
@media (min-width: 50rem) { .gsa-row { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; } }
.gsa-row-label strong { display: block; color: var(--ink-strong); }
.gsa-row-label span { font-size: var(--step--1); color: var(--muted); }
.gsa-track { position: relative; height: 0.85rem; background: var(--line); border-radius: 2px; }
.gsa-span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc((var(--from) - 1) / 5 * 100%);
  inline-size: calc((var(--to) - var(--from) + 1) / 5 * 100%);
  border-radius: 2px;
}
.gsa-row--good .gsa-span { background: var(--teal); }
.gsa-row--mid .gsa-span { background: var(--grey); }
.gsa-row--bad .gsa-span { background: var(--warn); }

.anch-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 44rem) { .anch-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .anch-grid { grid-template-columns: repeat(4, 1fr); } }
.anch-card { background: var(--surface-card); padding: 1.25rem; }
.anch-card p { margin-block-start: 0.5rem; font-size: var(--step--1); color: var(--muted); }
.anch-card--specified { background: var(--tint-spec); border-block-start: 3px solid var(--teal); }

.th-group + .th-group { margin-block-start: 2rem; }
.th-group h3 { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
html[lang="ar"] .th-group h3 { letter-spacing: 0; text-transform: none; }
.th-list { margin-block-start: 0.9rem; display: grid; gap: 0.55rem; }
.th-item { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr auto; gap: 0.5rem 1rem; align-items: center; font-size: var(--step--1); }
.th-name { font-weight: 600; color: var(--ink-strong); }
.th-bar { display: block; height: 0.7rem; background: var(--line); border-radius: 2px; }
.th-bar > span { display: block; height: 100%; width: var(--w); background: var(--teal); border-radius: 2px; }
.th-val { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
@media (max-width: 32rem) {
  .th-item { grid-template-columns: 1fr auto; }
  .th-bar { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- contact */

.band--contact { background: var(--bg-alt); border-block-start: 1px solid var(--line); }
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; } }

.contact-list { margin-block-start: 1.75rem; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.contact-list > li { background: var(--surface-card); }
.contact-list a, .contact-list > li > span:first-child { display: block; }
.contact-list > li > a, .contact-list > li:not(:has(a)) { display: block; padding: 0.9rem 1.1rem; text-decoration: none; }
.contact-list > li:not(:has(a)) { padding: 0.9rem 1.1rem; }
.contact-k { display: block; font-size: var(--step--1); color: var(--faint); }
.contact-v { display: block; font-weight: 700; color: var(--ink-strong); }
.contact-note { display: block; font-size: var(--step--1); color: var(--teal-text); }
.contact-list a:hover .contact-v { color: var(--teal-text); }
.contact-wa { border-inline-start: 3px solid var(--teal); }

.contact-list--compact { margin-block-start: 0; background: transparent; border: 0; gap: 0.75rem; }
.contact-list--compact > li { background: transparent; }
.contact-list--compact > li > a, .contact-list--compact > li:not(:has(a)) { padding: 0; }
.contact-list--compact .contact-note { display: none; }
.contact-list--compact.contact-wa { border: 0; }
.contact-list--compact > .contact-wa { border-inline-start: 0; }

/* ---------------------------------------------------------------- form */

.contact-form-wrap { position: relative; }
.form {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form-heading { font-size: var(--step-2); }
.field { display: grid; gap: 0.35rem; }
.field-pair { display: grid; gap: 1.1rem; }
@media (min-width: 34rem) { .field-pair { grid-template-columns: 1fr 1fr; } }
.form label { font-size: var(--step--1); font-weight: 600; color: var(--ink-strong); }
.opt { font-weight: 400; color: var(--faint); }
.form input, .form select, .form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: var(--step-0);
  color: var(--body);
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.form textarea { resize: vertical; min-height: 6rem; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--teal-text);
  outline-offset: 1px;
  border-color: var(--teal-text);
}
.form [aria-invalid="true"] { border-color: var(--warn); }
.err { font-size: var(--step--1); color: var(--warn); font-weight: 600; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: grid; gap: 0.85rem; margin-block-start: 0.35rem; }
.form-foot .btn { justify-self: start; }
.privacy-note { font-size: var(--step--1); color: var(--faint); }
.form-result {
  padding: 1.1rem 1.25rem;
  border-inline-start: 3px solid var(--teal);
  background: var(--bg-alt);
  border-radius: var(--radius);
}
.form-result h3 { font-size: var(--step-1); }
.form-result p { margin-block-start: 0.4rem; font-size: var(--step-0); color: var(--muted); }
.form-result--bad { border-inline-start-color: var(--warn); }
.form.is-sent > *:not(.form-result) { display: none; }

/* ---------------------------------------------------------------- footer */

.site-foot { background: var(--slate-deep); color: var(--on-deep-dim); padding-block: clamp(2.75rem, 6vw, 4.5rem) 0; }
.foot-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 44rem) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; } }
.foot-mark { width: 130px; height: auto; }
.foot-brand p { margin-block-start: 1.1rem; font-size: var(--step--1); max-width: 34ch; }
.foot-credential { width: 200px; height: auto; margin-block-start: 1.5rem; opacity: 0.92; }
.foot-col h2 { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-deep-strong); }
html[lang="ar"] .foot-col h2 { letter-spacing: 0; text-transform: none; }
.foot-col ul { margin-block-start: 1rem; display: grid; gap: 0.6rem; }
.foot-col a { font-size: var(--step--1); color: var(--on-deep-dim); text-decoration: none; }
.foot-col a:hover { color: var(--on-deep-strong); text-decoration: underline; }
.foot-col--contact .contact-k { color: var(--on-deep-quiet); }
.foot-col--contact .contact-v { color: var(--on-deep-strong); font-size: var(--step--1); }
.foot-col--contact .contact-list { margin-block-start: 1rem; }
.foot-col--contact a:hover .contact-v { color: var(--teal-light); }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block: 1.35rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--step--1);
  color: var(--on-deep-quiet);
}

/* ---------------------------------------------------------------- mobile nav */

@media (max-width: 63.99rem) {
  .burger {
    display: grid;
    place-items: center;
    order: 3;
    margin-inline-start: auto;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .burger-bars, .burger-bars::before, .burger-bars::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    background: var(--ink-strong);
    transition: transform 0.2s, opacity 0.2s;
  }
  .burger-bars::before, .burger-bars::after { content: ""; position: absolute; }
  .burger-bars::before { transform: translateY(-6px); }
  .burger-bars::after { transform: translateY(6px); }
  .burger[aria-expanded="true"] .burger-bars { background: transparent; }
  .burger[aria-expanded="true"] .burger-bars::before { transform: rotate(45deg); }
  .burger[aria-expanded="true"] .burger-bars::after { transform: rotate(-45deg); }
  .burger .burger-close { display: none; }
  .burger[aria-expanded="true"] .burger-open { display: none; }
  .burger[aria-expanded="true"] .burger-close { display: inline; }

  .site-nav {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding-block: 1.25rem 1.5rem;
    border-block-start: 1px solid var(--line);
  }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; gap: 0; font-size: var(--step-0); }
  .nav-list a {
    display: block;
    width: 100%;
    padding-block: 0.8rem;
    border-block-end: 1px solid var(--line);
    border-inline-start: 3px solid transparent;
    padding-inline-start: 0.75rem;
  }
  .nav-list a[aria-current="page"] {
    border-block-end-color: var(--line);
    border-inline-start-color: var(--teal);
  }
  .site-head-in { flex-wrap: wrap; padding-block: 0.7rem; }
}

@media (min-width: 64rem) {
  .site-nav { display: flex !important; }
}

/* ------------------------------------------------------------- transitions */

/* Same-origin navigation cross-fades instead of hard-cutting. Progressive
   enhancement: browsers without support just navigate as before, no JS
   involved either way. */
@view-transition {
  navigation: auto;
}

/* ---------------------------------------------------------------- motion */

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

  /* The pair above only reaches the normal DOM tree; the view-transition
     snapshot pseudo-elements live outside it, so the cross-fade needs its
     own animation cut. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

@media print {
  .site-head, .site-foot, .window, .secondary, .form, .skip, .ld { display: none !important; }
  .band { padding-block: 1rem; }
  .band--dark { background: #fff; color: #000; }
  .band--dark h2, .band--dark h3 { color: #000; }
}