/* ==========================================================================
   Salam Production — main stylesheet
   Light, futuristic glass. Shared by the static preview and the WP theme.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Base */
  --bg: #f3f8f8;
  --bg-2: #e9f3f3;

  /* Text (deep teal-ink, never black) */
  --text: #0d2b2e;
  --text-2: #3f5d60;
  --text-3: #5d7779;

  /* Brand */
  --teal: #067c84;
  --teal-deep: #056a71;
  --aqua: #2fb5bd;
  --aqua-soft: #9fe0e3;
  --sand: #f3d9b1;
  --rec: #e5484d;
  --grad: linear-gradient(100deg, #067c84 0%, #1f9ea6 45%, #3cc3c9 100%);

  /* Glass */
  --glass: rgba(255, 255, 255, 0.56);
  --glass-strong: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-line: rgba(13, 43, 46, 0.08);
  --glass-blur: 22px;
  --glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 0 0 1px rgba(13, 43, 46, 0.04),
    0 12px 40px -12px rgba(6, 84, 90, 0.18);

  /* Type */
  --font-display: "Sora", "Geist", system-ui, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-arabic: "Noto Kufi Arabic", "Geist", sans-serif;

  --step-display: clamp(2.5rem, 1.2rem + 5.2vw, 6.25rem);
  --step-h2: clamp(2rem, 1.25rem + 2.9vw, 4rem);
  --step-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.7rem);
  --step-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-body: 1.0625rem;
  --step-label: 0.75rem;

  /* Space & layout */
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1600px;
  --section: clamp(80px, 6rem + 4vw, 160px);
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --header-h: 64px;
  --header-top: 14px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

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

body{
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Aurora light field + technical grid, fixed behind everything */
.sp-aurora{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(60vmax 50vmax at 8% 4%, rgba(var(--glow1-rgb), 0.75), transparent 60%),
    radial-gradient(50vmax 45vmax at 96% 18%, rgba(var(--glow2-rgb), 0.6), transparent 62%),
    radial-gradient(55vmax 50vmax at 70% 92%, rgba(var(--accent2-rgb), 0.28), transparent 60%),
    radial-gradient(45vmax 40vmax at 0% 80%, rgba(var(--glow3-rgb), 0.7), transparent 60%),
    var(--bg);
}
.sp-aurora::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
}
.sp-aurora i{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: sp-drift 26s ease-in-out infinite alternate;
}
.sp-aurora i:nth-child(1){ width: 38vmax; height: 38vmax; left: -8vmax; top: 18vh; background: var(--glow1); }
.sp-aurora i:nth-child(2){ width: 30vmax; height: 30vmax; right: -6vmax; top: 48vh; background: var(--sand-2); animation-duration: 32s; animation-delay: -8s; }
@keyframes sp-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6vmax, -4vmax, 0) scale(1.12); }
}

img, video, iframe{ display: block; max-width: 100%; }
img{ height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }

:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection{ background: var(--aqua-soft); color: var(--text); }
html{ scrollbar-color: rgba(var(--accent-rgb), 0.45) transparent; accent-color: var(--teal); }
input, textarea{ caret-color: var(--teal); }

.sp-skip{
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--text);
  color: #fff;
  font-weight: 500;
}
.sp-skip:focus{ top: 16px; }

