/* ═══════════════════════════════════════════════════════════════════════════
   SYANAT — Tech Futurism / Swiss editorial
   Colour + type tokens are lifted directly from the brand book
   (colors.png, typography.png). Do not substitute values.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Brand — source of truth */
  --blue:      #1B36C4;   /* SYANAT Blue · PMS 2126 C */
  --ink:       #0A0A0C;   /* Ink Black  · PMS Black 6 C */
  --paper:     #EDEAE5;   /* Paper */
  --white:     #FFFFFF;

  /* Derived neutrals */
  --cool:      #F5F6F8;
  --cool-2:    #ECEEF2;
  --line:      rgba(10,10,12,.12);
  --line-soft: rgba(10,10,12,.07);
  --muted:     #55565C;
  --muted-2:   #85868C;
  --blue-wash: rgba(27,54,196,.06);

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 88px);
  --sec-y:  clamp(96px, 14vh, 200px);
  --maxw:   1560px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100%; }

img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }

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

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

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* Brand label style: Medium · +24% tracking · caps */
.label{
  font-size:11px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; line-height:1;
}
.dot{
  display:inline-block; width:5px; height:5px; margin-inline-end:.9em;
  background:var(--blue); border-radius:50%; vertical-align:middle;
  transform:translateY(-1px);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  --h:56px;
  position:relative; display:inline-flex; align-items:center; gap:14px;
  height:var(--h); padding:0 28px;
  background:var(--blue); color:#fff; border-radius:calc(var(--h)/2);
  font-size:15px; font-weight:500; letter-spacing:-.01em;
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow:0 1px 2px rgba(27,54,196,.18), 0 10px 30px -12px rgba(27,54,196,.5);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,#2643DB,#1B36C4 55%);
  opacity:0; transition:opacity .5s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(27,54,196,.2), 0 22px 44px -16px rgba(27,54,196,.62); }
.btn:hover::after{ opacity:1; }
.btn::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#fff; opacity:.9; flex:none;
  transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:scale(1.6); }
.btn--sm{ --h:44px; padding:0 20px; font-size:14px; }
.btn--lg{ --h:66px; padding:0 38px; font-size:17px; }

/* ═══ Loader ══════════════════════════════════════════════════════════════ */
.loader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .9s var(--ease), visibility .9s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ width:min(300px, 62vw); text-align:start; }
.loader__mark{
  width:26px; height:auto; margin-bottom:34px;
  animation:breathe 2.6s var(--ease) infinite;
}
@keyframes breathe{ 0%,100%{opacity:.5} 50%{opacity:1} }
.loader__track{ height:1px; background:rgba(255,255,255,.16); overflow:hidden; }
.loader__fill{
  display:block; height:100%; width:0%;
  background:var(--blue);
  transition:width .35s var(--ease);
}
.loader__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:16px; color:rgba(255,255,255,.5);
}
.loader__pct{ color:#fff; font-variant-numeric:tabular-nums; }

/* ═══ Navigation ══════════════════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding-block:22px;
  color:#fff;
  transition:background .6s var(--ease), color .6s var(--ease),
             box-shadow .6s var(--ease), padding .6s var(--ease);
}
/* Deliberately NOT position:relative — the mobile dropdown panel is absolutely
   positioned against .nav so it stays full-bleed while its contents keep the
   same gutter as everything else. */
.nav__inner{ display:flex; align-items:center; gap:clamp(16px,3vw,48px); }
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
  opacity:0; transition:opacity .6s var(--ease);
}
.nav.is-solid{ color:var(--ink); padding-block:14px; }
.nav.is-solid::before{ opacity:1; }

.nav__logo{ flex:none; line-height:0; }
.nav__logo-img{ width:clamp(99px,9.76vw,133px); height:auto; transition:opacity .6s var(--ease); }
.nav__logo-img--dark{ position:absolute; top:0; inset-inline-start:0; opacity:0; }
.nav.is-solid .nav__logo-img--light{ opacity:0; }
.nav.is-solid .nav__logo-img--dark{ opacity:1; }
.nav__logo{ position:relative; }

.nav__menu{ display:contents; }
.nav__links{ display:flex; gap:clamp(18px,2.4vw,38px); margin-inline-start:auto; }
.nav__links a{
  position:relative; font-size:15px; font-weight:400; letter-spacing:-.01em;
  padding-block:4px; opacity:.86; transition:opacity .4s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--blue); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{ flex:none; }
.nav__toggle{ display:none; }

