/* ==========================================================================
   CONCEPT 3 — MERIDIAN
   Editorial luxury system. Deep teal × paper, one obsessive motif: the facet.
   ========================================================================== */

body { background: var(--c-paper); color: var(--t-body-on-light); }

/* ---------- Preloader --------------------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-content: center;
  gap: var(--sp-4);
  justify-items: center;
  background: var(--c-teal-deep);
  transition: opacity 0.6s var(--ease-out), visibility 0s 0.6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__icon { inline-size: clamp(5rem, 10vw, 8rem); }
.preloader__icon svg { inline-size: 100%; block-size: auto; }
.preloader__icon .facet {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out-expo);
}
.preloader.is-assembling .facet { opacity: 1; transform: scale(1); }
.preloader.is-assembling .facet--purple { transition-delay: 0.05s; }
.preloader.is-assembling .facet--indigo { transition-delay: 0.15s; }
.preloader.is-assembling .facet--sage   { transition-delay: 0.25s; }
.preloader.is-assembling .facet--aqua   { transition-delay: 0.35s; }
.preloader.is-assembling .facet--teal   { transition-delay: 0.45s; }
.preloader.is-assembling .facet--slate  { transition-delay: 0.55s; }
.preloader__word {
  color: var(--t-strong-on-dark);
  font-size: var(--fs-small);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 0.7s;
}
.preloader.is-assembling .preloader__word { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
}
.is-static .preloader, .no-js .preloader { display: none; }

/* ---------- Header ------------------------------------------------------ */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  padding-block: var(--sp-3);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.site-header.has-scrolled {
  background: rgba(242, 243, 241, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--c-mist);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); position: relative; z-index: 2; }
/* white lockup over the teal hero; full-color lockup on the scrolled
   paper-glass bar (color logo belongs on light grounds) */
.site-header__brand { display: block; }
.site-header__brand img { inline-size: clamp(8rem, 11vw, 9.5rem); block-size: auto; }
.site-header__logo--color { display: none; }
.has-scrolled .site-header__logo--light { display: none; }
.has-scrolled .site-header__logo--color { display: block; }

/* over the teal hero, links are light; after scroll they invert */
.site-nav ul { display: flex; gap: var(--sp-4); }
.site-nav a {
  position: relative;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--t-strong-on-dark);
  padding-block: 0.4em;
}
.has-scrolled .site-nav a { color: var(--c-charcoal); }
.site-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: var(--c-aqua);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.45s var(--ease-out);
}
[dir="rtl"] .site-nav a::after { transform-origin: right; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { scale: 1 1; }

.site-header__actions { display: flex; gap: var(--sp-3); align-items: center; }

.burger { display: none; flex-direction: column; gap: 6px; inline-size: 2.75rem; block-size: 2.75rem; justify-content: center; }
.burger span { display: block; block-size: 2px; inline-size: 1.6rem; margin-inline: auto; background: var(--t-strong-on-dark); transition: rotate var(--dur-fast), translate var(--dur-fast); }
.has-scrolled .burger span { background: var(--c-charcoal); }
.burger[aria-expanded="true"] span:first-child { translate: 0 4px; rotate: 30deg; }
.burger[aria-expanded="true"] span:last-child { translate: 0 -4px; rotate: -30deg; }

/* While the menu is visible the header must NOT carry backdrop-filter:
   a backdrop-filter ancestor becomes the containing block for fixed
   descendants, which would trap this full-screen overlay inside the
   header bar once .has-scrolled adds the glass blur. The .menu-open
   class (set by main.js for the menu's whole visible lifetime) strips
   the glass state and restores the over-dark logo and burger colors. */
.site-header.menu-open,
.site-header.has-scrolled.menu-open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.site-header.menu-open .site-header__logo--color { display: none; }
.site-header.menu-open .site-header__logo--light { display: block; }
.site-header.menu-open .burger span { background: var(--t-strong-on-dark); }

.m-menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  background: var(--c-teal-deep);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.m-menu[hidden] { display: none; }
.m-menu.is-open { opacity: 1; }
.m-menu ul { display: grid; gap: var(--sp-4); text-align: center; }
.m-menu a { color: var(--t-strong-on-dark); font-size: var(--fs-h3); }

@media (max-width: 63.9rem) {
  .site-nav, .site-header__actions .btn { display: none; }
  .burger { display: flex; }
}

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  background:
    linear-gradient(to bottom, rgba(244, 245, 243, 0.05), transparent 14%),
    radial-gradient(125% 105% at 50% 42%, transparent 52%, rgba(12, 30, 34, 0.26) 100%),
    radial-gradient(90rem 50rem at 110% 120%, rgba(125, 191, 187, 0.14), transparent 55%),
    var(--c-teal-deep);
  color: var(--t-body-on-dark);
  overflow: clip;
}
.hero__mesh, .hero__fallback {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}
.hero__fallback {
  display: none;
  background: url("../_shared/brand/escan-pattern.svg") center / cover no-repeat;
  opacity: 0.1;
  filter: invert(1);
}
.no-webgl .hero__fallback, .is-static .hero__fallback { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero__mesh { display: none; }
  .hero__fallback { display: block; }
}

/* Split-screen: type over the gridshell left, edge-to-edge imagery right */
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: stretch;
  inline-size: 100%;
  min-block-size: 100svh;
}

.hero__copy {
  align-self: center;
  /* leading edge tracks the centered container's grid line on wide screens */
  padding: 9rem var(--sp-6) 4rem
    max(var(--sp-gutter), calc((100vw - var(--content-max)) / 2 + var(--sp-gutter)));
  max-inline-size: calc(46rem + max(0px, (100vw - var(--content-max)) / 2));
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid rgba(244, 245, 243, 0.18);
}
.hero__meta li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-faint-on-dark);
}
.hero__meta strong {
  font-size: 1.35rem;
  font-weight: var(--fw-bold);
  font-stretch: 82%;
  letter-spacing: 0;
  color: var(--c-aqua);
  font-variant-numeric: tabular-nums;
}