.sp-visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sp-container{
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Glass primitive ---------- */
.sp-glass{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}

/* ---------- Typography primitives ---------- */

.sp-h2{
  font-family: var(--font-display);
  font-size: var(--step-h2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.sp-h2 em,
.sp-hero__title em,
.sp-about__statement em,
.sp-contact__title em{
  font-style: normal;
  color: var(--teal);
}
.sp-lead{
  font-size: var(--step-lead);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 58ch;
  text-wrap: pretty;
}

/* ---------- Buttons ---------- */
.sp-btn{
  --btn-bg: var(--text);
  --btn-fg: #fff;
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 160ms var(--ease-out);
}
.sp-btn:active{ transform: scale(0.97); }
.sp-btn svg{ flex: none; transition: transform 200ms var(--ease-out); }

.sp-btn--primary{
  --btn-bg: var(--teal);
  background-image: var(--grad);
  box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), 0.55), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.sp-btn--ghost{
  --btn-bg: rgba(255, 255, 255, 0.55);
  --btn-fg: var(--text);
  --btn-border: var(--glass-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 16px -8px rgba(var(--shadow-rgb), 0.2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@media (hover: hover) and (pointer: fine) {
  .sp-btn:hover{ --btn-bg: var(--text-hover); }
  .sp-btn--primary:hover{ box-shadow: 0 12px 30px -8px rgba(var(--accent-rgb), 0.7), 0 1px 0 rgba(255, 255, 255, 0.35) inset; }
  .sp-btn--ghost:hover{ --btn-bg: rgba(255, 255, 255, 0.85); }
  .sp-btn:hover .sp-arrow{ transform: translateX(3px); }
}

.sp-play-icon{
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
}

/* ---------- Header (floating glass pill) ---------- */
.sp-header{
  position: fixed;
  top: var(--header-top);
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
}
.sp-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  padding: 0 10px 0 16px;
  pointer-events: auto;
  border-radius: 999px;
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
.sp-header.is-scrolled .sp-header__inner{ background: var(--glass-strong); }

.sp-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.sp-brand img{ width: 34px; height: 34px; }
.sp-brand__name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.12em;
  line-height: 1;
}
.sp-brand__name small{
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
}

.sp-nav{ display: flex; align-items: center; gap: 2px; }
.sp-nav a:not(.sp-btn){
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.9375rem;
  color: var(--text-2);
  transition: color 160ms ease, background-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .sp-nav a:not(.sp-btn):hover{ color: var(--text); background: rgba(255, 255, 255, 0.7); }
}
.sp-nav .sp-btn{ margin-left: 8px; min-height: 44px; }

.sp-menu-toggle{
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.sp-menu-toggle span,
.sp-menu-toggle span::before{
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform 200ms var(--ease-out);
}
.sp-menu-toggle span{ position: relative; transform: translateY(-3px); }
.sp-menu-toggle span::before{ content: ""; position: absolute; top: 6px; }
.sp-menu-toggle[aria-expanded="true"] span{ transform: rotate(45deg); }
.sp-menu-toggle[aria-expanded="true"] span::before{ transform: translateY(-6px) rotate(-90deg); }

@media (max-width: 960px) {
  .sp-menu-toggle{ display: grid; }
  .sp-nav{
    position: fixed;
    top: calc(var(--header-top) + var(--header-h) + 8px);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: var(--r-md);
    /* Nested inside the blurred header, so its own backdrop-filter can't apply: keep it near-opaque. */
    background: rgba(var(--bg-rgb), 0.97);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 160ms var(--ease-out),
      transform 160ms var(--ease-out),
      visibility 0s linear 160ms;
  }
  .sp-nav.is-open{
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 220ms var(--ease-out),
      transform 220ms var(--ease-out),
      visibility 0s;
  }
  .sp-nav a:not(.sp-btn){
    min-height: 52px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--text);
  }
  .sp-nav .sp-btn{ margin: 8px 0 0; min-height: 52px; }
}

/* ---------- Hero ---------- */
.sp-hero{
  position: relative;
  padding: calc(var(--header-top) + var(--header-h) + 16px) var(--gutter) 0;
}

@keyframes sp-blink { 50% { opacity: 0.25; } }

.sp-hero__title{
  font-family: var(--font-display);
  font-size: var(--step-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.sp-hero__title .sp-line{
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.sp-hero__title .sp-line > span{ display: inline-block; }

@media (max-width: 760px) {
  .sp-hero{ padding-inline: 10px; }
  
  
  
  
  
  
  
}

/* Hero entrance (rare, first-load: delight budget) */
.js .sp-hero [data-hero]{ opacity: 0; }
.js .sp-hero.is-ready [data-hero]{
  opacity: 1;
  animation: sp-fade-up 800ms var(--ease-out) both;
  animation-delay: calc(80ms + var(--i, 0) * 90ms);
}
.js .sp-hero .sp-hero__title[data-hero]{ opacity: 1; animation: none; }
.js .sp-hero:not(.is-ready) .sp-line > span{ transform: translateY(105%); }
.js .sp-hero.is-ready .sp-line > span{
  animation: sp-rise 900ms var(--ease-out) both;
  animation-delay: calc(220ms + var(--i, 0) * 90ms);
}

@keyframes sp-rise {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
@keyframes sp-fade-up {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* ---------- Sections ---------- */
.sp-section{ padding-block: var(--section); }
.sp-section + .sp-section{ padding-top: 0; }
.sp-section__head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 48px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

@media (max-width: 1100px) {
  .sp-section__head{ grid-template-columns: 1fr; align-items: start; }
  .sp-section__head > :last-child:not(:first-child){ justify-self: start; }
}

/* ---------- About ---------- */
.sp-about__card{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  padding: clamp(28px, 5vw, 72px);
  border-radius: var(--r-lg);
}
.sp-about__statement{
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.05rem + 2.1vw, 2.9rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.sp-about__body{ display: grid; gap: 18px; align-content: start; padding-top: 6px; color: var(--text-2); }
.sp-about__body p{ max-width: 54ch; text-wrap: pretty; }
.sp-about__sign{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-border);
  color: var(--text);
}
.sp-about__sign img{ width: 40px; height: 40px; }
.sp-about__sign span{ display: block; font-size: 0.875rem; color: var(--text-3); }
@media (max-width: 860px) {
  .sp-about__card{ grid-template-columns: 1fr; }
}

/* ---------- Work ---------- */
.sp-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
}
.sp-chip{
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}
.sp-chip:active{ transform: scale(0.97); }
.sp-chip[aria-pressed="true"]{
  background: #fff;
  color: var(--teal);
  box-shadow: 0 2px 10px -4px rgba(var(--shadow-rgb), 0.3);
}
@media (hover: hover) and (pointer: fine) {
  .sp-chip:not([aria-pressed="true"]):hover{ color: var(--text); background: rgba(255, 255, 255, 0.55); }
}

.sp-work__grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.sp-card{ grid-column: span 2; }
.sp-card--feature{ grid-column: span 4; grid-row: span 2; }
.sp-card[hidden]{ display: none; }

.sp-card__button{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  text-align: left;
  cursor: pointer;
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease, background-color 300ms ease;
}
.sp-card__media{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--r-md) - 6px);
  background: var(--bg-2);
}
.sp-card--feature .sp-card__media{ flex: 1; aspect-ratio: auto; min-height: 320px; }
.sp-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.sp-card__play{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text);
  transition: background-color 200ms ease, color 200ms ease;
}
.sp-card__play .sp-play-icon{ width: 26px; height: 26px; margin: 0; background: var(--teal); color: #fff; }
.sp-card__meta{ display: flex; justify-content: space-between; gap: 16px; padding: 14px 10px 8px; }
.sp-card__title{
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.sp-card--feature .sp-card__title{ font-size: var(--step-h3); }
.sp-card__cat{ display: block; margin-top: 4px; font-size: 0.875rem; color: var(--text-3); }

@media (hover: hover) and (pointer: fine) {
  .sp-card__button:hover{
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 50px -20px rgba(var(--shadow-rgb), 0.35);
  }
  .sp-card__button:hover .sp-card__media img{ transform: scale(1.04); }
  .sp-card__button:hover .sp-card__play{ background: var(--teal); color: #fff; }
  .sp-card__button:hover .sp-card__play .sp-play-icon{ background: #fff; color: var(--teal); }
}
.sp-card__button:active{ transform: scale(0.99); }

@media (max-width: 1024px) {
  .sp-work__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-card, .sp-card--feature{ grid-column: span 1; grid-row: auto; }
  .sp-card--feature{ grid-column: 1 / -1; }
  .sp-card--feature .sp-card__media{ flex: none; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .sp-work__grid{ grid-template-columns: 1fr; }
  .sp-section__head{ grid-template-columns: 1fr; }
  .sp-filters{ border-radius: var(--r-md); }
}

/* ---------- Spec bar ---------- */
.sp-spec{ padding-top: clamp(14px, 1.6vw, 22px); }
.sp-spec__bar{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-radius: var(--r-md);
}
.sp-spec__item{
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px);
  border-inline-start: 1px solid var(--glass-line);
}
.sp-spec__item:first-child{ border-inline-start: 0; }

@media (max-width: 860px) {
  .sp-spec__bar{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-spec__item:nth-child(3){ border-inline-start: 0; }
  .sp-spec__item:nth-child(n + 3){ border-top: 1px solid var(--glass-line); }
}

/* ---------- Services (one panel, list rows) ---------- */
.sp-services__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(8px, 1vw, 12px) clamp(20px, 3vw, 44px);
  border-radius: var(--r-lg);
}
.sp-service{
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 8px;
  align-content: start;
  padding-block: clamp(22px, 2.4vw, 34px);
  border-top: 1px solid var(--glass-line);
}
.sp-service:nth-child(-n + 2){ border-top: 0; }
.sp-service:nth-child(odd){ padding-inline-end: clamp(20px, 3vw, 48px); }
.sp-service:nth-child(even){ padding-inline-start: clamp(20px, 3vw, 48px); border-inline-start: 1px solid var(--glass-line); }
.sp-service__icon{
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(140deg, var(--accent-hi), var(--teal) 55%, var(--teal-deep));
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(var(--accent-rgb), 0.7), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.sp-service__title{
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.sp-service__text{ color: var(--text-2); font-size: 1rem; max-width: 52ch; }
.sp-service__tags{ display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.sp-service__tags li{
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--glass-line);
  font-size: 0.8125rem;
  color: var(--text-2);
}
@media (max-width: 860px) {
  .sp-services__list{ grid-template-columns: 1fr; }
  .sp-service:nth-child(2){ border-top: 1px solid var(--glass-line); }
  .sp-service:nth-child(n){ padding-inline: 0; border-inline-start: 0; }
}
@media (max-width: 480px) {
  .sp-service{ grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .sp-service__icon{ width: 44px; height: 44px; border-radius: 13px; }
}

/* ---------- Process (one panel, four stops) ---------- */
.sp-process__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--r-lg);
}
.sp-step{
  padding: clamp(24px, 2.6vw, 36px);
  border-inline-start: 1px solid var(--glass-line);
}
.sp-step:first-child{ border-inline-start: 0; }
.sp-step__time{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.08);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}
.sp-step__bar{
  display: block;
  height: 3px;
  margin-top: 20px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.1);
  overflow: hidden;
}
.sp-step__bar::before{
  content: "";
  display: block;
  height: 100%;
  width: calc(25% * var(--n, 1));
  border-radius: inherit;
  background: var(--grad);
  transform-origin: left;
}
[dir="rtl"] .sp-step__bar::before{ transform-origin: right; background: linear-gradient(-100deg, var(--teal), var(--aqua)); }
.js .sp-step[data-reveal] .sp-step__bar::before{ transform: scaleX(0); transition: transform 1000ms var(--ease-in-out) 200ms; }
.js .sp-step.is-in .sp-step__bar::before{ transform: scaleX(1); }
.sp-step__title{
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.sp-step p{ margin-top: 8px; color: var(--text-2); font-size: 1rem; }
@media (max-width: 960px) {
  .sp-process__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-step:nth-child(3){ border-inline-start: 0; }
  .sp-step:nth-child(n + 3){ border-top: 1px solid var(--glass-line); }
}
@media (max-width: 560px) {
  .sp-process__grid{ grid-template-columns: 1fr; }
  .sp-step:nth-child(n){ border-inline-start: 0; }
  .sp-step:nth-child(n + 2){ border-top: 1px solid var(--glass-line); }
}

/* ---------- Region ---------- */
.sp-region__card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(10px, 1vw, 14px);
  padding-right: clamp(24px, 5vw, 72px);
  border-radius: var(--r-lg);
}

.sp-region .sp-lead{ margin-top: 22px; }
.sp-places{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.sp-places li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--glass-line);
  font-size: 0.9375rem;
}
.sp-places li::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 0 3px rgba(var(--accent2-rgb), 0.18);
}
@media (max-width: 860px) {
  .sp-region__card{ grid-template-columns: 1fr; padding: 10px 10px clamp(24px, 5vw, 40px); }
  .sp-region__card > div{ padding-inline: 14px; }
  
}

/* ---------- Clients marquee ---------- */
.sp-clients__head{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(28px, 3vw, 44px);
  text-align: center;
}
.sp-clients__count{ font-size: var(--step-lead); color: var(--text-2); }
.sp-clients__count span{ font-weight: 600; color: var(--teal); }
.sp-clients__band{ display: grid; gap: clamp(8px, 1vw, 16px); }
.sp-marquee{
  --gap: clamp(28px, 3.4vw, 64px);
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sp-marquee__track{
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--gap);
  min-width: 100%;
  justify-content: space-around;
  animation: sp-marquee 48s linear infinite;
}
.sp-marquee--reverse .sp-marquee__track{ animation-direction: reverse; animation-duration: 54s; }
/* Moving while on screen; stops on hover or keyboard focus. */
.sp-clients__band:hover .sp-marquee__track,
.sp-clients__band:focus-within .sp-marquee__track,
.sp-clients__band.is-offscreen .sp-marquee__track{ animation-play-state: paused; }
@keyframes sp-marquee {
  to { transform: translateX(calc(-100% - var(--gap))); }
}
.sp-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 200px;
  height: 110px;
}
.sp-logo img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sp-logo:hover img{ transform: scale(1.06); }
}
@media (max-width: 620px) {
  .sp-logo{ width: 140px; height: 84px; }
}

/* ---------- Contact ---------- */
.sp-contact__card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(24px, 4.5vw, 64px);
  border-radius: var(--r-lg);
}
.sp-contact__title{
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.sp-contact__card .sp-lead{ margin-top: 20px; }
.sp-contact__lines{ display: grid; gap: 8px; margin-top: 32px; }
.sp-contact__line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-border);
  transition: background-color 160ms ease, color 160ms ease;
}
.sp-contact__line small{
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sp-contact__line span{ font-size: 1rem; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  a.sp-contact__line:hover{ background: #fff; color: var(--teal); }
}
.sp-contact__wa{ margin-top: 20px; }
.sp-btn--wa{
  --btn-bg: #1aa35a;
  box-shadow: 0 8px 22px -8px rgba(26, 163, 90, 0.6), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
@media (hover: hover) and (pointer: fine) {
  .sp-btn--wa:hover{ --btn-bg: #15904f; }
}

.sp-form{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 18px;
  padding: clamp(22px, 2.8vw, 36px);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 #fff inset, 0 16px 40px -20px rgba(var(--shadow-rgb), 0.3);
}
.sp-form__title{ grid-column: 1 / -1; font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; }
.sp-field{ display: grid; gap: 8px; align-content: start; }
.sp-field--full{ grid-column: 1 / -1; }
.sp-field label{ font-size: 0.875rem; font-weight: 500; color: var(--text); }
.sp-field label span{ color: var(--text-3); font-weight: 400; }
.sp-field input,
.sp-field select,
.sp-field textarea{
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  border-radius: var(--r-sm);
  background: rgba(var(--bg-rgb), 0.8);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.sp-field textarea{ min-height: 128px; resize: vertical; }
.sp-field ::placeholder{ color: var(--text-placeholder); }
.sp-field select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%233f5d60' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.sp-field input:hover,
.sp-field select:hover,
.sp-field textarea:hover{ border-color: rgba(var(--ink-rgb), 0.3); }
.sp-field input:focus-visible,
.sp-field select:focus-visible,
.sp-field textarea:focus-visible{
  outline: none;
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--accent2-rgb), 0.2);
}
.sp-field [aria-invalid="true"]{ border-color: #d14343; }
.sp-field__error{ font-size: 0.8125rem; color: #b42318; }
.sp-form__foot{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sp-form__note{ font-size: 0.8125rem; color: var(--text-3); max-width: 36ch; }
.sp-form__status{ grid-column: 1 / -1; padding: 12px 14px; border-radius: var(--r-sm); font-size: 0.9375rem; }
.sp-form__status:empty{ display: none; }
.sp-form__status.is-success{ background: rgba(26, 163, 90, 0.1); color: #0f6b3a; }
.sp-form__status.is-error{ background: rgba(209, 67, 67, 0.1); color: #b42318; }
.sp-hp{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 960px) {
  .sp-contact__card{ grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sp-form{ grid-template-columns: 1fr; }
  .sp-form__foot .sp-btn{ width: 100%; }
}

/* ---------- Footer ---------- */
.sp-footer{ padding: 0 0 24px; }
.sp-footer__card{ padding: clamp(28px, 4vw, 56px); border-radius: var(--r-lg); }
.sp-footer__top{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--glass-line);
}
.sp-footer__brand p{ margin-top: 18px; max-width: 36ch; color: var(--text-2); }
.sp-footer h2{
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sp-footer li a,
.sp-footer li span{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--text);
  transition: color 160ms ease;
}
.sp-footer li a:hover{ color: var(--teal); }
.sp-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  font-size: 0.875rem;
  color: var(--text-3);
}
.sp-footer__bottom a{ color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--ink-rgb), 0.25); }
.sp-footer__word{
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 0.5rem + 13.5vw, 13rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.06em;
  text-align: center;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.02));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.sp-footer li{ overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .sp-footer__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sp-footer__top{ grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Floating WhatsApp ---------- */
.sp-float-wa{
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  background: #1aa35a;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: 0 10px 28px -8px rgba(26, 163, 90, 0.6), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  transition: transform 200ms var(--ease-out), opacity 240ms var(--ease-out);
}
.sp-float-wa:active{ transform: scale(0.97); }
.js .sp-float-wa:not(.is-visible){ opacity: 0; transform: translateY(12px); pointer-events: none; }

/* ---------- Lightbox (native dialog) ---------- */
.sp-lightbox{
  width: min(1200px, 100vw - 32px);
  max-width: none;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  overflow: visible;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 160ms var(--ease-out),
    transform 160ms var(--ease-out),
    overlay 160ms allow-discrete,
    display 160ms allow-discrete;
}
.sp-lightbox[open]{ transition-duration: 260ms; }
@starting-style {
  .sp-lightbox[open] { opacity: 0; transform: scale(0.96); }
}
.sp-lightbox:not([open]){ opacity: 0; transform: scale(0.98); }
.sp-lightbox::backdrop{
  background: rgba(var(--bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 1;
  transition: opacity 260ms ease, overlay 260ms allow-discrete, display 260ms allow-discrete;
}
@starting-style {
  .sp-lightbox[open]::backdrop { opacity: 0; }
}
.sp-lightbox:not([open])::backdrop{ opacity: 0; }
.sp-lightbox__frame{
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--text);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.sp-lightbox__frame iframe{ width: 100%; height: 100%; border: 0; }
.sp-lightbox__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px 12px 8px;
}
.sp-lightbox__title{ font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; }
.sp-lightbox__close{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.sp-lightbox__close:hover{ background: var(--bg); }
.sp-lightbox__close:active{ transform: scale(0.94); }
body:has(.sp-lightbox[open]){ overflow: hidden; }
.sp-lightbox{ overscroll-behavior: contain; }

a, button, summary{ -webkit-tap-highlight-color: rgba(var(--accent2-rgb), 0.15); }

/* ---------- Scroll reveal ---------- */
.js [data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms);
}
.js [data-reveal].is-in{ opacity: 1; transform: none; }
/* Cards with hover lift: once revealed, hand transform back to the hover rule */
.js .sp-service[data-reveal].is-in{ transition: transform 300ms var(--ease-out), background-color 300ms ease, opacity 700ms var(--ease-out); transition-delay: 0ms; }

/* ---------- Placeholder flag (preview only) ---------- */
.is-placeholder{ position: relative; }
.is-placeholder::after{
  content: "à confirmer";
  position: absolute;
  top: -10px;
  right: -6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #ffd27a;
  color: #3d2a00;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  -webkit-text-fill-color: #3d2a00;
}

.sp-footer .is-placeholder::after { position: static; margin-left: 8px; align-self: center; }

/* ---------- Fallback when backdrop-filter is unsupported ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sp-glass, .sp-card__button, .sp-btn--ghost{ background: rgba(255, 255, 255, 0.9); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html{ scroll-behavior: auto; }
  .sp-aurora i{ animation: none; }
  .js .sp-hero:not(.is-ready) .sp-line > span,
  .js .sp-hero.is-ready .sp-line > span{ transform: none; animation: none; }
  .js .sp-hero.is-ready [data-hero]{ animation: sp-fade 400ms ease both; }
  
  .js [data-reveal]{ transform: none; transition: opacity 400ms ease; }
  .js .sp-step[data-reveal] .sp-step__bar::before{ transform: none; transition: none; }
  
  .sp-marquee__track{ animation: none; }
  .sp-marquee{ flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .sp-marquee__track[aria-hidden="true"]{ display: none; }
  .sp-marquee__track{ min-width: 0; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .sp-card__media img, .sp-card__button, .sp-service{ transition: none; }
  .sp-lightbox, .sp-lightbox[open]{ transform: none; }
  @starting-style { .sp-lightbox[open] { transform: none; } }
}
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Header end: language switch + menu ---------- */
.sp-header__end{ display: flex; align-items: center; gap: 8px; }
.sp-langs{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.05);
  border: 1px solid var(--glass-line);
}
.sp-langs a{
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-2);
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.sp-langs a[lang="ar"]{ font-family: var(--font-arabic); font-size: 1rem; letter-spacing: 0; }
.sp-langs a[aria-current="true"]{
  background: #fff;
  color: var(--teal);
  box-shadow: 0 2px 8px -3px rgba(var(--shadow-rgb), 0.35);
}
@media (hover: hover) and (pointer: fine) {
  .sp-langs a:not([aria-current="true"]):hover{ color: var(--text); background: rgba(255, 255, 255, 0.6); }
}
@media (max-width: 960px) {
  .sp-header__inner{ padding-inline-end: 8px; }
}
@media (max-width: 400px) {
  .sp-brand__name small{ display: none; }
  .sp-langs a{ min-width: 34px; padding: 0 6px; }
}

/* ---------- Card meta (stacked) ---------- */
.sp-card__meta{ display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 8px; }
.sp-card__media{ display: block; }
.sp-card__button{ text-align: start; }

/* ---------- Arabic & right-to-left ---------- */
:root[lang="ar"]{
  --font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Noto Kufi Arabic", system-ui, sans-serif;
}
:root[lang="ar"] body{ line-height: 1.8; }
:root[lang="ar"] .sp-hero__title,
:root[lang="ar"] .sp-h2,
:root[lang="ar"] .sp-about__statement,
:root[lang="ar"] .sp-contact__title,
:root[lang="ar"] .sp-service__title,
:root[lang="ar"] .sp-step__title,
:root[lang="ar"] .sp-card__title,
:root[lang="ar"] .sp-form__title,
:root[lang="ar"] .sp-lightbox__title{
  letter-spacing: 0; /* negative tracking breaks Arabic joins */
  font-weight: 700;
}
:root[lang="ar"] .sp-hero__title{ line-height: 1.3; font-size: clamp(2.3rem, 1.1rem + 4.6vw, 5.5rem); }
:root[lang="ar"] .sp-hero__title .sp-line{ padding-bottom: 0.14em; margin-bottom: -0.14em; }
:root[lang="ar"] .sp-h2,
:root[lang="ar"] .sp-contact__title{ line-height: 1.35; }
:root[lang="ar"] .sp-about__statement{ line-height: 1.5; font-weight: 600; }
:root[lang="ar"] .sp-step__time,
:root[lang="ar"] .sp-contact__line small,
:root[lang="ar"] .sp-footer h2,
:root[lang="ar"] .sp-brand__name small{ font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 0.8125rem; }

[dir="rtl"] .sp-arrow{ transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  [dir="rtl"] .sp-btn:hover .sp-arrow{ transform: scaleX(-1) translateX(3px); }
}

[dir="rtl"] .sp-card__play{ left: auto; right: 12px; padding: 6px 6px 6px 14px; }

[dir="rtl"] .sp-float-wa{ right: auto; left: 16px; padding: 0 14px 0 18px; }
[dir="rtl"] .sp-play-icon{ margin-left: 0; margin-right: -8px; }
[dir="rtl"] .sp-play-icon svg{ transform: scaleX(-1); }
[dir="rtl"] .sp-contact__line span{ text-align: left; }
[dir="rtl"] .sp-field select{ background-position: left 14px center; padding-right: 14px; padding-left: 40px; }
[dir="rtl"] .sp-nav{ transform-origin: top left; }

[dir="ltr"] .sp-contact__line span[dir="ltr"],
[dir="rtl"] .sp-contact__line span[dir="ltr"]{ unicode-bidi: isolate; }

/* ---------- Icons, socials, map ---------- */

.sp-spec__icon, .sp-step__icon, .sp-contact__ico, .sp-map__pin{
  display: inline-grid; place-items: center; flex: none; color: var(--teal);
}
.sp-spec__icon{ width: 36px; height: 36px; border-radius: 11px; background: rgba(var(--accent-rgb), 0.09); }
.sp-step__icon{
  width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--glass-line);
  box-shadow: 0 6px 16px -10px rgba(var(--shadow-rgb), 0.4);
}
.sp-contact__line{ justify-content: flex-start; }
.sp-contact__line small{ flex: 1; }
.sp-contact__ico{ width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.09); }
.sp-contact__ico--wa{ color: #1aa35a; background: rgba(26, 163, 90, 0.1); }
.sp-social{ display: flex; gap: 10px; margin-top: 18px; }
.sp-social a{
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 1px solid var(--glass-line); color: var(--text);
  transition: color 160ms ease, transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.sp-social a:active{ transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .sp-social a:hover{ color: var(--teal); box-shadow: 0 8px 20px -10px rgba(var(--shadow-rgb), 0.45); }
}
.sp-footer__social a{ gap: 10px; }
.sp-footer__social svg{ color: var(--teal); }
.sp-map{
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 12px;
  margin-top: clamp(14px, 1.6vw, 22px); padding: 12px; border-radius: var(--r-lg);
}
.sp-map__info{ display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(16px, 2.4vw, 32px); }
.sp-map__pin{ width: 52px; height: 52px; border-radius: 16px; background: var(--teal); color: #fff; }
.sp-map__title{ font-family: var(--font-display); font-size: var(--step-h3); font-weight: 600; letter-spacing: -0.02em; }
.sp-map__info p{ color: var(--text-2); }
.sp-map__frame{ min-height: 340px; border-radius: calc(var(--r-lg) - 10px); overflow: hidden; background: var(--bg-2); }
.sp-map__frame iframe{ width: 100%; height: 100%; min-height: 340px; border: 0; }
@media (max-width: 860px) {
  .sp-map{ grid-template-columns: 1fr; }
  .sp-map__frame, .sp-map__frame iframe{ min-height: 280px; }
}

/* ---------- Hero: "Le moniteur" ---------- */
/* ===== Proposition A — "Le moniteur" ===== */
.ha{
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
  min-height: 100dvh;
  padding: calc(var(--header-h) + var(--header-top) + 32px) var(--gutter) clamp(32px, 4vw, 56px);
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
}
.ha__copy .sp-hero__title{ font-size: clamp(2.4rem, 0.9rem + 3.6vw, 4.6rem); }
.ha__copy .sp-lead{ margin-top: 22px; }
.ha__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* Monitor */
.ha__monitor{ position: relative; padding: 12px; border-radius: 30px; }
.ha__screen{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 20px;
  background: var(--text);
  isolation: isolate;
}
.ha__shot{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1100ms ease;
}
.ha__shot.is-on, .ha__shot.is-off{ animation: ha-zoom 7600ms linear both; }
.ha__shot.is-on{ opacity: 1; z-index: 1; }
@keyframes ha-zoom { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(var(--kx, -2%), var(--ky, -1%), 0); } }
.ha__screen::after{
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--ink-rgb),.35), transparent 22%, transparent 70%, rgba(var(--ink-rgb),.55));
}
.ha__ui{ position: absolute; inset: 16px; z-index: 3; pointer-events: none; color: #fff; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .1em; }
.ha__ui > *{ position: absolute; }
.ha__rec{ top: 0; inset-inline-start: 0; display: flex; align-items: center; gap: 8px; }
.ha__rec i{ width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: sp-blink 1.6s steps(1, end) infinite; }
.ha__tc{ top: 0; inset-inline-end: 0; font-variant-numeric: tabular-nums; direction: ltr; }
.ha__focus{ top: 50%; left: 50%; width: 84px; height: 56px; transform: translate(-50%, -50%); }
.ha__focus::before, .ha__focus::after{ content: ""; position: absolute; inset: 0; border: 1.5px solid rgba(255,255,255,.85); }
.ha__focus::before{ clip-path: polygon(0 0, 22% 0, 22% 2px, 2px 2px, 2px 30%, 0 30%, 0 100%, 0 100%, 0 70%, 2px 70%, 2px calc(100% - 2px), 22% calc(100% - 2px), 22% 100%, 0 100%); }
.ha__focus::after{ clip-path: polygon(78% 0, 100% 0, 100% 30%, calc(100% - 2px) 30%, calc(100% - 2px) 2px, 78% 2px, 78% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 70%, 100% 70%, 100% 100%, 78% 100%); }
.ha__meters{ bottom: 0; inset-inline-start: 0; display: flex; align-items: flex-end; gap: 3px; height: 26px; direction: ltr; }
.ha__meters b{ width: 4px; border-radius: 2px; background: linear-gradient(0deg, var(--aqua), #fff); animation: ha-meter 900ms ease-in-out infinite alternate; }
.ha__meters b:nth-child(1){ height: 60%; } .ha__meters b:nth-child(2){ height: 90%; animation-delay: -300ms; }
.ha__meters b:nth-child(3){ height: 45%; animation-delay: -500ms; } .ha__meters b:nth-child(4){ height: 75%; animation-delay: -150ms; }
@keyframes ha-meter { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.ha__meters b{ transform-origin: bottom; }
.ha__caption{ bottom: 0; inset-inline-end: 0; display: grid; justify-items: end; gap: 6px; font-family: var(--font-body); letter-spacing: 0; }
.ha__caption strong{ font-size: 0.9375rem; font-weight: 600; }
.ha__caption span{ font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .12em; opacity: .8; }
.ha__progress{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(255,255,255,.18); }
.ha__progress i{ display: block; height: 100%; background: var(--aqua); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .ha__progress i{ transform-origin: right; }
.ha__progress i.is-run{ animation: ha-prog 6000ms linear forwards; }
@keyframes ha-prog { to { transform: scaleX(1); } }

/* Film strip */
.ha__strip{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ha__thumb{
  position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--bg-2); cursor: pointer; opacity: .6;
  transition: opacity 200ms ease, transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.ha__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.ha__thumb[aria-current="true"]{ opacity: 1; box-shadow: 0 0 0 2px var(--teal); }
.ha__thumb:active{ transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .ha__thumb:hover{ opacity: 1; } }
.ha__play{
  position: absolute; z-index: 4; inset-inline-end: 22px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.22); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.ha__play:active{ transform: translateY(-50%) scale(.95); }
@media (hover: hover) and (pointer: fine) { .ha__play:hover{ background: rgba(255,255,255,.36); } }

/* Entrance: copy rises, monitor powers on */
.js .ha__monitor{ opacity: 0; transform: translateY(24px) scale(.98); }
.js .is-ready .ha__monitor{ opacity: 1; transform: none; transition: opacity 900ms var(--ease-out) 250ms, transform 1100ms var(--ease-out) 250ms; }

@media (max-width: 980px) {
  .ha{ grid-template-columns: 1fr; min-height: 0; }
  .ha__copy{ order: 1; }
  .ha__monitor{ order: 2; }
}
@media (max-width: 560px) {
  .ha__strip{ grid-template-columns: repeat(5, 30%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .ha__thumb{ scroll-snap-align: start; }
  .ha__focus, .ha__meters{ display: none; }
  .ha__play{ width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .ha__shot.is-on, .ha__shot.is-off{ animation: none; transform: none; }
  .ha__meters b, .ha__rec i{ animation: none; }
  .ha__progress{ display: none; }
}

/* Region: "all of Morocco" route leaving the map */
.sp-route--out{ stroke-dasharray: 0.02 0.02; opacity: 0.55; }
.js .sp-region__visual[data-reveal] .sp-route--out{ stroke-dashoffset: 0; opacity: 0; }
.js .sp-region__visual.is-in .sp-route--out{ opacity: 0.55; transition: opacity 600ms ease 1200ms; }
.sp-out rect{ fill: var(--teal); }
.sp-out text{ font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: #fff; }
.sp-out path{ fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.sp-places__all{
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff;
  font-weight: 500;
}
.sp-places__all::before{ display: none !important; }

/* ---------- Work grid: asymmetric bento ---------- */
.sp-card--half{ grid-column: span 3; }
.sp-card--wide{ grid-column: 1 / -1; }
.sp-card--wide .sp-card__media{ aspect-ratio: 21 / 9; }
.sp-card[data-extra][hidden]{ display: none; }
.sp-work__foot{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 40px);
}
.sp-work__count{
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  font-size: 0.75rem;
  color: var(--teal);
}
.sp-work__foot svg{ color: #d93025; }
@media (max-width: 1024px) {
  .sp-card--half{ grid-column: span 1; }
  .sp-card--wide{ grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .sp-card--wide .sp-card__media{ aspect-ratio: 16 / 9; }
}

/* ---------- Studio: behind-the-scenes clip ---------- */
.sp-bts{
  position: relative;
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: var(--bg-2);
  box-shadow: 0 16px 40px -20px rgba(var(--shadow-rgb), 0.45);
}
.sp-bts img{ width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.sp-bts__label{
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}
.sp-bts__label .sp-play-icon{ width: 28px; height: 28px; margin: 0; background: var(--teal); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .sp-bts:hover img{ transform: scale(1.04); }
}

/* ---------- FAQ ---------- */
.sp-faq__grid{
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.sp-faq__list{ padding: 8px clamp(18px, 2.6vw, 36px); border-radius: var(--r-lg); }
.sp-faq__item + .sp-faq__item{ border-top: 1px solid var(--glass-line); }
.sp-faq__item summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-block: 16px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.sp-faq__item summary::-webkit-details-marker{ display: none; }
.sp-faq__icon{
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.09);
  transition: transform 240ms var(--ease-out), background-color 160ms ease;
}
.sp-faq__icon::before,
.sp-faq__icon::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: var(--teal);
  border-radius: 2px;
}
.sp-faq__icon::after{ transform: rotate(90deg); transition: transform 240ms var(--ease-out); }
.sp-faq__item[open] .sp-faq__icon::after{ transform: rotate(0deg); }
.sp-faq__item p{ padding-bottom: 20px; max-width: 62ch; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .sp-faq__item summary:hover .sp-faq__icon{ background: rgba(var(--accent-rgb), 0.16); }
}
@media (max-width: 860px) {
  .sp-faq__grid{ grid-template-columns: 1fr; }
}
:root[lang="ar"] .sp-faq__item summary{ letter-spacing: 0; font-weight: 600; }

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

/* ---------- Region v2: coverage map + inset clip + CTAs ---------- */
.sp-region__card{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  padding: clamp(24px, 4vw, 56px);
  padding-right: clamp(24px, 4vw, 56px);
  align-items: center;
}
.sp-region__copy .sp-lead{ margin-top: 20px; }
.sp-region__ctas{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.sp-region__visual{ position: relative; padding-bottom: clamp(40px, 6vw, 72px); }
.sp-region__map{
  position: relative;
  border-radius: calc(var(--r-lg) - 8px);
  overflow: hidden;
  background: linear-gradient(160deg, var(--tint) 0%, var(--sand) 100%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 #fff, 0 20px 50px -30px rgba(var(--shadow-rgb), 0.45);
}
.sp-map-art{ display: block; width: 100%; height: auto; }
.sp-terrain{ fill: rgba(var(--accent-rgb), 0.08); }
.sp-terrain--sand{ fill: rgba(var(--glow2-rgb), 0.25); }
.sp-route{
  stroke: var(--teal);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.7;
}
.sp-pin circle{ fill: #fff; stroke: var(--teal); stroke-width: 2.5; }
.sp-pin text,
.sp-base__label{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  fill: var(--text);
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.sp-base circle{ fill: var(--teal); }
.sp-base__label{ font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.sp-base__tag{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--teal); }
.sp-base__pulse{ fill: rgba(var(--accent2-rgb), 0.35); transform-box: fill-box; transform-origin: center; animation: sp-pulse 2.4s var(--ease-out) infinite; }
@keyframes sp-pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
[dir="rtl"] .sp-map-art{ direction: ltr; }

/* Draw the routes, then drop the pins, once the map is revealed. */
.js .sp-region__visual[data-reveal] .sp-route{ stroke-dashoffset: 1; }
.js .sp-region__visual.is-in .sp-route{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--ease-in-out);
  transition-delay: calc(300ms + var(--i) * 90ms);
}
.js .sp-region__visual[data-reveal] .sp-pin{ opacity: 0; }
.js .sp-region__visual.is-in .sp-pin{
  opacity: 1;
  transition: opacity 400ms ease;
  transition-delay: calc(900ms + var(--i) * 90ms);
}

.sp-region__count{
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--text-2);
}
.sp-region__count b{ font-family: var(--font-display); color: var(--teal); }
.sp-region__inset{
  position: absolute;
  inset-inline-end: -12px;
  bottom: 0;
  width: min(46%, 300px);
  padding: 6px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 50px -24px rgba(var(--shadow-rgb), 0.55);
  cursor: pointer;
  text-align: start;
  transition: transform 300ms var(--ease-out);
}
.sp-region__inset img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--r-md) - 6px); }
.sp-region__inset-label{ display: flex; align-items: center; gap: 8px; padding: 8px 4px 4px; font-size: 0.8125rem; font-weight: 500; color: var(--text); }
.sp-region__inset-label .sp-play-icon{ width: 24px; height: 24px; margin: 0; background: var(--teal); color: #fff; }
.sp-region__inset:active{ transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .sp-region__inset:hover{ transform: translateY(-3px); }
}
@media (max-width: 860px) {
  .sp-region__card{ grid-template-columns: 1fr; padding: clamp(20px, 5vw, 32px); }
  .sp-region__card > div{ padding-inline: 0; }
  .sp-region__inset{ inset-inline-end: 8px; width: min(58%, 260px); }
}
@media (max-width: 480px) {
  .sp-pin text{ font-size: 15px; }
  .sp-region__ctas .sp-btn{ flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-base__pulse{ animation: none; opacity: 0.4; }
  .js .sp-region__visual[data-reveal] .sp-route,
  .js .sp-region__visual[data-reveal] .sp-pin{ stroke-dashoffset: 0; opacity: 1; transition: none; }
}

/* Region v2 refinements */
.sp-region__count{ top: auto; bottom: 14px; }
.sp-pin text, .sp-base__label{ font-size: 14px; }
.sp-base__label{ font-size: 16px; }
@media (max-width: 1100px) {
  .sp-region__card{ grid-template-columns: 1fr; }
  .sp-region__visual{ max-width: 760px; }
}
@media (max-width: 620px) {
  .sp-pin text{ font-size: 17px; }
  .sp-base__label{ font-size: 19px; }
  .sp-out text{ font-size: 15px; }
  .sp-region__count{ position: static; display: inline-block; margin: 10px 0 0; }
  .sp-region__inset{ position: relative; inset: auto; width: 100%; margin-top: 12px; }
  .sp-region__visual{ padding-bottom: 0; }
}

/* ---------- Manifesto ---------- */
.sp-manifesto__card{
  display: grid;
  grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  padding: clamp(28px, 5vw, 72px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(var(--accent2-rgb), 0.16), transparent 60%),
    var(--glass);
}
.sp-manifesto__mark img{ width: 56px; height: 56px; }
.sp-manifesto__title{
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.sp-manifesto__title em{ font-style: normal; color: var(--teal); }
.sp-manifesto__body{ display: grid; gap: 16px; padding-top: 8px; color: var(--text-2); font-size: var(--step-lead); }
.sp-manifesto__sig{
  padding-top: 16px;
  border-top: 1px solid var(--glass-line);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--teal);
}
:root[lang="ar"] .sp-manifesto__title{ letter-spacing: 0; line-height: 1.35; font-weight: 700; }
@media (max-width: 960px) {
  .sp-manifesto__card{ grid-template-columns: 1fr; }
}

/* Hero composition v3: open sky + title on top, glass band at the bottom (desktop) */

/* ---------- Manifesto ---------- */
.sp-manifesto__card{
  display: grid;
  grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  padding: clamp(28px, 5vw, 72px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(var(--accent2-rgb), 0.16), transparent 60%),
    var(--glass);
}
.sp-manifesto__mark img{ width: 56px; height: 56px; }
.sp-manifesto__title{
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.sp-manifesto__title em{ font-style: normal; color: var(--teal); }
.sp-manifesto__body{ display: grid; gap: 16px; padding-top: 8px; color: var(--text-2); font-size: var(--step-lead); }
.sp-manifesto__sig{
  padding-top: 16px;
  border-top: 1px solid var(--glass-line);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--teal);
}
:root[lang="ar"] .sp-manifesto__title{ letter-spacing: 0; line-height: 1.35; font-weight: 700; }
@media (max-width: 960px) {
  .sp-manifesto__card{ grid-template-columns: 1fr; }
}

/* Hero composition v3: open sky + title on top, glass band at the bottom (desktop) */

/* Tunnel v2: headline on a glass panel that stays in front of the flight */

/* ---------- Engagements ---------- */
.sp-eng__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--r-lg);
}
.sp-eng__item{ padding: clamp(24px, 2.6vw, 36px); border-inline-start: 1px solid var(--glass-line); }
.sp-eng__item:first-child{ border-inline-start: 0; }
.sp-eng__icon{
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(140deg, var(--accent-hi), var(--teal) 55%, var(--teal-deep)); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(var(--accent-rgb), 0.7), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.sp-eng__item h3{ margin-top: 20px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; }
.sp-eng__item p{ margin-top: 8px; color: var(--text-2); font-size: 1rem; }
:root[lang="ar"] .sp-eng__item h3{ letter-spacing: 0; font-weight: 700; }
@media (max-width: 960px) {
  .sp-eng__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-eng__item:nth-child(3){ border-inline-start: 0; }
  .sp-eng__item:nth-child(n + 3){ border-top: 1px solid var(--glass-line); }
}
@media (max-width: 560px) {
  .sp-eng__grid{ grid-template-columns: 1fr; }
  .sp-eng__item:nth-child(n){ border-inline-start: 0; }
  .sp-eng__item:nth-child(n + 2){ border-top: 1px solid var(--glass-line); }
}

/* ---------- Team ---------- */
.sp-team__grid{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.sp-member{ display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 16px; border-radius: var(--r-md); }
.sp-member__avatar{
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  margin-bottom: 10px;
  border-radius: calc(var(--r-md) - 6px);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(var(--accent2-rgb), 0.55), transparent 60%),
    radial-gradient(100% 70% at 100% 100%, rgba(var(--glow2-rgb), 0.8), transparent 60%),
    linear-gradient(160deg, var(--tint), var(--sand));
}
.sp-member__avatar::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--accent-rgb), 0.22) 1px, transparent 1px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.sp-member__avatar span{
  position: relative;
  z-index: 1;
  font-family: "Sora", var(--font-display);
  font-size: clamp(2rem, 1.2rem + 1.8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--teal);
}
.sp-member__name{ padding-inline: 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.015em; }
.sp-member__role{ align-self: flex-start; margin-inline: 4px; font-size: 0.875rem; color: var(--text-3); }
@media (max-width: 1100px) { .sp-team__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sp-team__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Spec bar v2: numbers that sell, each one a call to action ---------- */
.sp-hero.ha{ min-height: 0; padding-top: calc(var(--header-h) + var(--header-top) + clamp(28px, 4vw, 56px)); padding-bottom: clamp(20px, 2.4vw, 32px); }
.sp-spec + .sp-section{ padding-top: clamp(56px, 6vw, 96px); }
.sp-spec{ padding-top: 0; }
.sp-spec__bar{ padding: 0; margin: 0; list-style: none; }
.sp-spec__bar > li{ display: flex; border-inline-start: 1px solid var(--glass-line); }
.sp-spec__bar > li:first-child{ border-inline-start: 0; }
.sp-spec__item{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon num" "desc desc" "cta cta";
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  width: 100%;
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px);
  border-radius: var(--r-md);
  transition: background-color 200ms ease;
}
.sp-spec__icon{ grid-area: icon; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--accent-rgb), 0.09); color: var(--teal); }
.sp-spec__num{
  grid-area: num;
  font-family: "Sora", var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.sp-spec__desc{ grid-area: desc; font-size: 0.9375rem; color: var(--text-2); }
.sp-spec__cta{
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--teal);
}
:root[lang="ar"] .sp-spec__num{ letter-spacing: 0; font-family: var(--font-display); }
@media (hover: hover) and (pointer: fine) {
  .sp-spec__item:hover{ background: rgba(255, 255, 255, 0.6); }
  .sp-spec__item:hover .sp-arrow{ transform: translateX(3px); }
  [dir="rtl"] .sp-spec__item:hover .sp-arrow{ transform: scaleX(-1) translateX(3px); }
}
@media (max-width: 860px) {
  .sp-spec__bar > li:nth-child(3){ border-inline-start: 0; }
  .sp-spec__bar > li:nth-child(n + 3){ border-top: 1px solid var(--glass-line); }
}
@media (max-width: 980px) {
  .sp-hero.ha{ min-height: 0; }
}

/* ==========================================================================
   Performance pass
   backdrop-filter re-samples and blurs everything behind an element on every
   frame it is composited. Over our soft, static background the blur is not
   visible, so large surfaces use a more opaque tint instead. Blur is kept only
   where real content passes behind: the floating header, the mobile menu,
   the lightbox backdrop and small chips over photos.
   ========================================================================== */
.sp-glass,
.sp-card__button,
.sp-btn--ghost,
.sp-region__inset,
.sp-lightbox{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sp-glass{ background: rgba(255, 255, 255, 0.7); }
.sp-card__button{ background: rgba(255, 255, 255, 0.74); }
.sp-btn--ghost{ --btn-bg: rgba(255, 255, 255, 0.82); }
.sp-region__inset{ background: rgba(255, 255, 255, 0.92); }
.sp-lightbox{ background: rgba(255, 255, 255, 0.94); }

/* Keep real glass where it reads as glass. */
.sp-header__inner{
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}
.sp-header.is-scrolled .sp-header__inner{ background: rgba(255, 255, 255, 0.8); }
.sp-card__play, .sp-bts__label, .ha__play, .sp-region__count{
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sp-lightbox::backdrop{ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Background glow: painted once, never animated. */
.sp-aurora i{ animation: none; }

/* ---------- Faster, lighter entrances ---------- */
@keyframes sp-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.js .sp-hero.is-ready [data-hero]{
  animation-duration: 520ms;
  animation-delay: calc(60ms + var(--i, 0) * 55ms);
}
.js .sp-hero.is-ready .sp-line > span{
  animation-duration: 640ms;
  animation-delay: calc(40ms + var(--i, 0) * 60ms);
}
.js .is-ready .ha__monitor{
  transition: opacity 560ms var(--ease-out) 120ms, transform 640ms var(--ease-out) 120ms;
}
.js [data-reveal]{
  transform: translateY(10px);
  transition-duration: 420ms;
  transition-delay: calc(var(--i, 0) * 40ms);
}
.js .sp-step[data-reveal] .sp-step__bar::before{ transition-duration: 700ms; transition-delay: 120ms; }
.js .sp-region__visual.is-in .sp-route{ transition-duration: 800ms; transition-delay: calc(150ms + var(--i) * 60ms); }
.js .sp-region__visual.is-in .sp-pin{ transition-delay: calc(550ms + var(--i) * 60ms); }
.sp-card__media img{ transition-duration: 450ms; }
.sp-card__button, .sp-service{ transition-duration: 220ms; }
/* Same soft glow as the blurred blobs, drawn with gradients (no filter layer). */
.sp-aurora i{ filter: none; opacity: 1; }
.sp-aurora i:nth-child(1){ background: radial-gradient(closest-side, rgba(var(--glow1-rgb), 0.6), rgba(var(--glow1-rgb), 0)); }
.sp-aurora i:nth-child(2){ background: radial-gradient(closest-side, rgba(var(--glow2-rgb), 0.6), rgba(var(--glow2-rgb), 0)); }

/* ==========================================================================
   Multi-page components
   ========================================================================== */

/* ---------- Page hero (inner pages) ---------- */
.sp-pagehero { padding: calc(var(--header-h) + var(--header-top) + clamp(32px, 4vw, 64px)) 0 clamp(24px, 3vw, 40px); }
.sp-pagehero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.sp-pagehero__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1rem + 3.8vw, 4.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.sp-pagehero__title em { font-style: normal; color: var(--teal); }
:root[lang="ar"] .sp-pagehero__title { letter-spacing: 0; line-height: 1.3; font-weight: 700; }
.sp-pagehero .sp-lead { margin-top: 20px; }
.sp-pagehero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sp-pagehero__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  cursor: pointer;
  text-align: start;
}
div.sp-pagehero__media { cursor: default; }
.sp-pagehero__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; }
.sp-pagehero__play {
  position: absolute; top: 50%; left: 50%;
  display: grid; place-items: center; width: 68px; height: 68px;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.85); color: var(--teal);
  box-shadow: 0 12px 30px -10px rgba(var(--shadow-rgb), 0.55);
  transition: transform 200ms var(--ease-out);
}
.sp-pagehero__media:active .sp-pagehero__play { transform: translate(-50%, -50%) scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  button.sp-pagehero__media:hover .sp-pagehero__play { transform: translate(-50%, -50%) scale(1.06); }
}
.sp-pagehero__quick { display: grid; gap: 8px; padding: 12px; border-radius: 24px; }
.sp-pagehero__quick a {
  display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.75); border: 1px solid var(--glass-line);
  transition: background-color 160ms ease;
}
.sp-pagehero__quick small { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.sp-pagehero__quick strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .sp-pagehero__quick a:hover { background: #fff; } }
@media (max-width: 900px) { .sp-pagehero__grid { grid-template-columns: 1fr; } }

/* Breadcrumb */
.sp-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--text-3); }
.sp-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.sp-crumbs li + li::before { content: "/"; opacity: 0.5; }
.sp-crumbs a { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb), 0.2); text-underline-offset: 3px; }
.sp-crumbs a:hover { color: var(--teal); }
.sp-crumbs [aria-current="page"] { color: var(--teal); font-weight: 500; }

/* Active nav item */
.sp-nav a[aria-current="page"]:not(.sp-btn) { color: var(--teal); background: rgba(var(--accent-rgb), 0.08); }

/* ---------- Closing CTA band ---------- */
.sp-ctaband__card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 24px 48px;
  padding: clamp(28px, 4.5vw, 64px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(var(--accent2-rgb), 0.45), transparent 60%),
    linear-gradient(140deg, var(--accent-hi) 0%, var(--teal) 50%, var(--teal-deep) 100%);
  color: #fff;
  box-shadow: 0 30px 70px -36px rgba(var(--shadow-rgb), 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sp-ctaband__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 2.8vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.sp-ctaband__title em { font-style: normal; color: var(--on-accent-soft); }
:root[lang="ar"] .sp-ctaband__title { letter-spacing: 0; line-height: 1.35; font-weight: 700; }
.sp-ctaband__card p { margin-top: 14px; max-width: 54ch; color: rgba(255, 255, 255, 0.86); font-size: var(--step-lead); }
.sp-ctaband__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-btn--light { --btn-bg: #fff; --btn-fg: var(--teal-deep); }
.sp-btn--glassdark { --btn-bg: rgba(255, 255, 255, 0.14); --btn-fg: #fff; --btn-border: rgba(255, 255, 255, 0.4); }
@media (hover: hover) and (pointer: fine) {
  .sp-btn--light:hover { --btn-bg: var(--tint); }
  .sp-btn--glassdark:hover { --btn-bg: rgba(255, 255, 255, 0.24); }
}
@media (max-width: 860px) { .sp-ctaband__card { grid-template-columns: 1fr; } }

/* ---------- Clickable service rows ---------- */
.sp-service { position: relative; }
.sp-service__link {
  grid-column: 2;
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  margin-top: 6px; font-size: 0.9375rem; font-weight: 500; color: var(--teal);
}
.sp-service__link::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) {
  .sp-service:has(.sp-service__link):hover { background: rgba(255, 255, 255, 0.55); }
  .sp-service:hover .sp-service__link .sp-arrow { transform: translateX(3px); }
}
.sp-service:has(.sp-service__link:focus-visible) { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 12px; }
.sp-service__link:focus-visible { outline: none; }

.sp-about__more { justify-self: start; }

/* ---------- Included checklist ---------- */
.sp-included__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.sp-included__list { margin: 0; padding: 10px clamp(16px, 2.4vw, 32px); list-style: none; border-radius: var(--r-lg); }
.sp-included__list li { display: flex; align-items: center; gap: 14px; padding-block: 16px; font-size: 1.0625rem; }
.sp-included__list li + li { border-top: 1px solid var(--glass-line); }
.sp-check { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.1); color: var(--teal); }
@media (max-width: 860px) { .sp-included__grid { grid-template-columns: 1fr; } }

/* ---------- Other services ---------- */
.sp-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin: 0; padding: 0; list-style: none; }
.sp-other { display: grid; gap: 14px; height: 100%; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-md); transition: transform 220ms var(--ease-out), background-color 220ms ease; }
.sp-other .sp-service__icon { width: 48px; height: 48px; }
.sp-other__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
.sp-other__more { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 500; color: var(--teal); }
@media (hover: hover) and (pointer: fine) {
  .sp-other:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.9); }
  .sp-other:hover .sp-arrow { transform: translateX(3px); }
}
@media (max-width: 860px) { .sp-others { grid-template-columns: 1fr; } }

.sp-work__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-work__grid--three .sp-card { grid-column: auto; }
@media (max-width: 1024px) { .sp-work__grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sp-work__grid--three { grid-template-columns: 1fr; } }

/* ---------- Mission, vision, values ---------- */
.sp-mv__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.sp-mv__card { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-lg); }
.sp-mv__card p { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
:root[lang="ar"] .sp-mv__card p { letter-spacing: 0; line-height: 1.6; }
.sp-mv__k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.sp-mv__card--teal { background: linear-gradient(140deg, var(--accent-hi), var(--teal) 55%, var(--teal-deep)); color: #fff; box-shadow: 0 24px 50px -28px rgba(var(--accent-rgb), 0.8); }
.sp-mv__card--teal .sp-mv__k { color: var(--on-accent-soft); }
.sp-mv__valhead { margin-top: clamp(56px, 6vw, 96px); }
.sp-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-radius: var(--r-lg); }
.sp-value { padding: clamp(24px, 2.8vw, 40px); border-inline-start: 1px solid var(--glass-line); }
.sp-value:first-child { border-inline-start: 0; }
.sp-value__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--teal); }
.sp-value h3 { margin-top: 16px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.sp-value p { margin-top: 8px; color: var(--text-2); }
:root[lang="ar"] .sp-value h3, :root[lang="ar"] .sp-mv__k { letter-spacing: 0; }
@media (max-width: 860px) {
  .sp-mv__grid, .sp-values { grid-template-columns: 1fr; }
  .sp-value:nth-child(n) { border-inline-start: 0; }
  .sp-value + .sp-value { border-top: 1px solid var(--glass-line); }
}

/* One-page menu: the section being read */
.sp-nav a[data-spy][aria-current]:not(.sp-btn) { color: var(--teal); background: rgba(var(--accent-rgb), 0.08); }
.sp-nav a[data-spy] { transition: color 200ms ease, background-color 200ms ease; }
section[tabindex="-1"]:focus { outline: none; }
.sp-spec__num { white-space: nowrap; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.5rem); }
@media (max-width: 400px) { .sp-spec__num { font-size: 1.5rem; } }

/* ==========================================================================
   Bottom navigation (phones)
   ========================================================================== */
.sp-bnav { display: none; }
@media (max-width: 760px) {
  .sp-bnav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px;
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 40px -18px rgba(var(--shadow-rgb), 0.45), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
  .sp-bnav__item {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 54px;
    padding: 6px 2px;
    border-radius: 16px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-3);
    transition: color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out);
  }
  .sp-bnav__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sp-bnav__item:active { transform: scale(0.94); }
  .sp-bnav__item[aria-current] { color: var(--teal); background: rgba(var(--accent-rgb), 0.1); }
  .sp-bnav__item--wa { color: #fff; background: #1aa35a; box-shadow: 0 8px 18px -8px rgba(26, 163, 90, 0.7); }
  .sp-float-wa { display: none; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  :root[lang="ar"] .sp-bnav__item { font-size: 0.75rem; }
}

/* ==========================================================================
   Kinetic services marquee
   ========================================================================== */
.sp-tmarquee {
  padding-block: clamp(18px, 2.4vw, 32px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sp-tmarquee__row { display: flex; gap: 0; direction: ltr; }
.sp-tmarquee__track {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: sp-tmarquee 70s linear infinite;
  will-change: transform;
}
.sp-tmarquee:hover .sp-tmarquee__track { animation-play-state: paused; }
.sp-tmarquee__track li {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  padding-inline-end: clamp(18px, 2.4vw, 36px);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--text);
}
.sp-tmarquee__track li:nth-child(even) span { color: transparent; -webkit-text-stroke: 1.2px var(--teal); }
.sp-tmarquee__track li::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--teal);
  transform: rotate(45deg);
}
:root[lang="ar"] .sp-tmarquee__track li { letter-spacing: 0; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .sp-tmarquee__track { animation: none; }
  .sp-tmarquee__track[aria-hidden="true"] { display: none; }
  .sp-tmarquee__row { flex-wrap: wrap; }
}

/* Each track is followed by an identical copy, so sliding by exactly its own width loops seamlessly. */
@keyframes sp-tmarquee { to { transform: translateX(-100%); } }
[dir="rtl"] .sp-tmarquee__track { animation-direction: reverse; }

/* ==========================================================================
   Skeleton shimmer & spinners
   ========================================================================== */
.is-loading { position: relative; }
.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--tint-2) 30%, var(--tint) 50%, var(--tint-2) 70%) 0 0 / 220% 100%;
  animation: sp-shimmer 1.2s linear infinite;
}
@keyframes sp-shimmer { to { background-position: -220% 0; } }

.sp-lightbox__frame::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--aqua);
  animation: sp-spin 700ms linear infinite;
}
.sp-lightbox__frame.is-loaded::before { display: none; }
.sp-lightbox__frame iframe { position: relative; z-index: 1; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

.sp-btn.is-busy { pointer-events: none; opacity: 0.85; }
.sp-btn.is-busy .sp-arrow { display: none; }
.sp-btn.is-busy::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: sp-spin 700ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .is-loading::before { animation: none; }
  .sp-lightbox__frame::before, .sp-btn.is-busy::after { animation-duration: 1.6s; }
}

