/* ==========================================================================
   Smaraf SARL — Design system
   Single stylesheet for the whole site.

   1. Tokens          6. Hero slider        11. Forms & contact
   2. Base            7. Page hero          12. Gallery, video, map
   3. Layout          8. Media              13. Footer
   4. Type & buttons  9. Cards & lists      14. Motion
   5. Header & nav   10. Bands (stats, CTA) 15. Utilities & print
   ========================================================================== */

/* DM Sans is served from the site itself: no third-party request stands
   between the visitor and the first render.
   The files are lighter cuts of the original variable fonts, which are kept
   in assets/fonts/source and never downloaded by visitors: the upright only
   carries the weights the site uses (400–700), and the italic — every page
   needs it for one sentence of its footer — is two small static files. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-italic-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-italic-700-latin.woff2") format("woff2");
}

/* Icons:start
   Font Awesome 6.1.1 Free, cut down to the 52 icons the site uses: two fonts of
   a few KB in assets/fonts instead of the complete kit (350 KB).

   To use another Font Awesome icon, add its rule to the list below, e.g.
     .fa-truck::before { content: "\f0d1"; }
   (the code is the "Unicode" shown on the icon's page at fontawesome.com).
   It works straight away: a drawing that is not in the small font is taken
   from the complete one in assets/vendors/fontawesome, which only the pages
   using such an icon download. Rebuilding the small fonts afterwards keeps
   those pages light. */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../vendors/fontawesome/webfonts/fa-solid-900.woff2") format("woff2");
  unicode-range: U+21-7E, U+E000-E573, U+E575-F00B, U+F00E-F018, U+F01A-F020, U+F022,
    U+F024-F02B, U+F02D-F03C, U+F03E-F04A, U+F04C-F057, U+F059-F05F,
    U+F063-F06D, U+F06F-F070, U+F072-F094, U+F096-F0DF, U+F0E1-F0E6,
    U+F0E8-F0F2, U+F0F4-F106, U+F108-F133, U+F135-F13F, U+F141-F15B,
    U+F15D-F1BF, U+F1C1-F1D7, U+F1D9-F1DD, U+F1DF-F1E5, U+F1E7-F200,
    U+F202-F24D, U+F24F-F2DA, U+F2DC-F2F1, U+F2F3-F3C4, U+F3C6-F3EC,
    U+F3EE-F467, U+F469-F46B, U+F46D-F48A, U+F48C-F4D6, U+F4D8-F518,
    U+F51A-F52E, U+F530-F541, U+F543-F553, U+F555-F558, U+F55A-F576,
    U+F578-F58F, U+F591-F5FB, U+F5FE-F600, U+F602-F624, U+F626-F6FE,
    U+F700-F8FF;
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/fa-solid-subset.woff2") format("woff2");
  unicode-range: U+20, U+E574, U+F00C, U+F00D, U+F019, U+F021, U+F023, U+F02C, U+F03D,
    U+F04B, U+F058, U+F060, U+F061, U+F062, U+F06E, U+F071, U+F095,
    U+F0E0, U+F0E7, U+F0F3, U+F107, U+F134, U+F140, U+F15C, U+F1C0,
    U+F1D8, U+F1DE, U+F1E6, U+F201, U+F24E, U+F2DB, U+F2F2, U+F3C5,
    U+F3ED, U+F468, U+F46C, U+F48B, U+F4D7, U+F519, U+F52F, U+F542,
    U+F554, U+F559, U+F577, U+F590, U+F5FC, U+F5FD, U+F601, U+F625,
    U+F6FF;
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../vendors/fontawesome/webfonts/fa-brands-400.woff2") format("woff2");
  unicode-range: U+21-7E, U+E000-F08B, U+F08D-F098, U+F09A-F16C, U+F16E-F39D,
    U+F39F-F8FF;
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-brands-subset.woff2") format("woff2");
  unicode-range: U+20, U+F08C, U+F099, U+F16D, U+F39E;
}

