/* ==========================================================================
   NEOX Smart Solutions — shared styles for About Us & References subpages
   Design tokens reverse-engineered from https://neox.team
   ========================================================================== */

:root {
  color-scheme: light;

  /* brand — identical in both themes */
  --navy:        #061230;
  --navy-60:     rgba(6, 18, 48, 0.60);
  --navy-85:     rgba(6, 18, 48, 0.85);
  --gold:        #C9A97B;
  --gold-soft:   #d8c09a;
  --white:       #ffffff;

  /* semantic — these flip in dark mode */
  --bg:          #ffffff;
  --bg-alt:      #f6f6f4;
  --surface:     #ffffff;
  --surface-navy:#061230;
  --footer-bg:   #061230;
  --header-bg:   rgba(255, 255, 255, .94);
  --text:        #1a1a1a;
  --text-soft:   #4a4a4a;
  --heading:     #061230;
  --line:        rgba(6, 18, 48, 0.14);
  --line-light:  rgba(255, 255, 255, 0.18);
  --pill-bg:     #061230;
  --pill-text:   #ffffff;
  --shadow-card: rgba(6, 18, 48, .10);
  /* plain gold fails contrast on light ground, so light mode uses a darker tone;
     the permanently dark areas below switch it back to the brand gold */
  --gold-text:   #8A6A35;

  --font-head: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Figtree", "Segoe UI", Arial, Helvetica, sans-serif;

  --maxw: 1500px;
  --radius: 22px;
  --header-h: 64px;
  --header-h-small: 56px;
  --hero-h: 410px;          /* one height for every hero, on every page */
  --hero-top: 72px;         /* hero top to headline — the same on every page */
  --logo-light: block;      /* which of the two logo files is shown */
  --logo-dark: none;
}

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

/* German and Dutch compounds are routinely longer than a 320px line and would
   otherwise push the page sideways. This only breaks a word that does not fit. */
body { overflow-wrap: break-word; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--heading);
  margin: 0 0 .5em;
}

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

img { max-width: 100%; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Eyebrow / section labels ------------------------------------------- */
.eyebrow {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold-text);
  margin: 0 0 14px;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  padding: 14px 30px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--gold);
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { transform: translateY(-2px); background: var(--gold-soft); }
.btn-ghost { background: transparent; color: var(--gold); }
.btn-ghost:hover { background: var(--gold); color: var(--navy); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, background .25s ease;
}
/* once the page is scrolled the header tightens further and lifts off the content */
.site-header.scrolled { box-shadow: 0 6px 24px rgba(6,18,48,.10); }
.site-header.scrolled .nav { height: var(--header-h-small); }
[data-theme="dark"] .site-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--header-h);
  transition: height .25s ease;
}
/* Brand. The supplied artwork carries its wordmark as near-white pixels
   (#F1F1F1 — 1.13:1 against a white header, so invisible in the light theme), and
   its tagline is 25px tall inside a 901px lockup, which lands under a pixel at
   header size. So the header takes the gold mark as an image and sets NEOX as
   live text: crisp at any size, and it recolours with the theme. The full lockup
   is used in the footer, on the navy it was drawn for. */
/* The header bar spans the window rather than the centred content column, so the
   logo sits at the far left of the screen instead of floating in from the column's
   edge — on a wide monitor that was 250px of empty space before it. */
.site-header .container { max-width: none; padding-inline: clamp(16px, 2vw, 34px); }
/* and the menu keeps clear of it — .nav-links resets its margins further down,
   so this needs the extra specificity to survive */
.nav .nav-links { margin-left: clamp(28px, 4vw, 72px); }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo { height: 46px; width: auto; transition: height .25s ease; }
.brand-logo--light { display: var(--logo-light); }
.brand-logo--dark { display: var(--logo-dark); }
.site-header.scrolled .brand-logo { height: 40px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.nav-links a:hover,
.nav-links a.active { border-bottom-color: var(--gold); }

/* Language switcher — a <details> disclosure, because eight languages do not fit
   a row of pills; at 390px the pill's own overflow was hiding the last three.
   Being a <details> it opens and closes with no JavaScript at all. */
.lang-switch {
  position: relative;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
}
.lang-switch > summary {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 10px 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); cursor: pointer; list-style: none;
  transition: border-color .2s ease, color .2s ease;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ""; }
.lang-switch > summary:hover { border-color: var(--gold); color: var(--heading); }
.lang-switch > summary svg { transition: transform .2s ease; opacity: .7; }
.lang-switch[open] > summary svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 18px 44px var(--shadow-card);
}
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; color: var(--text);
}
.lang-menu a:hover { background: var(--bg-alt); color: var(--heading); }
.lang-menu a.active { color: var(--gold-text); }
.lang-menu .lang-code { min-width: 22px; opacity: .75; }
.lang-menu .lang-name { font-family: var(--font-body); font-weight: 400; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }

/* ==========================================================================
   Hero
   ========================================================================== */
/* Every hero is the same height on every page — the banner is a frame for the
   title, not a section of its own, so Home must not tower over Certification. */