/* Parallax targets: let the browser composite the drift. */
[data-speed] { will-change: translate; }
@media (prefers-reduced-motion: reduce) { [data-speed] { will-change: auto; translate: none !important; } }

/* ==========================================================================
   Palettes
   Every colour in the stylesheet reads from these variables.
   ========================================================================== */
:root {
  --bg-rgb: 243, 248, 248;
  --ink-rgb: 13, 43, 46;
  --accent-rgb: 6, 124, 132;
  --accent2-rgb: 60, 195, 201;
  --shadow-rgb: 6, 84, 90;
  --glow1-rgb: 184, 236, 238;
  --glow2-rgb: 243, 217, 177;
  --glow3-rgb: 214, 236, 255;
  --accent-hi: #0a8d96;
  --on-accent-soft: #bff1f3;
  --text-hover: #163d41;
  --text-placeholder: #7f9597;
  --tint: #effafa;
  --tint-2: #e4efef;
  --sand-2: #f3d9b1;
  --glow1: #b8ecee;
  --band: linear-gradient(140deg, #0a8d96 0%, #067c84 50%, #054f55 100%);
  --chip: linear-gradient(140deg, #0a8d96, #067c84 55%, #05646b);
}

/* Surfaces that used fixed gradients now follow the palette. */
.sp-ctaband__card {
  background: radial-gradient(70% 140% at 100% 0%, rgba(var(--accent2-rgb), 0.45), transparent 60%), var(--band);
}
.sp-mv__card--teal { background: var(--band); }
.sp-service__icon, .sp-eng__icon, .sp-map__pin { background: var(--chip); }
.sp-map__pin { color: #fff; }

/* ==========================================================================
   Entrance & transition pass
   ========================================================================== */

/* 1 · Headings: camera focus-pull (blur → sharp). Once per section, so blur cost is a one-off. */
.js [data-reveal="focus"] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(8px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out),
    filter 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms);
}
.js [data-reveal="focus"].is-in { opacity: 1; filter: none; transform: none; }

/* 2 · Film images wipe up and settle (clip-path + standalone `scale`, so hover zoom on `transform` stays snappy). */
.js .sp-card[data-reveal] .sp-card__media,
.js .sp-bts,
.js .sp-pagehero__media img {
  clip-path: inset(0 0 100% 0 round 14px);
  transition: clip-path 900ms var(--ease-in-out);
  transition-delay: calc(80ms + var(--i, 0) * 60ms);
}
.js .sp-card[data-reveal] .sp-card__media img,
.js .sp-bts img { scale: 1.12; transition: scale 1200ms var(--ease-out), transform 450ms var(--ease-out); transition-delay: calc(80ms + var(--i, 0) * 60ms), 0ms; }
.js .sp-card.is-in .sp-card__media,
.js .is-in .sp-bts,
.js .is-ready .sp-pagehero__media img,
.js .sp-pagehero__media.is-in img { clip-path: inset(0 0 0 0 round 14px); }
.js .sp-card.is-in .sp-card__media img,
.js .is-in .sp-bts img { scale: 1; }

/* 3 · Filtered cards ease in instead of popping (CSS only; rapid clicks retarget). */
.js .sp-card[data-reveal] { transition-property: opacity, transform, scale; }
.sp-card:not([hidden]) {
  transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out), scale 260ms var(--ease-out);
}
@starting-style {
  .sp-card.is-in:not([hidden]) { opacity: 0; scale: 0.96; }
}