.fa-solid,
.fa-brands {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-solid {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.fa-brands {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.fa-angle-down::before {
  content: "\f107";
}

.fa-arrow-left::before {
  content: "\f060";
}

.fa-arrow-right::before {
  content: "\f061";
}

.fa-arrow-up::before {
  content: "\f062";
}

.fa-arrows-rotate::before {
  content: "\f021";
}

.fa-award::before {
  content: "\f559";
}

.fa-bell::before {
  content: "\f0f3";
}

.fa-bolt::before {
  content: "\f0e7";
}

.fa-boxes-stacked::before {
  content: "\f468";
}

.fa-bullseye::before {
  content: "\f140";
}

.fa-chart-line::before {
  content: "\f201";
}

.fa-circle-check::before {
  content: "\f058";
}

.fa-clipboard-check::before {
  content: "\f46c";
}

.fa-database::before {
  content: "\f1c0";
}

.fa-diagram-project::before {
  content: "\f542";
}

.fa-download::before {
  content: "\f019";
}

.fa-envelope::before {
  content: "\f0e0";
}

.fa-eye::before {
  content: "\f06e";
}

.fa-file-lines::before {
  content: "\f15c";
}

.fa-fingerprint::before {
  content: "\f577";
}

.fa-fire-extinguisher::before {
  content: "\f134";
}

.fa-gas-pump::before {
  content: "\f52f";
}

.fa-gauge-high::before {
  content: "\f625";
}

.fa-headset::before {
  content: "\f590";
}

.fa-laptop-code::before {
  content: "\f5fc";
}

.fa-layer-group::before {
  content: "\f5fd";
}

.fa-location-crosshairs::before {
  content: "\f601";
}

.fa-location-dot::before {
  content: "\f3c5";
}

.fa-lock::before {
  content: "\f023";
}

.fa-microchip::before {
  content: "\f2db";
}

.fa-network-wired::before {
  content: "\f6ff";
}

.fa-paper-plane::before {
  content: "\f1d8";
}

.fa-person-walking::before {
  content: "\f554";
}

.fa-phone::before {
  content: "\f095";
}

.fa-play::before {
  content: "\f04b";
}

.fa-plug::before {
  content: "\f1e6";
}

.fa-route::before {
  content: "\f4d7";
}

.fa-scale-balanced::before {
  content: "\f24e";
}

.fa-shield-halved::before {
  content: "\f3ed";
}

.fa-shield-heart::before {
  content: "\e574";
}

.fa-sliders::before {
  content: "\f1de";
}

.fa-stopwatch::before {
  content: "\f2f2";
}

.fa-tags::before {
  content: "\f02c";
}

.fa-tower-broadcast::before {
  content: "\f519";
}

.fa-triangle-exclamation::before {
  content: "\f071";
}

.fa-truck-fast::before {
  content: "\f48b";
}

.fa-video::before {
  content: "\f03d";
}

.fa-xmark::before {
  content: "\f00d";
}

.fa-facebook-f::before {
  content: "\f39e";
}

.fa-instagram::before {
  content: "\f16d";
}

.fa-linkedin::before {
  content: "\f08c";
}

.fa-twitter::before {
  content: "\f099";
}
/* Icons:end */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Brand */
  --orange-50: #fff6f0;
  --orange-100: #ffe8d9;
  --orange-400: #fc7a14;
  --orange-500: #fc5c0d;
  --orange-600: #e04e00;
  --orange-700: #c54400; /* small orange text on light surfaces */
  --amber-400: #ffb23e;
  --indigo-700: #2b1c70;
  --ink-950: #0d0421;
  --ink-900: #12062c;
  --ink-800: #1d0f42;

  /* Neutrals */
  --text: #5c5769;
  --text-soft: #7d788b;
  --heading: var(--ink-900);
  --surface: #fff;
  --surface-alt: #f9f6ff;
  --surface-sunken: #f2eefb;
  --border: #e6e0f0;
  --border-strong: #cfc6e0;
  --on-dark: #fff;
  --on-dark-soft: #b5adc8;

  /* Feedback */
  --success: #0f7b4f;
  --success-bg: #e8f7f0;
  --danger: #b42318;
  --danger-bg: #fdeceb;

  /* Type */
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.375rem, 1.2rem + 5.2vw, 4.75rem);
  --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Space */
  --gutter: clamp(20px, 4vw, 32px);
  --container: 1200px;
  --section-y: clamp(4rem, 2.4rem + 6.5vw, 7.5rem);
  --header-h: 76px;
  --cta-overlap: 80px;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(18, 6, 44, 0.06), 0 2px 8px rgba(18, 6, 44, 0.04);
  --shadow-md: 0 10px 30px -12px rgba(18, 6, 44, 0.18);
  --shadow-lg: 0 28px 60px -24px rgba(18, 6, 44, 0.28);
  --shadow-brand: 0 14px 30px -12px rgba(252, 92, 13, 0.6);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s;
  --t: 0.28s;
  --t-slow: 0.7s;

  /* Strength of the diagonal bands over the banners (0 = invisible, 1 = solid) */
  --bands-opacity: 0.4;

  /* Brand gradient */
  --grad-brand: linear-gradient(120deg, #fe8c58 0%, var(--orange-500) 55%, #ef4a00 100%);
  --grad-accent: linear-gradient(90deg, var(--orange-500), var(--amber-400));
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

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

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

address {
  font-style: normal;
}

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

::selection {
  background: var(--orange-500);
  color: #fff;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */
.container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

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

.section--flush-top {
  padding-top: 0;
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p:not(.eyebrow) {
  margin-top: 16px;
  font-size: var(--fs-lead);
}

/* Two columns: follows DOM order on desktop, media always first on mobile */
.split {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.split__media {
  order: -1;
  min-width: 0;
}

.split__body {
  min-width: 0;
}

/* Rhythm of a text column: eyebrow, title, text, list, button */
.split__body > * + * {
  margin-top: 24px;
}

.split__body > .eyebrow + * {
  margin-top: 0;
}

.split__body > .h3 + * {
  margin-top: 10px;
}

@media (min-width: 992px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split--7-5 {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .split--5-7 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .split--top {
    align-items: start;
  }

  .split__media {
    order: 0;
  }

  .split__sticky {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

.grid {
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
}

@media (min-width: 560px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Compact icon cards stay two-up even on small phones */
.grid--feature {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

@media (min-width: 640px) {
  .grid--feature {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Vertical rhythm inside a text block */
.flow > * + * {
  margin-top: var(--flow, 1.15em);
}

/* ==========================================================================
   4. Type & buttons
   ========================================================================== */
.h1 {
  font-size: var(--fs-h1);
}

.h2 {
  font-size: var(--fs-h2);
}

.h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.lead {
  font-size: var(--fs-lead);
}

.prose {
  max-width: 64ch;
}

.prose strong,
.prose em {
  color: var(--heading);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-700);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
}

.eyebrow--light {
  color: var(--orange-400);
}

.eyebrow--white {
  color: #fff;
}

.eyebrow--white::before {
  background: #fff;
}

/* Buttons */
.btn {
  --btn-bg: var(--orange-500);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 28px;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
    border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.btn i {
  font-size: 0.95em;
  transition: transform var(--t) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:hover .fa-arrow-right {
  transform: translateX(4px);
}

.btn:hover .fa-download {
  transform: translateY(2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  box-shadow: var(--shadow-brand);
}

.btn--primary:hover {
  --btn-bg: var(--orange-600);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink-900);
  box-shadow: 0 14px 30px -14px rgba(18, 6, 44, 0.5);
}

.btn--light:hover {
  --btn-bg: var(--ink-900);
  --btn-fg: #fff;
}

.btn--dark {
  --btn-bg: var(--ink-900);
}

.btn--dark:hover {
  --btn-bg: var(--orange-500);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-bd: var(--border-strong);
}

.btn--outline:hover {
  --btn-bd: var(--orange-500);
  --btn-fg: var(--orange-700);
}

.btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.38);
}

.btn--ghost:hover {
  --btn-bg: #fff;
  --btn-fg: var(--ink-900);
  --btn-bd: #fff;
}

.btn--sm {
  min-height: 44px;
  padding: 8px 20px;
  font-size: 0.75rem;
}

.btn--block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--orange-700);
  transition: gap var(--t) var(--ease), color var(--t) var(--ease);
}

.link-arrow i {
  font-size: 0.8em;
}

a.link-arrow:hover,
.card:hover .link-arrow {
  gap: 12px;
  color: var(--orange-500);
}

/* ==========================================================================
   5. Header & navigation
   ========================================================================== */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--ink-900);
  color: #fff;
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus {
  transform: none;
}

/* Topbar */
.topbar {
  display: none;
  background: var(--ink-950);
  color: var(--on-dark-soft);
  font-size: var(--fs-xs);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 44px;
}

.topbar__tagline {
  display: none;
  margin: 0;
  color: #fff;
  font-weight: 500;
}

.topbar__list {
  display: flex;
  align-items: center;
  gap: 24px;
}

.topbar__list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar__list i {
  color: var(--orange-500);
}

.topbar__list a {
  transition: color var(--t-fast) var(--ease);
}

.topbar__list a:hover {
  color: #fff;
}

/* The phone number is only shown in the mobile menu copy of this list */
.topbar .topbar__phone {
  display: none;
}

.topbar__end {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .topbar {
    display: block;
  }
}

@media (min-width: 1240px) {
  .topbar__tagline {
    display: block;
  }
}

/* Social icons */
.social {
  display: flex;
  align-items: center;
  gap: 4px;
}

.social a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.social a:hover {
  background: var(--orange-500);
  color: #fff;
  transform: translateY(-2px);
}

.social--outline {
  gap: 10px;
}

.social--outline a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.social--outline a:hover {
  border-color: var(--orange-500);
}

/* Language switch */
.lang {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
}

.lang button {
  min-width: 36px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--on-dark-soft);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.lang button:hover {
  color: #fff;
}

.lang button[aria-pressed="true"] {
  background: var(--orange-500);
  color: #fff;
}

/* Header bar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* The frosted layer lives on a pseudo-element so the off-canvas menu
   (position: fixed) keeps the viewport as its containing block. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: box-shadow var(--t) var(--ease);
}

.site-header.is-stuck::before {
  box-shadow: 0 12px 32px -18px rgba(18, 6, 44, 0.35);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  flex: none;
  display: inline-flex;
  align-items: center;
}

.brand img {
  width: auto;
  height: 46px;
  transition: opacity var(--t) var(--ease);
}

.brand:hover img {
  opacity: 0.85;
}

/* Burger */
.burger {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  margin-left: auto;
  border-radius: var(--r-sm);
  transition: background-color var(--t) var(--ease);
}

.burger:hover {
  background: var(--surface-sunken);
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-900);
}

/* Navigation — shared */
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav__link i {
  font-size: 0.75em;
  transition: transform var(--t) var(--ease);
}

.nav__sublist a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  line-height: 1.35;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nav__sublist a i {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

/* Navigation — desktop */
@media (min-width: 1024px) {
  .burger,
  .nav__head,
  .nav__extras {
    display: none;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 36px);
    margin-left: auto;
  }

  .nav__list {
    display: flex;
    gap: clamp(18px, 2.4vw, 34px);
  }

  .nav__item {
    position: relative;
  }

  .nav__link {
    position: relative;
    height: var(--header-h);
    font-size: var(--fs-xs);
    color: var(--ink-900);
    transition: color var(--t-fast) var(--ease);
  }

  .nav__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--grad-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t) var(--ease);
  }

  .nav__item:hover > .nav__link,
  .nav__item.is-open > .nav__link,
  .nav__item.is-active > .nav__link {
    color: var(--orange-700);
  }

  .nav__item:hover > .nav__link::after,
  .nav__item.is-open > .nav__link::after,
  .nav__item.is-active > .nav__link::after {
    transform: scaleX(1);
  }

  .nav__item:hover > .nav__link i,
  .nav__item.is-open > .nav__link i {
    transform: rotate(180deg);
  }

  .nav__sub {
    position: absolute;
    top: 100%;
    left: -22px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
      visibility var(--t);
  }

  .nav__item:hover > .nav__sub,
  .nav__item:focus-within > .nav__sub,
  .nav__item.is-open > .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Wide (two-column) panel: centred under its item so it stays on screen */
  .nav__sub--center {
    left: 50%;
    transform: translate(-50%, 10px);
  }

  .nav__item:hover > .nav__sub--center,
  .nav__item:focus-within > .nav__sub--center,
  .nav__item.is-open > .nav__sub--center {
    transform: translate(-50%, 0);
  }

  .nav__sublist {
    display: grid;
    gap: 2px;
    width: max-content;
    min-width: 270px;
  }

  .nav__sublist--2 {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }

  .nav__sublist a {
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--ink-900);
  }

  .nav__sublist a i {
    background: var(--orange-50);
    color: var(--orange-500);
  }

  .nav__sublist a:hover,
  .nav__sublist a[aria-current="page"] {
    background: var(--surface-alt);
    color: var(--orange-700);
  }

  .nav__sublist a:hover i,
  .nav__sublist a[aria-current="page"] i {
    background: var(--orange-500);
    color: #fff;
  }
}

/* Navigation — off-canvas (mobile & tablet) */
@media (max-width: 1023.98px) {
  :root {
    --header-h: 68px;
  }

  .brand img {
    height: 40px;
  }

  .nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(88vw, 380px);
    padding: 18px 20px 28px;
    background: var(--ink-900);
    color: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(-104%);
    transition: transform 0.4s var(--ease), visibility 0.4s;
  }

  .nav-open .nav {
    visibility: visible;
    transform: none;
    box-shadow: 30px 0 80px rgba(13, 4, 33, 0.5);
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(13, 4, 33, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s;
  }

  .nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
  }

  html.nav-open {
    overflow: hidden;
  }

  .nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .nav__head img {
    width: auto;
    height: 38px;
  }

  .nav__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.125rem;
    transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
  }

  .nav__close:hover {
    background: var(--orange-500);
    transform: rotate(90deg);
  }

  .nav__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .nav__link {
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    font-size: var(--fs-sm);
    color: #fff;
  }

  .nav__item.is-active > .nav__link,
  .nav__item.is-open > .nav__link {
    color: var(--orange-400);
  }

  .nav__item.is-open > .nav__link i {
    transform: rotate(180deg);
  }

  /* Height animates without measuring in JS */
  .nav__sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s var(--ease);
  }

  .nav__item.is-open > .nav__sub {
    grid-template-rows: 1fr;
  }

  .nav__sublist {
    min-height: 0;
    overflow: hidden;
    visibility: hidden; /* collapsed links stay out of the tab order */
    transition: visibility 0.35s;
  }

  .nav__item.is-open .nav__sublist {
    visibility: visible;
  }

  .nav__sublist li:last-child {
    padding-bottom: 14px;
  }

  .nav__sublist a {
    padding: 8px 0;
    font-size: var(--fs-sm);
    color: var(--on-dark-soft);
  }

  .nav__sublist a i {
    background: rgba(255, 255, 255, 0.07);
    color: var(--orange-400);
  }

  .nav__sublist a:hover,
  .nav__sublist a[aria-current="page"] {
    color: #fff;
  }

  .nav__cta {
    width: 100%;
    margin-top: 24px;
  }

  .nav__extras {
    display: grid;
    gap: 20px;
    margin-top: 28px;
    color: var(--on-dark-soft);
    font-size: var(--fs-sm);
  }

  .nav__extras .topbar__list {
    display: grid;
    gap: 12px;
  }

  .nav__extras .topbar__list li {
    align-items: flex-start;
    gap: 12px;
  }

  .nav__extras .topbar__list i {
    margin-top: 0.35em;
  }

  .nav__extras .topbar__end {
    justify-content: space-between;
    margin: 0;
  }

  .nav__extras .lang button {
    min-width: 46px;
    height: 34px;
    font-size: 0.75rem;
  }

  /* Without JavaScript the menu simply sits under the header bar */
  html:not(.js) .burger {
    display: none;
  }

  html:not(.js) .site-header {
    position: static;
  }

  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    padding-block: 12px;
  }

  html:not(.js) .nav {
    position: static;
    width: 100%;
    border-radius: var(--r-md);
    visibility: visible;
    transform: none;
  }

  html:not(.js) .nav__sub {
    grid-template-rows: 1fr;
  }
}

/* ==========================================================================
   6. Hero slider
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink-900);
  color: #fff;
  touch-action: pan-y; /* horizontal swipes change slide */
}

