/* ==========================================================================
   STYLE.CSS — organised in numbered sections; see the banners below.
   Tokens live in root.css, RTL corrections in rtl.css.
   ========================================================================== */

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Do not add `scroll-behavior: smooth`. On this page it silently stops every
   jump to a fragment: the hash updates but the viewport never moves. */
html {
  -webkit-text-size-adjust: 100%;
}

/* Two rings on purpose: a dark outline that reads on light surfaces and on the
   brand green, wrapped in a bright green halo that reads on the dark chrome.
   One of the two is always visible, whatever the ring lands on. */
:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-primary);
}

/* Bootstrap sets its own blue focus shadow on these at the same specificity;
   this wins only because our stylesheet loads after it. */
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.dropdown-toggle:focus-visible,
.btn:focus-visible {
  box-shadow: 0 0 0 4px var(--color-primary);
}

/* First thing in the tab order, off-screen until focused. */
.skip-link {
  position: absolute;
  inset-inline-start: 0;
  top: -100px;
  z-index: var(--z-skip-link);
  padding: 12px 22px;
  background-color: var(--color-heading);
  color: var(--color-white);
  font-size: 15px;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-body);
  background-color: var(--bg-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: var(--fs-p);
  color: var(--color-body);
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-heading);
}

/* Container width comes from two variables */
.container,
.container-lg,
.container-xl,
.container-xxl {
  width: var(--container-width);
  max-width: var(--container-max);
  padding-left: 0;
  padding-right: 0;
}

/* The navbar sits in a slightly wider container than the page content */
.site-header .container,
.topbar .container {
  width: var(--header-container-width);
  max-width: var(--header-container-max);
}

/* The whole admin area runs wider than the marketing pages. Its tables carry
   seven columns; at the public width the title, URL and date columns all wrap
   and every row grows to three lines. Covers the admin header too, so the nav
   stays flush with the content below it. */
.admin-body .container {
  width: var(--admin-container-width);
  max-width: var(--admin-container-max);
}

@media (max-width: 767.98px) {
  .container,
  .container-lg,
  .container-xl,
  .container-xxl { width: 92%; }
}

/* ==========================================================================
   2. TYPOGRAPHY — global element styling driven by variables
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-heading);
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h6, .h6 { font-size: var(--fs-h6); }

p {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-body);
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: var(--transition-fast);
}

/* No underline on any link, in any state, anywhere on the site — including
   the ones Bootstrap and the browser default styles would underline. Hover
   feedback is carried by colour or opacity instead. */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-link-hover);
}

strong, b { font-weight: var(--fw-semibold); }
small { font-size: var(--fs-small); }

/* Section eyebrow label — "BUSINESS STRATEGY" */
.section-label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-heading);
}

/* on dark backgrounds the label turns white with the rest of the block */
.text-light-block .section-label { color: var(--color-white); }

/* ==========================================================================
   3. HELPERS / UTILITIES
   ========================================================================== */
/* Highlight span inside headings — deep green on light sections, bright green
   on the dark bands, where the deep tone would go muddy. */
.text-primary-color { color: var(--color-primary-deep) !important; }

.hero .text-primary-color,
.cta .text-primary-color,
.blog .text-primary-color,
.history .text-primary-color { color: var(--color-primary) !important; }

/* ---- Background patterns ----
   A dot grid drawn on the section itself, so its background-color still shows
   through as the base layer. Sections with a photographic background are left
   alone. */

/* On the dark bands the same weight reads as a white tint instead. */
.history,
.cta--dark {
  --pattern-ink: rgba(255, 255, 255, 0.05);
}

/* Where the pattern lands. Set on the components rather than sprinkled through
   the markup as a utility class, so every page picks up the same rhythm and a
   new page built from these blocks inherits it for free. */
.strategies,
.legal,
.service-links,
.maturity,
.history,
.mission,
.checklist,
.wwd {
  background-image: radial-gradient(circle, var(--pattern-ink) 1px, transparent 1px);
  background-size: var(--pattern-dot) var(--pattern-dot);
}

/* ---- Card wash ----
   A soft green rise from the bottom edge of every content card. Each card
   already sets only a background-color, so this layers over it without
   disturbing the hover states that change that colour. */
.strategy-card,
.maturity__stage,
.process-step__body,
.wwd-card,
.blog-card,
.compare__item {
  background-image: var(--card-glow);
}

/* Light text block (used on dark/overlay backgrounds) */
.text-light-block h1,
.text-light-block h2,
.text-light-block h3,
.text-light-block h4,
.text-light-block h5,
.text-light-block h6 { color: var(--color-heading-light); }

.text-light-block p { color: var(--color-body-light); }

/* ==========================================================================
   4. BUTTONS — one standard base class, colors handled by modifiers
   ========================================================================== */
.btn-std {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--btn-gap);
  min-width: var(--btn-min-width);
  height: var(--btn-height);
  padding-block: var(--btn-padding-y);
  padding-inline: var(--btn-padding-left) var(--btn-padding-x);
  border: var(--btn-border-width) solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-heading);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition-base);
}

/* No `outline: none` here — it would suppress the global focus ring. */
.btn-std:focus-visible {
  box-shadow: 0 0 0 3px rgba(164, 206, 78, 0.35);
}

/* Circular icon inside the button */
.btn-std .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--btn-icon-size);
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  border-radius: var(--radius-circle);
  font-size: 12px;
  transition: var(--transition-base);
}

.btn-std:hover .btn-icon {
  transform: rotate(-45deg);
}

/* ---- Color modifiers ---- */
.btn-primary-std {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-secondary);
}

.btn-primary-std .btn-icon {
  background-color: var(--color-white);
  color: var(--color-secondary);
}

.btn-primary-std:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-secondary);
}

.btn-white-std {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-heading);
}

.btn-white-std .btn-icon {
  background-color: var(--color-primary);
  color: var(--color-heading);
}

/* This button only ever sits on a green panel, so it darkens on hover
   instead of turning the same green as the panel behind it. */
.btn-white-std:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-white-std:hover .btn-icon {
  background-color: var(--color-white);
  color: var(--color-secondary);
}

.btn-outline-std {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-white);
}

.btn-outline-std .btn-icon {
  background-color: var(--color-primary);
  color: var(--color-heading);
}

.btn-outline-std:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-secondary);
}

/* Button without an icon keeps balanced padding */
.btn-std.btn-plain {
  justify-content: center;
  padding-inline-end: var(--btn-padding-left);
}

/* ==========================================================================
   5. TOP BAR
   ========================================================================== */
/* Wrapper that floats the topbar + header over the hero */
.header-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
}

.topbar {
  position: relative;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  min-height: var(--topbar-height);
  padding: var(--topbar-padding-y) 0;
  background-color: var(--bg-topbar);
  font-size: var(--topbar-font-size);
  color: var(--color-heading);   /* dark ink — the bar is brand green */
}

.topbar a,
.topbar span {
  color: var(--color-heading);
  font-size: var(--topbar-font-size);
}

/* Dark-on-green leaves little room for a colour shift, so hover fades the
   ink slightly instead. No underline anywhere on the site. */
.topbar a:hover {
  color: var(--color-heading);
  opacity: 0.7;
}

.topbar-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.topbar-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 15px;
  line-height: 1.4;
}

.topbar-list li:first-child { padding-inline-start: 0; }
.topbar-list li:last-child  { padding-inline-end: 0; }

.topbar-list.topbar-left li + li {
  border-inline-start: 1px solid rgba(20, 35, 26, 0.25);
}

.topbar-list i { font-size: 13px; }

.topbar .dropdown-toggle::after { display: none; }

.topbar .dropdown-menu {
  min-width: 150px;
  padding: 8px 0;
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
   overflow: hidden;
  padding: 0 !important;
}

.topbar .dropdown-menu a {
  display: block;
  padding: 7px 16px;
  color: var(--color-body);
  font-size: var(--fs-small);
 
}

.topbar .dropdown-menu a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-heading);
}

/* ---- Language switch ----
   Two-letter codes and a globe, so the control stays narrow. The menu is
   sized to the codes rather than to full language names. */
/* The vertical padding is what makes this work on hover: it grows the list
   item down to meet the menu, so there is no dead strip between the two for
   the pointer to fall through. */
.lang-switch__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-block: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

/* Opens on hover as well as on click. Bootstrap only positions the menu once
   its JS adds [data-bs-popper], so the hover state has to place it itself;
   the ::before bridges the gap under the toggle, or the menu would close as
   the pointer crossed it. Click still works, which is what touch devices and
   the keyboard fall back to. */
.topbar .lang-switch__menu {
  min-width: 0;
  padding: 6px 0;
}

/* Flush against the toggle — a margin here would reopen the gap the padding
   above exists to close. At least as wide as the toggle too, so moving the
   pointer straight down always lands on the menu rather than beside it. */
.lang-switch:hover > .lang-switch__menu,
.lang-switch:focus-within > .lang-switch__menu {
  display: block;
  top: 100%;
  inset-inline-end: 0;
  inset-inline-start: auto;
  min-width: 100%;
  margin-top: 0;
}

.lang-switch__menu li{
padding:  0 !important;
}

.topbar .lang-switch__menu a {
  padding: 6px 18px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-align: center;
}

.topbar .lang-switch__menu a[aria-current="true"] {
  background-color: var(--color-primary-light);
  color: var(--color-heading);
}

/* ==========================================================================
   6. HEADER / NAVIGATION
   ========================================================================== */
/* Deliberately not sticky — the header stays in flow and scrolls away. */
.site-header {
  position: relative;
  width: 100%;
  z-index: var(--z-header);
  padding: var(--header-gap) 0 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--header-height);
  /* Symmetric: the two ends of the pill have to be equal or the centred logo
     lands off the true centre line by half the difference. The asymmetry here
     dated from the logo sitting hard left. Mobile overrides it below, where
     the bar is logo-left / toggle-right again. */
  padding: var(--header-pad-y) var(--header-pad-left);
  background-color: var(--nav-glass-bg);
  border: 1px solid var(--nav-glass-border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---- Logo ----
   Source order keeps the lockup first, so the link home is the first thing
   reached by keyboard and screen reader; `order` moves it between the two
   nav halves visually. --logo-gap is the breathing room on each side, so the
   nav items never butt up against the artwork. */
.site-logo {
  order: 2;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-inline: var(--logo-gap);
  line-height: 0;              /* no descender gap under the inline svg */
}

.main-nav--start { order: 1; }
.main-nav--end   { order: 3; }
.header-actions  { order: 4; }

/* Equal-width halves are what centre the logo; without flex-basis:0 the wider
   group would push it off the centre line. */
.main-nav--start,
.main-nav--end {
  flex: 1 1 0;
  min-width: 0;
}

.main-nav--start .nav-list { justify-content: flex-end; }
.main-nav--end .nav-list   { justify-content: flex-start; }

.site-logo .logo-svg {
  display: block;
  height: var(--logo-height);
  width: auto;
  transition: var(--transition-fast);
}

.site-logo:hover .logo-svg { opacity: 0.85; }

/* ---- Nav ---- */
.main-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-nav .nav-item { position: relative; }

.main-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: var(--nav-link-pad-y) var(--nav-link-pad-x);
  font-family: var(--font-heading);
  font-size: var(--nav-font-size);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  letter-spacing: 0;
}