/* 6 · FAQ answers, form errors and status messages fade in from a soft blur. */
@keyframes sp-soft-in {
  from { opacity: 0; translate: 0 -6px; filter: blur(3px); }
  to { opacity: 1; translate: 0 0; filter: none; }
}
.sp-faq__item[open] > p { animation: sp-soft-in 280ms var(--ease-out); }
.sp-field__error:not([hidden]) { animation: sp-soft-in 160ms var(--ease-out); }
.sp-form__status:not(:empty) { animation: sp-soft-in 260ms var(--ease-out); }

/* 4 · Language switch: visible text resolves from a soft blur (masks the text swap). */
@keyframes sp-lang-in {
  from { opacity: 0.3; filter: blur(4px); }
  to { opacity: 1; filter: none; }
}
.is-lang-swap { animation: sp-lang-in 320ms var(--ease-out); }

/* 5 · Moving between home and service pages: native cross-document view transition. */
@view-transition { navigation: auto; }
@keyframes sp-vt-out { to { opacity: 0; } }
@keyframes sp-vt-in { from { opacity: 0; filter: blur(6px); } }
::view-transition-old(root) { animation: sp-vt-out 200ms ease-out both; }
::view-transition-new(root) { animation: sp-vt-in 360ms var(--ease-out) both; }
.sp-header { view-transition-name: sp-header; } /* the menu stays put while the page changes */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal="focus"] { filter: none; transform: none; transition: opacity 400ms ease; }
  .js .sp-card[data-reveal] .sp-card__media, .js .sp-bts, .js .sp-pagehero__media img { clip-path: none; transition: none; }
  .js .sp-card[data-reveal] .sp-card__media img, .js .sp-bts img { scale: 1; transition: none; }
  .sp-faq__item[open] > p, .sp-field__error:not([hidden]), .sp-form__status:not(:empty), .is-lang-swap { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  @starting-style { .sp-card.is-in:not([hidden]) { opacity: 1; scale: 1; } }
}