.hero .kicker { color: var(--c-aqua); }
.hero__title { display: grid; margin-block: var(--sp-4); text-transform: uppercase; line-height: 0.98; }
.hero__title-thin {
  font-size: clamp(2.5rem, 1rem + 5.2vw, 5.75rem);
  font-weight: var(--fw-light);
  letter-spacing: 0.02em;
  color: var(--t-strong-on-dark);
}
.hero__title-bold {
  font-size: clamp(3rem, 1rem + 6.8vw, 7.5rem);
  font-weight: var(--fw-bold);
  font-stretch: 78%;
  color: var(--c-aqua);
}
.hero__lead { max-inline-size: 30rem; font-size: var(--fs-lead); }
.hero__actions { display: flex; gap: var(--sp-3); margin-block-start: var(--sp-5); flex-wrap: wrap; }

/* full-height media panel with the brand's 60° angled cut on its leading edge */
.hero__showcase {
  position: relative;
  block-size: 100%;
  min-block-size: 100svh;
  background: var(--c-teal-deep);
  clip-path: polygon(clamp(3rem, 6vw, 6rem) 0, 100% 0, 100% 100%, 0 100%);
}
.hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* teal wash keeps the film inside the section's world */
.hero__showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(36, 84, 91, 0.5), rgba(36, 84, 91, 0.12) 45%, rgba(30, 31, 33, 0.34) 100%);
}

/* sector labels — HTML, not baked into the film, so they stay translatable */
.hero__sectors {
  position: absolute;
  z-index: 2;
  inset-block-end: clamp(1.5rem, 4vw, 3rem);
  inset-inline-start: clamp(2rem, 5vw, 4rem);
  display: grid;
  gap: 0.65rem;
}
.hero__sectors li {
  display: flex;
  align-items: baseline;
  gap: 0.85em;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 245, 243, 0.5);
  transition: color 0.5s var(--ease-out), translate 0.5s var(--ease-out);
}
.hero__sectors li i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: rgba(125, 191, 187, 0.55);
  transition: color 0.5s var(--ease-out);
}
.hero__sectors li span { position: relative; padding-block-end: 0.35em; }
.hero__sectors li span::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--c-aqua);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.6s var(--ease-out);
}
[dir="rtl"] .hero__sectors li span::after { transform-origin: right; }
.hero__sectors li.is-active {
  color: var(--t-strong-on-dark);
  translate: 0.35rem 0;
}
.hero__sectors li.is-active i { color: var(--c-aqua); }
.hero__sectors li.is-active span::after { scale: 1 1; }
[dir="rtl"] .hero__sectors li.is-active { translate: -0.35rem 0; }

@media (max-width: 63.9rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { padding: 8rem var(--sp-gutter) 3rem; max-inline-size: none; }
  .hero__showcase {
    min-block-size: 55svh;
    clip-path: polygon(0 clamp(1.5rem, 6vw, 3rem), 100% 0, 100% 100%, 0 100%);
  }
}

/* ---------- Stat strip -------------------------------------------------- */

/* ---------- Figures — concept 2's giant animated number treatment -------- */

.figures {
  background:
    linear-gradient(to bottom, rgba(244, 245, 243, 0.05), transparent 14%),
    radial-gradient(125% 105% at 50% 42%, transparent 52%, rgba(12, 30, 34, 0.26) 100%), linear-gradient(160deg, #24262A 0%, var(--c-charcoal) 55%, #202226 100%);
  color: var(--t-body-on-dark);
  padding-block: var(--sp-section);
  text-align: center;
}
.figures .kicker { color: var(--c-aqua); justify-content: center; }
.figures__hero {
  font-size: clamp(5.5rem, 3rem + 17vw, 18rem);
  font-weight: var(--fw-bold);
  font-stretch: 76%;
  line-height: 0.84;
  letter-spacing: -0.02em;
  color: var(--c-aqua);
  font-variant-numeric: tabular-nums;
  margin-block: var(--sp-4) 0;
  max-inline-size: none;
}
.figures__caption {
  margin: var(--sp-3) auto 0;
  font-size: var(--fs-lead);
  color: var(--t-strong-on-dark);
  max-inline-size: 34rem;
}
.figures__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-5);
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid rgba(244, 245, 243, 0.16);
  text-align: start;
}
.figure { display: grid; gap: var(--sp-2); align-content: start; }
.figure strong {
  font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.2rem);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--t-strong-on-dark);
  font-variant-numeric: tabular-nums;
}
.figure > span { font-size: var(--fs-small); max-inline-size: 20rem; }

/* ---------- Manifesto (line-by-line light-up, from concept 2) ----------- */

.manifesto {
  background:
    linear-gradient(to bottom, rgba(244, 245, 243, 0.05), transparent 14%),
    radial-gradient(125% 105% at 50% 42%, transparent 52%, rgba(12, 30, 34, 0.26) 100%), var(--c-teal-deep);
  color: var(--t-body-on-dark);
  padding-block: var(--sp-section);
  position: relative;
}
.manifesto .kicker { color: var(--c-aqua); }
.manifesto__text {
  margin-block-start: var(--sp-4);
  font-size: clamp(1.5rem, 0.9rem + 2.8vw, 3.25rem);
  font-weight: var(--fw-light);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-inline-size: 62rem;
  color: rgba(244, 245, 243, 0.92);
}
.manifesto__text .st-line { display: block; }

/* ---------- Solutions --------------------------------------------------- */