.hero {
  position: relative;
  padding: 0;                 /* not the generic section padding — the container sets it */
  min-height: var(--hero-h);
  display: flex;
  /* The headline is the anchor, so heroes line up from the top rather than
     centring — otherwise a page with two paragraphs and three buttons puts its
     <h1> 110px higher than a page with a headline alone. */
  align-items: flex-start;
  color: var(--white);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--navy-85), var(--navy-60) 45%, var(--navy-85));
}
.hero .container { position: relative; z-index: 2; padding-top: var(--hero-top); padding-bottom: 28px; }
.hero h1 {
  color: var(--white);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  max-width: 1150px;
  line-height: 1.15;
  margin: 0 auto 14px;
}
.hero h1:last-child { margin-bottom: 0; }
/* A hero eyebrow paints above the headline without occupying a line of the
   flow, so a hero that has one still starts its <h1> at --hero-top. */
.hero .eyebrow { height: 0; margin: 0; transform: translateY(calc(-100% - 12px)); }
.hero p.lead {
  max-width: 980px;
  margin: 0 auto;
  font-size: 1.02rem;
  color: rgba(255,255,255,.9);
}
.hero p.lead + p.lead { margin-top: 6px; }



/* ==========================================================================
   Sections
   ========================================================================== */
section { padding: 84px 0; }
section.tint { background: var(--bg-alt); }
section.navy { background: var(--surface-navy); color: rgba(255,255,255,.85); }
section.navy h2, section.navy h3 { color: var(--white); }

.section-head { max-width: 1100px; margin: 0 auto 52px; text-align: center; }
.section-head .eyebrow { color: var(--gold); }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.section-head p { font-size: 1.05rem; color: var(--text-soft); }
section.navy .section-head p { color: rgba(255,255,255,.8); }

.prose { max-width: 1040px; margin: 0 auto; }
.prose p { margin: 0 0 1.1em; font-size: 1.05rem; }

/* ---- Pull quote --------------------------------------------------------- */
.pullquote {
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 22px;
  margin: 22px 0 0;
  font-style: italic;
  color: var(--text-soft);
}
.pullquote cite {
  display: block; margin-top: 8px; font-style: normal;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--gold-text);
}
section.navy .pullquote { color: rgba(255,255,255,.9); }
section.navy .credentials li { color: rgba(255,255,255,.85); border-top-color: var(--line-light); }
section.navy .prose p strong { color: #fff; }

.big-quote {
  max-width: 1150px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.35;
}
.big-quote .mark { color: var(--gold); }

/* ==========================================================================
   Cards
   ========================================================================== */
.grid { display: grid; --gap: 28px; gap: var(--gap); }
/* Card grids follow the space available instead of snapping at one breakpoint.
   A track is at least `min` wide, but never narrower than an even share of the
   intended column count — so a three-column grid steps 3 -> 2 -> 1 as the window
   narrows, and never leaves a single card stretched across the whole row. The
   1px keeps the share just under an exact division, so rounding cannot drop a
   column at the widest size, and min(100%, ...) stops a floor wider than the
   container from pushing the track off the screen on a 320px phone. */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, (100% - 2 * var(--gap) - 1px) / 3)), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(340px, (100% - 1 * var(--gap) - 1px) / 2)), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px var(--shadow-card); }
.card h3 { font-size: 1.3rem; }
.card .role { color: var(--gold); font-weight: 600; font-family: var(--font-head); font-size: .9rem; margin-bottom: 14px; min-height: 2.6em; }

/* ---- Team cards --------------------------------------------------------- */
.team-photo {
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  margin-bottom: 18px;
}
.credentials { list-style: none; padding: 0; margin: 16px 0 0; }
.credentials li {
  font-size: .9rem; color: var(--text-soft);
  padding: 5px 0 5px 18px; position: relative;
  border-top: 1px solid var(--line);
}
.credentials li:first-child { border-top: 0; }
.credentials li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

/* ---- Team: LinkedIn link + collapsible bio ------------------------------ */
.linkedin {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--gold-text); font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  margin: 0 0 16px;
}
.linkedin:hover { color: var(--heading); }
.linkedin svg { flex: none; }
/* Keeps cards without a LinkedIn link vertically aligned with those that have one */
.linkedin-spacer { height: 18px; margin: 0 0 16px; }

.bio-more { margin-top: 6px; }
.bio-more > summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--gold-text);
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
}
.bio-more > summary::-webkit-details-marker { display: none; }
.bio-more > summary::before { content: "+"; font-size: 1.05rem; line-height: 1; }
.bio-more[open] > summary::before { content: "\2013"; }
.bio-more .more-inner { margin-top: 10px; }

/* ---- Reference cards ---------------------------------------------------- */
.ref {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 34px;
}
.ref:nth-child(even) { grid-template-columns: 1fr 42%; }
.ref:nth-child(even) .ref-media { order: 2; }
.ref-media {
  background-size: cover; background-position: center;
  min-height: 320px;
}
.ref-body { padding: 40px; }
.ref-body h3 { font-size: 1.5rem; }
.ref-summary { font-size: 1.12rem; color: var(--heading); font-weight: 600; margin: 8px 0 18px; }
.ref-body p { color: var(--text-soft); font-size: 1.05rem; }

/* ==========================================================================
   Óbuda-style projects: index grid + detail (Details / Facts and Figures)
   ========================================================================== */