/* ---------- Experts (team without names) ---------- */
.sp-experts__lead { margin-top: 18px; }
.sp-experts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-expert {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-md);
  transition: transform 220ms var(--ease-out), background-color 220ms ease;
}
.sp-expert__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--chip);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(var(--accent-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.sp-expert__role {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.sp-expert__bio { color: var(--text-2); font-size: 0.9375rem; }
:root[lang="ar"] .sp-expert__role { letter-spacing: 0; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .sp-expert:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.86); }
}
@media (max-width: 1100px) { .sp-experts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sp-experts__grid { grid-template-columns: 1fr; } }

/* Menu labels never wrap; tighten spacing on mid-size screens. */
.sp-nav a { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1180px) {
  .sp-nav a:not(.sp-btn) { padding: 0 9px; font-size: 0.875rem; }
  .sp-nav .sp-btn { margin-left: 4px; padding: 0 16px; }
  .sp-brand__name small { display: none; }
}

/* ==========================================================================
   Services as illustrated cards
   ========================================================================== */
.sp-services__list--cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  padding: 0;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.sp-services__list--cards .sp-service:nth-child(n) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 8px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.sp-services__list--cards .sp-service > :not(.sp-service__media):not(.sp-service__icon) { padding-inline: 12px; }
.sp-service__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(var(--r-md) - 6px);
  background: var(--tint-2);
}
.sp-service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.sp-services__list--cards .sp-service__icon {
  position: relative;
  z-index: 1;
  margin: -34px 0 0 14px;
  width: 52px;
  height: 52px;
  border: 3px solid #fff;
  grid-row: auto;
}
[dir="rtl"] .sp-services__list--cards .sp-service__icon { margin: -34px 14px 0 0; }
.sp-services__list--cards .sp-service__title { margin-top: 0; font-size: 1.1875rem; }
.sp-services__list--cards .sp-service__text { font-size: 0.9375rem; }
.sp-services__list--cards .sp-service__tags { padding-top: 2px; }
.sp-services__list--cards .sp-service__link { margin-top: auto; padding-top: 6px; }
@media (hover: hover) and (pointer: fine) {
  .sp-services__list--cards .sp-service:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.9); }
  .sp-services__list--cards .sp-service:hover .sp-service__media img { transform: scale(1.05); }
}
@media (max-width: 1200px) { .sp-services__list--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sp-services__list--cards { grid-template-columns: 1fr; } }