.hero__slides {
  display: grid;
}

.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 78vh, 760px);
  padding-block: clamp(88px, 13vh, 140px) clamp(128px, 17vh, 176px);
  background: var(--ink-900);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}

.hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

/* Duotone treatment: any photo blends into the brand night colour */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  mix-blend-mode: luminosity;
}

.hero__slide::before,
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__slide::before {
  z-index: -2;
  background: linear-gradient(90deg, rgba(18, 6, 44, 0.92) 0%, rgba(18, 6, 44, 0.62) 46%, rgba(18, 6, 44, 0.1) 100%),
    linear-gradient(0deg, rgba(13, 4, 33, 0.8) 0%, transparent 38%);
}

/* Diagonal bands taken from the brand visuals */
.hero__slide::after {
  z-index: -1;
  background: linear-gradient(
    112deg,
    transparent 0 75%,
    rgba(252, 92, 13, 0.9) 75% 79%,
    transparent 79% 81.5%,
    rgba(43, 28, 112, 0.62) 81.5% 90.5%,
    transparent 90.5% 93%,
    rgba(252, 92, 13, 0.32) 93% 100%
  );
  opacity: calc(var(--bands-opacity) * 0.5);
}

@media (min-width: 768px) {
  .hero__slide::after {
    opacity: var(--bands-opacity);
  }
}