.sol { background: linear-gradient(180deg, #F5F6F4 0%, #ECEFEA 100%); }
.products { background: linear-gradient(180deg, #ECEFEA 0%, #F5F6F4 100%); }
.partners {
  background: linear-gradient(180deg, #F5F6F4 0%, #EDEFEB 100%);
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.sol__grid {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-6);
  position: relative;
}
/* heading column rides along while the rows scroll — no dead space below */
.sol__intro { position: sticky; inset-block-start: 8.5rem; align-self: start; }
.sol__intro h2 { font-size: var(--fs-h2); margin-block: var(--sp-3) var(--sp-4); }
@media (max-width: 63.9rem) {
  .sol__intro { position: static; }
}

.sol__list { grid-column: 2; display: grid; }

.sol__item a {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) clamp(8rem, 12vw, 12rem);
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-block-start: 1px solid rgba(43, 43, 43, 0.14);
  position: relative;
}
.sol__item:last-child a { border-block-end: 1px solid rgba(43, 43, 43, 0.14); }
.sol__item a::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: linear-gradient(90deg, var(--c-teal), var(--c-aqua));
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.6s var(--ease-out);
}
[dir="rtl"] .sol__item a::before { transform-origin: right; }
.sol__item a:hover::before, .sol__item a:focus-visible::before { scale: 1 1; }

.sol__idx {
  font-size: 2.6rem;
  font-weight: var(--fw-bold);
  font-stretch: 78%;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(43, 43, 43, 0.28);
  transition: -webkit-text-stroke-color var(--dur-fast);
}
.sol__item a:hover .sol__idx { -webkit-text-stroke-color: var(--c-teal); }

.sol__body { display: grid; gap: var(--sp-3); min-inline-size: 0; }
.sol__name {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: var(--fw-medium);
  color: var(--t-strong-on-light);
  transition: color var(--dur-fast);
}
.sol__item a:hover .sol__name, .sol__item a:focus-visible .sol__name { color: var(--c-teal); }
.sol__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sol__tags i {
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-body-on-light);
  border: 1px solid rgba(43, 43, 43, 0.18);
  border-radius: var(--radius-pill);
  padding: 0.35em 0.9em;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.sol__item a:hover .sol__tags i { border-color: rgba(54, 121, 130, 0.5); color: var(--c-teal); }

.sol__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%);
}
.sol__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--ease-out);
}
.sol__item a:hover .sol__thumb img { scale: 1.07; }

@media (max-width: 63.9rem) {
  .sol__grid { grid-template-columns: 1fr; }
  .sol__list { grid-column: auto; }
  .sol__item a { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .sol__thumb { display: none; }
}

/* ---------- Why ESCAN — pinned horizontal rail (from concept 2) --------- */

.why {
  background:
    linear-gradient(to bottom, rgba(244, 245, 243, 0.05), transparent 14%),
    radial-gradient(125% 105% at 50% 42%, transparent 52%, rgba(12, 30, 34, 0.26) 100%), linear-gradient(180deg, #EAEDE8 0%, #F3F5F1 45%, #EBEEE9 100%);
  color: var(--t-body-on-light);
  overflow: clip;
}
.why__pin { padding-block: var(--sp-section); }
.why__head { margin-block-end: var(--sp-6); }
.why__head .kicker { color: var(--c-teal); }
.why__head h2 { color: var(--t-strong-on-light); margin-block-start: var(--sp-3); }

.why__rail {
  display: flex;
  gap: var(--sp-4);
  padding-inline: max(var(--sp-gutter), calc((100vw - var(--content-max)) / 2 + var(--sp-gutter)));
  inline-size: max-content;
}
.why-card {
  --card-accent: var(--c-teal);
  position: relative;
  inline-size: clamp(18rem, 30vw, 26rem);
  padding: var(--sp-5);
  background: linear-gradient(170deg, #F6F8F4 0%, #EDF0EB 100%);
  border: 1px solid rgba(43, 43, 43, 0.09);
  border-block-start: 3px solid var(--card-accent);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  transition: translate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.why-card:hover {
  translate: 0 -0.35rem;
  box-shadow: 0 1px 2px rgba(14, 35, 45, 0.05), 0 24px 48px -18px rgba(36, 84, 91, 0.28);
}
.why-card:nth-child(1) { --card-accent: var(--c-purple); }
.why-card:nth-child(2) { --card-accent: var(--c-indigo); }
.why-card:nth-child(3) { --card-accent: var(--c-slate); }
.why-card:nth-child(4) { --card-accent: var(--c-teal); }
.why-card:nth-child(5) { --card-accent: var(--c-aqua); }
.why-card > span {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-4);
  font-size: 3.25rem;
  font-weight: var(--fw-bold);
  font-stretch: 78%;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(43, 43, 43, 0.2);
}
.why-card h3 { font-size: var(--fs-h3); color: var(--t-strong-on-light); max-inline-size: 78%; }
.why-card--cta {
  background: linear-gradient(160deg, var(--c-teal) 0%, var(--c-teal-deep) 100%);
  border-color: transparent;
  justify-items: start;
}
.why-card--cta h3 { color: var(--t-strong-on-dark); max-inline-size: none; }
.why :focus-visible { outline-color: var(--c-teal); }

@media (max-width: 63.9rem) {
  .why__rail { flex-direction: column; inline-size: auto; padding-inline: var(--sp-gutter); }
  .why-card { inline-size: 100%; }
}
.is-static .why__rail { flex-wrap: wrap; inline-size: auto; }

/* ---------- Flagship projects (display from concept 1) ------------------ */

.projects { background: linear-gradient(180deg, #F3F5F1 0%, #E9ECE7 100%); }
.projects .kicker { color: var(--c-teal); }
.projects__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
}
.projects__head h2 { color: var(--t-strong-on-light); margin-block-start: var(--sp-3); }

.projects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--sp-5) var(--sp-4);
}
.project-card {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  min-inline-size: 0;
}

.project-card__media {
  position: relative;
  block-size: clamp(11rem, 15vw, 13.5rem);
  overflow: hidden;
  border-radius: var(--radius-m);
  isolation: isolate;
}
.project-card__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.02);
  transition: scale 1.4s var(--ease-out), filter 0.6s var(--ease-out);
}
.project-card:hover .project-card__media img,
.project-card:focus-visible .project-card__media img { scale: 1.06; filter: saturate(1.02) contrast(1.02); }
.project-card__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--c-teal), var(--c-aqua));
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.6s var(--ease-out);
  z-index: 1;
}
[dir="rtl"] .project-card__media::after { transform-origin: right; }
.project-card:hover .project-card__media::after { scale: 1 1; }
.project-card__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.project-card__caption h3 {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  color: var(--t-strong-on-light);
}
.project-card__caption p { font-size: var(--fs-small); color: var(--t-faint-on-light); }
.project-card .arrow { color: var(--c-teal); flex: none; }
.project-card__desc {
  font-size: var(--fs-small);
  color: var(--t-body-on-light);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Products ---------------------------------------------------- */

.products__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
}
.product { position: relative; display: block; min-block-size: 24rem; overflow: hidden; background: var(--c-teal-deep); }
.product img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 72%;
  filter: brightness(0.86) saturate(0.9) contrast(1.05);
  transition: scale 1.2s var(--ease-out), filter 0.5s var(--ease-out);
}
.product:hover img { scale: 1.045; filter: brightness(0.95) saturate(0.95) contrast(1.05); }
.product::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(20, 58, 64, 0.97) 0%,
      rgba(20, 58, 64, 0.88) 32%,
      rgba(24, 66, 72, 0.55) 58%,
      rgba(30, 74, 81, 0.22) 80%,
      rgba(30, 74, 81, 0.1) 100%);
}
.product__body { position: absolute; inset-block-end: 0; z-index: 1; padding: var(--sp-5); color: var(--t-body-on-dark); }
.product__body h3 { color: var(--t-strong-on-dark); font-size: var(--fs-h3); }
.product__body h3 span { color: var(--c-aqua); font-weight: var(--fw-light); }
.product__body p { margin-block-start: var(--sp-2); max-inline-size: 26rem; }