/* Small honest label on AI-generated illustrations */
.sp-illus-tag {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  pointer-events: none;
}

/* Service page hero illustration */
.sp-pagehero__media--illus { margin: 0; }
.sp-pagehero__media--illus img { aspect-ratio: 3 / 2; }

/* "Autres services" cards with thumbnails */
.sp-other { padding: 8px 8px 20px; gap: 12px; }
.sp-other > :not(.sp-other__media):not(.sp-service__icon) { padding-inline: 12px; }
.sp-other__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--r-md) - 6px); background: var(--tint-2); }
.sp-other__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.sp-other .sp-service__icon { position: relative; z-index: 1; margin: -34px 0 0 14px; border: 3px solid #fff; }
[dir="rtl"] .sp-other .sp-service__icon { margin: -34px 14px 0 0; }
@media (hover: hover) and (pointer: fine) { .sp-other:hover .sp-other__media img { transform: scale(1.05); } }

/* Illustrations join the shimmer and wipe-in like the film thumbnails */
.js .sp-service[data-reveal] .sp-service__media,
.js .sp-other .sp-other__media { clip-path: inset(0 0 100% 0 round 14px); transition: clip-path 900ms var(--ease-in-out); transition-delay: calc(80ms + var(--i, 0) * 60ms); }
.js .sp-service.is-in .sp-service__media,
.js .is-in .sp-other__media { clip-path: inset(0 0 0 0 round 14px); }
@media (prefers-reduced-motion: reduce) {
  .js .sp-service[data-reveal] .sp-service__media, .js .sp-other .sp-other__media { clip-path: none; transition: none; }
}

/* Images: shorter wipe-in so loaded photos show sooner */
.js .sp-card[data-reveal] .sp-card__media,
.js .sp-bts,
.js .sp-pagehero__media img,
.js .sp-service[data-reveal] .sp-service__media,
.js .sp-other .sp-other__media {
  transition-duration: 600ms;
  transition-delay: calc(30ms + var(--i, 0) * 40ms);
}
.js .sp-card[data-reveal] .sp-card__media img,
.js .sp-bts img {
  transition: scale 800ms var(--ease-out), transform 450ms var(--ease-out);
  transition-delay: calc(30ms + var(--i, 0) * 40ms), 0ms;
}
.is-loading::before { animation-duration: 1s; }

/* ==========================================================================
   Services coverflow: cards on a snapping track, tilted by distance from centre
   ========================================================================== */
#services { overflow-x: clip; }
.sp-flow { --card-w: clamp(272px, 30vw, 420px); position: relative; }
.sp-services__list--cards.sp-flow__track {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  margin-inline: calc(50% - 50vw);
  padding: 24px calc(50vw - var(--card-w) / 2) 34px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  perspective: 1400px;
  cursor: grab;
  direction: ltr;
}
.sp-flow__track::-webkit-scrollbar { display: none; }
.sp-flow__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.sp-flow__track > .sp-service:nth-child(n) {
  flex: none;
  width: var(--card-w);
  scroll-snap-align: center;
  rotate: y var(--ry, 0deg);
  scale: var(--sc, 1);
  opacity: var(--op, 1);
  transition: transform 300ms var(--ease-out), background-color 300ms ease;
}
[dir="rtl"] .sp-flow__track > .sp-service { direction: rtl; }
.sp-flow__track .sp-service__media img { pointer-events: none; }
.sp-flow__ui { display: flex; align-items: center; justify-content: center; gap: 16px; }
.sp-flow__ui > button {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--glass-line); background: #fff; color: var(--text); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.sp-flow__ui > button:active { transform: scale(0.94); }
[dir="rtl"] .sp-flow__ui > button svg { transform: scaleX(-1); }
.sp-flow__dots { display: flex; gap: 6px; direction: ltr; }
.sp-flow__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(var(--accent-rgb), 0.25); transition: width 300ms var(--ease-out), background-color 300ms ease;
}
.sp-flow__dot.is-on { width: 26px; background: var(--teal); }
@media (max-width: 620px) { .sp-flow { --card-w: 82vw; } }
@media (prefers-reduced-motion: reduce) { .sp-flow__track > .sp-service:nth-child(n) { rotate: none; scale: none; opacity: 1; } }