.main-nav .nav-link i {
  font-size: 11px;
  transition: var(--transition-fast);
}

.main-nav .nav-item:hover > .nav-link,
.main-nav .nav-item.active > .nav-link {
  color: var(--color-primary);
}

.main-nav .nav-item:hover > .nav-link i { transform: rotate(180deg); }

/* ---- Dropdown ---- */
.submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 1;
  min-width: 220px;
  white-space: nowrap;
  margin-top: 14px;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: var(--transition-base);
  overflow: hidden;
}

/* Bridges the panel's top margin, which is otherwise dead space the pointer
   crosses on the way down — the panel would close before it was reached. */
.main-nav .submenu::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: 14px;
}

.main-nav .nav-item:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu li a {
  display: block;
  padding: 9px 24px;
  font-size: 15px;
  font-weight: var(--fw-regular);
  color: var(--color-body);
}

/* Tinted row, not green text — green on white is 1.82:1. No indent either;
   it reflowed the label on every hover. */
.submenu li a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-heading);
}

/* ---- Header actions ---- */
/* No auto margin here on desktop: an auto margin is resolved before flex-grow,
   so it would swallow the free space the two nav halves need in order to come
   out equal, and the logo would drift off centre. It is restored at the
   breakpoint where the nav halves disappear. */
.header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 14px;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-circle);
  background-color: var(--color-primary);
  color: var(--color-heading);
  font-size: 18px;
  align-items: center;
  justify-content: center;
}

/* ---- Mobile off-canvas menu ---- */
.mobile-nav {
  position: fixed;
  top: 0;
  inset-inline-end: -320px;
  width: 300px;
  height: 100%;
  z-index: var(--z-mobile-nav);
  padding: 26px 24px;
  background-color: var(--bg-dark);
  overflow-y: auto;
  transition: var(--transition-base);
}

.mobile-nav.open { inset-inline-end: 0; }

.mobile-nav .mobile-close {
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  color: var(--color-white);
  font-size: 20px;
}

.mobile-nav .site-logo { margin-bottom: 34px; padding-inline: 0; --logo-height: var(--logo-height-mobile-nav); }

.mobile-nav .nav-list { display: block; }

.mobile-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--color-white);
}

.mobile-nav .nav-link:hover { color: var(--color-primary); }
.mobile-nav .nav-link i { font-size: 11px; }

.mobile-nav .submenu {
  position: static;
  display: none;
  min-width: auto;
  margin: 0;
  padding: 4px 0 8px;
  padding-inline-start: 14px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mobile-nav .submenu.show { display: block; }

/* ---- Language switch inside the drawer ----
   Hidden by default: it only takes over below 600px, where the topbar that
   normally carries the switch is dropped. Above that the topbar still has
   it, and showing both would give two controls for the same thing. */
.mobile-nav__lang {
  display: none;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-nav__lang-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-body-light);
}

.mobile-nav__lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav__lang-link {
  display: inline-block;
  min-width: 52px;
  padding: 9px 0;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-p-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-white);
  transition: var(--transition-fast);
}

/* Dark ink on the brand green — white would drop to roughly 1.8:1 */
.mobile-nav__lang-link:hover,
.mobile-nav__lang-link.is-active {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}
.mobile-nav .submenu li a { padding: 8px 0; color: var(--color-body-light); }
.mobile-nav .submenu li a:hover { padding-inline-start: 6px; color: var(--color-primary); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav-overlay);
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
}

.nav-overlay.show { opacity: 1; visibility: visible; }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 240px 0 140px;
  overflow: hidden;
}

/* Holds the <img> emitted by partials/picture. */
.hero__bg {
  position: absolute;
  inset: 0;
  background-color: var(--media-placeholder);
}

/* Shared by every media wrapper containing a photograph. */
.media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Color overlay sitting on top of the image */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16,28,22,0.90) 0%, rgba(16,28,22,0.60) 52%, rgba(16,28,22,0.28) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: calc(var(--hero-content-max) + var(--hero-indent));
  padding-inline-start: var(--hero-indent);
}

.hero__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  color: var(--color-heading-light);
}

.hero__title .highlight { color: var(--color-primary); }

.hero__text {
  max-width: 810px;
  margin-bottom: 32px;
  font-size: var(--fs-p-sm);
  line-height: 1.8;
  color: var(--color-body-light);
}

/* no trailing gap when the copy is the last thing in the hero */
.hero__text:last-child { margin-bottom: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  :root { --nav-link-pad-x: 10px; --nav-font-size: 14px; --header-pad-left: 26px; }
}

@media (max-width: 991.98px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-std { display: none; }
  .site-header { padding: 18px 0; }
  /* min-height comes from --header-height so it stays in step with the logo. */
  .header-inner { padding: 10px 14px 10px 22px; }
  .hero { padding: 210px 0 110px; }

  /* Both nav halves are gone, so the bar is just the lockup and the toggle:
     logo hard left, hamburger hard right, and no side padding on the logo
     because there is nothing left for it to clear. */
  .site-logo { padding-inline: 0; }
  .header-actions { margin-inline-start: auto; }
}

/* Below 600px the topbar's two lists can no longer share a row. They wrap,
   the bar grows to roughly twice its 60px design height and the email and
   location strings break mid-word, which is what made the top of every page
   look broken on a phone. The bar is dropped entirely at that width and the
   language switch moves into the off-canvas menu, so nothing is lost. */
@media (max-width: 599.98px) {
  .topbar { display: none; }
  .mobile-nav__lang { display: block; }
}

@media (max-width: 767.98px) {
  .topbar { text-align: center; }
  .topbar-list { justify-content: center; }
  .topbar-list li { padding: 2px 12px; }
  .hero { padding: 230px 0 90px; }
}

@media (max-width: 575.98px) {
  .topbar-list li { font-size: var(--fs-xs); padding: 2px 8px; }
  .topbar-list.topbar-left li + li { border-inline-start: none; }
  .hero__text { margin-bottom: var(--space-md); }
}

/* ==========================================================================
   8. ABOUT SECTION
   ========================================================================== */
.about {
  padding: var(--about-pad-top) 0 var(--about-pad-bottom);
  background-color: var(--bg-light);
}

/* ---- Heading block ---- */
.about__title {
  max-width: 1240px;
  margin-bottom: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.about__row {
  --bs-gutter-x: 0;
  margin-top: 84px;
}

/* ---- Feature items ---- */
.feature {
  display: flex;
  align-items: flex-start;
  gap: var(--feature-gap);
}

.feature__icon {
  flex: 0 0 var(--feature-icon-size);
  width: var(--feature-icon-size);
  height: var(--feature-icon-size);
  color: var(--color-heading);
  transition: var(--transition-base);
}

.feature__icon svg { width: 100%; height: 100%; fill: currentColor; }

.feature:hover .feature__icon { color: var(--color-primary-deep); }

/* Lets a long title shrink instead of pushing the icon out of the row. */
.feature__body { min-width: 0; }

.feature__title {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0;
}

.feature__text {
  max-width: 360px;
  margin-bottom: 0;
  font-size: var(--fs-xs);
  line-height: 1.9;
}

/* ---- Intro paragraph + button ---- */
.about__text {
  max-width: 900px;
  margin: 74px 0 0;
  font-size: var(--fs-p-sm);
  line-height: 1.85;
}

/* On the industry page this paragraph opens its column instead of following
   the feature blocks, so most of the gap belongs underneath it. It still
   needs a little above, or it runs straight into the section head's own
   paragraph and the two read as one block. */
.about__text--lead { margin: 24px 0 46px; }

.about__btn { margin-top: 49px; }

/* ---- Media / image card ---- */
.about__media {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.about__media-img {
  aspect-ratio: 513 / 359;
  background-color: var(--media-placeholder);
}

/* Glass info card pinned to the bottom of the image */
.about__card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* No max-width — a cap here makes the panel outgrow .about__media and get
     clipped by its overflow:hidden. */
  padding: 10px;
  /* Dark scrim: the copy sits over a bright sky. */
  background-color: rgba(20, 35, 26, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.about__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  background-color: var(--color-primary);
  border-radius: 10px;
  color: var(--color-heading);
}

.about__card-icon svg { width: 30px; height: 30px; fill: currentColor; }

/* Lets the text column shrink; without it the panel outgrows its container. */
.about__card-body { min-width: 0; }

.about__card-title {
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-white);
}

.about__card-text {
  margin-bottom: 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Stats ---- */
/* Equal tracks, not flex + space-between: the stats are content-sized, so
   flex leaves the widest one to wrap alone onto a second row. */
.about__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 30px 40px;
  margin-top: 97px;
}

@media (max-width: 1399.98px) {
  .about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 22px;
}

.stat__num {
  font-family: var(--font-heading);
  font-size: var(--stat-font-size);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--color-heading);
}

.stat__num small {
  font-size: 0.4em;
  font-weight: var(--fw-bold);
}

.stat__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--color-heading);
}

/* ---- About responsive ---- */
@media (max-width: 991.98px) {
  .about__row { margin-top: 46px; }
  .about__media {
    max-width: 640px;
    margin-top: 46px;
  }
  .about__media-img { aspect-ratio: 16 / 10; }
  .about__text { margin-top: 40px; }
  .about__btn { margin-top: 36px; }
  .about__stats { margin-top: 64px; gap: 28px 30px; }
  .feature__title { font-size: 20px; }
}

@media (max-width: 575.98px) {
  .about__stats { grid-template-columns: 1fr; gap: 22px; }
  .stat { gap: 14px; }
}

/* ==========================================================================
   9. SERVICES SECTION
   ========================================================================== */
.services {
  padding: var(--services-pad-top) 0 var(--services-pad-bottom);
  background-color: var(--bg-body);
}

/* ---- Heading row ---- */
.services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
}

.services__title {
  max-width: 780px;
  margin-bottom: 0;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--color-heading);
}

/* Button that hugs its label instead of using the shared min-width */
.btn-auto-std { min-width: auto; }

/* ---- List ---- */
.services__list {
  margin-top: 107px;
  padding-top: 29px;
  border-top: 1px solid var(--border-color);
}

.service {
  position: relative;
  display: flex;
  align-items: center;
  /* Horizontal padding is reserved in every state and pulled back out with a
     negative margin, so a resting row still lines up with the container and
     nothing shifts sideways on hover. */
  padding: var(--service-row-pad-y) var(--service-card-pad-x);
  margin-inline: calc(-1 * var(--service-card-pad-x));
  border-radius: 20px;
  color: var(--color-heading);
  transition: var(--transition-base);
}

/* divider drawn as a line so the row's own radius never bends it */
.service::after {
  content: "";
  position: absolute;
  /* matches the row's reserved padding so the rule spans the visible content */
  inset-inline: var(--service-card-pad-x);
  bottom: 0;
  height: 1px;
  background-color: var(--border-color);
  transition: var(--transition-fast);
}