.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.project-tile {
  position: relative; display: block; min-height: 360px; overflow: hidden;
}
.project-tile .tile-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .6s ease;
}
.project-tile:hover .tile-img { transform: scale(1.05); }
.project-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,18,48,.9), rgba(6,18,48,.06) 58%);
  transition: background .3s ease;
}
.project-tile:hover::after { background: linear-gradient(to top, rgba(6,18,48,.94), rgba(6,18,48,.28) 62%); }
.project-tile .tile-cap {
  position: absolute; left: 0; bottom: 0; z-index: 2; padding: 30px 32px; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start;
}
.project-tile .tile-loc {
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.project-tile .tile-title { font-family: var(--font-head); font-weight: 700; font-size: 1.55rem; line-height: 1.2; }

/* Detail block */
.project-detail { padding: 0 0 8px; scroll-margin-top: 100px; }
.project-detail + .project-detail { padding-top: 8px; }
.detail-head { padding: 56px 0 8px; }
.detail-head .eyebrow { margin-bottom: 10px; }
.detail-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.detail-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; padding: 22px 0 40px; }
.detail-cols h3 { font-size: 1.15rem; letter-spacing: .01em; margin-bottom: 22px; }
.detail-body p { color: var(--text-soft); font-size: 1.05rem; margin: 0 0 1.1em; }
.detail-body .pullquote { margin-top: 22px; }

.facts { align-self: start; }
.fact-row { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.fact-row:first-of-type { border-top: 0; }
.fact-row .fact-k { font-family: var(--font-head); font-weight: 600; color: var(--heading); font-size: .88rem; }
.fact-row .fact-v { color: var(--text-soft); font-size: .96rem; }
.fact-row .fact-v .svc { display: block; }
/* Grid items refuse to shrink below their longest word unless told they may, and
   a German or Dutch compound is easily longer than the 134px this column has left
   on a 320px phone. */
.detail-cols > *, .fact-row > * { min-width: 0; }
@media (max-width: 560px) {
  /* the fixed label column has no room on a phone — label above value instead */
  .fact-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Image-forward reference items + gallery ---------------------------- */
.ref-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 44px;
}
/* Masonry gallery — responsive, images shown in full (no cropping) */
.gallery {
  columns: 260px;
  column-gap: 14px;
  padding: 14px;
  background: var(--navy);
}
.gallery img {
  width: 100%;
  margin: 0 0 14px;
  border-radius: 12px;
  display: block;
  break-inside: avoid;
  cursor: zoom-in;
  transition: transform .3s ease, box-shadow .3s ease;
}
.gallery img:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
/* Single-image projects: one full-width, fully-contained image */
.gallery.single { columns: auto; }
.gallery.single img {
  max-height: 560px; height: auto;
  object-fit: contain; background: #0b1a3a; margin: 0;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 10, 26, .92);
  display: none; align-items: center; justify-content: center;
  padding: 4vh 4vw; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.lightbox .lb-close {
  position: absolute; top: 18px; right: 26px;
  font-size: 2.2rem; color: #fff; background: none; border: 0; cursor: pointer; line-height: 1;
}

.ref-item .ref-body { padding: 30px 36px 34px; border: 0; }
.ref-item h3 { font-size: 1.6rem; margin-bottom: 14px; }

details.ref-more { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
details.ref-more > summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  color: var(--gold-text); display: inline-flex; align-items: center; gap: 8px;
}
details.ref-more > summary::-webkit-details-marker { display: none; }
details.ref-more > summary::before { content: "+"; font-size: 1.1rem; line-height: 1; }
details.ref-more[open] > summary::before { content: "–"; }
details.ref-more .more-inner { margin-top: 16px; }
details.ref-more .more-inner p { color: var(--text-soft); font-size: 1.05rem; }

/* ---- Result tag chips --------------------------------------------------- */
.result-block { margin-bottom: 34px; }
.result-block h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 12px; }
.tag {
  font-family: var(--font-head);
  font-size: .85rem; font-weight: 500;
  color: var(--gold-text);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 8px 18px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Minimal, self-contained footer (no external links / branding) */
.footer-min {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 32px;
}
.footer-nav { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-nav a { font-family: var(--font-head); font-weight: 500; font-size: .95rem; }
.footer-nav a:hover { color: var(--gold); }
.footer-contact-min { font-size: .95rem; }
.footer-contact-min a { color: var(--gold); }
/* Bottom bar: the fine print on one side, the legal links on the other, with the
   trademark notice under both. */
.footer-legal {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 26px;
}
.footer-min .footer-copy { margin: 0; font-size: .82rem; color: rgba(255,255,255,.55); }
.footer-legal-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal-nav a { font-size: .82rem; color: rgba(255,255,255,.55); }
.footer-legal-nav a:hover { color: var(--gold); }
.link-btn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .82rem; color: rgba(255,255,255,.55);
}
.link-btn:hover { color: var(--gold); }
.footer-trademark { flex-basis: 100%; margin: 0; font-size: .76rem; color: rgba(255,255,255,.52); }

.site-footer { background: var(--footer-bg); color: rgba(255,255,255,.78); padding: 34px 0 30px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 34px;
}
.footer-tag { margin-top: 16px; font-size: .95rem; line-height: 1.7; }
.footer-col h4 { color: var(--white); font-size: 1.05rem; margin-bottom: 18px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 12px; font-size: .92rem; }
.footer-col a:hover { color: var(--gold); }
.footer-contact div { margin-bottom: 10px; font-size: .92rem; }
.footer-bottom {
  border-top: 1px solid var(--line-light);
  margin-top: 46px; padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: .82rem; color: rgba(255,255,255,.6);
}

/* ==========================================================================
   Home / landing specifics
   ========================================================================== */
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 22px; }

.impact-lines {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 34px;
  margin: 4px 0 46px; text-align: center;
}
.impact-lines span {
  font-family: var(--font-head); font-weight: 600; color: var(--heading);
}
.impact-lines span b { color: var(--gold-text); font-weight: 600; }

/* Four KPI cards, so the sensible counts are 4 across or 2x2 — three would leave
   one card orphaned on a row of its own. The crossover is early enough that the
   four never squeeze below ~230px. */
.stats-grid {
  display: grid; --gap: 24px; gap: var(--gap);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1040px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stats-grid { grid-template-columns: 1fr; } }
.stat {
  text-align: center; padding: 30px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.stat .num { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; color: var(--gold-text); line-height: 1; }
.stat .label { margin-top: 12px; font-size: .92rem; color: var(--text-soft); }

.band {
  text-align: center; margin: 54px auto 0; max-width: 1000px;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem); color: var(--heading);
}
.band .mark { color: var(--gold-text); }
section.navy .band { color: var(--white); }

.solve-card .num { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--gold-text); margin-bottom: 10px; }
.solve-card h4 { font-size: 1.05rem; color: var(--heading); margin-bottom: 10px; }
.solve-card p { font-size: 1rem; color: var(--text-soft); margin: 0 0 16px; }
.solve-card .solution {
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto;
  font-size: .92rem; color: var(--heading);
}
.solve-card .solution .tagline {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px;
}
.card.solve-card { display: flex; flex-direction: column; }