/* ==========================================================================
   Studio: open editorial layout, text beside a tall field clip
   ========================================================================== */
.sp-tmarquee + .sp-studio { padding-top: clamp(24px, 3vw, 48px); }
.sp-studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.sp-studio__k {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal);
}
.sp-studio__k::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.sp-studio .sp-about__statement { margin-top: 18px; font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem); line-height: 1.08; font-weight: 600; }
.sp-studio .sp-about__body { margin-top: clamp(20px, 2.4vw, 32px); padding-top: 0; }
.sp-studio__media { position: relative; padding-bottom: 28px; }
.sp-studio .sp-bts { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-lg); box-shadow: 0 40px 80px -40px rgba(var(--shadow-rgb), 0.6); }
.sp-studio .sp-bts__label { top: 16px; bottom: auto; inset-inline-start: 16px; }
.sp-studio .sp-about__sign {
  position: absolute; bottom: 0; inset-inline-start: clamp(-28px, -2vw, -12px);
  margin: 0; padding: 14px 20px 14px 14px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.86); box-shadow: 0 20px 40px -24px rgba(var(--shadow-rgb), 0.55);
}
@media (max-width: 860px) {
  .sp-studio__grid { grid-template-columns: 1fr; }
  .sp-studio .sp-bts { aspect-ratio: 4 / 3; }
  .sp-studio .sp-about__sign { inset-inline-start: 12px; }
}

/* ==========================================================================
   Values as a bento grid with animated icons
   ========================================================================== */
.sp-values--bento {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: clamp(12px, 1.4vw, 18px);
}
.sp-values--bento .sp-value:nth-child(n) {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--glass-border); border-radius: var(--r-lg); overflow: hidden;
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease;
}
.sp-values--bento .sp-value--1 { grid-row: span 2; justify-content: flex-end; background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(var(--accent-rgb), 0.12)); }
.sp-values--bento .sp-value--2 { grid-column: span 2; }
.sp-values--bento .sp-value--1 .sp-value__icon { margin-bottom: auto; width: 112px; height: 112px; border-radius: 30px; }
.sp-values--bento .sp-value--1 h3 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }
.sp-values--bento .sp-value--media { padding: 0; border: 0; min-height: 220px; }
.sp-value--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-values--bento .sp-value h3 { margin-top: 8px; font-weight: 600; }
.sp-value__num { position: absolute; top: clamp(22px, 2.6vw, 36px); inset-inline-end: clamp(22px, 2.6vw, 36px); }
.sp-value__icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px;
  border-radius: 20px; background: var(--chip); color: #fff; box-shadow: 0 14px 28px -16px rgba(var(--accent-rgb), 0.8);
}
.sp-value__icon svg { width: 58%; height: 58%; overflow: visible; }
@media (hover: hover) and (pointer: fine) {
  .sp-values--bento .sp-value:not(.sp-value--media):hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(var(--shadow-rgb), 0.6); }
}
@media (max-width: 860px) {
  .sp-values--bento { grid-template-columns: 1fr 1fr; }
  .sp-values--bento .sp-value--1 { grid-row: auto; grid-column: span 2; }
  .sp-values--bento .sp-value--1 .sp-value__icon { width: 80px; height: 80px; margin-bottom: 20px; }
  .sp-values--bento .sp-value--2 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .sp-values--bento { grid-template-columns: 1fr; }
  .sp-values--bento .sp-value:nth-child(n) { grid-column: auto; }
}

/* Icon motion: loops only once the tile is revealed, paused offscreen by the reveal state. */
.sp-vicon__ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.sp-vicon__drop, .sp-vicon__frame, .sp-vicon__lens { transform-box: fill-box; transform-origin: center; }
.sp-vicon__tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .sp-vicon__ring { animation: sp-v-ring 2.4s var(--ease-out) infinite; }
.is-in .sp-vicon__ring--2 { animation-delay: 1.2s; }
.is-in .sp-vicon__drop { animation: sp-v-drop 2.4s var(--ease-in-out) infinite; }
.is-in .sp-vicon__frame { animation: sp-v-frame 3s var(--ease-in-out) infinite; }
.is-in .sp-vicon__lens { animation: sp-v-lens 3s var(--ease-in-out) infinite; }
.is-in .sp-vicon__rec { animation: sp-v-rec 1.2s steps(1) infinite; }
.is-in .sp-vicon__tick { animation: sp-v-tick 3.2s var(--ease-out) infinite; }
@keyframes sp-v-ring { 0% { opacity: 0.7; scale: 0.3; } 100% { opacity: 0; scale: 1.5; } }
@keyframes sp-v-drop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes sp-v-frame { 0%, 100% { scale: 1; } 50% { scale: 0.84; } }
@keyframes sp-v-lens { 0%, 100% { scale: 1; } 50% { scale: 0.7; } }
@keyframes sp-v-rec { 0% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes sp-v-tick { 0% { stroke-dashoffset: 1; } 35%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) {
  .is-in .sp-vicon__ring, .is-in .sp-vicon__drop, .is-in .sp-vicon__frame, .is-in .sp-vicon__lens, .is-in .sp-vicon__rec, .is-in .sp-vicon__tick { animation: none; }
  .sp-vicon__tick { stroke-dashoffset: 0; }
}

/* Hero kicker: the company line from the original site */
.ha__kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(12px, 1.6vw, 20px);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal);
}
.ha__kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
:root[lang="ar"] .ha__kicker { font-family: var(--font-body); letter-spacing: 0; font-size: 0.875rem; }