/* Language switch. Present on both pages, so it lives here rather than in
   rtl.css. The whole element is dimmed rather than the border being given its
   own colour: the nav crossfades white → ink over the hero, and currentColor
   plus one opacity keeps text and rule in step through that transition. */
.nav__lang{
  flex:none; align-self:center;
  font-size:14px; font-weight:500; letter-spacing:-.01em; line-height:1.25;
  opacity:.72; border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:opacity .4s var(--ease);
}
.nav__lang:hover{ opacity:1; }

/* The English page sets its switch in Arabic (and vice versa). Outfit carries
   no Arabic glyphs, so that one word needs the Arabic face in its stack —
   index.html requests it glyph-subset to just this string, ~1KB. */
[lang="ar"].nav__lang,
[lang="ar"].footer__lang{ font-family:"Tajawal","Outfit",sans-serif; letter-spacing:normal; }

/* ═══ Hero ════════════════════════════════════════════════════════════════ */
.hero{ position:relative; background:var(--ink); }
.hero__stage{
  position:relative; height:100vh; height:100dvh; width:100%;
  overflow:hidden; background:var(--ink);
}
.hero__canvas,
.hero__poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.hero__canvas{ opacity:0; transition:opacity .6s var(--ease); }
.hero__canvas.is-live{ opacity:1; }
.hero__canvas.is-live + .hero__poster{ opacity:0; }
.hero__poster{ transition:opacity .6s var(--ease); }

/* Scrim: keeps type legible without washing out the architecture */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(10,10,12,.72) 0%, rgba(10,10,12,.42) 34%, rgba(10,10,12,0) 62%),
    linear-gradient(to bottom, rgba(10,10,12,.5) 0%, rgba(10,10,12,0) 26%, rgba(10,10,12,0) 68%, rgba(10,10,12,.42) 100%);
}