/* Each portfolio card links to the page it describes, so it is an anchor rather
   than an <article>: block layout, room for the arrow, and the output row pinned
   to the bottom so the four line up whatever the copy length. */
.card.portfolio-card { position: relative; display: flex; flex-direction: column; }
.portfolio-card h3 { padding-right: 34px; }
.portfolio-card::after {
  content: "\2192";
  position: absolute; top: 30px; right: 30px;
  font-family: var(--font-head); font-size: 1.15rem; line-height: 1;
  color: var(--gold-text); transition: transform .2s ease;
}
.portfolio-card:hover::after, .portfolio-card:focus-visible::after { transform: translateX(4px); }
.portfolio-card .output { margin-top: auto; border-top: 1px solid var(--line-light); padding-top: 14px; font-size: .9rem; }
.portfolio-card .output .tagline {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px;
}

/* ---- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* Home's contact section closes with buttons, the way every other page does,
   instead of carrying a second copy of the form. The checklist stays
   left-aligned but sits centred in the column. */

/* two classes, because .contact-list below sets the margin shorthand and would
   otherwise reset the auto sides back to 0 */
.contact-list.contact-list--centred { max-width: 660px; margin: 24px auto 0; }
#contact .cta-row { margin-top: 30px; }

.contact-list { list-style: none; padding: 0; margin: 24px 0 0; }
.contact-list li { position: relative; padding: 10px 0 10px 30px; border-top: 1px solid var(--line-light); }
.contact-list li::before { content: "✓"; position: absolute; left: 0; top: 10px; color: var(--gold); font-weight: 700; }
.contact-form { background: rgba(255,255,255,.05); border: 1px solid var(--line-light); border-radius: var(--radius); padding: 30px; }
.contact-form label { display: block; font-size: .82rem; color: rgba(255,255,255,.7); margin: 0 0 6px; font-family: var(--font-head); }
.contact-form input, .contact-form textarea {
  width: 100%; margin-bottom: 18px; padding: 12px 14px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-light); border-radius: 10px;
  color: var(--white); font-family: var(--font-body); font-size: .95rem;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); }
.contact-form .btn { width: 100%; border: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .ref, .ref:nth-child(even) { grid-template-columns: 1fr; }
  .ref:nth-child(even) .ref-media { order: 0; }
  .ref-media { min-height: 220px; }
  .ref-item .ref-body { padding: 24px 22px 28px; }
  .gallery.single img { max-height: 60vh; }
  .projects-grid { grid-template-columns: 1fr; }
  .project-tile { min-height: 280px; }
  .detail-cols { grid-template-columns: 1fr; gap: 20px; padding-bottom: 28px; }
  .nav-links { gap: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Dark mode — follows the device, the header toggle overrides it
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #061230;
  --bg-alt:      #0A1A3D;
  --surface:     #0E2047;
  --surface-navy:#0E2047;
  --footer-bg:   #0A1A3D;
  --header-bg:   rgba(6, 18, 48, .94);
  --text:        #F2F4F8;
  --text-soft:   rgba(255, 255, 255, .72);
  --heading:     #F2F4F8;
  --line:        rgba(255, 255, 255, .16);
  --pill-bg:     #C9A97B;
  --pill-text:   #061230;
  --shadow-card: rgba(0, 0, 0, .45);
  --gold-text:   #C9A97B;
  --logo-light: none;
  --logo-dark: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg:          #061230;
  --bg-alt:      #0A1A3D;
  --surface:     #0E2047;
  --surface-navy:#0E2047;
  --footer-bg:   #0A1A3D;
  --header-bg:   rgba(6, 18, 48, .94);
  --text:        #F2F4F8;
  --text-soft:   rgba(255, 255, 255, .72);
  --heading:     #F2F4F8;
  --line:        rgba(255, 255, 255, .16);
  --pill-bg:     #C9A97B;
  --pill-text:   #061230;
  --shadow-card: rgba(0, 0, 0, .45);
  --gold-text:   #C9A97B;
  --logo-light: none;
  --logo-dark: block;
  }
}