/* Work filters on phones: one centred row that scrolls sideways when it doesn't fit */
@media (max-width: 620px) {
  .sp-section__head > .sp-filters:nth-child(n) {
    justify-self: center;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border-radius: 999px;
  }
  .sp-filters::-webkit-scrollbar { display: none; }
  .sp-filters .sp-chip { flex: none; scroll-snap-align: center; white-space: nowrap; }
}

/* Breadcrumb links: a 40px tap target without changing the text layout */
.sp-crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
.sp-crumbs ol { row-gap: 0; }

/* ==========================================================================
   Unslop polish
   Direction: grounded, sunlit, attentive. Quiet chrome; the richness lives in
   the hero monitor and the services carousel. Signature: timecode-style mono
   for counters and meta only.
   ========================================================================== */

/* -- Color & surfaces ------------------------------------------------------ */
:root {
  --shadow-rgb: 18, 32, 34;
  --glass: #fff;
  --glass-strong: #fff;
  --glass-border: rgba(13, 43, 46, 0.08);
  --glass-shadow: 0 1px 2px rgba(18, 32, 34, 0.04), 0 8px 24px rgba(18, 32, 34, 0.05);
  --grad: var(--teal);
  --band: var(--teal);
  --chip: rgba(var(--accent-rgb), 0.1);
}
/* One calm tone shift from cool to sunlit white; no blobs, no grid. */
.sp-aurora { background: linear-gradient(180deg, #f4f8f8 0%, #f8f6f1 100%); }
.sp-aurora::before, .sp-aurora i { display: none; }

/* Cards are plain raised surfaces. Glass stays only where it floats over content. */
.sp-glass { background: #fff; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.sp-header__inner.sp-glass, .ha__monitor.sp-glass { border-color: rgba(255, 255, 255, 0.7); }
.sp-header__inner.sp-glass { background: rgba(255, 255, 255, 0.62); }
.sp-header.is-scrolled .sp-header__inner.sp-glass { background: rgba(255, 255, 255, 0.82); }
.ha__monitor.sp-glass { background: rgba(255, 255, 255, 0.6); }

/* Primary action: flat teal, neutral depth, darker on hover. */
.sp-btn--primary { background-image: none; box-shadow: 0 1px 2px rgba(18, 32, 34, 0.08); }
@media (hover: hover) and (pointer: fine) {
  .sp-btn--primary:hover { --btn-bg: var(--teal-deep); box-shadow: 0 4px 12px rgba(18, 32, 34, 0.12); }
}

/* Icon chips: a soft tint with a teal line icon instead of glowing teal tiles. */
.sp-service__icon, .sp-eng__icon, .sp-expert__icon, .sp-value__icon {
  background: var(--chip); color: var(--teal); box-shadow: none;
}
.sp-services__list--cards .sp-service__icon, .sp-other .sp-service__icon { background: #eef6f6; }
.sp-map__pin { background: var(--teal); }

/* Solid teal blocks, no gradients. */
.sp-ctaband__card, .sp-mv__card--teal { background: var(--teal); box-shadow: none; }
.sp-step__bar::before, [dir="rtl"] .sp-step__bar::before { background: var(--teal); }
.sp-values--bento .sp-value--1 { background: #fff; }
.sp-member__avatar { background: #eef6f6; }

/* Footer wordmark: one faint solid tint instead of gradient text. */
.sp-footer__word {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: rgba(var(--accent-rgb), 0.1); font-weight: 600;
}

/* -- Type ------------------------------------------------------------------ */
/* Labels in sentence case at normal tracking. Mono is kept for counters and timecode only. */
.ha__kicker, .sp-studio__k, .sp-mv__k, .sp-footer h2, .sp-contact__line small, .sp-pagehero__quick small {
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.sp-footer h2, .sp-contact__line small, .sp-pagehero__quick small { font-size: 0.8125rem; color: var(--text-3); }
.sp-mv__card--teal .sp-mv__k { color: rgba(255, 255, 255, 0.82); }
.sp-step__time, .sp-base__tag { letter-spacing: 0.02em; text-transform: none; }
.sp-step__time { font-size: 0.75rem; }
.sp-spec__num, .sp-member__avatar span { font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
:root:not([lang="ar"]) .sp-footer__word { font-weight: 600; }

/* Moving band: filled words, the even ones in the muted text role. */
.sp-tmarquee__track li:nth-child(even) span { color: var(--text-3); -webkit-text-stroke: 0; }

/* -- Motion ---------------------------------------------------------------- */
/* Headings: a shorter, lighter focus-pull. */
.js [data-reveal="focus"] {
  filter: blur(4px);
  transform: translateY(6px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out), filter 450ms var(--ease-out);
}
/* Value icons play their gesture once when the tile appears, then rest. */
.is-in .sp-vicon__ring, .is-in .sp-vicon__drop, .is-in .sp-vicon__frame,
.is-in .sp-vicon__lens, .is-in .sp-vicon__rec { animation-iteration-count: 1; }
.is-in .sp-vicon__tick { animation: sp-v-tick-once 700ms var(--ease-out) 300ms both; }
@keyframes sp-v-tick-once { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* The map marker is not live data: a still halo. */
.sp-base__pulse { animation: none; opacity: 0.4; }
/* Hovered cards change surface, they don't lift. */
@media (hover: hover) and (pointer: fine) {
  .sp-services__list--cards .sp-service:hover,
  .sp-values--bento .sp-value:not(.sp-value--media):hover { transform: none; }
  .sp-values--bento .sp-value:not(.sp-value--media):hover { box-shadow: 0 1px 2px rgba(18, 32, 34, 0.06), 0 12px 32px rgba(18, 32, 34, 0.08); }
}

/* Numbers band on phones: long figures like "+20 000 km" stay inside their cell. */
@media (max-width: 620px) {
  .sp-spec__num { font-size: 1.375rem; letter-spacing: -0.02em; }
  .sp-spec__icon { display: none; }
  .sp-spec__item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "desc" "cta"; }
}

/* ==========================================================================
   Hero carved corner and closing image block
   ========================================================================== */.ha__monitor { --carve-bg: #f4f8f8; --carve-r: 22px; }
.ha__ui .ha__rec { left: 0; right: auto; } .ha__ui .ha__tc { left: 64px; right: auto; }
.ha__carve { position: absolute; z-index: 5; top: 0; right: 0; padding: 0 0 12px 12px; background: var(--carve-bg); border-bottom-left-radius: var(--carve-r); }
.ha__carve::before, .ha__carve::after { content: ""; position: absolute; width: var(--carve-r); height: var(--carve-r); background: radial-gradient(circle at 0 100%, transparent calc(var(--carve-r) - .5px), var(--carve-bg) var(--carve-r)); pointer-events: none; }
.ha__carve::before { top: 0; left: calc(var(--carve-r) * -1); }
.ha__carve::after { right: 0; bottom: calc(var(--carve-r) * -1); }
.ha__carve a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 14px; background: #fff; border: 1px solid var(--glass-border); color: var(--teal); font-size: .9375rem; font-weight: 500; text-decoration: none; }
[dir="rtl"] .ha__ui .ha__rec { left: auto; right: 0; } [dir="rtl"] .ha__ui .ha__tc { left: auto; right: 64px; }
[dir="rtl"] .ha__carve { right: auto; left: 0; padding: 0 12px 12px 0; border-bottom-left-radius: 0; border-bottom-right-radius: var(--carve-r); }
[dir="rtl"] .ha__carve::before { left: auto; right: calc(var(--carve-r) * -1); background: radial-gradient(circle at 100% 100%, transparent calc(var(--carve-r) - .5px), var(--carve-bg) var(--carve-r)); }
[dir="rtl"] .ha__carve::after { right: auto; left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--carve-r) - .5px), var(--carve-bg) var(--carve-r)); }
[dir="rtl"] .ha__carve .sp-arrow { transform: scaleX(-1); }
.sp-closing { padding-bottom: clamp(48px, 6vw, 96px); }
.sp-closing__card { position: relative; display: grid; align-content: center; justify-items: start; gap: 16px; min-height: clamp(400px, 38vw, 560px); padding: clamp(24px, 5vw, 72px); border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; }
.sp-closing__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sp-closing__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 25, 28, .78) 0%, rgba(8, 25, 28, .42) 48%, rgba(8, 25, 28, .05) 82%); }
[dir="rtl"] .sp-closing__card::after { background: linear-gradient(270deg, rgba(8, 25, 28, .78) 0%, rgba(8, 25, 28, .42) 48%, rgba(8, 25, 28, .05) 82%); }
.sp-closing__card h2 { max-width: 14ch; font-family: var(--font-display); font-size: var(--step-h2); font-weight: 600; line-height: 1.06; letter-spacing: -.03em; }
.sp-closing__card h2 em { font-style: normal; color: var(--on-accent-soft); }
.sp-closing__card p { max-width: 46ch; color: rgba(255, 255, 255, .9); }
:root[lang="ar"] .sp-closing__card h2 { letter-spacing: 0; line-height: 1.4; }
@media (max-width: 760px) {
  .sp-closing__card { align-content: end; min-height: 520px; }
  .sp-closing__card::after, [dir="rtl"] .sp-closing__card::after { background: linear-gradient(0deg, rgba(8, 25, 28, .84) 0%, rgba(8, 25, 28, .5) 52%, rgba(8, 25, 28, .05) 88%); }
}

/* Language switcher: flags. The language name stays available to screen readers. */
.sp-flag { display: block; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(18, 32, 34, 0.14); }
.sp-langs a:not([aria-current="true"]) .sp-flag { opacity: 0.88; transition: opacity 160ms ease; }
@media (hover: hover) and (pointer: fine) { .sp-langs a:hover .sp-flag { opacity: 1; } }

/* WordPress: ordinary pages and posts written in the editor */
.sp-prose { padding-top: calc(var(--header-h) + var(--header-top) + 48px); }
.sp-prose .sp-container { max-width: 760px; }
.sp-prose h1 { margin-bottom: 24px; }
.sp-prose :where(p, ul, ol) { margin-block: 0 16px; color: var(--text-2); }
.sp-prose a { color: var(--teal); }

/* WordPress + Elementor: clear the floating header above page content */
.sp-header-spacer { height: calc(var(--header-h) + var(--header-top) + 16px); }
.elementor-page .sp-prose .sp-container { max-width: none; padding-inline: 0; }
.elementor-page .sp-prose .wp-block-post-title { display: none; }

/* WordPress: logged-in admin bar sits above the floating header */
.admin-bar .sp-header { top: calc(var(--header-top) + var(--wp-admin--admin-bar--height, 32px)); }
.admin-bar { scroll-padding-top: calc(var(--header-h) + var(--header-top) + 52px); }