/* no divider before or after the open card, and none after the last row */
.services__list .service:last-child::after,
.service:has(+ .is-active)::after,
.service:has(+ :hover)::after,
.service.is-active::after,
.service:hover::after { opacity: 0; }

.service__icon {
  flex: 0 0 var(--service-icon-size);
  width: var(--service-icon-size);
  margin-inline-end: var(--service-icon-gap);
  color: var(--color-primary-deep);
  line-height: 0;
  transition: var(--transition-base);
}

.service__icon svg { width: 100%; height: auto; fill: currentColor; }

.service__title {
  flex: 1 1 auto;
  max-width: var(--service-title-width);
  margin-bottom: 0;
  font-size: var(--service-title-size);
  font-weight: var(--fw-semibold);
  line-height: var(--service-title-lh);
  letter-spacing: 0;
  color: inherit;
  /* Must match the row's transition, or the colour snaps while the background
     is still fading and the heading vanishes for a third of a second. */
  transition: var(--transition-base);
}

.service__right {
  display: flex;
  align-items: center;
  gap: var(--service-gap);   /* constant — animating it slides the row's copy */
  margin-inline-start: auto;
  transition: var(--transition-base);
}

.service__info { width: var(--service-desc-width); }

.service__text {
  margin-bottom: 6px;
  font-size: var(--service-desc-size);
  line-height: 1.65;
  color: var(--color-body);
  transition: var(--transition-base);
}

.service__link {
  display: inline-block;
  font-size: var(--service-desc-size);
  font-weight: var(--fw-regular);
  color: var(--color-primary-deep);
  transition: var(--transition-base);
}

.service__arrow i { transform: rotate(-45deg); }

.service__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Space held in both states; only opacity and scale change, so nothing to
     the left of it reflows on hover. */
  flex: 0 0 var(--service-arrow-size);
  width: var(--service-arrow-size);
  height: var(--service-arrow-size);
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--color-heading);
  opacity: 0;
  transform: scale(0.8);
  transition: var(--transition-base);
}

/* ---- Active / hover state — the green card ---- */
/* Dark ink on the green panel — white on it is 1.82:1. */
.service.is-active,
.service:hover {
  background-color: var(--color-primary);
  border-color: transparent;
  color: var(--color-heading);
}


.service.is-active .service__title,
.service:hover .service__title { color: var(--color-heading); }

.service.is-active .service__text,
.service:hover .service__text { color: var(--color-heading); }

.service.is-active .service__link,
.service:hover .service__link { color: var(--color-heading); }

/* Fades but keeps its box — collapsing it drags the title left. */
.service.is-active .service__icon,
.service:hover .service__icon { opacity: 0; }

.service.is-active .service__arrow,
.service:hover .service__arrow {
  opacity: 1;
  transform: scale(1);
}

/* Vertical padding only — what it gives up comes back as margin, so the row
   keeps its slot. Horizontal padding is reserved on .service and left alone. */
.service:hover:not(.is-active),
.service.is-active {
  padding-block: var(--service-card-pad-y);
  margin-block: calc(var(--service-row-pad-y) - var(--service-card-pad-y));
}

/* ---- Services responsive ---- */
@media (max-width: 991.98px) {
  .services__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  .services__list { margin-top: 44px; }
  .service {
    flex-wrap: wrap;
    gap: 14px;
  }
  .service__icon { align-self: center; }
  .service__title {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  .service__right { width: 100%; margin-inline-start: 0; }
  .service__info { width: auto; flex: 1 1 auto; }
}

@media (max-width: 575.98px) {
  .service__icon { display: none; }
  .service__title br { display: none; }

  /* The negative margin above pulls the row 24px outside the container on
     each side. Once the container's own margin is narrower than that — it is
     8% of the viewport, so below roughly 600px — the row hangs off the
     document and takes the whole page into horizontal scroll. The padding
     stays reserved in every state, so hover still does not shift anything;
     the rows simply sit inside the container instead of bleeding past it. */
  .service { margin-inline: 0; }
}

/* ==========================================================================
   10. CTA BANNER
   ========================================================================== */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--cta-height);
  overflow: hidden;
}

/* Background layer */
.cta__bg {
  position: absolute;
  inset: 0;
  background-color: var(--media-placeholder);
}

/* Colour overlay — rendered by the dark variant only, so the default banner
   shows the photograph untouched */
.cta__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--cta-overlay-dark);
}

.cta .container { position: relative; z-index: 2; }

/* Dark variant — same banner under a near-black wash */
.cta--dark {
  --media-placeholder: var(--media-placeholder-dark);
}

/* The banner carries a headline and nothing else, aligned to the start edge
   so it mirrors to the right in Arabic without an RTL override. */
.cta__content { text-align: start; }

.cta__title {
  max-width: var(--cta-title-width);
  margin: 0;
  font-size: var(--cta-title-size);
  line-height: var(--cta-title-lh);
  color: var(--color-heading-light);
}

.cta__btn { margin-top: 30px; }

/* ==========================================================================
   11. WHAT WE DO  (cards)
   ========================================================================== */
.wwd {
  padding: var(--wwd-pad-top) 0 var(--wwd-pad-bottom);
  background-color: var(--bg-light);
}

.wwd__head { text-align: center; }

.wwd__title {
  margin-bottom: 0;
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--color-heading);
}

/* ---- Cards ---- */
.wwd__cards {
  --bs-gutter-x: var(--wwd-gutter);
  --bs-gutter-y: var(--wwd-gutter);
  margin-top: var(--wwd-head-gap);
}

.wwd-card {
  height: 100%;
  padding: var(--wwd-card-pad-y) var(--wwd-card-pad-x) calc(var(--wwd-card-pad-y) + 8px);
  background-color: var(--color-white);
  border-radius: var(--wwd-card-radius);
  transition: var(--transition-base);
}

.wwd-card__icon {
  display: flex;
  align-items: center;
  height: var(--wwd-icon-size);
  margin-bottom: 24px;
  color: var(--color-heading);
  transition: var(--transition-base);
}

/* Material Symbols glyph — kept light-weight so it reads as a line icon */
.wwd-card__icon .material-symbols-outlined {
  font-size: var(--wwd-icon-size);
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

.wwd-card__title {
  margin-bottom: 16px;
  font-size: var(--wwd-card-title-size);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  color: inherit;
}

.wwd-card__text {
  margin-bottom: 0;
  font-size: var(--wwd-card-text-size);
  line-height: var(--wwd-card-text-lh);
  color: var(--color-body);
  transition: var(--transition-base);
}

/* Active / hover — the green card */
.wwd-card.is-active,
.wwd-card:hover {
  background-color: var(--color-primary);
  color: var(--color-heading);
}

.wwd-card.is-active .wwd-card__icon,
.wwd-card:hover .wwd-card__icon { color: var(--color-white); }

.wwd-card.is-active .wwd-card__title,
.wwd-card:hover .wwd-card__title { color: var(--color-white); }

.wwd-card.is-active .wwd-card__text,
.wwd-card:hover .wwd-card__text { color: rgba(255, 255, 255, 0.9); }

/* ==========================================================================
   12. MARQUEE STRIP
   ========================================================================== */
.marquee {
  display: flex;
  align-items: center;
  height: var(--marquee-height);
  background-color: var(--color-primary);
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll var(--marquee-speed) linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  padding-inline-end: var(--marquee-gap);
  flex-shrink: 0;
}

.marquee__item {
  font-family: var(--font-heading);
  font-size: var(--marquee-font-size);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
}

.marquee__sep {
  flex: 0 0 var(--marquee-icon-size);
  width: var(--marquee-icon-size);
  height: var(--marquee-icon-size);
  color: var(--color-white);
}

.marquee__sep svg { width: 100%; height: 100%; fill: currentColor; }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Global: anyone asking for less movement gets the end state immediately. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   13. BLOG SECTION
   ========================================================================== */
.blog {
  padding: var(--blog-pad-top) 0 var(--blog-pad-bottom);
  background-color: var(--bg-darker);
}

/* ---- Heading row ---- */
.blog__head {
  display: flex;
  align-items: flex-end;
  gap: var(--blog-head-split);
}

.blog__title {
  margin-bottom: 0;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--color-heading-light);
}

.blog .section-label { color: var(--color-primary); }

.blog__intro {
  flex: 0 1 auto;
  max-width: var(--blog-intro-width);
  margin-bottom: 8px;
  padding-inline-start: 43px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
  font-size: var(--fs-p-sm);
  line-height: 1.7;
  color: var(--color-body-light);
}

.blog__head-text { flex-shrink: 0; }

.blog__head .btn-std {
  flex-shrink: 0;
  margin-inline-start: auto;
  margin-bottom: 8px;
}

/* ---- Cards ---- */
.blog__cards {
  --bs-gutter-x: var(--blog-gutter);
  --bs-gutter-y: var(--blog-gutter);
  margin-top: var(--blog-head-gap);
}

.blog-card {
  display: block;
  height: 100%;
  background-color: var(--bg-light);
  overflow: hidden;
  color: var(--color-heading);
}

.blog-card__media {
  position: relative;
  height: var(--blog-img-height);
  background-color: var(--media-placeholder);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blog-card__arrow {
  position: absolute;
  inset-inline-end: 28px;
  bottom: calc(var(--blog-arrow-size) * -0.41);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--blog-arrow-size);
  height: var(--blog-arrow-size);
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 20px;
  color: var(--color-heading);
  opacity: 0;
  transform: scale(0.7);
  transition: var(--transition-base);
}

.blog-card__arrow i { transform: rotate(-45deg); }

.blog-card.is-active .blog-card__arrow,
.blog-card:hover .blog-card__arrow {
  opacity: 1;
  transform: scale(1);
}

.blog-card__body {
  padding: var(--blog-body-pad-y) var(--blog-body-pad-x);
}

.blog-card__date {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-size: var(--blog-date-size);
  font-weight: var(--fw-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-body);
}

.blog-card__title {
  margin-bottom: 14px;
  font-size: var(--blog-title-size);
  font-weight: var(--fw-semibold);
  line-height: var(--blog-title-lh);
  letter-spacing: 0;
  color: var(--color-heading);
  transition: var(--transition-fast);
}

.blog-card:hover .blog-card__title { color: var(--color-primary-hover); }

.blog-card__text {
  margin-bottom: 0;
  font-size: var(--blog-text-size);
  line-height: 1.78;
  color: var(--color-body);
}

/* ---- Blog responsive ---- */
@media (max-width: 1199.98px) {
  .blog__intro { padding-inline-start: 28px; }
}

@media (max-width: 991.98px) {
  .blog__head {
    flex-wrap: wrap;
    gap: var(--space-md);
  }
  .blog__intro {
    max-width: none;
    flex: 1 1 100%;
    order: 3;
    padding-inline-start: 0;
    border-inline-start: none;
  }
  .blog__head-text { flex-shrink: 0; }

.blog__head .btn-std {
  flex-shrink: 0;
  margin-inline-start: auto;
  margin-bottom: 8px;
}
}

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq {
  padding: var(--faq-pad-top) 0 var(--faq-pad-bottom);
  background-color: var(--bg-light);
}