/* areas that are dark in both themes keep the brand gold */
.hero, section.navy, .site-footer, .gallery, .project-tile, .lightbox, .contact-form { --gold-text: var(--gold); }

/* ---- theme toggle -------------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--text-soft); cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { color: var(--gold-text); border-color: var(--gold); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.nav .theme-toggle { margin-left: auto; }
.lang-switch { margin-left: 12px; }

/* ---- visible keyboard focus --------------------------------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}

/* ---- small phones: keep the header on one line (until the Phase 5 drawer) --- */
@media (max-width: 560px) {
  .nav { gap: 10px; }
  .nav-links { gap: 12px; }
  .nav-links a { white-space: nowrap; }
  .theme-toggle { width: 34px; height: 34px; }
  .lang-switch { margin-left: 6px; }
}

/* ==========================================================================
   Components for the Services / Products / Building AI / Certification pages
   ========================================================================== */
/* A hero whose subject sits high in the frame. `center` crops from the vertical
   middle, which on the Certification photo started below the top of the woman's
   head; 20% keeps her whole head in shot, and 60% across keeps her in frame when
   a narrow screen crops horizontally instead. */
.hero--high { background-position: 60% 20%; }

.hero--page h1 { max-width: 1150px; }

.cap-strip {
  margin: 16px auto 0; max-width: 1100px;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; color: var(--gold); line-height: 2;
}

.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, (100% - 3 * var(--gap) - 1px) / 4)), 1fr)); }

.mini-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
}
.mini-card .tagline {
  display: block; font-family: var(--font-head); font-weight: 600; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 10px;
}
.mini-card p { margin: 0; font-size: .98rem; color: var(--text-soft); }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split-text h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 18px; }
.split-text p { color: var(--text-soft); font-size: 1.05rem; margin: 0 0 1.1em; }
.split-media { margin: 0; }
.split-media img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

.steps-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; --gap: 24px; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(200px, (100% - 4 * var(--gap) - 1px) / 5)), 1fr));
}
.step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px;
}
.step-num {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.6rem;
  color: var(--gold-text); line-height: 1; margin-bottom: 14px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 10px; }
.step .step-q { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--heading); margin: 0 0 8px; }
.step p { font-size: .95rem; color: var(--text-soft); margin: 0; }

.claim-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
  text-align: center; margin: 0 0 30px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--white);
}
.claim-strip span::after { content: ""; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* mobile drawer for the eight-item menu */
.nav-toggle {
  display: none; width: 40px; height: 40px; flex: none; border: 1px solid var(--line);
  border-radius: 12px; background: transparent; cursor: pointer; padding: 10px 9px;
}
.nav-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; margin: 3px 0; }

@media (max-width: 1100px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: .92rem; }
}
@media (max-width: 1000px) {
  /* the logo keeps the far left here too, so the hamburger moves to the far right */
  .nav-toggle { display: block; order: 1; margin-left: 10px; }
  .brand-logo { height: 40px; }
  .nav .nav-links { margin-left: 0; }
  .nav-links {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--header-bg); border-bottom: 1px solid var(--line);
    padding: 8px clamp(16px, 2vw, 34px) 18px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; width: 100%; padding: 12px 0; font-size: 1rem; border-bottom: 0; }
  .nav-links a.active { color: var(--gold-text); }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .claim-strip { font-size: .95rem; gap: 8px 20px; }
}

/* ---- shared small label ---------------------------------------------------- */
.tagline {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); margin: 0 0 10px;
}
.lead-dark {
  font-family: var(--font-head); font-weight: 600; font-size: 1.08rem;
  color: var(--heading); margin: 0 0 14px;
}
.split--reverse .split-media { order: -1; }
.credentials.two-col { columns: 2; column-gap: 40px; }
.credentials.two-col li { break-inside: avoid; }

/* ---- comparison table (problem → response → impact, capability matrix) ------ */
.compare { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare-head, .compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line); }
.compare-head span, .compare-row span { background: var(--surface); padding: 16px 20px; font-size: .95rem; color: var(--text-soft); }
.compare-head span {
  background: var(--surface-navy); color: var(--white);
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.compare-row span:first-child { color: var(--heading); font-weight: 600; }
.compare--4 .compare-head, .compare--4 .compare-row { grid-template-columns: .8fr 1fr 1fr; }

/* ---- certification logos (always on navy, so always on a white chip) -------- */
.logo-strip { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; }
.logo-strip img {
  height: 92px; width: auto; background: #fff;
  padding: 12px 18px; border-radius: 14px; object-fit: contain;
}

/* Sits under a centred .section-head, so it is centred too — otherwise the
   button lands on the left of a centred heading and looks unhooked. */
.iso-block { max-width: 1000px; margin: 0 auto; text-align: center; }
.iso-block .btn { margin-top: 12px; }
.iso-block p { color: var(--text-soft); font-size: 1.05rem; margin: 0 0 1.1em; }
.split-text .step-num { margin-bottom: 8px; }

@media (max-width: 900px) {
  .credentials.two-col { columns: 1; }
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row span { padding: 12px 18px; }
  .compare-row span:first-child { background: var(--bg-alt); }
  .compare--4 .compare-head, .compare--4 .compare-row { grid-template-columns: 1fr; }
  .logo-strip img { height: 68px; }
}

/* ---- feature lists (Products) --------------------------------------------- */
.feature-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 20px; }
.list-head {
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 8px;
}
.feature-lists .credentials { margin-top: 0; }
.feature { padding: 34px 0; }