.hero__content{
  position:absolute; inset:0;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; align-items:center;
  padding-inline:var(--gutter);
  padding-top:6vh;
}
.stage{
  grid-area:1/1;
  max-width:min(720px, 52vw);
  color:#fff;
  will-change:opacity, transform, filter;
}
.stage__num{
  display:flex; align-items:center; gap:12px;
  font-size:11px; font-weight:500; letter-spacing:.24em;
  color:rgba(255,255,255,.72); margin-bottom:26px;
  font-variant-numeric:tabular-nums;
}
.stage__num i{ font-style:normal; color:rgba(255,255,255,.4); }
.stage__num span:first-child{ color:#fff; }

.stage__title{
  font-size:clamp(40px, 6.6vw, 104px);
  line-height:.96;
  letter-spacing:-.04em;   /* Display · −4% */
  font-weight:600;
  text-wrap:balance;
}
.stage__body{
  margin-top:clamp(20px,2.4vw,32px);
  max-width:34em;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.6;
  color:rgba(255,255,255,.82);
}

/* Progress rail */
.rail{
  position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:22px;
}
.rail__item{
  display:flex; align-items:center; gap:14px; justify-content:flex-end;
  color:rgba(255,255,255,.45); transition:color .5s var(--ease);
  font-size:11px; font-weight:500; letter-spacing:.2em;
  font-variant-numeric:tabular-nums;
}
.rail__item.is-active{ color:#fff; }
.rail__line{
  display:block; width:44px; height:1px;
  background:rgba(255,255,255,.28); position:relative; overflow:hidden;
}
.rail__line i{
  position:absolute; inset:0; display:block; background:var(--blue);
  transform:scaleX(0); transform-origin:left;
}

/* Scroll hint */
.scrollhint{
  position:absolute; left:var(--gutter); bottom:clamp(28px,4vh,48px);
  display:flex; align-items:center; gap:14px;
  color:rgba(255,255,255,.7);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.scrollhint.is-gone{ opacity:0; transform:translateY(8px); pointer-events:none; }
.scrollhint__line{ position:relative; display:block; width:56px; height:1px; background:rgba(255,255,255,.28); overflow:hidden; }
.scrollhint__line::after{
  content:""; position:absolute; inset:0; background:var(--blue);
  animation:sweep 2.4s var(--ease) infinite;
}
@keyframes sweep{
  0%{ transform:translateX(-100%) } 55%,100%{ transform:translateX(100%) }
}

/* ═══ Shared section furniture ════════════════════════════════════════════ */
.section{ padding-block:var(--sec-y); position:relative; }
.sechead{ margin-bottom:clamp(56px,7vw,110px); }
.sechead__eyebrow{ color:var(--muted); margin-bottom:clamp(24px,3vw,40px); display:flex; align-items:center; }
.sechead__title{
  font-size:clamp(34px,5.4vw,84px);
  line-height:1.0;
  letter-spacing:-.035em;  /* Heading · −3% */
  text-wrap:balance;
}

/* Line-by-line reveal.
   The headings run line-height ~1.0, so glyphs render taller than their line box
   and overflow:hidden would slice every descender (p, y, g). The padding gives
   the mask room; the matching negative margin keeps the layout metrics identical. */
.reveal{
  /* flow-root so the last line's negative margin is contained rather than
     collapsing out — otherwise every heading grows by .12em. */
  display:flow-root;
}
.reveal .ln{
  display:block; overflow:hidden;
  padding-bottom:.12em; margin-bottom:-.12em;
}
.reveal .ln > span{ display:block; will-change:transform; }

/* ═══ 02 Services ═════════════════════════════════════════════════════════ */
.services{ background:var(--white); }

.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.6vw,60px);
}
.svc{ display:flex; flex-direction:column; }

.svc__frame{
  position:relative; overflow:hidden; border-radius:3px;
  aspect-ratio:4/3; background:var(--cool-2);
  margin-bottom:clamp(24px,2.2vw,34px);
  box-shadow:0 30px 60px -44px rgba(10,10,12,.55);
}
.svc__frame img{
  width:100%; height:116%; object-fit:cover;
  position:absolute; top:-8%; inset-inline-start:0;
  will-change:transform;
}

.svc__num{
  font-size:11px; font-weight:500; letter-spacing:.24em; color:var(--blue);
  padding-bottom:14px; margin-bottom:20px; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.svc__title{
  font-size:clamp(22px,1.75vw,29px); line-height:1.1; letter-spacing:-.03em;
  margin-bottom:16px; text-wrap:balance;
  /* Reserve two lines so the body copy starts on the same line across all three
     columns, even though only the third title wraps. */
  min-height:2.2em;
}
.svc__body{ color:var(--muted); font-size:16px; line-height:1.6; }

/* ═══ 03 Why — looping video field, content right ═════════════════════════ */
.why{
  position:relative; overflow:hidden;
  background:var(--white);
  padding-block:clamp(88px,12vw,168px);
  min-height:clamp(620px,86vh,900px);
  display:flex; align-items:center;
}
.why__bg{ position:absolute; inset:0; z-index:0; }
.why__video{
  width:100%; height:100%; object-fit:cover; display:block;
  background:var(--white);
  /* The sculpture sits right-of-centre in the source, which is where the copy
     goes. Mirroring moves its mass to the left; the form is abstract, so the
     flip is undetectable. */
  transform:scaleX(-1);
}
/* The footage is a bright studio plate with the sculpture roughly centred, so the
   right side is veiled to a clean white field for the copy while the form stays
   fully readable on the left. */
.why__scrim{
  position:absolute; inset:0;
  /* Measured from the right edge: solid under the copy column, fully clear over
     the left half so the sculpture reads at full contrast. */
  background:linear-gradient(to left,
    #fff 0%, rgba(255,255,255,.97) 33%, rgba(255,255,255,.74) 45%,
    rgba(255,255,255,.28) 55%, rgba(255,255,255,0) 66%);
}

.why__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,3vw,48px);
}
.why__content{ grid-column:7 / span 6; }
.why .sechead__title{ font-size:clamp(30px,3.5vw,54px); }
.why .sechead__eyebrow{ margin-bottom:clamp(18px,2vw,28px); }

.why__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:clamp(20px,2.4vw,40px);
  margin-top:clamp(40px,4.6vw,68px);
  border-top:1px solid var(--line-soft);
}
.why__item{
  position:relative;
  padding-block:clamp(22px,2.2vw,30px) clamp(24px,2.6vw,34px);
  padding-inline:0 clamp(16px,1.6vw,26px);
  border-bottom:1px solid var(--line-soft);
}
.why__item::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:100%;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
}
.why__item:hover::before{ transform:scaleX(1); }
.why__n{
  display:block; font-size:11px; font-weight:500; letter-spacing:.24em;
  color:var(--blue); margin-bottom:clamp(14px,1.4vw,20px); font-variant-numeric:tabular-nums;
}
.why__item h3{ font-size:clamp(17px,1.25vw,20px); letter-spacing:-.025em; margin-bottom:8px; }
.why__item p{ color:var(--muted); font-size:14.5px; line-height:1.55; }

