/* ==========================================================================
   CONCEPT 1 — MONOLITH
   Cinematic dark minimalism. One escalating trust argument, one ask.
   ========================================================================== */

body {
  background: var(--c-ink);
  color: var(--t-body-on-dark);
}

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

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-4);
  background: var(--c-ink);
  transition: opacity 0.55s var(--ease-out), visibility 0s 0.55s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__logo {
  inline-size: clamp(4rem, 7vw, 5.5rem);
  block-size: auto;
  animation: pre-logo-in 0.9s var(--ease-out) both,
             pre-logo-breathe 2.2s var(--ease-in-out) 0.9s infinite;
}
@keyframes pre-logo-in {
  from { opacity: 0; scale: 0.82; }
  to { opacity: 1; scale: 1; }
}
@keyframes pre-logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(125, 191, 187, 0)); scale: 1; }
  50% { filter: drop-shadow(0 0 22px rgba(125, 191, 187, 0.45)); scale: 1.04; }
}

.preloader__word {
  color: var(--t-strong-on-dark);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.55em;
  text-transform: uppercase;
  animation: pre-word 1.2s var(--ease-out) both;
}
@keyframes pre-word {
  from { opacity: 0; letter-spacing: 0.9em; }
  to { opacity: 0.9; letter-spacing: 0.55em; }
}

.preloader__bar {
  inline-size: 9rem;
  block-size: 1px;
  background: rgba(244, 245, 243, 0.15);
  overflow: hidden;
}
.preloader__bar i {
  display: block;
  block-size: 100%;
  background: var(--c-aqua);
  animation: pre-bar 1.35s var(--ease-in-out) both;
  transform-origin: left;
}
[dir="rtl"] .preloader__bar i { transform-origin: right; }
@keyframes pre-bar {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@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),
              padding var(--dur-fast) var(--ease-out);
}
.site-header.has-scrolled {
  padding-block: var(--sp-2);
  background: rgba(30, 31, 33, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--c-ink-3);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* White horizontal lockup — the brand's approved treatment on dark grounds */
.site-header__brand { display: block; }
.site-header__brand img { inline-size: clamp(8rem, 11vw, 10rem); block-size: auto; }

/* Dark glass pill — floats over the hero, hairline edge, soft blur */
.site-nav__list {
  display: flex;
  gap: 0.25rem;
  background: rgba(30, 31, 33, 0.38);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(244, 245, 243, 0.14);
  border-radius: var(--radius-pill);
  padding: 0.375rem;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* dissolve into the header's own glass bar once scrolled */
.site-header.has-scrolled .site-nav__list {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-nav__list a {
  position: relative;
  display: block;
  padding: 0.55em 1.15em;
  border-radius: var(--radius-pill);
  color: rgba(244, 245, 243, 0.82);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  z-index: 1;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__list a:hover, .site-nav__list a:focus-visible { color: var(--c-aqua); }
.site-nav__list a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(244, 245, 243, 0.08);
  scale: 0;
  transition: scale 0.45s var(--ease-out);
  z-index: -1;
}
.site-nav__list a:hover::before, .site-nav__list a:focus-visible::before { scale: 1; }

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

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 2.5rem;
  block-size: 2.5rem;
}
.burger span {
  display: block;
  block-size: 2px;
  inline-size: 1.5rem;
  margin-inline: auto;
  background: var(--t-strong-on-dark);
  transition: translate var(--dur-fast) var(--ease-out), rotate var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.burger[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

.site-header__inner { position: relative; z-index: 2; }

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

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

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

.hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  align-items: flex-end;
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.92);
}
/* Brand treatment: text never sits on raw photography. A teal duotone wash
   tints the whole frame; deep ink gradients anchor the header and the
   bottom-left text block. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(30, 31, 33, 0.72), transparent 26%),
    linear-gradient(99deg, rgba(30, 31, 33, 0.85) 6%, rgba(30, 31, 33, 0.38) 48%, rgba(36, 84, 91, 0.32) 100%);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 58%;
  z-index: 1;
  background: linear-gradient(to top, var(--c-ink) 6%, rgba(30, 31, 33, 0.55) 45%, transparent);
}

/* Load choreography: media unfurls from a centered chamfered slit.
   Pre-animation state applies as soon as JS confirms (html loses .no-js),
   so nothing paints visible-then-vanishing before the choreography. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js):not(.is-static) body:not(.is-loaded) .hero__media {
    clip-path: inset(42% 50% 42% 50% round var(--chamfer));
  }
  html:not(.no-js):not(.is-static) body:not(.is-loaded) :is(.hero__content, .site-header__inner) {
    opacity: 0;
  }
}
@keyframes hero-unfurl-1 {
  from { clip-path: inset(42% 50% 42% 50% round var(--chamfer)); }
  to   { clip-path: inset(18% 10% 18% 10% round var(--chamfer)); }
}
@keyframes hero-unfurl-2 {
  from { clip-path: inset(18% 10% 18% 10% round var(--chamfer)); }
  to   { clip-path: inset(0 0 0 0 round 0); }
}
.is-loaded .hero__media {
  animation: hero-unfurl-1 0.9s var(--ease-in-out) both,
             hero-unfurl-2 1.2s 1.05s var(--ease-in-out) forwards;
}
@keyframes hero-fade {
  0%, 45% { opacity: 0; translate: 0 1.5rem; }
  100% { opacity: 1; translate: 0 0; }
}
.is-loaded .hero__content, .is-loaded .site-header__inner { animation: hero-fade 2.4s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .is-loaded .hero__media, .is-loaded .hero__content, .is-loaded .site-header__inner { animation: none; }
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block-end: var(--sp-5);
  inline-size: 100%;
}

.hero__kicker { margin-block-end: var(--sp-3); color: var(--c-aqua); }

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  color: var(--t-strong-on-dark);
}
.hero__title strong { font-weight: var(--fw-bold); }

.hero__teaser {
  display: grid;
  gap: var(--sp-3);
  max-inline-size: 17rem;
  flex: none;
}
.hero__teaser-media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-m);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
[dir="rtl"] .hero__teaser-media {
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer));
}
.hero__teaser-media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  inline-size: 100%;
  transition: scale 0.8s var(--ease-out), opacity var(--dur-fast);
  opacity: 0.9;
}
.hero__teaser:hover .hero__teaser-media img { scale: 1.05; opacity: 1; }
.hero__teaser-label {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--t-body-on-dark);
  line-height: 1.45;
}
.hero__teaser .arrow { color: var(--c-aqua); flex: none; margin-block-end: 0.2em; }

@media (max-width: 47.9rem) {
  .hero__content { flex-direction: column; align-items: flex-start; }
  .hero__teaser { max-inline-size: 100%; inline-size: 100%; }
}

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

.partners {
  background: var(--c-ink-2);
  padding-block: var(--sp-5);
  overflow: hidden;
}
.partners__head { margin-block-end: var(--sp-4); }
.partners .partners__title {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--t-faint-on-dark);
}
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  inline-size: max-content;
  padding-inline-end: var(--sp-6);
}
.partners__belt li {
  position: relative;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  font-weight: var(--fw-light);
  white-space: nowrap;
  color: var(--t-strong-on-dark);
  opacity: 0.85;
}
/* diamond separators — the logo's negative space as brand atom */
.partners__belt li::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(-1 * var(--sp-6) + 1.35rem);
  inset-block-start: 50%;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  translate: 0 -50%;
  rotate: 45deg;
  background: var(--c-aqua);
  opacity: 0.6;
}

/* ---------- Stats ------------------------------------------------------- */

.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-5);
  margin-block-start: var(--sp-5);
}
.stat { border-block-start: 1px solid var(--c-ink-3); padding-block-start: var(--sp-4); }
.stat__value {
  font-size: var(--fs-stat);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--t-strong-on-dark);
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-block-start: var(--sp-3); max-inline-size: 24rem; }