/* ---- contact page ---------------------------------------------------------- */
.contact-details { margin-top: 28px; }
.contact-details p { margin: 0 0 4px; }
.contact-details a { color: var(--gold); }
.contact-details .tagline { margin-top: 16px; }
.form-note { font-size: .82rem; color: rgba(255,255,255,.6); margin: 12px 0 0; }

/* ---- 404 -------------------------------------------------------------------- */
.notfound { padding: 120px 0 140px; text-align: center; }
.notfound h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 14px; }
.notfound .lead-dark { max-width: 720px; margin: 0 auto 26px; }

/* ---- privacy / long-form legal text ---------------------------------------- */
.legal { max-width: 1040px; margin: 0 auto; }
.legal h2 { font-size: 1.3rem; margin: 40px 0 14px; }
.legal h3 { font-size: 1.05rem; margin: 26px 0 10px; }
.legal p { color: var(--text-soft); font-size: 1rem; margin: 0 0 1em; }
.legal ul { margin: 0 0 1.2em; padding-left: 0; }
.legal .facts-table { margin: 22px 0 30px; }

@media (max-width: 900px) {
  .feature-lists { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   Right-to-left (Arabic) — the layout mirrors itself, the brand does not
   ========================================================================== */
[dir="rtl"] body { font-family: "Noto Sans Arabic", var(--font-body); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: "Noto Sans Arabic", var(--font-head); }

/* anything positioned or spaced on one side has to follow the reading direction */
[dir="rtl"] .credentials li { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .credentials li::before { left: auto; right: 0; }
[dir="rtl"] .contact-list li { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .contact-list li::before { left: auto; right: 0; }
[dir="rtl"] .pullquote { border-left: 0; border-right: 3px solid var(--gold); padding: 6px 22px 6px 0; }
[dir="rtl"] .project-tile .tile-cap { left: auto; right: 0; }
[dir="rtl"] .lightbox .lb-close { right: auto; left: 26px; }
[dir="rtl"] .split--reverse .split-media { order: 0; }
[dir="rtl"] .split .split-media { order: -1; }
[dir="rtl"] .nav .theme-toggle { margin-left: 0; margin-right: auto; }
[dir="rtl"] .lang-switch { margin-left: 0; margin-right: 12px; }
[dir="rtl"] .portfolio-card::after { content: "\2190"; right: auto; left: 30px; }
[dir="rtl"] .portfolio-card h3 { padding-right: 0; padding-left: 34px; }
[dir="rtl"] .portfolio-card:hover::after { transform: translateX(-4px); }
[dir="rtl"] .compare-row span:first-child { text-align: right; }
[dir="rtl"] .bio-more > summary::before { margin-left: 8px; margin-right: 0; }

/* numbers, phone numbers and e-mail addresses stay left-to-right inside Arabic text */
[dir="rtl"] .step-num, [dir="rtl"] .stat .num, [dir="rtl"] .solve-card .num,
[dir="rtl"] .footer-contact-min, [dir="rtl"] .contact-details a { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .footer-contact-min, [dir="rtl"] .contact-details a { display: inline-block; }

/* ==========================================================================
   Cookie consent banner (only shown when analytics is configured)
   ========================================================================== */
.consent {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: 300;
  max-width: 760px; margin-inline: auto;
  background: var(--surface-navy); color: rgba(255,255,255,.88);
  border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: 20px 24px; box-shadow: 0 18px 50px rgba(0,0,0,.35);
  display: none; gap: 18px; align-items: center; flex-wrap: wrap;
}
.consent.show { display: flex; }
.consent p { margin: 0; flex: 1 1 320px; font-size: .92rem; }
.consent a { color: var(--gold); text-decoration: underline; }
.consent .consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent .btn { padding: 10px 22px; font-size: .88rem; }
@media (max-width: 560px) { .consent { padding: 16px 18px; } .consent .btn { flex: 1 1 auto; } }

/* read by screen readers and search engines, not shown on screen */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Responsive rhythm — section spacing and grids scale with the viewport
   ========================================================================== */
section { padding: clamp(52px, 6vw, 84px) 0; }
.container { padding: 0 clamp(18px, 3vw, 40px); }
.section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.grid { --gap: clamp(18px, 2.2vw, 28px); }

@media (max-width: 1280px) { .steps-grid { gap: 18px; } }
@media (max-width: 1100px) {
  .split { gap: 36px; }
}
@media (max-width: 768px) {
  :root { --hero-h: 400px; --hero-top: 68px; }
  .feature { padding: 22px 0; }
}
@media (max-width: 560px) {
  :root { --hero-h: 440px; --hero-top: 52px; }
  .hero .container { padding-bottom: 26px; }
  /* smaller calls to action so they take two rows, not three */
  .hero-actions { gap: 10px; margin-top: 16px; }
  .hero-actions .btn { font-size: .86rem; padding: 11px 20px; }
  .hero p.lead + p.lead { margin-top: 4px; }
  .hero h1 { font-size: clamp(1.45rem, 6vw, 1.9rem); }
  .hero p.lead { font-size: .96rem; }
  .hero .eyebrow { font-size: .72rem; }
  .cap-strip { font-size: .76rem; line-height: 1.9; }
}

/* ==========================================================================
   Scale cards — a photo with its title on it, swapping to a panel of labelled
   rows under the pointer. Same shape and behaviour as the reference section:
   three across, then two, then one, with no breakpoint cliff.
   ========================================================================== */
.scale-grid {
  display: grid; --gap: clamp(18px, 2.2vw, 28px); gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, (100% - 2 * var(--gap) - 1px) / 3)), 1fr));
}
.scale-card {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.scale-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a scrim, so the title stays readable whatever the photo does behind it */
.scale-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,18,48,.72), rgba(6,18,48,.12) 46%, rgba(6,18,48,.30));
  transition: opacity .3s ease;
}
.scale-title {
  position: absolute; z-index: 2; top: 24px; inset-inline-start: 24px; inset-inline-end: 24px;
  color: var(--white); font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.2;
  transition: opacity .3s ease;
}
.scale-panel {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(18px, 2vw, 26px);
  background: var(--surface); overflow: auto;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.scale-panel-title {
  font-family: var(--font-head); font-weight: 700; color: var(--heading);
  font-size: .95rem; margin: 0 0 6px;
}
.scale-rows { list-style: none; margin: 0; padding: 0; }
.scale-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.scale-rows > .scale-row:first-child { border-top: 0; }
.scale-ico { flex: none; color: var(--gold-text); margin-top: 2px; }
.scale-text { min-width: 0; }
.scale-k { font-family: var(--font-head); font-weight: 600; color: var(--heading); font-size: .95rem; margin: 0; }
.scale-d { color: var(--text-soft); font-size: .9rem; line-height: 1.45; margin: 3px 0 0; }

/* the reveal: hover on a mouse, focus on a keyboard, a tap on touch (site.js) */
@media (hover: hover) and (pointer: fine) {
  .scale-card:hover .scale-panel { opacity: 1; visibility: visible; }
  .scale-card:hover .scale-title, .scale-card:hover::before { opacity: 0; }
}
.scale-card:focus-visible .scale-panel, .scale-card.open .scale-panel { opacity: 1; visibility: visible; }
.scale-card:focus-visible .scale-title, .scale-card.open .scale-title,
.scale-card:focus-visible::before, .scale-card.open::before { opacity: 0; }

/* a tall card is wasted space once it is the only one on the row */
@media (max-width: 560px) {
  .scale-card { aspect-ratio: 4 / 3; }
  .scale-panel { overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .scale-panel, .scale-title, .scale-card::before { transition: none; }
}

/* ==========================================================================
   Flip cards — front shows the title, back shows the detail
   ========================================================================== */
.flip-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.flip-grid--4 { grid-template-columns: repeat(4, 1fr); }
.flip-grid--3 { grid-template-columns: repeat(3, 1fr); }
.flip-grid--2 { grid-template-columns: repeat(2, 1fr); }

.flip { perspective: 1400px; background: none; border: 0; padding: 0; text-align: inherit; font: inherit; color: inherit; }
.flip-inner {
  position: relative; width: 100%; height: 100%;
  min-height: var(--flip-h, 180px);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.flip-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  gap: 10px; padding: 24px 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.flip-front { background: var(--surface); }
.flip-back {
  transform: rotateY(180deg);
  background: var(--surface-navy); color: rgba(255,255,255,.88);
  border-color: transparent;
}
.flip-back p, .flip-back li { color: rgba(255,255,255,.86); font-size: .95rem; }
.flip-back .credentials li { border-top-color: rgba(255,255,255,.16); }
.flip-front h3, .flip-front h4 { margin: 0; font-size: 1.12rem; }
.flip-front p { margin: 0; color: var(--text-soft); font-size: .95rem; }
.flip-num {
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  color: var(--gold-text); line-height: 1;
}
.flip-hint {
  margin-top: auto; font-family: var(--font-head); font-weight: 600;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text);
}
.flip-back .flip-hint { color: var(--gold); }

/* flip on hover for mice, on focus for keyboards, on tap for touch */
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip-inner { transform: rotateY(180deg); }
}
.flip:focus-visible { outline: none; }
.flip:focus-visible .flip-inner { transform: rotateY(180deg); box-shadow: 0 0 0 2px var(--gold); border-radius: var(--radius); }
.flip.flipped .flip-inner { transform: rotateY(180deg); }

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

@media (max-width: 1100px) { .flip-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .flip-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  {
  .flip-grid--4, .flip-grid--3, .flip-grid--2 { grid-template-columns: 1fr; }
  .flip-inner { min-height: var(--flip-h-mobile, 190px); }
}

/* ==========================================================================
   Scroll reveal — content fades up as it comes into view
   ========================================================================== */
/* The reveal moves the element with `translate`, not `transform`. The two compose
   independently, so a card that both fades in and lifts on hover can do both —
   with `transform` here, `.reveal.in { transform: none }` outranked `:hover` and
   the lift never happened. */
html.js .reveal { opacity: 0; translate: 0 18px; transition: opacity .6s ease, translate .6s ease; }
html.js .reveal.in { opacity: 1; translate: none; }
.reveal-delay-1 { transition-delay: .07s; }
.reveal-delay-2 { transition-delay: .14s; }
.reveal-delay-3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; transform: none; transition: none; }
}