/* ═══ 04 Industries — ink field, photograph beneath ═══════════════════════ */
.industries{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink);           /* fallback if the photograph fails to load */
  color:#fff;
}
/* Photograph (source: "image 4.png") sits behind the ink veil. Inset
   vertically so the layer can parallax without exposing an edge. */
.ind__bg{
  position:absolute; inset:-8%; z-index:0;
  background:url("../img/industries-bg.jpg") center/cover no-repeat;
  will-change:transform;
}
/* Same treatment as the closing CTA: an ink veil with the brand-blue glow
   bleeding in from top-centre. The CTA builds it from `background:var(--ink)`
   plus the `.cta__glow` radial; here both are layered into one overlay so the
   photograph keeps showing through. Glow is listed first so it sits above the
   ink, exactly as `.cta__glow` sits above the CTA's background. */
.industries::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle 900px at 34% -4%,
      rgba(27,54,196,.42) 0%, rgba(27,54,196,0) 62%),
    linear-gradient(180deg,
      rgba(10,10,12,.72) 0%, rgba(10,10,12,.78) 34%,
      rgba(10,10,12,.86) 62%, rgba(10,10,12,.90) 100%);
}
.industries .wrap{ position:relative; z-index:2; }
.industries .sechead__title{ color:#fff; }
.industries .sechead__eyebrow{ color:rgba(255,255,255,.66); }
.industries .dot{ background:#fff; }

/* The photograph behind carries its own strong window grid. Giving the tiles a
   frosted plane of their own separates the two so the hairlines stay crisp
   instead of fighting the mullions. */
.ind__grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(255,255,255,.30);
  border-inline-start:1px solid rgba(255,255,255,.30);
  background:rgba(10,10,12,.30);   /* ink, matching the veil above it */
  -webkit-backdrop-filter:blur(7px) saturate(1.08);
  backdrop-filter:blur(7px) saturate(1.08);
}
.ind{
  position:relative; overflow:hidden;
  border-inline-end:1px solid rgba(255,255,255,.30);
  border-bottom:1px solid rgba(255,255,255,.30);
  aspect-ratio:1/.86;
}
.ind__inner{
  position:relative; z-index:1; height:100%;
  padding:clamp(20px,2vw,30px);
  display:flex; flex-direction:column; justify-content:space-between;
}
.ind::before{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.11);
  transform:translateY(101%); transition:transform .6s var(--ease);
}
.ind:hover::before{ transform:translateY(0); }
.ind::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; z-index:2;
  background:#fff; transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.ind:hover::after{ transform:scaleX(1); }
.ind__n{
  font-size:11px; font-weight:500; letter-spacing:.24em;
  color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease);
}
.ind:hover .ind__n{ color:#fff; }
/* Icon and name move as one unit on hover. The lift lives on .ind__foot rather
   than the name so it never competes with the scroll drift on .ind__inner. */
.ind__foot{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(12px,1.2vw,18px);
  transition:transform .6s var(--ease);
}
.ind:hover .ind__foot{ transform:translateY(-3px); }

.ind__icon{
  width:clamp(26px,2.3vw,34px); height:auto; display:block;
  color:rgba(255,255,255,.78);
  transition:color .5s var(--ease);
  overflow:visible;   /* square caps sit slightly proud of the viewBox */
}
.ind:hover .ind__icon{ color:#fff; }

.ind__name{
  font-size:clamp(16px,1.4vw,22px); font-weight:500;
  letter-spacing:-.025em; line-height:1.15; color:#fff;
}

/* ═══ 05 About ════════════════════════════════════════════════════════════ */
.about{ background:var(--paper); }
.about__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,3vw,48px); row-gap:44px;
}
.about__aside{ grid-column:1 / span 3; }
.about__main{  grid-column:5 / span 7; }
.about__meta{
  margin-top:clamp(24px,3vw,40px); color:var(--muted);
  font-size:15px; line-height:1.6;
}
.about__title{
  font-size:clamp(32px,4.4vw,68px); line-height:1.02; letter-spacing:-.035em;
  margin-bottom:clamp(28px,3vw,44px);
}
.about__body{
  font-size:clamp(17px,1.45vw,22px); line-height:1.62; color:#26272C;
  max-width:44ch;
}