/* ---------- Partners double marquee ------------------------------------- */

.partners { padding-block: var(--sp-section); overflow: hidden; }
.partners .kicker { margin-block-end: var(--sp-5); }
.partners .marquee { padding-block: var(--sp-4); }
.partners__row {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.6vw, 0.6rem);
  padding-inline-end: clamp(0.25rem, 0.6vw, 0.6rem); /* completes the loop period exactly */
  inline-size: max-content;
}
/* every logo ships on a uniform 3:1 canvas, pre-normalized by optical area,
   so a wide wordmark and a square mark carry equal weight on the wall */
.partner {
  display: grid;
  place-items: center;
  inline-size: clamp(8.5rem, 11.5vw, 11rem);
  aspect-ratio: 900 / 260;
  flex: none;
}
.partner img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  opacity: 0.78;
  filter: grayscale(1) contrast(1.05);
  transition: opacity var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.partner:hover img { opacity: 1; filter: grayscale(0); }
/* fallback if a logo file is ever missing */
.partner span { display: none; }
.partner.is-text span {
  display: block;
  font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.4rem);
  font-weight: var(--fw-light);
  white-space: nowrap;
  color: var(--t-faint-on-light);
  transition: color var(--dur-fast) var(--ease-out);
}
.partner.is-text:hover span { color: var(--c-teal); }

/* ---------- Footer ------------------------------------------------------ */

.site-footer { background:
    linear-gradient(to bottom, rgba(244, 245, 243, 0.05), transparent 14%),
    radial-gradient(125% 105% at 50% 42%, transparent 52%, rgba(12, 30, 34, 0.26) 100%), var(--c-teal-deep); color: var(--t-body-on-dark); }
.mega-cta { display: grid; gap: var(--sp-3); padding-block: var(--sp-7); border-block-end: 1px solid rgba(244, 245, 243, 0.18); }
.mega-cta__kicker { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-aqua); }
.mega-cta__row { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.mega-cta__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  color: var(--t-strong-on-dark);
  transition: color var(--dur-fast);
}
.mega-cta__badge {
  display: grid;
  place-items: center;
  inline-size: clamp(3.5rem, 6vw, 5rem);
  aspect-ratio: 1;
  rotate: 45deg;
  border: 1px solid rgba(244, 245, 243, 0.4);
  transition: background var(--dur-fast), border-color var(--dur-fast), rotate 0.5s var(--ease-out);
}
.mega-cta__badge svg { rotate: -45deg; }
.mega-cta:hover .mega-cta__title { color: var(--c-aqua); }
.mega-cta:hover .mega-cta__badge { background: var(--c-aqua); border-color: var(--c-aqua); color: var(--c-ink); rotate: 90deg; }
.mega-cta:hover .mega-cta__badge svg { rotate: -90deg; }

.site-footer__grid {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
  align-items: start;
}
.site-footer__logo { inline-size: 6rem; block-size: auto; }
.site-footer nav ul { display: grid; gap: var(--sp-2); }
.site-footer a:hover { color: var(--c-aqua); }
.site-footer address { font-style: normal; }
.site-footer__social { display: grid; gap: var(--sp-2); justify-items: start; }
.site-footer__social a { font-size: var(--fs-small); border: 1px solid rgba(244, 245, 243, 0.25); border-radius: var(--radius-pill); padding: 0.35em 1em; }
.site-footer__social a:hover { border-color: var(--c-aqua); }
.site-footer__legal { padding-block: var(--sp-4); border-block-start: 1px solid rgba(244, 245, 243, 0.18); font-size: var(--fs-small); color: var(--t-faint-on-dark); }