.faq__row {
  display: flex;
  align-items: flex-start;
  gap: var(--faq-split);
}

.faq__intro { flex: 0 0 var(--faq-intro-width); }

.faq__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.faq__text {
  margin-bottom: 20px;
  font-size: var(--fs-p-sm);
  line-height: 1.78;
}

.faq__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--fs-p-sm);
  color: var(--color-heading);
}

.faq__meta i { font-size: 13px; }
.faq__meta:last-child { margin-bottom: 0; }

/* ---- Accordion ---- */
.faq__list { flex: 1 1 auto; min-width: 0; }

.faq-item {
  background-color: var(--color-white);
  border-radius: var(--faq-item-radius);
  overflow: hidden;
  transition: var(--transition-base);
}

.faq-item + .faq-item { margin-top: var(--faq-item-gap); }

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-height: var(--faq-head-height);
  padding: 12px var(--faq-item-pad-x);
  font-family: var(--font-heading);
  font-size: var(--faq-q-size);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: start;
  color: var(--color-heading);
  transition: var(--transition-base);
}

.faq-item.is-open .faq-item__q {
  background-color: var(--color-primary);
  color: var(--color-heading);
}

/* plus / minus built from two bars — no icon font needed */
.faq-item__icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: var(--transition-fast);
}

.faq-item__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
}

.faq-item__icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  margin-left: -1px;
}

.faq-item.is-open .faq-item__icon::after {
  opacity: 0;
  transform: scaleY(0);
}

/* Grid rows rather than a max-height guess, which silently clips any answer
   taller than the guess — the Arabic copy runs at line-height 1.95. */
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s ease;
}

.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }

/* The 0fr collapse only reaches zero if the grid item can actually shrink to
   nothing. min-height:0 frees the content box, but padding on a border-box
   element still floors it — 18 + 38 left every closed answer 56px tall, with
   two lines of text showing through. The padding therefore sits on the
   paragraph, which the collapsing track is free to clip. */
.faq-item__a-inner {
  min-height: 0;
}

.faq-item__a p {
  margin-bottom: 0;
  padding: 18px var(--faq-item-pad-x) 38px;
  font-size: var(--faq-a-size);
  line-height: 1.9;
}

/* ==========================================================================
   15. CONTACT
   ========================================================================== */
.contact {
  padding: var(--contact-pad-top) 0 var(--contact-pad-bottom);
  background-color: var(--bg-light);
}

.contact__row {
  --bs-gutter-x: var(--contact-gutter);
  --bs-gutter-y: var(--contact-gutter);
  align-items: stretch;
}

/* Background image goes on .contact__media */
.contact__media {
  height: 100%;
  min-height: var(--contact-height);
  background-color: var(--media-placeholder);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--contact-radius);
}

/* Google Maps embed sitting in the media slot */
.contact__map {
  position: relative;
  overflow: hidden;
}

.contact__map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact__card {
  height: 100%;
  min-height: var(--contact-height);
  padding: var(--contact-card-pad-y) var(--contact-card-pad-x);
  background-color: var(--color-primary);
  border-radius: var(--contact-radius);
}

/* The card is --color-primary; white on it is 1.82:1. */
.contact__card .section-label {
  margin-bottom: 6px;
  color: var(--color-heading);
}

.contact__title {
  margin-bottom: 24px;
  font-size: var(--contact-title-size);
  line-height: 1.25;
  color: var(--color-heading);
}

/* ---- Form ---- */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-row > * { flex: 1 1 0; min-width: 0; }

.form-field {
  width: 100%;
  height: var(--form-input-height);
  padding: 0 14px;
  background-color: var(--color-white);
  border: none;
  border-radius: var(--form-radius);
  font-family: var(--font-body);
  font-size: var(--form-font-size);
  color: var(--color-heading);
  outline: none;
  transition: var(--transition-fast);
}

textarea.form-field {
  height: var(--form-textarea-height);
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.6;
}

.form-field::placeholder { color: var(--color-muted); }

.form-field:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }

.contact__form .btn-std { align-self: flex-start; margin-top: 2px; }

/* dark button variant used by the contact form */
.btn-dark-std {
  background-color: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--color-white);
}

.btn-dark-std .btn-icon {
  background-color: var(--color-white);
  color: var(--color-heading);
}

.btn-dark-std:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* ---- FAQ / contact responsive ---- */
@media (max-width: 991.98px) {
  .faq__row {
    flex-direction: column;
    gap: 40px;
  }
  .faq__intro { flex: 1 1 auto; width: 100%; }
  .faq__list { width: 100%; }
  .contact__media { min-height: 320px; }
}

@media (max-width: 575.98px) {
  .form-row { flex-direction: column; gap: var(--form-gap); }
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.footer {
  padding: var(--footer-pad-top) 0 var(--footer-pad-bottom);
  background-color: var(--bg-darker);
}

/* ---- Upper block ---- */
.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 0;
  padding-top: var(--footer-top-gap);
}

.footer__brand { flex: 0 0 var(--footer-brand-width); }
.footer__col--address { flex: 0 0 var(--footer-address-width); }
.footer__col--services { flex: 0 0 var(--footer-services-width); }
.footer__col--resources { flex: 1 1 0%; min-width: 0; }
@media (min-width: 1400px) {
  .footer__col--resources .footer__list a { white-space: nowrap; }
}

.footer__logo {
  margin: -4px 0 18px;
  margin-inline-end: 0;
  --logo-height: var(--footer-logo-height);
}

.footer__about {
  max-width: 540px;
  margin-bottom: 0;
  font-size: var(--footer-text-size);
  line-height: 1.75;
  color: var(--color-body-light);
}

/* ---- Column headings ---- */
.footer__col-title {
  margin-bottom: 12px;
  font-size: var(--footer-col-title-size);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-primary);
}

/* ---- Address / contact list ---- */
.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--footer-icon-gap);
  font-size: var(--footer-text-size);
  line-height: 1.85;
  color: var(--color-body-light);
}

.footer__contact li + li { margin-top: var(--footer-contact-gap); }

.footer__contact i {
  flex: 0 0 16px;
  margin-top: 5px;
  font-size: 14px;
  color: var(--color-body-light);
}

.footer__contact a { color: var(--color-body-light); }
.footer__contact a:hover { color: var(--color-primary); }

/* ---- Link lists ---- */
.footer__list li { line-height: 1.5; }
.footer__list li + li { margin-top: var(--footer-link-gap); }

.footer__list a {
  display: inline-block;
  font-size: var(--footer-link-size);
  line-height: 1.5;
  color: var(--color-body-light);
}

/* Colour only — padding or transform here makes the label wiggle, since
   these are inline-blocks with no reserved space. The green is a clear
   enough shift from the muted resting colour to stand on its own. */
.footer__list a:hover {
  color: var(--color-primary);
}

/* ---- Bottom bar ---- */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px var(--space-md);
  margin-top: var(--footer-bottom-gap);
  padding-top: var(--footer-bottom-pad-y);
  border-top: 1px solid var(--footer-border);
}

.footer__bottom p {
  margin-bottom: 0;
  font-size: var(--footer-bottom-size);
  color: var(--color-muted);
}

.footer__brandmark { color: var(--color-white); }

.footer__bottom a { color: var(--color-body-light); }
.footer__bottom a:hover { color: var(--color-primary); }
.footer__bottom .sep { margin: 0 8px; opacity: 0.6; }

/* ---- Footer responsive ---- */
@media (max-width: 1399.98px) {
  /* Column widths come from the root.css tokens — do not restate them here. */
  .footer__brand { margin-bottom: 10px; }
  .footer__about { max-width: 620px; }
}

@media (max-width: 767.98px) {
  .footer__col--address { flex: 0 0 100%; }
  .footer__col--services,
  .footer__col--resources { flex: 0 0 50%; }
}

@media (max-width: 575.98px) {
  .footer__col--services,
  .footer__col--resources { flex: 0 0 100%; }
  .footer__bottom { justify-content: flex-start; }
}

/* ==========================================================================
   17. INNER PAGE BANNER
   ========================================================================== */
.page-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--banner-height);
  padding: var(--banner-pad-top) 0 var(--banner-pad-bottom);
  background-color: var(--bg-banner);
  overflow: hidden;
}

/* Holds the <img>; a news article passes its own, others use the default. */
.page-banner__bg {
  position: absolute;
  inset: 0;
  background-color: var(--media-placeholder);
}

/* Colour overlay sitting on top of the image */
.page-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,28,22,0.55) 0%, rgba(16,28,22,0.84) 100%);
}

/* Image-only variant (news articles): no heading, so none of the padding that
   existed to clear it. The header-wrap is absolutely positioned over this band,
   so the scrim stays — but weighted to the top, where the nav sits, and fading
   out lower so the photograph still reads. */
.page-banner--plain {
  padding: 0;
}

.page-banner--plain .page-banner__overlay {
  background: linear-gradient(
    180deg,
    rgba(16, 28, 22, 0.85) 0%,
    rgba(16, 28, 22, 0.55) 40%,
    rgba(16, 28, 22, 0.22) 70%,
    rgba(16, 28, 22, 0.18) 100%
  );
}

.page-banner .container { position: relative; z-index: 2; }

.page-banner__title {
  margin-bottom: 0;
  font-size: var(--banner-title-size);
  line-height: 1.2;
  color: var(--color-heading-light);
}

/* Optional standfirst under the banner heading (service detail pages).
   Capped at 60ch so the line length stays readable at 1920 — the band is
   full-bleed, and an uncapped paragraph would run the width of the screen. */
.page-banner__subtitle {
  max-width: 60ch;
  margin: 14px 0 0;
  font-size: var(--fs-p);
  line-height: 1.7;
  color: var(--color-body-light);
}

/* ==========================================================================
   18. STRATEGIES CARDS  (icon overlapping the card top)
   ========================================================================== */
.strategies {
  padding: var(--sc-pad-top) 0 var(--sc-pad-bottom);
  background-color: var(--bg-light);
}

.strategies__head { text-align: center; }

.strategies__title {
  margin-bottom: 0;
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--color-heading);
}

/* Optional intro paragraph under the heading (service detail pages) */
.strategies__text {
  max-width: 820px;
  margin: 20px auto 0;
  font-size: var(--fs-p-sm);
  line-height: 1.8;
  color: var(--color-body);
}

.strategies__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sc-gap);
  margin-top: var(--sc-head-gap);
}

/* Six-card variant (service pages). Four across would leave an orphaned row
   of two; three across gives two even rows. The responsive overrides further
   down are declared later and still win, so this only affects wide screens. */
.strategies__cards--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.strategy-card {
  position: relative;
  margin-top: var(--sc-icon-lift);
  padding: calc(var(--sc-icon-size) - var(--sc-icon-lift) + 13px)
           var(--sc-card-pad-x) var(--sc-card-pad-bottom);
  background-color: var(--color-white);
  border-radius: var(--sc-card-radius);
  text-align: center;
  transition: var(--transition-base);
}