.hero__text {
  max-width: 720px;
}

.hero__title {
  margin-bottom: clamp(24px, 4vh, 36px);
  color: #fff;
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__controls {
  position: absolute;
  right: 0;
  bottom: clamp(28px, 6vh, 56px);
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Slider controls (shared by hero and galleries) */
.slider__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider__dot {
  position: relative;
  width: 40px;
  height: 24px;
}

.slider__dot::before,
.slider__dot span {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  height: 4px;
  border-radius: 4px;
}

.slider__dot::before {
  width: 100%;
  background: rgba(255, 255, 255, 0.28);
  transition: background-color var(--t) var(--ease);
}

.slider__dot:hover::before {
  background: rgba(255, 255, 255, 0.5);
}

.slider__dot span {
  width: 0;
  background: var(--grad-accent);
}

.slider__dot[aria-current="true"] span {
  width: 100%;
}

.slider.is-auto .slider__dot[aria-current="true"] span {
  animation: slider-fill var(--autoplay, 6000ms) linear both;
}

/* Paused (keyboard focus, hover on galleries): the bar simply stays full */
.slider.is-paused .slider__dot[aria-current="true"] span {
  animation: none;
}

@keyframes slider-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.slider__arrows {
  display: flex;
  gap: 10px;
}

.slider__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  color: #fff;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
    color var(--t) var(--ease), transform var(--t) var(--ease);
}

.slider__arrow:hover {
  border-color: #fff;
  background: #fff;
  color: var(--ink-900);
  transform: scale(1.06);
}

/* ==========================================================================
   7. Page hero (inner pages)
   ========================================================================== */
.page-hero {
  position: relative;
  z-index: 0;
  padding-block: clamp(56px, 8vw, 104px);
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  mix-blend-mode: luminosity;
}

.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero::before {
  z-index: -2;
  background: linear-gradient(90deg, rgba(18, 6, 44, 0.94) 0%, rgba(18, 6, 44, 0.72) 55%, rgba(18, 6, 44, 0.35) 100%);
}

.page-hero::after {
  z-index: -1;
  background: linear-gradient(
    112deg,
    transparent 0 80%,
    rgba(252, 92, 13, 0.9) 80% 83%,
    transparent 83% 85%,
    rgba(43, 28, 112, 0.6) 85% 93%,
    transparent 93% 95%,
    rgba(252, 92, 13, 0.3) 95% 100%
  );
  opacity: calc(var(--bands-opacity) * 0.5);
}

@media (min-width: 768px) {
  .page-hero::after {
    opacity: var(--bands-opacity);
  }
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-400);
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--t-fast) var(--ease);
}