/* richer hover on the existing cards */
.mini-card, .step, .stat { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mini-card:hover, .step:hover, .stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px var(--shadow-card);
  border-color: var(--gold);
}
.split-media img { transition: transform .5s ease; }
.split-media:hover img { transform: scale(1.02); }

.flip-title {
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  line-height: 1.25; color: var(--heading);
}
.flip-back .flip-title { color: var(--white); }
.flip-label {
  font-family: var(--font-head); font-weight: 600; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text);
}
.flip-back .flip-label { color: var(--gold); }
.flip-back p { margin: 0; }
.flip-front .credentials, .flip-back .credentials { margin: 0; }
.flip-back .credentials li { padding-top: 4px; padding-bottom: 4px; font-size: .9rem; }

/* honeypot — hidden from people, visible to bots */
/* The honeypot must stay in the DOM and submittable but never be seen. An
   off-screen offset cannot do that: left:-9999px reads as 9999px of scrollable
   width in an RTL document, which is how the Arabic contact page ended up with
   9999px of horizontal overflow. Clipping in place has no direction. */
.hp {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.form-note.ok { color: #9fe3b5; }
.form-note.error { color: #ffb4a2; }

/* the front centres its title between the number and the hint, and carries a gold rule */
.flip-front .flip-title { margin-top: auto; }
.flip-front .flip-hint { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.flip-front .flip-hint::after { content: " ↻"; letter-spacing: 0; }
.flip-back .flip-label { margin-bottom: 2px; }
.flip-back .credentials { margin-top: 4px; }
.flip-back .credentials li:first-child { border-top: 0; }
.flip-front { background: linear-gradient(180deg, var(--surface), var(--surface) 62%, var(--bg-alt)); }
[data-theme="dark"] .flip-front { background: var(--surface); }
.flip:hover .flip-front, .flip:focus-visible .flip-front { border-color: var(--gold); }
.flip { cursor: pointer; }
/* the four-up benefit cards need less height than a card holding a five-item list */
.flip-grid--4 { --flip-h: 168px; }
.flip-grid--3 { --flip-h: 165px; }

/* ==========================================================================
   Carousel — one slide at a time, advancing on its own, with pill controls
   ========================================================================== */
.carousel { position: relative; }
.c-viewport { overflow: hidden; }
.c-track {
  display: flex; align-items: flex-start;
  transition: transform .7s cubic-bezier(.22,.7,.28,1), height .45s cubic-bezier(.22,.7,.28,1);
  will-change: transform;
}
/* The slides differ in length, so the viewport follows the one on screen rather
   than standing as tall as the longest — script.js sets .c-track's height. */
.c-slide {
  flex: 0 0 100%; min-width: 100%; align-self: flex-start;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.c-slide > .c-text { min-width: 0; }
.c-slide .tagline { margin-bottom: 6px; }
.c-slide h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 12px; }
.c-slide .lead-dark { margin-bottom: 14px; }
.c-media { margin: 0; min-width: 0; }
.c-media img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

/* the slides that are not on screen must not be reachable by tab or screen readers */
.c-slide[aria-hidden="true"] { visibility: hidden; }

/* ---- control bar ---------------------------------------------------------- */
.c-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  margin-top: clamp(22px, 3vw, 34px);
}
.c-bar {
  display: flex; align-items: center; gap: 14px;
  max-width: 100%; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px;
}
.c-arrow, .c-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 0; background: transparent; color: var(--text-soft);
  cursor: pointer; border-radius: 999px; font-size: 1rem; line-height: 1;
  transition: color .2s ease, background .2s ease;
}
.c-arrow:hover, .c-play:hover { color: var(--heading); background: var(--bg-alt); }
.c-arrow:disabled { opacity: .35; cursor: default; }
.c-play {
  background: var(--surface); border: 1px solid var(--line); width: 42px; height: 42px;
}
.c-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.c-dot {
  position: relative; width: 8px; height: 8px; padding: 0; flex: none;
  border: 0; border-radius: 999px; background: var(--line);
  cursor: pointer; transition: width .35s ease, background .35s ease;
  overflow: hidden;
}
.c-dot:hover { background: var(--text-soft); }
.c-dot[aria-selected="true"] { width: 54px; background: var(--line); }
.c-dot-fill {
  position: absolute; inset: 0; width: 0; background: var(--gold-text); border-radius: 999px;
}
.c-dot[aria-selected="true"] .c-dot-fill { width: 100%; transition: width linear var(--c-interval, 6s); }
.carousel.paused .c-dot[aria-selected="true"] .c-dot-fill { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .c-track { transition: none; }
  .c-viewport { overflow: visible; }
  .c-dot[aria-selected="true"] .c-dot-fill { transition: none; width: 100%; }
}

@media (max-width: 900px) {
  .c-slide { grid-template-columns: 1fr; gap: 22px; }
  .c-slide .c-media { order: -1; }
  .c-dots .c-dot { width: 7px; height: 7px; }
  .c-dot[aria-selected="true"] { width: 34px; }
}
@media (max-width: 560px) {
  .c-bar { gap: 8px; padding: 6px 10px; }
  .c-dots { gap: 6px; }
}
/* thirteen dots, two arrows and the pause button do not fit across a 320px phone,
   so everything tightens; .c-dots may still wrap, which is better than overflowing */
@media (max-width: 400px) {
  .c-controls { gap: 8px; }
  .c-bar { gap: 6px; padding: 5px 8px; }
  .c-dots { gap: 4px; }
  .c-dots .c-dot { width: 6px; height: 6px; }
  .c-dot[aria-selected="true"] { width: 26px; }
  .c-arrow { width: 28px; height: 28px; }
  .c-play { width: 34px; height: 34px; }
}