/* the circle sits half above the card */
.strategy-card__icon {
  position: absolute;
  top: calc(var(--sc-icon-lift) * -1);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sc-icon-size);
  height: var(--sc-icon-size);
  background-color: var(--sc-icon-bg);
  border-radius: var(--radius-circle);
  color: var(--color-white);
  transition: var(--transition-base);
}

.strategy-card__icon svg {
  width: 44%;
  height: 44%;
  fill: currentColor;
}

.strategy-card__title {
  margin-bottom: 12px;
  font-size: var(--sc-title-size);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--color-heading);
  transition: var(--transition-fast);
}

.strategy-card__text {
  margin-bottom: 0;
  font-size: var(--sc-text-size);
  line-height: 1.9;
  color: var(--color-body);
}

/* Active / hover */
.strategy-card.is-active .strategy-card__icon,
.strategy-card:hover .strategy-card__icon { background-color: var(--color-primary); }

.strategy-card.is-active .strategy-card__title,
.strategy-card:hover .strategy-card__title { color: var(--color-primary-deep); }

/* ==========================================================================
   19. HISTORY + TIMELINE
   ========================================================================== */
/* The watermark is set at 280px and sized for the about page's four-digit
   year. A word instead of a year — and especially its German translation —
   runs past the viewport and gives the whole document a horizontal scrollbar,
   so the band clips it. The timeline rule below overhangs by 110px into the
   container's own margin, well inside this box, and is unaffected. */
.history {
  padding: var(--hist-pad-top) 0 var(--hist-pad-bottom);
  background-color: var(--bg-darker);
  overflow: hidden;
}

.history__row {
  display: flex;
  align-items: flex-start;
  gap: var(--hist-gap);
}

.history__media {
  flex: 0 0 var(--hist-media-width);
  height: var(--hist-media-height);
  overflow: hidden;
  background-color: var(--media-placeholder);
  border-radius: var(--hist-media-radius);
}

.history__content {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 237px;              /* clears the watermark */
}

.history__watermark {
  position: absolute;
  top: -40px;
  inset-inline-start: 0;
  font-family: var(--font-heading);
  font-size: var(--hist-watermark-size);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: rgba(255, 255, 255, 0.055);
  pointer-events: none;
  user-select: none;
}

.history .section-label { color: var(--color-body-light); }

.history__title {
  margin-bottom: 22px;
  font-size: var(--hist-title-size);
  line-height: var(--lh-h2);
  color: var(--color-heading-light);
}

.history__text {
  max-width: 600px;
  margin-bottom: 0;
  font-size: var(--hist-text-size);
  line-height: 1.9;
  color: var(--color-body-light);
}

/* ---- Timeline ---- */
.timeline {
  position: relative;
  margin-top: var(--hist-timeline-gap);
}

/* the rule runs a little past the container on both sides */
.timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--timeline-overhang) * -1);
  right: calc(var(--timeline-overhang) * -1);
  bottom: calc(var(--timeline-dot-active) / 2);
  height: 1px;
  background-color: rgba(255, 255, 255, 0.32);
}

.timeline__list {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.timeline__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline__year {
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: var(--timeline-year-size);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-white);
  transition: var(--transition-base);
}

/* dot sits in a fixed-size box so every dot centre lands on the rule */
.timeline__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--timeline-dot-active);
  height: var(--timeline-dot-active);
}

.timeline__dot::before {
  content: "";
  width: var(--timeline-dot);
  height: var(--timeline-dot);
  background-color: var(--color-white);
  border-radius: var(--radius-circle);
  transition: var(--transition-base);
}

.timeline__item.is-active .timeline__year {
  font-size: var(--timeline-year-active-size);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

/* Decorative only — no hover states, because the markers have no destination
   and no per-year copy behind them. Add both before making it interactive. */
.timeline__item.is-active .timeline__dot::before {
  width: var(--timeline-dot-active);
  height: var(--timeline-dot-active);
  background-color: var(--color-primary);
}

/* ---- Phase variant (project-development service page) ----
   The base timeline sizes its marker for a four-digit year; a phase name at
   68px would run several hundred pixels wide and burst the row. Here the
   numeral stays the marker and the name sits under it, wrapped and capped. */
.timeline--phases .timeline__phase {
  max-width: 14ch;
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-size: var(--fs-p-sm);
  line-height: 1.35;
  text-align: center;
  color: var(--color-body-light);
  transition: var(--transition-base);
}

.timeline--phases .timeline__item.is-active .timeline__phase {
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
  .strategies__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
  .history__row { flex-direction: column; gap: 46px; }
  .history__media { flex: 1 1 auto; width: 100%; }
  .history__content { padding-top: 150px; }
  .history__watermark { top: 0; }
  .history__title, .history__text { max-width: none; }
  .timeline__list { flex-wrap: wrap; justify-content: center; gap: 26px 34px; }
  .timeline::before { display: none; }
}

@media (max-width: 575.98px) {
  .strategies__cards { grid-template-columns: 1fr; gap: calc(var(--sc-icon-lift) + 24px); }
  .history__content { padding-top: 120px; }
}

/* ==========================================================================
   20. MISSION + SKILL BARS
   ========================================================================== */
.mission {
  padding: var(--mission-pad-top) 0 var(--mission-pad-bottom);
  background-color: var(--bg-light);
}

.mission__row {
  display: flex;
  align-items: stretch;
  gap: var(--mission-gap);
}

.mission__content { flex: 1 1 auto; min-width: 0; }

.mission .section-label { margin-bottom: 6px; }

.mission__title {
  max-width: 700px;
  margin-bottom: 22px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.mission__text {
  max-width: var(--mission-text-width);
  margin-bottom: 40px;
  font-size: var(--fs-p-sm);
  line-height: 1.78;
}

.mission__media {
  flex: 0 0 var(--mission-media-width);
  align-self: stretch;
  min-height: 480px;
  overflow: hidden;
  background-color: var(--media-placeholder);
  border-radius: var(--mission-media-radius);
}

/* ---- Skill bars ---- */
.skills {
  max-width: var(--mission-text-width);
  margin-bottom: 0;
}

.skill + .skill { margin-top: var(--skill-gap); }

.skill__label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-size: var(--skill-label-size);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-heading);
}

.skill__row {
  display: flex;
  align-items: center;
  gap: 19px;
}

.skill__track {
  flex: 1 1 auto;
  height: var(--skill-bar-height);
  background-color: #DDE2E2;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.skill__fill {
  display: block;
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width 1s ease;
}

.skill__value {
  flex: 0 0 var(--skill-value-width);
  /* Right-aligned so 98% and 95% line up with each other. */
  text-align: end;
  font-family: var(--font-heading);
  font-size: var(--fs-p-sm);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}

/* ==========================================================================
   21. SPLIT MEDIA / CONTENT BAND
   ========================================================================== */
/* Full-width green band, centred copy, no image */
.split {
  padding: var(--split-pad-y) 0;
  background-color: var(--color-primary);
  text-align: center;
}

.split__inner {
  max-width: var(--split-title-width);
  margin-inline: auto;
}

/* Dark ink on the brand green — white would drop to roughly 1.8:1 */
.split__title {
  margin-bottom: 26px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.split__text {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: var(--fs-p-sm);
  line-height: 1.75;
  color: var(--color-secondary);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .mission__row { flex-direction: column; gap: 46px; }
  .mission__media { flex: 1 1 auto; width: 100%; min-height: 340px; }
  .mission__title, .mission__text, .skills { max-width: none; }
  .split__inner { max-width: none; }
}

/* ==========================================================================
   22. LEGAL / LONG-FORM PAGE
   ========================================================================== */
.legal {
  padding: var(--legal-pad-top) 0 var(--legal-pad-bottom);
  background-color: var(--bg-light);
}

.legal__title {
  margin-bottom: 14px;
  font-size: var(--legal-title-size);
  line-height: 1.25;
  color: var(--color-heading);
}

/* ---- Article meta line: the arrow is the way back to the news list ---- */
.article__meta {
  display: flex;
  align-items: center;
}

.article__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-inline-end: 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-circle);
  background-color: var(--color-white);
  font-size: 13px;
  color: var(--color-heading);
  transition: var(--transition-fast);
}

.article__back:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-secondary);
  transform: translateX(-3px);
}

 

.legal__block { margin-top: var(--legal-block-gap); }

.legal__block-title {
  margin-bottom: 10px;
  font-size: var(--legal-h3-size);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-heading);
}

/* Body copy shares the headings' left edge */
.legal__body p {
  margin-bottom: 12px;
  font-size: var(--legal-text-size);
  line-height: var(--legal-text-lh);
  color: var(--color-body);
}

.legal__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   23. TWO-UP CTA BAND
   ========================================================================== */
.cta-duo {
  display: flex;
  flex-wrap: wrap;
  min-height: var(--ctaduo-height);
}

.cta-duo__half {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ctaduo-pad-y) var(--ctaduo-pad-x);
  text-align: center;
}

.cta-duo__half--green { background-color: var(--color-primary); }
.cta-duo__half--light { background-color: var(--color-white); }

.cta-duo__title {
  margin-bottom: 16px;
  font-size: var(--ctaduo-title-size);
  line-height: 1.3;
  color: var(--color-heading);
}

.cta-duo__text {
  max-width: var(--ctaduo-text-width);
  margin-bottom: 26px;
  font-size: var(--fs-p-sm);
  line-height: 1.8;
  color: var(--color-heading);
}

.cta-duo__half--green .cta-duo__text { color: var(--color-secondary); }

@media (max-width: 767.98px) {
  .cta-duo__half { flex: 1 1 100%; }
}

/* ==========================================================================
   24. FORM FEEDBACK  (validation, alerts, honeypot)
   ========================================================================== */
.form-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.form-field.is-invalid {
  box-shadow: 0 0 0 2px var(--color-form-error);
}

/* Persistent labels. Placeholders alone vanished the moment anyone typed,
   leaving no record of what a field was for. */
.form-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-heading);
}

.form-label__req {
  margin-inline-start: 2px;
  color: var(--color-form-error-text);
}

.form-required-note {
  margin-bottom: 0;
  font-size: var(--fs-xs);
  color: var(--color-heading);
}

/* Error slot. Always in the DOM so aria-describedby has a target; it simply
   holds nothing until there is something to say. */
.field-error {
  margin-bottom: 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--color-form-error-text);
}

.field-error:empty {
  display: none;
}

.form-alert.is-hidden {
  display: none;
}