@media (max-width: 63.9rem) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 47.9rem) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PREMIUM INTERFACE PASS — craft details
   ========================================================================== */

::selection { background: rgba(125, 191, 187, 0.4); }

/* ---- Typographic refinement: tighter display tracking, larger section
   headings, disciplined measures ---- */
h1, h2, h3 { letter-spacing: -0.018em; }
.kicker { letter-spacing: 0.22em; }
main section h2 {
  font-size: clamp(2.1rem, 1.15rem + 3vw, 4.1rem);
  line-height: 1.06;
}
.hero__lead, .sol__intro > p:not(.kicker), .services__intro > p:not(.kicker) {
  line-height: 1.75;
}

/* ---- Buttons: jewelry pass — taller, letterspaced, gradient face,
   tinted lift ---- */
.btn {
  min-block-size: 3.1rem;
  padding-block: 0;
  padding-inline: 1.9em;
  letter-spacing: 0.12em;
  gap: 0.9em;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              translate var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { translate: 0 -2px; }
.btn:active { translate: 0 0; }
.btn--solid {
  background: linear-gradient(135deg, #93D3CD 0%, var(--c-aqua) 45%, #63AFAa 100%);
  border-color: transparent;
  box-shadow: 0 12px 28px -12px rgba(54, 121, 130, 0.55);
}
.btn--solid:hover { box-shadow: 0 18px 36px -14px rgba(54, 121, 130, 0.6); }

/* ---- Header: couture nav ---- */
.site-nav ul { gap: var(--sp-5); }
.site-nav a {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-header__actions .btn {
  min-block-size: 2.7rem;
  padding-inline: 1.6em;
  font-size: 0.72rem;
}

/* ---- Materials: layered, brand-tinted shadows; hairline edges ---- */

/* ---- Imagery tone discipline: slightly muted at rest, alive on hover ---- */
.sol__thumb img, .project-card__media img, .product img {
  filter: saturate(0.86) contrast(1.02);
}
.sol__item a:hover .sol__thumb img,
.project-card:hover .project-card__media img,
.product:hover img { filter: saturate(1.02) contrast(1.02); }

/* ---- Custom cursor: dot + reactive ring (fine pointers only) ---- */
.cursor-dot, .cursor-ring {
  position: fixed;
  /* physical, not logical: the JS positions these from clientX/clientY, which
     are always measured from the top-left — inset-inline-start would anchor
     them to the right edge under dir="rtl" and shift the cursor off-screen */
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  translate: -50% -50%;
  opacity: 0;
}
html.has-cursor .cursor-dot, html.has-cursor .cursor-ring { opacity: 1; }
.cursor-dot {
  inline-size: 6px;
  block-size: 6px;
  background: var(--c-aqua);
}
.cursor-ring {
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid rgba(125, 191, 187, 0.5);
  transition: inline-size 0.25s var(--ease-out), block-size 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.cursor-ring.is-active {
  inline-size: 58px;
  block-size: 58px;
  border-color: rgba(125, 191, 187, 0.95);
  background: rgba(125, 191, 187, 0.08);
}
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }

/* ==========================================================================
   BRAND SURFACE SYSTEM  —  premium revision
   No white, no near-black. Every surface is a brand hue, but held at LOW
   CHROMA and deep value: petrol, slate-indigo and aubergine for the colour
   sections; warm sage/mist stone for the light ones. Adjacent sections share
   hue so the page reads as one graded atmosphere rather than bands of colour,
   and each surface carries an internal radial light so it is never flat.
   ========================================================================== */

:root {
  /* colour surfaces — deep, desaturated, light type */
  --s-petrol-deep: #1E4A51;
  --s-petrol:      #275C63;
  --s-indigo:      #39405A;
  --s-plum:        #3F3A55;
  /* light surfaces — warm stone with a sage/mist cast, charcoal type */
  --s-stone-1:     #BCD1C2;   /* Pale Sage, lightened */
  --s-stone-2:     #B4CCBD;
  --s-mist-1:      #B4D2CE;   /* Aqua Mist, lightened */
  --s-mist-2:      #AACDC8;
}

body { background: var(--s-stone-1); }

/* ---- colour surfaces: hue flows teal → indigo → aubergine → teal ---- */
.hero {
  background:
    radial-gradient(80rem 46rem at 22% 18%, rgba(125, 191, 187, 0.14), transparent 62%),
    linear-gradient(168deg, var(--s-petrol-deep) 0%, #23545C 55%, #26545F 100%);
}
.figures {
  background:
    radial-gradient(70rem 40rem at 50% 8%, rgba(125, 191, 187, 0.1), transparent 62%),
    linear-gradient(168deg, #2B4A57 0%, var(--s-indigo) 62%, #3A3E58 100%);
}
.manifesto {
  background:
    radial-gradient(72rem 42rem at 82% 20%, rgba(169, 203, 188, 0.08), transparent 62%),
    linear-gradient(168deg, var(--s-indigo) 0%, var(--s-plum) 64%, #3B3650 100%);
}
.why {
  background:
    radial-gradient(78rem 44rem at 18% 12%, rgba(125, 191, 187, 0.12), transparent 62%),
    linear-gradient(170deg, #2C5F66 0%, var(--s-petrol) 55%, #23545B 100%);
}
.site-footer {
  background:
    radial-gradient(70rem 40rem at 20% 100%, rgba(125, 191, 187, 0.12), transparent 62%),
    linear-gradient(168deg, #275C63 0%, var(--s-petrol-deep) 100%);
}

/* ---- stone surfaces: soft, warm, low chroma ---- */
.sol {
  background:
    linear-gradient(to bottom, rgba(244, 245, 243, 0.05), transparent 14%),
    radial-gradient(60rem 34rem at 78% 6%, rgba(125, 191, 187, 0.16), transparent 64%),
    linear-gradient(180deg, var(--s-mist-1) 0%, var(--s-mist-2) 100%);
}
.products {
  background:
    radial-gradient(58rem 32rem at 16% 10%, rgba(169, 203, 188, 0.2), transparent 64%),
    linear-gradient(180deg, var(--s-mist-1) 0%, var(--s-mist-2) 100%);
}
/* partners now sits on the hero's deep petrol surface */
.partners {
  background:
    linear-gradient(to bottom, rgba(244, 245, 243, 0.05), transparent 14%),
    radial-gradient(125% 105% at 50% 42%, transparent 52%, rgba(12, 30, 34, 0.26) 100%),
    radial-gradient(80rem 46rem at 22% 18%, rgba(125, 191, 187, 0.14), transparent 62%),
    linear-gradient(168deg, var(--s-petrol-deep) 0%, #23545C 55%, #26545F 100%);
}
.projects {
  background:
    radial-gradient(60rem 34rem at 12% 88%, rgba(169, 203, 188, 0.18), transparent 64%),
    linear-gradient(180deg, var(--s-mist-2) 0%, var(--s-mist-1) 100%);
}

/* Why ESCAN carries light type on petrol; its cards stay stone so they lift */
.why__head .kicker { color: var(--c-aqua); }
.why__head h2 { color: var(--t-strong-on-dark); }
.why-card {
  background: linear-gradient(170deg, #C4D6C9 0%, #B2C7B9 100%);
  border-color: rgba(43, 43, 43, 0.07);
  box-shadow: 0 1px 2px rgba(20, 45, 50, 0.05), 0 22px 44px -20px rgba(20, 45, 50, 0.28);
}
.why-card > span { -webkit-text-stroke-color: rgba(43, 43, 43, 0.22); }
.why-card--cta {
  background: linear-gradient(160deg, #2F6A72 0%, #1F4A51 100%);
  border-color: rgba(125, 191, 187, 0.35);
  box-shadow: 0 1px 2px rgba(20, 45, 50, 0.08), 0 26px 52px -20px rgba(20, 45, 50, 0.45);
}
.why-card--cta h3 { color: var(--t-strong-on-dark); }
.why :focus-visible { outline-color: var(--c-aqua); }

/* header glass takes the stone tint */
.site-header.has-scrolled {
  background: rgba(188, 209, 194, 0.93);
  box-shadow: 0 1px 0 rgba(43, 43, 43, 0.08);
}

.preloader {
  background:
    radial-gradient(60rem 36rem at 50% 40%, rgba(125, 191, 187, 0.12), transparent 62%),
    linear-gradient(168deg, var(--s-petrol-deep) 0%, #23545C 100%);
}

/* on the sage/aqua surfaces the accent must deepen to hold contrast */
.sol .kicker, .products .kicker, .projects .kicker { color: #1E4A51; }
.partners .kicker { color: var(--c-aqua); }
.sol__idx { -webkit-text-stroke-color: rgba(30, 74, 81, 0.4); }
.sol__item a { border-block-start-color: rgba(30, 74, 81, 0.2); }
.sol__item:last-child a { border-block-end-color: rgba(30, 74, 81, 0.2); }
.sol__tags i { border-color: rgba(30, 74, 81, 0.28); color: #24545B; }
.projects__head h2, .products h2, .sol__intro h2 { color: #21343A; }

/* Logos read light on petrol via LUMINANCE inversion, not brightness(0):
   flattening would turn filled marks (Aramco's block, the Starbucks disc)
   into solid white blobs, whereas inverting keeps their internal drawing. */
.partner img {
  filter: none;          /* colour is baked per-logo now — never desaturate here */
  opacity: 0.9;
}
.partner:hover img { filter: none; opacity: 1; }
.partner.is-text span { color: rgba(244, 245, 243, 0.6); }
.partner.is-text:hover span { color: var(--c-aqua); }

/* scrolled header: white glass, lightly transparent */
.site-header.has-scrolled {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(43, 43, 43, 0.08), 0 10px 30px -20px rgba(20, 45, 50, 0.5);
}
.partners { padding-block: clamp(3rem, 5vw, 5rem); }

/* ==========================================================================
   CLIENT CONTENT UPDATE (web content doc)
   ========================================================================== */

/* values row under the 48+ figure */
/* the values band's own heading: the hairline that used to open the row now
   sits above this label, so the order reads 48+ → hairline → OUR VALUES → cards */
.figures .figures__values-title {
  display: flex;
  justify-content: flex-start;
  inline-size: 100%;
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid rgba(244, 245, 243, 0.16);
  text-align: start;
}
.figures__values-title + .figures__row--values {
  margin-block-start: var(--sp-4);
  padding-block-start: 0;
  border-block-start: 0;
}
.figures__row--values { text-align: start; }
.figures__row--values .figure strong {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: var(--fw-medium);
  font-stretch: 100%;
  letter-spacing: -0.01em;
}

/* second kicker inside the vision/mission section */
.manifesto__kicker-2 { margin-block-start: var(--sp-6); }

/* solution row descriptions */
.sol__desc {
  font-size: var(--fs-small);
  color: var(--t-body-on-light);
  max-inline-size: 34rem;
}

/* products intro + feature chips on the cards */
.products__intro { margin-block-start: var(--sp-4); max-inline-size: 38rem; }
.product__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block-start: var(--sp-3);
}
.product__tags i {
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 245, 243, 0.92);
  border: 1px solid rgba(244, 245, 243, 0.35);
  border-radius: var(--radius-pill);
  padding: 0.3em 0.85em;
}

/* sixth differentiator card accent */
.why-card:nth-child(6) { --card-accent: var(--c-sage); }

/* ---- Success partners: client-approved option 4 — light gradient,
   original-colour logos, larger and tighter ---- */
.partners {
  background:
    radial-gradient(64rem 34rem at 18% 8%, rgba(125, 191, 187, 0.3), transparent 62%),
    radial-gradient(58rem 32rem at 88% 92%, rgba(54, 121, 130, 0.2), transparent 62%),
    linear-gradient(162deg, #FDFEFE 0%, #F4FAF9 38%, #DCEDEA 78%, #C9E3DF 100%);
}
.partners .kicker { color: #1E4A51; }
/* The logo files are cropped to their visible content (no transparent side
   margins), so the wall's rhythm comes from the flex gap alone — one uniform
   space between visible edges. Tiles are keyed by HEIGHT: the block-size below
   equals the old fixed width × 260/900, so every logo renders at exactly the
   same scale as before; only the dead air between them changed. */
.partner {
  display: block;
  inline-size: auto;
  block-size: auto;
  aspect-ratio: auto;
}
.partner img {
  display: block;
  inline-size: auto;
  block-size: clamp(3.18rem, 4.48vw, 4.34rem);
}
.partner.is-text {
  display: grid;
  place-items: center;
  block-size: clamp(3.18rem, 4.48vw, 4.34rem);
  padding-inline: 1rem;
}
.partners__row {
  gap: clamp(2.25rem, 3.5vw, 3.75rem);
  padding-inline-end: clamp(2.25rem, 3.5vw, 3.75rem); /* completes the loop period exactly */
}
.partner img { filter: none; opacity: 1; }
.partner:hover img { filter: none; opacity: 1; }
.partner.is-text span { color: rgba(30, 74, 81, 0.65); }
.partner.is-text:hover span { color: #1E4A51; }

/* ==========================================================================
   ARABIC / RTL
   The layout is logical-property based, so most of the page mirrors itself.
   These rules cover what CSS cannot infer: Arabic type must never be
   letterspaced, and the few physical clip-path angles must mirror.
   ========================================================================== */

/* connected script: kill tracking everywhere (latin brand words included —
   consistent, and GE SS falls back to Bahnschrift for them anyway) */
[dir="rtl"], [dir="rtl"] * { letter-spacing: 0 !important; }

/* Arabic headings carry weight through the face, not the width axis */
[dir="rtl"] .hero__title-thin { font-weight: var(--fw-light); }
[dir="rtl"] .hero__title-bold,
[dir="rtl"] .figures__hero,
[dir="rtl"] .hero__meta strong { font-stretch: 100%; }
[dir="rtl"] .hero__title { line-height: 1.22; }
[dir="rtl"] main section h2 { line-height: 1.35; }
[dir="rtl"] .manifesto__text { line-height: 1.7; }
[dir="rtl"] .why-card h3, [dir="rtl"] .sol__name { line-height: 1.5; }

/* hero media panel: the 60° cut moves to its outer (left-facing) edge */
[dir="rtl"] .hero__showcase {
  clip-path: polygon(0 0, calc(100% - clamp(3rem, 6vw, 6rem)) 0, 100% 100%, 0 100%);
}
[dir="rtl"] .hero__showcase::after {
  background: linear-gradient(-100deg, rgba(36, 84, 91, 0.42), transparent 45%, rgba(30, 31, 33, 0.25) 100%);
}
@media (max-width: 63.9rem) {
  [dir="rtl"] .hero__showcase {
    clip-path: polygon(0 0, 100% clamp(1.5rem, 6vw, 3rem), 100% 100%, 0 100%);
  }
}

/* hairline draw on project cards mirrors */
[dir="rtl"] .project-card__media::after { transform-origin: right; }

/* ---- language toggle pill (both pages) ---- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-block-size: 2.7rem;
  padding-inline: 1.1em;
  border: 1px solid rgba(244, 245, 243, 0.4);
  border-radius: var(--radius-pill);
  color: var(--t-strong-on-dark);
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.lang-switch:hover, .lang-switch:focus-visible {
  background: rgba(125, 191, 187, 0.16);
  border-color: var(--c-aqua);
  color: var(--c-aqua);
}
.has-scrolled .lang-switch { color: var(--c-charcoal); border-color: rgba(43, 43, 43, 0.35); }
.has-scrolled .lang-switch:hover, .has-scrolled .lang-switch:focus-visible {
  color: #1E4A51; border-color: #1E4A51; background: rgba(54, 121, 130, 0.1);
}
/* the toggle label renders in the TARGET language's face */
.lang-switch[hreflang="ar"] { font-family: var(--font-ar); }
.lang-switch[hreflang="en"] { font-family: var(--font-en); letter-spacing: 0.06em !important; }
.m-menu .lang-switch { justify-self: center; margin-block-start: var(--sp-3); }
@media (max-width: 63.9rem) {
  .site-header__actions .lang-switch { display: none; }
}

/* ==========================================================================
   START-YOUR-PROJECT MODAL — opened by every #contact CTA (main.js)
   ========================================================================== */

.cmodal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-menu) + 5); /* above header/menu, below cursor dot */
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.cmodal[hidden] { display: none; }
.cmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 34, 38, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.26s var(--ease-out);
}
.cmodal__panel {
  position: relative;
  inline-size: min(40rem, 100%);
  max-block-size: calc(100svh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(125, 191, 187, 0.14), transparent 55%),
    linear-gradient(166deg, var(--s-petrol-deep) 0%, #23545C 58%, #1E464E 100%);
  box-shadow: 0 40px 90px -30px rgba(8, 24, 27, 0.65), 0 0 0 1px rgba(125, 191, 187, 0.22);
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out);
}
.cmodal.is-open .cmodal__backdrop { opacity: 1; }
.cmodal.is-open .cmodal__panel { opacity: 1; translate: 0 0; }
/* six-facet hairline crowning the panel, echoing .atmo--edge */
.cmodal__facet {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, #7060A4, #5B5C86, #6184A0, #367982, #7DBFBB, #A9CBBC);
}
.cmodal__x {
  position: absolute;
  inset-block-start: clamp(0.9rem, 2vw, 1.4rem);
  inset-inline-end: clamp(0.9rem, 2vw, 1.4rem);
  inline-size: 2.6rem;
  block-size: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 245, 243, 0.28);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), rotate var(--dur-fast) var(--ease-out);
}
.cmodal__x span {
  grid-area: 1 / 1;
  display: block;
  inline-size: 1.05rem;
  block-size: 1.5px;
  background: var(--t-strong-on-dark);
}
.cmodal__x span:first-child { rotate: 45deg; }
.cmodal__x span:last-child { rotate: -45deg; }
.cmodal__x:hover { border-color: var(--c-aqua); background: rgba(125, 191, 187, 0.12); rotate: 90deg; }
.cmodal__panel .kicker { color: var(--c-aqua); }
.cmodal__panel h2 {
  margin-block-start: var(--sp-2);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  color: var(--t-strong-on-dark);
}
.cmodal__lead { margin-block: var(--sp-2) var(--sp-5); color: var(--t-body-on-dark); max-inline-size: 30rem; }

.cform__hp { position: absolute; inset-inline-start: -9999px; block-size: 0; opacity: 0; pointer-events: none; }
.cform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-3);
}
.cform__field { display: grid; gap: 0.45rem; align-content: start; }
.cform__field--full { grid-column: 1 / -1; }
.cform__field > span {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(244, 245, 243, 0.66);
}
.cform__field input,
.cform__field select,
.cform__field textarea {
  inline-size: 100%;
  padding: 0.72rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--t-strong-on-dark);
  background: rgba(244, 245, 243, 0.055);
  border: 1px solid rgba(125, 191, 187, 0.3);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cform__field textarea { resize: vertical; min-block-size: 6.5rem; }
.cform__field input::placeholder,
.cform__field textarea::placeholder { color: rgba(244, 245, 243, 0.34); }
.cform__field input:focus-visible,
.cform__field select:focus-visible,
.cform__field textarea:focus-visible {
  outline: none;
  border-color: var(--c-aqua);
  background: rgba(244, 245, 243, 0.09);
  box-shadow: 0 0 0 3px rgba(125, 191, 187, 0.22);
}
.cform__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237DBFBB' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-inline-end: 2.4rem;
  cursor: pointer;
}
[dir="rtl"] .cform__field select { background-position: left 0.9rem center; }
.cform__field select option { color: var(--c-charcoal); background: #F4F5F3; }

.cform__error {
  margin-block-start: var(--sp-3);
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-small);
  color: #F3C7C7;
  background: rgba(150, 50, 50, 0.18);
  border: 1px solid rgba(220, 120, 120, 0.35);
}
.cform__error a { color: var(--c-aqua); text-decoration: underline; }
.cform__actions {
  margin-block-start: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.cform__note { font-size: var(--fs-small); color: rgba(244, 245, 243, 0.55); }
.cform__note a { color: var(--c-aqua); }
.cform__submit { position: relative; }
.cmodal.is-sending .cform__submit {
  pointer-events: none;
  opacity: 0.6;
}
.cmodal.is-sending .cform__submit::after {
  content: "";
  display: inline-block;
  inline-size: 0.9em;
  block-size: 0.9em;
  margin-inline-start: 0.55em;
  vertical-align: -0.12em;
  border: 2px solid rgba(43, 43, 43, 0.35);
  border-block-start-color: var(--c-charcoal);
  border-radius: 50%;
  animation: cspin 0.7s linear infinite;
}
@keyframes cspin { to { rotate: 360deg; } }

.cmodal__done { text-align: center; padding-block: var(--sp-5); }
.cmodal__done-mark {
  display: grid;
  place-items: center;
  inline-size: 3.4rem;
  block-size: 3.4rem;
  margin-inline: auto;
  margin-block-end: var(--sp-4);
  rotate: 45deg;
  border: 1.5px solid var(--c-aqua);
  background: rgba(125, 191, 187, 0.12);
}
.cmodal__done-mark::after {
  content: "";
  inline-size: 0.9rem;
  block-size: 0.5rem;
  border-inline-start: 2px solid var(--c-aqua);
  border-block-end: 2px solid var(--c-aqua);
  rotate: -90deg; /* combined with the parent's 45deg = a level checkmark */
  translate: 0 -2px;
}
.cmodal__done h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); color: var(--t-strong-on-dark); }
.cmodal__done p { margin-block: var(--sp-2) var(--sp-4); color: var(--t-body-on-dark); }

@media (max-width: 40rem) {
  .cform__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cmodal__backdrop, .cmodal__panel { transition: none; }
}

/* Hero film fallback: when autoplay is refused or the file never arrives, the
   poster stays and this branded button offers playback — never native browser
   chrome, which reads as a broken page rather than a designed one. */
.hero__playbtn {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: 3;
  inline-size: clamp(4.2rem, 7vw, 5.4rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(30, 74, 81, 0.55);
  border: 1px solid rgba(125, 191, 187, 0.75);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-out);
}
.hero__playbtn[hidden] { display: none; }
.hero__playbtn:hover { background: rgba(125, 191, 187, 0.32); scale: 1.06; }
.hero__playbtn > span {
  inline-size: 0;
  block-size: 0;
  margin-inline-start: 0.22em;   /* optical centring of the triangle */
  border-block: 0.62rem solid transparent;
  border-inline-start: 1rem solid var(--t-strong-on-dark);
  border-inline-end: 0;
}
[dir="rtl"] .hero__playbtn > span {
  margin-inline-start: 0;
  margin-inline-end: 0.22em;
  scale: -1 1;   /* the play triangle is directional, not mirrored by RTL */
}