/* ---------- Projects ---------------------------------------------------- */

.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 { font-size: var(--fs-h2); color: var(--t-strong-on-dark); }

.projects__grid {
  display: flex;
  gap: var(--sp-3);
}
/* Expanding row: the hovered card grows via flex-grow (interpolates smoothly
   everywhere) while its siblings yield. The transition list also carries the
   reveal properties so base.css's .reveal.is-inview shorthand can't clobber it. */
.project-card {
  flex: 1 1 0%;
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  min-inline-size: 0;
}
.projects__grid .project-card {
  transition:
    flex-grow 0.85s var(--ease-out),
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}
@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .project-card:hover, .project-card:focus-visible { flex-grow: 1.5; }
}
@media (max-width: 47.9rem) {
  .projects__grid { flex-direction: column; }
}
.project-card__media {
  position: relative;
  block-size: clamp(16rem, 24vw, 24rem);
  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;
  transition: scale 1.4s var(--ease-out), filter 0.6s var(--ease-out);
  will-change: scale;
  filter: brightness(0.94);
}
.project-card:hover .project-card__media img,
.project-card:focus-visible .project-card__media img { scale: 1.06; filter: brightness(1.02); }
/* aqua hairline rises along the base on hover */
.project-card__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: 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-dark);
}
.project-card__caption p { font-size: var(--fs-small); color: var(--t-faint-on-dark); }
.project-card .arrow { color: var(--c-aqua); flex: none; }

/* ---------- Integrated model (two-column editorial) --------------------- */

.model__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(var(--sp-5), 5vw, var(--sp-7));
  align-items: stretch;
}
.model__media {
  position: relative;
  min-block-size: clamp(24rem, 60vh, 38rem);
  overflow: hidden;
  border-radius: var(--radius-m);
}
/* symmetric overshoot: parallax drift stays inside the frame */
.model__media img {
  position: absolute;
  inset-inline: 0;
  inset-block: -8%;
  inline-size: 100%;
  block-size: 116%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
}
.model__figcap {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: 1;
  background: rgba(30, 31, 33, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--t-body-on-dark);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 0.8em 1.4em;
  border-start-end-radius: var(--radius-m);
}
.model__content {
  align-self: center;
  padding-block: var(--sp-4);
}
.model__content h2 { font-size: var(--fs-h2); color: var(--t-strong-on-dark); margin-block: var(--sp-3) var(--sp-4); }
.model__content > p { margin-block-end: var(--sp-4); }