.form-alert {
  margin-bottom: var(--form-gap);
  padding: 12px 16px;
  border-radius: var(--form-radius);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.form-alert--success {
  background-color: var(--color-primary-light);
  color: var(--color-heading);
  border-inline-start: 3px solid var(--color-primary);
}

.form-alert--error {
  background-color: var(--color-form-error-bg);
  color: var(--color-form-error-text);
  border-inline-start: 3px solid var(--color-form-error);
}

/* Honeypot — hidden from people, left in the DOM for bots.
   Positioned off-screen rather than display:none, which some bots skip. */
.hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   25. AUTH  (login screen + admin chrome)
   ========================================================================== */
.admin-body {
  background-color: var(--bg-light);
  min-height: 100vh;
}

.admin-header {
  background-color: var(--bg-dark);
  padding: var(--admin-header-pad-y) 0;
}

.admin-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.admin-header__logo { margin-inline-end: 0; --logo-height: var(--logo-height-admin); }

.admin-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.admin-header__user {
  font-size: var(--fs-small);
  color: var(--color-body-light);
}

.admin-header__user strong { color: var(--color-white); }

.admin-header__link {
  font-size: var(--fs-small);
  color: var(--color-body-light);
}

.admin-header__link:hover { color: var(--color-primary); }

.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 140px);
  padding: var(--space-xl) 0;
}

.auth__card {
  width: 100%;
  max-width: var(--auth-card-width);
  margin: 0 auto;
  padding: var(--auth-card-pad);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.auth__title {
  margin-bottom: 6px;
  font-size: var(--fs-h3);
  color: var(--color-heading);
}

.auth__subtitle {
  margin-bottom: var(--space-md);
  font-size: var(--fs-p-sm);
  color: var(--color-body);
}

.auth__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}

.auth .form-field {
  height: var(--auth-input-height);
  background-color: var(--bg-light);
  font-size: var(--fs-p-sm);
}

.auth .form-field:focus {
  box-shadow: 0 0 0 2px var(--color-primary);
}

.auth form {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
}

.auth .btn-std { justify-content: space-between; }

/* ==========================================================================
   26. ADMIN DASHBOARD
   ========================================================================== */
.admin { padding: var(--admin-pad-y) 0; }

.admin__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.admin__title {
  font-size: var(--fs-h3);
  color: var(--color-heading);
}

.admin__subtitle {
  margin: var(--space-md) 0 10px;
  font-size: var(--fs-h5);
  color: var(--color-heading);
}

.admin__meta {
  margin-top: 4px;
  font-size: var(--fs-small);
  color: var(--color-body);
}

.admin__badge {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
}

.admin__empty {
  padding: var(--space-xl);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-muted);
}

/* The table scrolls inside its own box so the page never scrolls sideways */
.admin__table-wrap {
  overflow-x: auto;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.admin__table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.admin__table th,
.admin__table td {
  padding: var(--admin-cell-pad-y) var(--admin-cell-pad-x);
  text-align: start;
  border-bottom: var(--border-width) solid var(--border-color);
  vertical-align: middle;
}

.admin__table th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  white-space: nowrap;
}

.admin__table tbody tr:last-child td { border-bottom: none; }
.admin__table tbody tr:hover { background-color: var(--bg-light); }

.admin__table tr.is-unread td { background-color: var(--color-primary-light); }
.admin__table tr.is-unread td:first-child { box-shadow: inset 3px 0 0 0 var(--color-primary); }

.admin__locale {
  display: inline-block;
  padding: 1px 8px;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--color-body);
}

.admin__status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.admin__status--new  { background-color: var(--color-primary); color: var(--color-secondary); }
.admin__status--read { background-color: var(--bg-light); color: var(--color-muted); }

/* NOT display:flex. A <td> set to flex stops being a table cell: it drops out
   of the row-height calculation, so its border-bottom is drawn at its own
   content height instead of the row's. In a table whose rows are made tall by
   thumbnails and wrapping titles, that separator visibly sits too high. Inline
   layout keeps the cell a cell; nowrap holds the three actions on one line. */
.admin__actions {
  white-space: nowrap;
}

.admin__actions > * + * {
  margin-inline-start: 12px;
}

/* "12 Dec 2024" broke across two lines and dragged the whole row taller. */
.admin__date {
  white-space: nowrap;
}

.admin__action {
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  cursor: pointer;
}

.admin__action:hover { color: var(--color-primary-hover); }
.admin__action--danger { color: var(--color-form-error); }
.admin__action--danger:hover { color: var(--color-form-error-text); }

.admin__back {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-body);
}

.admin__back:hover { color: var(--color-primary); }

.admin__detail {
  padding: var(--admin-detail-pad);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.admin__fields {
  display: grid;
  grid-template-columns: var(--admin-dt-width) 1fr;
  gap: 10px var(--space-md);
  margin: var(--space-md) 0 0;
  font-size: var(--fs-small);
}

.admin__fields dt {
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
}

.admin__fields dd {
  margin: 0;
  color: var(--color-body);
  overflow-wrap: anywhere;
}

.admin__agent { font-size: var(--fs-xs); color: var(--color-muted); }

.admin__message {
  padding: var(--space-md);
  background-color: var(--bg-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-p-sm);
  line-height: var(--lh-base);
  color: var(--color-body);
  overflow-wrap: anywhere;
}

.admin__delete {
  background-color: var(--color-form-error);
  border-color: var(--color-form-error);
}

.admin__delete:hover {
  background-color: var(--color-form-error-text);
  border-color: var(--color-form-error-text);
}

.admin__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  font-size: var(--fs-small);
  color: var(--color-body);
}

.admin__pagination a { font-weight: var(--fw-medium); }

@media (max-width: 575.98px) {
  .admin__fields { grid-template-columns: 1fr; gap: 4px; }
  .admin__fields dd { margin-bottom: 10px; }
}

/* ==========================================================================
   27. LOGO ARTWORK  (<img> — see views/partials/logo.php)

   Design "c3" (since 27.08.) ships as a plain image: the artwork is fully
   outlined and already coloured for the dark chrome that all four
   placements use, so nothing needs recolouring any more. Sizing hangs off
   `.site-logo .logo-svg` (header section). If the logo ever has to sit on
   a light background, supply a second recoloured file or return to the
   inline-SVG approach (_CHANGELOG 2026-08-27).
   ========================================================================== */

/* ==========================================================================
   28. ADMIN NEWS MANAGER
   ========================================================================== */
.admin-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  margin-inline-end: var(--space-md);
}

.admin-nav__link {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-body-light);
}

.admin-nav__link:hover { color: var(--color-white); }

.admin-nav__link.is-active {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
}

/* ---- List ---- */
.admin__thumb {
  display: block;
  width: var(--admin-thumb-w);
  height: var(--admin-thumb-h);
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.admin__thumb--empty {
  background-color: var(--bg-light);
  border: 1px dashed var(--border-color);
}

.admin__slug {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  word-break: break-all;
}

.blog__empty {
  padding: var(--space-lg) 0;
  color: var(--color-muted);
}

@media (max-width: 767.98px) {
  .admin-nav { width: 100%; margin-inline: 0; order: 3; }
}

/* ==========================================================================
   29. ADMIN FORMS  (news editor)

   Standard CMS split: content column plus a settings sidebar carrying the
   primary action. Fields here are deliberately NOT the public site's
   .form-field — that class is tuned for the dark contact card (no border,
   fixed 37px height) and looks unfinished on a white admin panel.
   ========================================================================== */
.admin--form { padding-top: var(--space-lg); }

.admin-page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.admin-page__head .admin__back { margin-bottom: 4px; }
.admin-page__head .admin__title { margin: 0; }

.admin-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--admin-side-w);
  align-items: start;
  gap: var(--admin-gutter);
}

.admin-form__side {
  display: flex;
  flex-direction: column;
  gap: var(--admin-gutter);
  position: sticky;
  top: var(--space-md);
}

/* ---- Card ---- */
.admin-card {
  padding: var(--admin-card-pad);
  background-color: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.admin-card + .admin-card { margin-top: 0; }

.admin-card__head {
  margin-bottom: var(--space-md);
  padding-bottom: 14px;
  border-bottom: var(--border-width) solid var(--border-color);
}

.admin-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}

.admin-card__note {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--color-muted);
}

.admin-card__actions {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--border-width) solid var(--border-color);
  text-align: center;
}

.admin-card__actions .btn-std { justify-content: space-between; }

.admin-card__cancel {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.admin-card__cancel:hover { color: var(--color-form-error); }

/* ---- Fields ----
   One consistent vertical rhythm: label, control, then hint or error. */
.admin-fields { display: block; }

.field { margin-bottom: var(--space-md); }
.field:last-child { margin-bottom: 0; }

.field__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-heading);
}

.field__input {
  display: block;
  width: 100%;
  min-height: var(--field-height);
  padding: 10px 14px;
  background-color: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-p-sm);
  line-height: 1.6;
  color: var(--color-heading);
  outline: none;
  transition: var(--transition-fast);
  /* Stops a long word or pasted URL from widening the grid column */
  max-width: 100%;
}

.field__input::placeholder { color: var(--color-muted); }

.field__input:hover { border-color: var(--color-muted); }

.field__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.field__input.is-invalid { border-color: var(--color-form-error); }
.field__input.is-invalid:focus { box-shadow: 0 0 0 3px var(--color-form-error-bg); }

textarea.field__input {
  resize: vertical;
  min-height: var(--field-height);
}

.field__input--short { min-height: var(--field-short); }
.field__input--tall  { min-height: var(--field-tall); }

.field__hint {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--color-muted);
}

.field__error {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-form-error);
}

/* Date inputs render their own control; keep the box height consistent */
.field__input[type="date"] { line-height: 1.2; }

/* A file input cannot be styled directly, so style its button instead —
   a plain one with a fixed height and no padding sits misaligned. */
.field__file {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-body);
}

.field__file::file-selector-button {
  margin-inline-end: 12px;
  padding: 9px 16px;
  background-color: var(--bg-light);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  cursor: pointer;
  transition: var(--transition-fast);
}

.field__file::file-selector-button:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.field__file.is-invalid::file-selector-button { border-color: var(--color-form-error); }

/* Slug field with its fixed /news/ prefix */
.field__prefixed {
  display: flex;
  align-items: stretch;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: var(--transition-fast);
}

.field__prefixed:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.field__prefix {
  display: flex;
  align-items: center;
  padding: 0 4px 0 12px;
  background-color: var(--bg-light);
  border-inline-end: var(--border-width) solid var(--border-color);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

.field__prefixed .field__input {
  border: none;
  border-radius: 0;
  min-width: 0;
}

.field__prefixed .field__input:focus { box-shadow: none; }

/* ---- Toggle ---- */
.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  cursor: pointer;
}

.switch input {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.switch__label {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--color-heading);
}

/* ---- Language tabs ---- */
.lang-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-width) solid var(--border-color);
  flex-wrap: wrap;
}

.lang-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background-color: var(--bg-light);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-body);
  transition: var(--transition-fast);
}

.lang-tab:hover { border-color: var(--color-primary); color: var(--color-heading); }

.lang-tab.is-active {
  background-color: var(--color-heading);
  border-color: var(--color-heading);
  color: var(--color-white);
}

.lang-tab__state {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lang-tab__state--source { background-color: var(--color-primary); color: var(--color-secondary); }
.lang-tab__state--done   { background-color: #DCEBD2; color: #3F5B33; }
.lang-tab__state--todo   { background-color: #EBECEA; color: var(--color-muted); }

.lang-tab.is-active .lang-tab__state--todo { background-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.8); }

.admin-notice {
  margin-bottom: var(--space-md);
  padding: 12px 16px;
  background-color: var(--color-primary-light);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--form-radius);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--color-heading);
}