.breadcrumb a:hover {
  color: #fff;
}

.page-hero__title {
  max-width: 20ch;
  color: #fff;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* ==========================================================================
   8. Media
   ========================================================================== */
/* A frame that gives every product cut-out the same footprint. It has no
   background of its own: the product sits directly on the page. */
.media {
  --pad: 0px;
  position: relative;
  aspect-ratio: 5 / 4;
}

.media > img {
  position: absolute;
  inset: var(--pad);
  width: calc(100% - var(--pad) * 2);
  height: calc(100% - var(--pad) * 2);
  object-fit: contain;
  transition: transform 0.6s var(--ease);
}

.media:hover > img {
  transform: scale(1.03);
}

/* Photographs fill a rounded frame */
.media--photo {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.media--photo > img {
  object-fit: cover;
}

/* Screenshots and diagrams: a white frame that hugs the image */
.media--screen {
  --pad: clamp(14px, 2.5vw, 28px);
  aspect-ratio: auto;
  padding: var(--pad);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
}

.media--screen > img,
.media--plain > img {
  position: static;
  width: 100%;
  height: auto;
}

/* Device mock-ups that draw their own frame: natural proportions, nothing
   behind them */
.media--plain {
  aspect-ratio: auto;
}

.media--square {
  aspect-ratio: 1;
}

.media--portrait {
  aspect-ratio: 3 / 4;
}

.media--wide {
  aspect-ratio: 16 / 10;
}

/* Photo with the "years of experience" badge */
.about-visual {
  position: relative;
  max-width: 520px;
  margin-inline: auto;
}

.badge-xp {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 22px 16px;
  border-bottom: 4px solid var(--orange-500);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.badge-xp strong {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--orange-500);
  font-variant-numeric: tabular-nums;
}

.badge-xp span {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-900);
}

@media (min-width: 992px) {
  .about-visual {
    margin-inline: 0 auto;
  }

  .badge-xp {
    right: -28px;
    bottom: -28px;
  }
}

/* ==========================================================================
   9. Cards & lists
   ========================================================================== */
.card {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.icon-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--orange-100);
  color: var(--orange-500);
  font-size: 1.375rem;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.icon-tile--sm {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 1.125rem;
}

.card:hover .icon-tile {
  background: var(--orange-500);
  color: #fff;
  transform: scale(1.06);
}

/* Whole card is the link */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Service card */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--grad-accent);
  transition: width 0.5s var(--ease);
}

.service-card:hover::before {
  width: 100%;
}

.service-card__title {
  margin-top: 6px;
  transition: color var(--t) var(--ease);
}