/* ═══ 06 CTA + footer ═════════════════════════════════════════════════════ */
.cta{
  background:var(--ink); color:#fff;
  padding-block:clamp(110px,17vh,230px);
  position:relative; overflow:hidden;
}
.cta__glow{
  position:absolute; left:50%; top:-40%;
  width:min(1100px,120vw); aspect-ratio:1; margin-left:min(-550px,-60vw);
  background:radial-gradient(circle, rgba(27,54,196,.42) 0%, rgba(27,54,196,0) 62%);
  pointer-events:none; will-change:transform;
}
.cta .wrap{ position:relative; }
.cta__title{
  font-size:clamp(38px,6.2vw,100px); line-height:.98; letter-spacing:-.04em;
  margin-bottom:clamp(24px,2.6vw,36px); text-wrap:balance;
}
.cta__body{
  font-size:clamp(17px,1.4vw,21px); color:rgba(255,255,255,.72);
  max-width:46ch; margin-bottom:clamp(40px,4.6vw,60px);
}
.cta__contact{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(24px,3vw,44px);
  margin-top:clamp(80px,10vw,150px);
  padding-top:38px; border-top:1px solid rgba(255,255,255,.14);
}
.cta__contact li{ display:flex; flex-direction:column; gap:14px; }
.cta__contact .label{ color:rgba(255,255,255,.44); }
.cta__contact a,.cta__contact span:not(.label){
  font-size:16px; color:rgba(255,255,255,.92); line-height:1.5;
}
.cta__contact a{ transition:color .4s var(--ease); width:fit-content;
  background-image:linear-gradient(var(--blue),var(--blue));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .5s var(--ease), color .4s var(--ease); padding-bottom:2px; }