/* ---- Image ---- */
.image-preview {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border-color);
}

.image-empty {
  margin-bottom: 14px;
  padding: var(--space-md);
  background-color: var(--bg-light);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--color-muted);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .admin-form { grid-template-columns: minmax(0, 1fr); }
  .admin-form__side { position: static; }
}

/* Language chips in the news list — which languages a post has been
   written in, and which one is the original. */
.admin__langs { white-space: nowrap; }

.lang-chip {
  display: inline-block;
  min-width: 30px;
  margin-inline-end: 4px;
  padding: 2px 7px;
  background-color: var(--bg-light);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-muted);
  transition: var(--transition-fast);
}

.lang-chip:hover { border-color: var(--color-primary); color: var(--color-heading); }

.lang-chip.is-source {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-secondary);
}

/* ==========================================================================
   30. PROCESS STEPS  (numbered chips on a connecting rule)
   ========================================================================== */
/* Used by the management-consulting service page. The rule is drawn once
   behind the whole list and the chips paint over it, so the connector never
   has to be sliced up per card. */
.process {
  padding: var(--proc-pad-top) 0 var(--proc-pad-bottom);
  background-color: var(--bg-body);
}

.process__head {
  max-width: 760px;
  margin-bottom: var(--proc-head-gap);
}

.process__title {
  margin-bottom: 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.process__text {
  font-size: var(--fs-p-sm);
  line-height: 1.78;
}

.process__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--proc-gap);
  /* stretch, so every card in the row ends level however long its copy runs */
  align-items: stretch;
}

/* The connector, running from the centre of the first chip to the centre of
   the last. The chips are centred in their columns, so each end stops half a
   column in: with five equal columns and four gaps that is
   (100% - 4 * gap) / 10. */
.process__list::before {
  content: "";
  position: absolute;
  top: calc(var(--proc-chip) / 2);
  inset-inline: calc((100% - 4 * var(--proc-gap)) / 10);
  height: 1px;
  background-color: var(--border-color);
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--proc-chip) + 26px);
}

/* Centred by pinning both edges and letting auto margins share the slack —
   a translateX(-50%) would push the wrong way once the page flips to RTL. */
.process-step__num {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--proc-chip);
  height: var(--proc-chip);
  margin-inline: auto;
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-circle);
  font-family: var(--font-heading);
  font-size: var(--fs-p-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-deep);
  transition: var(--transition-base);
}

.process-step__body {
  flex: 1 1 auto;
  padding: var(--proc-card-pad);
  background-color: var(--bg-light);
  border-radius: var(--radius-md);
  text-align: center;
  transition: var(--transition-base);
}

.process-step__title {
  margin-bottom: 12px;
  font-size: var(--proc-title-size);
  line-height: 1.35;
  color: var(--color-heading);
}

.process-step__text {
  margin-bottom: 0;
  font-size: var(--proc-text-size);
  line-height: 1.72;
}

.process-step:hover .process-step__body,
.process-step.is-active .process-step__body {
  box-shadow: var(--shadow-md);
}

/* The chip fills rather than gaining an outline — the border simply matches
   the new background so the circle stays one solid shape. */
.process-step:hover .process-step__num,
.process-step.is-active .process-step__num {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-secondary);
}

/* ---- Responsive ---- */
@media (max-width: 1399.98px) {
  .process__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  /* Three across then two — a single rule can no longer join them honestly. */
  .process__list::before { display: none; }
}

@media (max-width: 767.98px) {
  .process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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


/* ==========================================================================
   31. CHECKLIST  (two-column ticked list)
   ========================================================================== */
.checklist {
  padding: var(--check-pad-top) 0 var(--check-pad-bottom);
  background-color: var(--bg-light);
}

.checklist__head {
  max-width: 760px;
  margin-bottom: var(--check-head-gap);
}

.checklist__title {
  margin-bottom: 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.checklist__text {
  margin-bottom: 0;
  font-size: var(--fs-p-sm);
  line-height: 1.78;
}

.checklist__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--check-col-gap);
  row-gap: var(--check-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Dark ink on the brand green — white would drop to roughly 1.8:1 */
.checklist__mark {
  flex: 0 0 var(--check-mark-size);
  display: grid;
  place-items: center;
  width: var(--check-mark-size);
  height: var(--check-mark-size);
  background-color: var(--color-primary);
  border-radius: var(--radius-circle);
  font-size: 12px;
  color: var(--color-secondary);
}

.checklist__item-text {
  margin-bottom: 0;
  padding-top: 3px;
  font-size: var(--check-text-size);
  line-height: 1.65;
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  .checklist__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   32. ALTERNATING MEDIA / CONTENT ROWS
   ========================================================================== */
/* Used by the environment-and-energy service page. row-reverse alternates the
   media side; under RTL the whole row mirrors and the alternation still holds,
   so rtl.css needs no correction for this block. */
.altrow {
  padding: var(--alt-pad-top) 0 var(--alt-pad-bottom);
  background-color: var(--bg-body);
}

/* Section head. The row headings below are h3 and carry their own, smaller
   scale — keep the two sets of classes apart or the h2 shrinks to match. */
.altrow__head {
  max-width: 760px;
  margin-bottom: var(--alt-gap);
}

.altrow__title {
  margin-bottom: 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.altrow__text {
  margin-bottom: 0;
  font-size: var(--fs-p-sm);
  line-height: 1.78;
}

.altrow__item {
  display: flex;
  align-items: center;
  gap: var(--alt-gap);
}

.altrow__item + .altrow__item { margin-top: var(--alt-row-gap); }

.altrow__item:nth-child(even) { flex-direction: row-reverse; }

.altrow__media {
  position: relative;
  flex: 0 0 var(--alt-media-width);
  height: var(--alt-media-height);
  overflow: hidden;
  background-color: var(--media-placeholder);
  border-radius: var(--alt-media-radius);
}

.altrow__content { flex: 1 1 auto; min-width: 0; }

.altrow__step {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  background-color: var(--color-primary-light);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
}

.altrow__item-title {
  margin-bottom: 16px;
  font-size: var(--alt-title-size);
  line-height: 1.25;
  color: var(--color-heading);
}

.altrow__item-text {
  margin-bottom: 0;
  font-size: var(--alt-text-size);
  line-height: 1.78;
}

.altrow__points {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.altrow__point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-p-sm);
  line-height: 1.7;
  color: var(--color-body);
}

.altrow__point + .altrow__point { margin-top: 10px; }

.altrow__point i {
  padding-top: 5px;
  font-size: 12px;
  color: var(--color-primary-deep);
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  .altrow__item,
  .altrow__item:nth-child(even) { flex-direction: column; align-items: stretch; }
  .altrow__media { flex: 1 1 auto; width: 100%; }
}


/* ==========================================================================
   33. MATURITY LADDER  (ascending stage cards)
   ========================================================================== */
/* Used by the industry-4-0 service page. Each stage sits higher than the one
   before it. The offsets run in document order, so under RTL the staircase
   climbs right-to-left with the reading direction. */
.maturity {
  padding: var(--mat-pad-top) 0 var(--mat-pad-bottom);
  background-color: var(--bg-light);
}

.maturity__head {
  max-width: 780px;
  margin-bottom: var(--mat-head-gap);
}

.maturity__title {
  margin-bottom: 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.maturity__text {
  margin-bottom: 0;
  font-size: var(--fs-p-sm);
  line-height: 1.78;
}

.maturity__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mat-gap);
  align-items: start;
}

.maturity__stage {
  padding: var(--mat-card-pad);
  background-color: var(--bg-body);
  border-radius: var(--mat-card-radius);
  transition: var(--transition-base);
}

.maturity__stage:nth-child(1) { margin-block-start: calc(var(--mat-step-rise) * 3); }
.maturity__stage:nth-child(2) { margin-block-start: calc(var(--mat-step-rise) * 2); }
.maturity__stage:nth-child(3) { margin-block-start: var(--mat-step-rise); }
.maturity__stage:nth-child(4) { margin-block-start: 0; }

.maturity__num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-size: var(--mat-num-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
}

.maturity__stage-title {
  margin-bottom: 12px;
  font-size: var(--mat-title-size);
  line-height: 1.3;
  color: var(--color-heading);
}

.maturity__stage-text {
  margin-bottom: 20px;
  font-size: var(--mat-text-size);
  line-height: 1.7;
}

.maturity__points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.maturity__point {
  position: relative;
  padding-inline-start: 18px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--color-muted);
}

.maturity__point + .maturity__point { margin-top: 8px; }

.maturity__point::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background-color: var(--color-primary);
}

.maturity__stage:hover,
.maturity__stage.is-active {
  box-shadow: var(--shadow-md);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .maturity__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two across: a staircase of two would read as a mistake, so level them. */
  .maturity__stage:nth-child(1),
  .maturity__stage:nth-child(2),
  .maturity__stage:nth-child(3),
  .maturity__stage:nth-child(4) { margin-block-start: 0; }
}

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


/* ==========================================================================
   34. BEFORE / AFTER COMPARISON
   ========================================================================== */
/* Used by the industry-4-0 service page. One grid holds both columns so each
   pair shares a row and stays aligned however long the copy runs. */
.compare {
  padding: var(--cmp-pad-top) 0 var(--cmp-pad-bottom);
  background-color: var(--bg-body);
}

.compare__head {
  max-width: 720px;
  margin: 0 auto var(--cmp-head-gap);
  text-align: center;
}