.service-card:hover .service-card__title {
  color: var(--orange-700);
}

.service-card__text {
  flex: 1;
  margin: 0;
  font-size: var(--fs-sm);
}

/* Phones: icon beside the text, so eight cards do not make an endless page */
@media (max-width: 559.98px) {
  .service-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 16px;
    align-items: start;
  }

  .service-card > * {
    grid-column: 2;
  }

  .service-card .icon-tile {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.125rem;
  }

  .service-card__title {
    margin-top: 0;
  }
}

/* Feature card (icon + title) */
.feature-card {
  display: grid;
  align-content: start;
  gap: 16px;
  height: 100%;
  padding: 22px;
}

.feature-card__title {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* Benefit row (icon + paragraph) */
.benefit {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.benefit + .benefit {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.benefit p {
  margin: 0;
}

/* Mini card (icon + title + caption) */
.mini-cards {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

@media (min-width: 560px) {
  .mini-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mini-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
}

.mini-card__title {
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mini-card p {
  margin: 2px 0 0;
  font-size: 0.875rem;
}

/* Link card (related pages) */
.link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 18px 20px;
}

.link-card__title {
  flex: 1;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--heading);
}

.link-card > .fa-arrow-right {
  color: var(--border-strong);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}

.link-card:hover > .fa-arrow-right {
  color: var(--orange-500);
  transform: translateX(4px);
}

/* Solution card (image + text) */
.solution-card {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: 20px;
}

.solution-card .media {
  aspect-ratio: 4 / 3;
}

.solution-card__title {
  margin-bottom: 8px;
}

.solution-card p {
  margin-bottom: 12px;
  font-size: var(--fs-sm);
}

@media (min-width: 560px) {
  .solution-card {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
  }
}

/* Link list: one card, one row per link (icon, name, arrow) */
.link-list {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
}

.link-list li + li {
  border-top: 1px solid var(--border);
}

.link-list a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px 12px 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--heading);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.link-list__label {
  flex: 1;
}

.link-list a > .fa-arrow-right {
  font-size: 0.875rem;
  color: var(--border-strong);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}

.link-list a:hover {
  background: var(--surface-alt);
  color: var(--orange-700);
}

.link-list a:hover .icon-tile {
  background: var(--orange-500);
  color: #fff;
}

.link-list a:hover > .fa-arrow-right {
  color: var(--orange-500);
  transform: translateX(4px);
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-900);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease),
    color var(--t) var(--ease), transform var(--t) var(--ease);
}

.chip i {
  color: var(--orange-500);
  transition: color var(--t) var(--ease);
}

.chip:hover {
  border-color: var(--orange-500);
  background: var(--orange-500);
  color: #fff;
  transform: translateY(-2px);
}

.chip:hover i {
  color: #fff;
}

/* Check list */
.checklist {
  display: grid;
  gap: 12px;
}

.checklist li {
  position: relative;
  padding-left: 36px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-900);
}

.checklist li::before {
  content: "\f00c";
  position: absolute;
  top: 0.15em;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange-100);
  color: var(--orange-600);
  font: 900 0.6875rem/1 "Font Awesome 6 Free";
}

@media (min-width: 560px) {
  .checklist--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* Longer, paragraph-like items */
.checklist--text {
  gap: 18px;
}

.checklist--text li {
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
}

/* ==========================================================================
   10. Bands — stats, banner, partners, call to action
   ========================================================================== */
/* Stats */
.stats {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--r-lg);
  background: var(--grad-brand);
  box-shadow: 0 30px 60px -28px rgba(252, 92, 13, 0.6);
  color: #fff;
  overflow: hidden;
}

.stats::before {
  content: "";
  position: absolute;
  top: -150px;
  left: -130px;
  z-index: -1;
  width: 340px;
  height: 340px;
  border: 64px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}

.stats li {
  padding: clamp(26px, 4vw, 46px) 16px;
  text-align: center;
}

.stats li:nth-child(even) {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.stats li:nth-child(n + 3) {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.stats__num {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stats__label {
  font-size: var(--fs-sm);
  font-weight: 500;
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats li:nth-child(n) {
    border-top: 0;
  }

  .stats li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.22);
  }
}

/* Image banner */
.banner {
  position: relative;
  z-index: 0;
  padding-block: clamp(72px, 11vw, 150px);
  background: var(--ink-900);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.banner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  mix-blend-mode: luminosity;
}

.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(18, 6, 44, 0.55) 0%, rgba(18, 6, 44, 0.9) 78%);
}

.banner__title {
  max-width: 18ch;
  margin: 0 auto 32px;
  color: #fff;
  font-size: clamp(1.875rem, 1.2rem + 3vw, 3.25rem);
  line-height: 1.1;
}

.banner__title span {
  color: var(--orange-400);
}

/* Partners */
.partners {
  padding-block: clamp(36px, 5vw, 56px);
  border-block: 1px solid var(--border);
}

.partners__title {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-soft);
}