.model__pillars { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-5); }
.model__pillars li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  border-block-start: 1px solid var(--c-ink-3);
  padding-block-start: var(--sp-3);
}
.model__pillars strong { color: var(--t-strong-on-dark); font-weight: var(--fw-medium); }
.model__pillars span { color: var(--t-faint-on-dark); font-size: var(--fs-small); }

@media (max-width: 63.9rem) {
  .model__grid { grid-template-columns: 1fr; }
  .model__media { min-block-size: clamp(16rem, 45vw, 24rem); }
}

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

.products h2 { font-size: var(--fs-h2); color: var(--t-strong-on-dark); margin-block: var(--sp-3) var(--sp-5); }
.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--sp-4);
}
.product-card {
  position: relative;
  display: block;
  min-block-size: 26rem;
  overflow: hidden;
  border-radius: var(--radius-m);
}
.product-card img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--ease-out);
}
.product-card:hover img { scale: 1.04; }
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 31, 33, 0.92) 12%, rgba(30, 31, 33, 0.25) 55%, transparent);
}
.product-card__text {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  padding: var(--sp-5);
}
.product-card__text h3 { font-size: var(--fs-h3); color: var(--t-strong-on-dark); }
.product-card__text h3 span { color: var(--c-aqua); font-weight: var(--fw-light); }
.product-card__text p { margin-block-start: var(--sp-2); color: var(--t-body-on-dark); }

/* ---------- Why ESCAN --------------------------------------------------- */

.why { background: var(--c-ink-2); }
.why__grid {
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) 3fr;
  gap: var(--sp-6);
}
.why__intro { position: sticky; top: 20vh; align-self: start; }
.why__intro h2 { font-size: var(--fs-h2); color: var(--t-strong-on-dark); margin-block: var(--sp-3) var(--sp-4); }

.why__list { display: grid; gap: var(--sp-5); counter-reset: why; }
.why__list li {
  counter-increment: why;
  position: relative;
  border-block-start: 1px solid var(--c-ink-3);
  padding-block-start: var(--sp-4);
  padding-inline-start: 4.5rem;
}
.why__list li::before {
  content: counter(why, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--sp-4);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--c-aqua);
}
.why__list h3 { font-size: var(--fs-h3); color: var(--t-strong-on-dark); margin-block-end: var(--sp-2); }

@media (max-width: 63.9rem) {
  .why__grid { grid-template-columns: 1fr; }
  .why__intro { position: static; }
}

/* ---------- CTA --------------------------------------------------------- */

.cta {
  padding-block: var(--sp-section);
}
.cta__grid {
  display: grid;
  grid-template-columns: minmax(20rem, 3fr) 2fr;
  gap: var(--sp-6);
  align-items: center;
}
.cta__content h2 { font-size: var(--fs-h1); color: var(--t-strong-on-dark); }
.cta__content h2 strong { font-weight: var(--fw-bold); }
.cta__content p { margin-block: var(--sp-4); }
.cta__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.cta__tel {
  font-size: var(--fs-lead);
  color: var(--t-strong-on-dark);
  border-block-end: 1px solid var(--c-aqua);
  padding-block-end: 0.15em;
}
.cta__media {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--sp-3);
  align-items: end;
}
.cta__media figure { overflow: hidden; border-radius: var(--radius-m); }
.cta__media figure:first-child { aspect-ratio: 3 / 4; }
.cta__media figure:last-child { aspect-ratio: 4 / 3; margin-block-end: var(--sp-6); }
.cta__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

@media (max-width: 63.9rem) {
  .cta__grid { grid-template-columns: 1fr; }
  .cta__media { display: none; }
}

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

.site-footer { border-block-start: 1px solid var(--c-ink-3); }
.site-footer__grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
}
.site-footer__brand img { inline-size: 7rem; block-size: auto; }
.site-footer nav ul { display: grid; gap: var(--sp-2); }
.site-footer nav a:hover { color: var(--c-aqua); }
.site-footer__coords { font-style: normal; display: grid; gap: var(--sp-3); justify-items: start; }
.site-footer__coords a:hover { color: var(--c-aqua); }
.site-footer__social { display: flex; gap: var(--sp-3); }
.site-footer__social a {
  font-size: var(--fs-small);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-pill);
  padding: 0.4em 1em;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.site-footer__social a:hover { border-color: var(--c-aqua); color: var(--c-aqua); }

.site-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  border-block-start: 1px solid var(--c-ink-3);
  padding-block: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--t-faint-on-dark);
}

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