.compare__title {
  margin-bottom: 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.compare__text {
  margin-bottom: 0;
  font-size: var(--fs-p-sm);
  line-height: 1.78;
}

/* Column captions, shown once above the rows. They sit on the same grid as a
   row so each caption lines up with the half it names. */
.compare__head-row {
  display: grid;
  grid-template-columns: minmax(0, var(--cmp-before-col)) var(--cmp-arrow) minmax(0, 1fr);
  gap: var(--cmp-gap);
  margin-bottom: 18px;
  padding: 0 var(--cmp-pad-x);
}

.compare__caption {
  font-family: var(--font-heading);
  font-size: var(--cmp-head-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Sits over the right-aligned "before" content, so it lines up with it. */
.compare__caption--before {
  text-align: end;
  color: var(--color-muted);
}
.compare__caption--after  { color: var(--color-primary-deep); }
.compare__caption--spacer { content: ""; }

.compare__list {
  display: flex;
  flex-direction: column;
  gap: var(--cmp-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One row = one change. The two halves share a card so the pairing is read
   as a single statement rather than as two independent columns. */
.compare__item {
  display: grid;
  grid-template-columns: minmax(0, var(--cmp-before-col)) var(--cmp-arrow) minmax(0, 1fr);
  align-items: center;
  gap: var(--cmp-gap);
  padding: var(--cmp-row-pad) var(--cmp-pad-x);
  background-color: var(--bg-light);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}

.compare__item:hover {
  background-color: var(--bg-body);
  box-shadow: var(--shadow-md);
}

.compare__side {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

/* Sits against the arrow rather than against the outer edge, so the two
   halves read as one statement instead of two far-apart columns. */
.compare__side--before { justify-content: flex-end; }

.compare__icon {
  flex: 0 0 var(--cmp-icon);
  display: grid;
  place-items: center;
  width: var(--cmp-icon);
  height: var(--cmp-icon);
  margin-top: 2px;
  border-radius: var(--radius-circle);
  font-size: 11px;
}

.compare__icon i{
  transform: translateY(1px);
}
.compare__icon--before {
  background-color: #E4E9E0;
  color: var(--color-muted);
}

/* Dark ink on the brand green — white would drop to roughly 1.8:1 */
.compare__icon--after {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

.compare__copy {
  margin-bottom: 0;
  font-size: var(--cmp-text-size);
  line-height: 1.6;
}

.compare__side--before .compare__copy { color: var(--color-muted); }

.compare__side--after .compare__copy {
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}

/* The connector between the two halves. Rotates to point down once the row
   stacks; under RTL the arrow glyph is flipped in rtl.css. */
.compare__arrow {
  display: grid;
  place-items: center;
  width: var(--cmp-arrow);
  height: var(--cmp-arrow);
  color: var(--color-primary-deep);
  font-size: 13px;
}

/* The captions carry the labels on desktop; the inline tag only earns its
   place once the halves stack and the captions are gone. */
.compare__tag { display: none; }

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  .compare__head-row { display: none; }

  .compare__item {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Stacked, there is no arrow to sit against — both halves start level. */
  .compare__side--before { justify-content: flex-start; }

  .compare__arrow {
    width: auto;
    height: auto;
    justify-self: start;
    transform: rotate(90deg);
  }

  .compare__tag {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary-deep);
  }

  .compare__side--before .compare__tag { color: var(--color-muted); }
}


/* ==========================================================================
   35. IMPRINT
   ========================================================================== */
/* Not the .legal shell the privacy page uses. An imprint is a short set of
   facts plus four fixed notices, so the facts get a card that stays in view
   and the notices are numbered cards rather than one run of prose. */
.imprint {
  padding: var(--imp-pad-top) 0 var(--imp-pad-bottom);
  background-color: var(--bg-light);
  background-image: radial-gradient(circle, var(--pattern-ink) 1px, transparent 1px);
  background-size: var(--pattern-dot) var(--pattern-dot);
}

/* No align-items:start here. A sticky child can only travel inside its own
   parent's box, and `start` would shrink the aside to the card's height —
   leaving nowhere to travel, so the card would scroll away like any other
   element. Stretching the column is what gives the sticky its range. */
.imprint__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--imp-aside);
  gap: var(--imp-gap);
}

.imprint__title {
  margin-bottom: 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.imprint__lead p {
  max-width: 68ch;
  margin-bottom: 18px;
  font-size: var(--fs-p-sm);
  line-height: 1.85;
}

.imprint__blocks {
  display: grid;
  gap: var(--imp-block-gap);
  margin-top: 44px;
}

.imprint-block {
  position: relative;
  padding: var(--imp-block-pad);
  background-color: var(--bg-body);
  background-image: var(--card-glow);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}

.imprint-block:hover { box-shadow: var(--shadow-md); }

.imprint-block__num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  color: var(--color-primary-deep);
}

.imprint-block__title {
  margin-bottom: 12px;
  font-size: var(--fs-h5);
  line-height: 1.35;
  color: var(--color-heading);
}

.imprint-block__body p {
  margin-bottom: 14px;
  font-size: var(--fs-p-sm);
  line-height: 1.85;
}

.imprint-block__body p:last-child { margin-bottom: 0; }

/* ---- Company card ---- */
.imprint-card {
  position: sticky;
  /* Clears the header band, which overlays the top of the page. */
  top: 40px;
  padding: var(--imp-card-pad);
  background-color: var(--bg-body);
  background-image: var(--card-glow);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.imprint-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  background-color: var(--color-primary);
  border-radius: var(--radius-circle);
  /* Dark ink on the brand green — white would drop to roughly 1.8:1 */
  color: var(--color-secondary);
}

.imprint-card__icon svg {
  width: 46%;
  height: auto;
  fill: currentColor;
}

.imprint-card__name {
  margin-bottom: 22px;
  font-size: var(--fs-h5);
  line-height: 1.35;
  color: var(--color-heading);
}

.imprint-card__list { margin: 0; }

.imprint-card__row { padding: 13px 0; }

.imprint-card__row + .imprint-card__row {
  border-top: 1px solid var(--border-color);
}

.imprint-card__label {
  margin: 0 0 3px;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.imprint-card__value {
  margin: 0;
  font-size: var(--fs-p-sm);
  line-height: 1.6;
  color: var(--color-heading);
  /* Long addresses and URLs must not push the card wider than its column. */
  overflow-wrap: anywhere;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  /* The card leads once it can no longer sit beside the text: it is the part
     a visitor came for, and stacked below it would be past four notices. */
  .imprint__row { grid-template-columns: 1fr; }
  .imprint__aside { order: -1; }
  .imprint-card { position: static; }
}


/* ==========================================================================
   36. SECTORS  (projects page)
   ========================================================================== */
/* Left-aligned cards with the icon inline at the top, which reads as a
   reference list rather than as the centred .strategy-card feature grid. */
.sectors {
  padding: var(--sect-pad-top) 0 var(--sect-pad-bottom);
  background-color: var(--bg-body);
}

.sectors__head {
  max-width: 760px;
  margin-bottom: var(--sect-head-gap);
}

.sectors__title {
  margin-bottom: 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-heading);
}

.sectors__text {
  margin-bottom: 0;
  font-size: var(--fs-p-sm);
  line-height: 1.78;
}

.sectors__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sect-gap);
}

.sector-card {
  padding: var(--sect-card-pad);
  background-color: var(--bg-light);
  background-image: var(--card-glow);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}

.sector-card:hover {
  background-color: var(--bg-body);
  box-shadow: var(--shadow-md);
}

.sector-card__icon {
  display: grid;
  place-items: center;
  width: var(--sect-icon);
  height: var(--sect-icon);
  margin-bottom: 22px;
  background-color: var(--color-primary);
  border-radius: var(--radius-circle);
  /* Dark ink on the brand green — white would drop to roughly 1.8:1 */
  color: var(--color-secondary);
}

.sector-card__icon svg {
  width: 46%;
  height: auto;
  fill: currentColor;
}

.sector-card__title {
  margin-bottom: 12px;
  font-size: var(--sect-title-size);
  line-height: 1.3;
  color: var(--color-heading);
}

.sector-card__text {
  margin-bottom: 20px;
  font-size: var(--sect-text-size);
  line-height: 1.75;
}

.sector-card__points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sector-card__point {
  position: relative;
  padding-inline-start: 18px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--color-muted);
}

.sector-card__point + .sector-card__point { margin-top: 8px; }

.sector-card__point::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background-color: var(--color-primary);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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


/* ==========================================================================
   37. LEAD NOTE  (tinted highlight panel beside a text-led intro)
   ========================================================================== */
/* Stands in for .about__media on the industry page, which has no photograph
   in its intro. Ordinary in-flow block, so it cannot overlap its neighbour
   the way the absolutely-positioned .about__card does. */
.lead-note {
  padding: var(--note-pad);
  background-color: var(--color-primary-light);
  border-radius: var(--radius-lg);
}

.lead-note__icon {
  display: grid;
  place-items: center;
  width: var(--note-icon);
  height: var(--note-icon);
  margin-bottom: 22px;
  background-color: var(--color-primary);
  border-radius: var(--radius-circle);
  /* Dark ink on the brand green — white would drop to roughly 1.8:1 */
  color: var(--color-secondary);
}

.lead-note__icon svg {
  width: 45%;
  height: auto;
  fill: currentColor;
}

.lead-note__title {
  margin-bottom: 12px;
  font-size: var(--fs-h5);
  line-height: 1.35;
  color: var(--color-heading);
}

.lead-note__text {
  margin-bottom: 0;
  font-size: var(--fs-p-sm);
  line-height: 1.78;
  color: var(--color-secondary);
}


/* ==========================================================================
   38. SERVICE LINKS  (compact sibling-service strip)
   ========================================================================== */
/* A single row of pills at the foot of a service page. The footer already
   lists every service in full, so this only has to offer the sideways step —
   the full .services__list rows ran most of a screen tall here. */
.service-links {
  padding: var(--slinks-pad-y) 0;
  background-color: var(--bg-light);
}

/* Centred: the label sits over the pills rather than beside them, so the row
   reads as a closing flourish instead of a left-aligned list. */
.service-links__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--slinks-gap);
  text-align: center;
}

.service-links__label {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.service-links__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--slinks-chip-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-links__link {
  display: inline-block;
  padding: var(--slinks-chip-pad);
  background-color: var(--bg-body);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-p-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-heading);
  transition: var(--transition-fast);
}

/* Dark ink on the brand green — white would drop to roughly 1.8:1 */
.service-links__link:hover,
.service-links__link:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

/* The row stacks and centres at every width, so there is no layout switch
   to make here — only the metrics change, and those live in root.css. */


/* ==========================================================================
   39. COOKIE CONSENT  (banner + blocked third-party embeds)

   The bar is dark like the footer, which is why its buttons can reuse
   btn-primary-std and btn-outline-std without a new variant.

   Everything here uses logical properties (inset-inline, margin-inline), so
   the Arabic layout needs no additions in rtl.css.
   ========================================================================== */
.consent {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1080;
  background-color: var(--bg-dark);
  color: var(--color-body-light);
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lg);
}

.consent.is-open { display: block; }

.consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: var(--container-width);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: var(--space-md);
}

/* Grows to fill the row, but wraps to its own line below ~420px of space */
.consent__text { flex: 1 1 420px; }

.consent__title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-heading-light);
}

/* Brighter than the --color-body-light the bar inherits. That token is tuned
   for the footer, where the text is browsed at leisure; the cookie notice is
   read once, quickly, and often on a phone, so it gets more contrast. */
.consent__body {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}

.consent__body a {
  color: var(--color-primary);
  text-decoration: underline;
}

.consent__body a:hover { color: var(--color-primary-hover); }

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

@media (max-width: 767.98px) {
  .consent__inner { padding-block: var(--space-sm); }
  .consent__actions { width: 100%; }
  .consent__actions .btn-std { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   Placeholder shown where a third-party embed would be.
   .contact__map already provides position: relative and overflow: hidden.
   -------------------------------------------------------------------------- */
.contact__map.is-blocked { background-color: var(--media-placeholder-dark); }

.consent-embed {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  text-align: center;
  color: var(--color-body-light);
}

.consent-embed__icon {
  margin-bottom: 4px;
  font-size: 30px;
  color: var(--color-primary);
}

.consent-embed__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  color: var(--color-heading-light);
}

.consent-embed__text {
  max-width: 46ch;
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-small);
  line-height: 1.6;
}