.marquee {
  min-height: 40px; /* reserved before the logos are injected */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee__track li {
  flex: none;
}

.marquee__track {
  --gap: clamp(40px, 6vw, 80px);
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  animation: marquee 70s linear infinite;
}

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

.marquee__track img {
  flex: none;
  width: auto;
  max-width: 150px;
  height: 40px;
  object-fit: contain;
  opacity: 0.62;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  transition: opacity var(--t) var(--ease), filter var(--t) var(--ease);
}

.marquee__track img:hover {
  opacity: 1;
  filter: none;
}

@keyframes marquee {
  to {
    transform: translateX(calc(-50% - var(--gap) / 2));
  }
}

/* Call to action — the panel straddles the footer edge */
.cta {
  position: relative;
  z-index: 1;
  margin-bottom: calc(var(--cta-overlap) * -1);
  padding-top: clamp(48px, 7vw, 88px);
}

.cta__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 28px;
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--r-lg);
  background: var(--grad-brand);
  box-shadow: 0 34px 70px -30px rgba(252, 92, 13, 0.7);
  color: #fff;
  overflow: hidden;
}

.cta__panel::before {
  content: "";
  position: absolute;
  top: -150px;
  left: -130px;
  z-index: -1;
  width: 340px;
  height: 340px;
  border: 64px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}

.cta__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    112deg,
    transparent 0 72%,
    rgba(255, 255, 255, 0.12) 72% 78%,
    transparent 78% 82%,
    rgba(43, 28, 112, 0.2) 82% 100%
  );
}

.cta__title {
  color: #fff;
  font-size: var(--fs-h2);
}

@media (min-width: 860px) {
  .cta__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }
}

/* ==========================================================================
   11. Forms & contact
   ========================================================================== */
.form {
  display: grid;
  gap: 20px;
}

@media (min-width: 640px) {
  .form--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form--2 .field--full {
    grid-column: 1 / -1;
  }
}

.field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.field label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-900);
}

.input {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink-900);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.input::placeholder {
  color: var(--text-soft);
  opacity: 1;
}

.input:hover {
  border-color: var(--border-strong);
}

.input:focus {
  outline: 0;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 4px rgba(252, 92, 13, 0.16);
}

textarea.input {
  min-height: 170px;
  resize: vertical;
}

.field.is-invalid .input {
  border-color: var(--danger);
}

.field.is-invalid .input:focus {
  box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.14);
}

.field__error {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--danger);
}

.form__status {
  display: none;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.form__status.is-success,
.form__status.is-error {
  display: block;
}

.form__status.is-success {
  background: var(--success-bg);
  color: var(--success);
}

.form__status.is-error {
  background: var(--danger-bg);
  color: var(--danger);
}

.hp-field {
  position: absolute;
  left: -9999px;
}

/* Contact layout */
.contact {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

@media (min-width: 992px) {
  .contact {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.form-card {
  padding: clamp(24px, 4.5vw, 64px);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
}

.form-card .h2 {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.contact-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--grad-brand);
  box-shadow: 0 34px 70px -34px rgba(252, 92, 13, 0.7);
  color: #fff;
  overflow: hidden;
}

.contact-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  mix-blend-mode: luminosity;
}

.contact-card__title {
  color: #fff;
  font-size: 1.5rem;
}

.contact-card__list {
  display: grid;
  gap: 22px;
}

.contact-card__list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.contact-card__list i {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1rem;
}

.contact-card__list h3 {
  margin-bottom: 2px;
  color: #fff;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-card__list p,
.contact-card__list address {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
}

.contact-card__list a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease);
}

.contact-card__list a:hover {
  border-color: #fff;
}

.contact-card .social {
  margin-top: auto;
}

.contact-card .social a:hover {
  border-color: #fff;
  background: #fff;
  color: var(--orange-600);
}

/* ==========================================================================
   12. Gallery, video, map
   ========================================================================== */
.gallery {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: var(--ink-900);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  touch-action: pan-y;
}

.gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}

.gallery__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__slide figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 72px clamp(20px, 3vw, 28px) 62px;
  background: linear-gradient(0deg, rgba(13, 4, 33, 0.9), transparent);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-sm);
}

.gallery__slide figcaption strong {
  display: block;
  color: #fff;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

/* Scrim so the controls stay readable on bright photos */
.gallery::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 110px;
  background: linear-gradient(0deg, rgba(13, 4, 33, 0.72), transparent);
  pointer-events: none;
}