.cta__contact a:hover{ background-size:100% 1px; }
.cta__stack{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.cta__wa{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.cta__wa svg{ width:16px; height:16px; flex:none; }

.footer{ background:var(--white); padding-block:clamp(44px,5vw,72px); }
.footer__grid{
  display:flex; align-items:center; gap:clamp(20px,4vw,60px); flex-wrap:wrap;
}
.footer__logo{ width:clamp(81px,7.74vw,102px); height:auto; }
.footer__links{ display:flex; gap:clamp(14px,2vw,30px); flex-wrap:wrap; }
.footer__links a{ font-size:14.5px; color:var(--muted); transition:color .4s var(--ease); }
.footer__links a:hover{ color:var(--blue); }
.footer__lang{
  font-size:14.5px; font-weight:500; line-height:1.25;
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.footer__lang:hover{ color:var(--blue); border-color:var(--blue); }
.footer__legal{ margin-inline-start:auto; font-size:13px; color:var(--muted-2); }

/* ═══ Responsive ══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .svc-grid{ gap:clamp(22px,2.6vw,36px); }
  .svc__body{ font-size:15.5px; }
  .why__content{ grid-column:6 / span 7; }
  .ind__grid{ grid-template-columns:repeat(3,1fr); }
  /* Three, not two: five items across two columns strands one on its own row. */
  .cta__contact{ grid-template-columns:repeat(3,1fr); row-gap:38px; }
  .about__aside{ grid-column:1 / span 12; }
  .about__main{ grid-column:1 / span 12; }
}

@media (max-width:900px){
  /* Three narrow columns stop being readable here; stack them instead of
     falling to two, which would leave a lone orphan. */
  .svc-grid{ grid-template-columns:1fr; gap:clamp(48px,9vw,72px); }
  .svc{ max-width:60ch; }
  .svc__frame{ aspect-ratio:16/10; }
  .svc__title{ min-height:0; }   /* stacked: nothing to align against */
}

@media (max-width:820px){
  body{ font-size:16px; }
  .nav__menu{ display:none; }
  .nav__toggle{
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    margin-inline-start:auto; width:44px; height:44px; padding:0 8px;
    background:none; border:0; cursor:pointer; color:inherit;
  }
  .nav__toggle span{ display:block; height:1.5px; background:currentColor; transition:transform .45s var(--ease), opacity .45s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

  .nav.is-open{ color:var(--ink); }
  .nav.is-open::before{ opacity:1; }
  .nav.is-open .nav__logo-img--light{ opacity:0; }
  .nav.is-open .nav__logo-img--dark{ opacity:1; }
  /* One panel holds the links and the CTA, so the CTA follows the list
     naturally instead of being offset by a hard-coded distance. */
  .nav.is-open .nav__menu{
    display:flex; flex-direction:column; align-items:flex-start; gap:18px;
    position:absolute; top:100%; left:0; right:0;
    padding:14px var(--gutter) 30px;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--line-soft);
  }
  .nav.is-open .nav__links{ flex-direction:column; gap:6px; margin:0; width:100%; }
  .nav.is-open .nav__links a{ font-size:20px; letter-spacing:-.02em; padding-block:9px; }

  .hero__content{ align-items:flex-end; padding-bottom:clamp(96px,17vh,150px); }
  .stage{ max-width:none; }
  .hero__scrim{
    background:linear-gradient(to bottom, rgba(10,10,12,.58) 0%, rgba(10,10,12,.12) 30%, rgba(10,10,12,.55) 72%, rgba(10,10,12,.88) 100%);
  }
  .rail{
    right:auto; left:var(--gutter); top:auto; bottom:clamp(28px,5vh,46px);
    transform:none; flex-direction:row; gap:10px;
  }
  .rail__line{ width:26px; }
  .rail__item .rail__n{ display:none; }
  .rail__item:first-child .rail__n{ display:none; }
  .scrollhint{ left:auto; right:var(--gutter); bottom:clamp(28px,5vh,46px); }
  .scrollhint .label{ font-size:10px; }
  .scrollhint__line{ width:34px; }

  .ind__grid{ grid-template-columns:repeat(2,1fr); }
  /* Stacked. The video is pinned to a band at the top rather than covering the
     whole section: on a narrow, very tall section `cover` crops away all but a
     thin vertical slice, leaving the footage unreadable. */
  .why{
    --band:clamp(280px,62vw,400px);
    min-height:0;
    padding-top:calc(var(--band) + clamp(40px,7vw,64px));
    display:block;
  }
  .why__bg{ inset:0 0 auto 0; height:var(--band); }
  .why__scrim{
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 52%,
      rgba(255,255,255,.72) 85%, #fff 100%);
  }
  .why__content{ grid-column:1 / span 12; }
  .why__grid{ grid-template-columns:1fr; }
  .footer__legal{ margin-inline-start:0; width:100%; }
}

/* Single column before the three would drop under the WhatsApp line's own width
   (~144px, nowrap) and start stealing it from the two columns beside it. */
@media (max-width:600px){
  .cta__contact{ grid-template-columns:1fr; }
}

@media (max-width:520px){
  .ind__grid{ grid-template-columns:repeat(2,1fr); }
  .ind__bg{ background-image:url("../img/industries-bg-sm.jpg"); }
}

/* ═══ Reduced motion ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .scrollhint{ display:none; }
}

/* Static hero fallback: no pin, all three stages stack and read as a list. */
body.no-motion .hero__stage{ height:auto; min-height:0; }
body.no-motion .hero__poster{ position:relative; height:auto; aspect-ratio:16/9; }
body.no-motion .hero__canvas{ display:none; }
body.no-motion .hero__scrim{ display:none; }
body.no-motion .hero__content{
  position:relative; inset:auto; display:block;
  padding-block:clamp(64px,9vw,120px);
}
body.no-motion .stage{ max-width:none; margin-bottom:clamp(48px,6vw,80px); }
body.no-motion .stage:last-child{ margin-bottom:0; }
body.no-motion .stage__title{ font-size:clamp(32px,4.6vw,64px); }
body.no-motion .rail,
body.no-motion .scrollhint{ display:none; }
body.no-motion .loader{ display:none; }

/* Lenis smooth scroll — required host styles (progressive enhancement only) */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }


/* ═══ Scroll-linked motion ════════════════════════════════════════════════ */

/* Page progress hairline — holds off until the hero pin has released, so it
   never competes with the 01/02/03 rail. */
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:101;
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
}
body.past-hero .scrollbar{ opacity:1; }
.scrollbar i{
  display:block; height:100%; width:100%; background:var(--blue);
  transform:scaleX(0); transform-origin:left center;
}

/* Word-level scrub reveal on the About paragraph */
.wd{ display:inline-block; will-change:opacity; }

/* Rule under each service number, drawn on entry */
.svc__num{ position:relative; }
.svc__num::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--blue); transform:scaleX(var(--rule,0)); transform-origin:left;
}

/* Elements carrying continuous scroll parallax */
.sechead__eyebrow,.svc__num,.svc__frame img,.ind,.why__item{
  will-change:transform;
}

@media (prefers-reduced-motion:reduce){
  .scrollbar{ display:none; }
  .sechead__eyebrow,.svc__num,.svc__frame img,.ind,.why__item,
  .cta__glow,.wd{ will-change:auto; }
}