.gallery__controls {
  position: absolute;
  right: clamp(16px, 3vw, 24px);
  bottom: 14px;
  left: clamp(16px, 3vw, 28px);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.gallery .slider__arrow {
  width: 40px;
  height: 40px;
  background: rgba(13, 4, 33, 0.35);
}

.gallery .slider__arrow:hover {
  background: #fff;
}

.gallery .slider__dot {
  width: 28px;
}

/* Lazy video */
.video {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background: var(--ink-900);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.video img,
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video img {
  object-fit: cover;
  opacity: 0.72;
  transition: opacity var(--t) var(--ease), transform 0.8s var(--ease);
}

.video:hover img {
  opacity: 0.85;
  transform: scale(1.03);
}

.video__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
}

.video__play span {
  display: grid;
  place-items: center;
  width: clamp(64px, 9vw, 88px);
  height: clamp(64px, 9vw, 88px);
  padding-left: 5px;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 0 0 0 rgba(252, 92, 13, 0.5), var(--shadow-lg);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  transition: transform var(--t) var(--ease), box-shadow 0.5s var(--ease);
}

.video__play:hover span {
  box-shadow: 0 0 0 14px rgba(252, 92, 13, 0.22), var(--shadow-lg);
  transform: scale(1.07);
}

/* Map */
.map {
  aspect-ratio: 21 / 9;
  min-height: 340px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 0;
  padding-top: clamp(64px, 8vw, 96px);
  background: var(--ink-900);
  color: var(--on-dark-soft);
  font-size: var(--fs-sm);
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 0% 100%, rgba(252, 92, 13, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(43, 28, 112, 0.55), transparent 70%);
}

/* Footer that follows the call-to-action panel */
.site-footer--cta {
  padding-top: calc(var(--cta-overlap) + clamp(56px, 7vw, 88px));
}

/* Flat background: the layout does the work, not a glow */
.site-footer::before {
  display: none;
}

/* Head: brand on the left, newsletter on the right */
.footer__head {
  display: grid;
  gap: 28px 48px;
  align-items: center;
  padding-bottom: clamp(32px, 4vw, 44px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

@media (min-width: 900px) {
  .footer__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  }
}

.footer__logo img {
  width: auto;
  height: 48px;
}

.footer__tagline {
  margin: 16px 0 0;
}

.footer__tagline em {
  color: #fff;
}

/* Newsletter */
.newsletter {
  display: grid;
  gap: 12px;
}

.newsletter__title {
  color: #fff;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.newsletter p {
  margin: 0;
}

.newsletter__row {
  display: grid;
  gap: 10px;
}

@media (min-width: 480px) {
  .newsletter__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.newsletter .input {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.newsletter .input::placeholder {
  color: var(--on-dark-soft);
}

.newsletter .input:focus {
  border-color: var(--orange-500);
}

/* Link columns */
.footer__grid {
  display: grid;
  gap: 36px 40px;
  padding-block: clamp(36px, 5vw, 56px);
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__col--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1.25fr;
    gap: 56px;
  }

  .footer__col--wide {
    grid-column: auto;
  }
}

.footer__title {
  margin-bottom: 18px;
  color: var(--orange-400);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer__links {
  display: grid;
  gap: 10px;
}

@media (min-width: 480px) {
  .footer__links--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}

.footer__links a {
  transition: color var(--t-fast) var(--ease);
}

.footer__links a:hover {
  color: #fff;
}

.footer__contact {
  display: grid;
  gap: 14px;
}

.footer__contact li {
  display: flex;
  gap: 14px;
  align-items: center;
  line-height: 1.5;
}

.footer__contact i {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.07);
  color: var(--orange-400);
  font-size: 0.875rem;
}

.footer__contact a {
  transition: color var(--t-fast) var(--ease);
}

.footer__contact a:hover {
  color: #fff;
}

/* Bottom bar: full width, one shade darker */
.footer__bar {
  background: var(--ink-950);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
  font-size: 0.875rem;
}

.footer__bottom p {
  margin: 0;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer__nav a {
  transition: color var(--t-fast) var(--ease);
}

.footer__nav a:hover {
  color: #fff;
}

/* Back to top */
.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: var(--shadow-brand);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
    visibility var(--t), background-color var(--t) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--ink-900);
  transform: translateY(-3px);
}

/* ==========================================================================
   14. Motion
   ========================================================================== */
/* A visitor who chose French: the text stays invisible (the layout and the
   photos do not) for the instant it takes i18n.js to translate it, instead
   of showing English first. Set and released by the inline script in <head>. */
.i18n-wait [data-i18n] {
  visibility: hidden;
}

/* Scroll reveal — armed by the inline script in <head> (class "reveal" on
   <html>), which also disarms it if smaraf.js has not started in time, so
   content can never stay hidden. */
.reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--t-slow) var(--ease) var(--d, 0ms),
    transform var(--t-slow) var(--ease) var(--d, 0ms);
}

.reveal [data-reveal="zoom"] {
  transform: scale(0.96);
}

/* Sideways entrances only where there is room for them: on small screens
   they would push content past the edge of the viewport. */
@media (min-width: 992px) {
  .reveal [data-reveal="left"] {
    transform: translate3d(-30px, 0, 0);
  }

  .reveal [data-reveal="right"] {
    transform: translate3d(30px, 0, 0);
  }
}

.reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Hero: the outgoing text leaves quickly, then the new one rises in, so the
   two never overlap while the photos cross-fade. */
.hero__text {
  transition: opacity 0.25s var(--ease);
}

.hero__slide:not(.is-active) .hero__text {
  opacity: 0;
}

.hero__slide.is-active .hero__text > * {
  animation: rise 0.8s var(--ease) 0.25s both;
}

.hero__slide.is-active .hero__text > :nth-child(2) {
  animation-delay: 0.35s;
}

.hero__slide.is-active .hero__text > :nth-child(3) {
  animation-delay: 0.45s;
}

.hero__slide.is-active .hero__bg {
  animation: hero-zoom 9s linear both;
}

.page-hero .container > * {
  animation: rise 0.7s var(--ease) both;
}

.page-hero .container > :nth-child(2) {
  animation-delay: 0.08s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
}

@keyframes hero-zoom {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

/* Cross-page transition (progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

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

  ::view-transition-new(root) {
    animation: vt-in 0.3s var(--ease) both;
  }
}

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

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    row-gap: 28px;
    animation: none;
  }

  .marquee__track [aria-hidden="true"] {
    display: none;
  }
}

/* ==========================================================================
   15. Utilities & print
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.mt-4 {
  margin-top: 32px;
}

.mt-6 {
  margin-top: 48px;
}

@media print {
  .topbar,
  .site-header,
  .hero__controls,
  .partners,
  .cta,
  .newsletter,
  .to-top {
    display: none !important;
  }

  .reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .site-footer {
    padding-top: 24px;
    background: none;
    color: #000;
  }
}