/* ==========================================================================
   MLG Prime Elementor Widgets — combined stylesheet
   = tokens.css + styles.css (1:1 from the approved static site)
   Pre-animation hidden states are GATED under html.mlg-anim (static-first):
   editor / no-JS / reduced-motion / lib-fail => everything visible.
   ========================================================================== */

/* ==========================================================================
   MLG Prime — Design Tokens (single source of truth)
   Brand palette: Navy #0C2B6E · Sage #9DC39C · Slate #94A2A9 · White · Black
   Direction: light, warm, airy (Jerusalem stone) — never heavy/dark.
   ========================================================================== */

:root {
  /* ---- Brand core ---- */
  --navy:        #0C2B6E;
  --navy-900:    #081F52;
  --navy-800:    #0a2461;
  --navy-700:    #143a86;
  --navy-500:    #2b52a6;
  --navy-300:    #6f8bc7;
  --navy-100:    #dbe3f2;

  --sage:        #9DC39C;
  --sage-700:    #5f8f5e;   /* darker sage — usable as text/accent on light */
  --sage-500:    #7fae7e;
  --sage-200:    #d9e8d8;
  --sage-100:    #eaf2ea;

  --slate:       #94A2A9;
  --slate-700:   #647178;
  --slate-300:   #c3ccd0;

  --white:       #ffffff;
  --black:       #0a0d14;

  /* ---- Neutral / stone (warm light base) ---- */
  --stone-50:    #faf8f4;
  --stone-100:   #f4f1ea;
  --stone-200:   #ebe6db;
  --stone-300:   #ded7c8;

  /* ---- Semantic ---- */
  --bg:          var(--stone-50);
  --bg-alt:      var(--stone-100);

  /* Scroll background-morph stops (light tints, brand hues — read by bg-morph JS, lerped) */
  --morph-0:     #f6f2ea;   /* warm stone  */
  --morph-1:     #e6efe5;   /* soft sage   */
  --morph-2:     #dfe7f4;   /* soft navy   */
  --morph-3:     #f1ebdf;   /* warm stone  */
  --morph-4:     #e9f1e8;   /* light sage  */
  --morph-5:     #e0e8f3;   /* soft navy   */
  --page-bg:     var(--morph-0);
  --ink:         #111a2e;      /* body text (near-navy black) */
  --ink-soft:    #46536b;      /* secondary text */
  --ink-mute:    #7c8797;      /* muted / captions */
  --line:        rgba(12, 43, 110, 0.12);
  --line-soft:   rgba(12, 43, 110, 0.07);
  --accent:      var(--navy);
  --accent-2:    var(--sage-700);

  /* ---- Typography ---- */
  /* Assistant — full Hebrew + Latin support, all weights (bilingual-safe) */
  --font-display: "Assistant", system-ui, -apple-system, sans-serif;
  --font-body:    "Assistant", system-ui, -apple-system, sans-serif;
  --font-mono:    "Assistant", system-ui, sans-serif;

  --fs-overline: 0.78rem;
  --fs-body:     clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --fs-lead:     clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h4:       clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h3:       clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  --fs-h2:       clamp(2rem, 1.4rem + 3vw, 4rem);
  --fs-h1:       clamp(2.6rem, 1.6rem + 5vw, 6rem);
  --fs-mega:     clamp(3.2rem, 1.5rem + 8vw, 9rem);

  --lh-tight:    1.04;
  --lh-snug:     1.2;
  --lh-body:     1.72;

  /* ---- Spacing / layout ---- */
  --space-chapter: clamp(3rem, 2rem + 3.2vw, 5.5rem);   /* vertical rhythm between chapters (tightened) */
  --gutter:      clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  --maxw:        1320px;
  --maxw-narrow: 880px;
  --radius:      18px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1:       0.4s;
  --dur-2:       0.7s;
  --dur-3:       1.1s;

  /* ---- Elevation ---- */
  --shadow-sm:   0 2px 10px rgba(12, 43, 110, 0.06);
  --shadow-md:   0 18px 45px -20px rgba(12, 43, 110, 0.28);
  --shadow-lg:   0 40px 90px -35px rgba(12, 43, 110, 0.40);

  /* ---- Z-index scale ---- */
  --z-bg:        0;
  --z-content:   1;
  --z-header:    900;
  --z-menu:      950;
  --z-lightbox:  1000;

  --header-h:    84px;
}

@media (max-width: 700px) {
  :root { --header-h: 68px; }
}

/* ==========================================================================
   MLG Prime — Main stylesheet
   Continuous light scroll journey · RTL-first · logical properties
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--page-bg);       /* morphs on scroll (bg-morph JS, token-lerped) */
  transition: background .25s linear;
  overflow-x: clip;                 /* clip, not hidden — never breaks scroll */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }
::selection { background: var(--navy); color: #fff; }

/* ---- Layout helpers ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.chapter { position: relative; padding-block: var(--space-chapter); z-index: var(--z-content); }

/* ==========================================================================
   Continuous background field — bleeds across chapters, no hard dividers
   ========================================================================== */
.bg-field { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; overflow: hidden; }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.72; will-change: transform; }
.bg-blob--sage  { width: 48vw; height: 48vw; background: radial-gradient(circle, var(--sage-200), transparent 66%); inset-block-start: 20%; inset-inline-end: -10vw; animation: drift-a 26s var(--ease-inout) infinite; }
.bg-blob--navy  { width: 54vw; height: 54vw; background: radial-gradient(circle, var(--navy-100), transparent 64%); inset-block-start: 55%; inset-inline-start: -14vw; opacity: 0.6; animation: drift-b 32s var(--ease-inout) infinite; }
.bg-blob--stone { width: 44vw; height: 44vw; background: radial-gradient(circle, #e6ddcb, transparent 68%); inset-block-start: 82%; inset-inline-end: 6vw; opacity: 0.66; animation: drift-c 30s var(--ease-inout) infinite; }
@keyframes drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-6vw, 5vh, 0) scale(1.12); } }
@keyframes drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(7vw, -4vh, 0) scale(1.15); } }
@keyframes drift-c { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-4vw, -6vh, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .bg-blob { animation: none; } }

.about > .wrap, .services > .wrap, .testimonials > .wrap, .partners > .wrap { position: relative; z-index: 1; }
.gallery { position: relative; z-index: 1; }

/* ==========================================================================
   Typography primitives
   ========================================================================== */
.overline {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage-700);
}
.overline::before { content: ""; inline-size: 34px; block-size: 1px; background: currentColor; opacity: .6; }
.overline--light { color: var(--sage-200); }

.chapter-title, .about__headline, .cta__title, .footer__title, .numbers__head p {
  font-family: var(--font-display);
}
.chapter-title {
  font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 500;
  color: var(--navy); letter-spacing: -.01em; margin-block-start: .55rem;
}
.chapter-title em, .about__headline em, .cta__title em, .footer__title em { font-style: normal; display: block; color: var(--sage-700); }
.chapter-intro { max-inline-size: 56ch; margin-block-start: 1.4rem; color: var(--ink-soft); }

.chapter-head { max-inline-size: 780px; margin-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.chapter-head--center { margin-inline: auto; text-align: center; }
.chapter-head--center .overline { justify-content: center; }
.chapter-head--center .overline::before { display: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-pad: .85em 1.7em;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: var(--btn-pad);
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn--solid { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.btn--solid:hover { background: var(--navy-700); box-shadow: var(--shadow-lg); }
.btn--ghost-light { color: #fff; border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.btn--ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn--pill { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); padding: .6em 1.2em; font-size: .88rem; backdrop-filter: blur(6px); }
.btn--lg { --btn-pad: 1.05em 2.4em; font-size: 1.05rem; }
.btn--block { inline-size: 100%; }

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: var(--stone-50);
  transition: opacity .7s var(--ease-out), visibility .7s;
  /* CSS fallback: auto-dismiss even if JS never runs (e.g. opened via file://) */
  animation: plFallback .7s var(--ease-out) 2.8s forwards;
}
.preloader.is-done { opacity: 0; visibility: hidden; animation: none; }
@keyframes plFallback { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .preloader { animation-delay: .8s; } }
.preloader__mark { display: grid; justify-items: center; gap: 1rem; }
.pl-roof { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 200; stroke-dashoffset: 200; animation: plDraw 1s var(--ease-out) forwards; }
.pl-roof--1 { stroke: var(--sage); animation-delay: .05s; }
.pl-roof--2 { stroke: var(--slate); animation-delay: .2s; }
.pl-roof--3 { stroke: var(--navy); animation-delay: .35s; }
@keyframes plDraw { to { stroke-dashoffset: 0; } }
.preloader__word { font-family: var(--font-mono); letter-spacing: .35em; color: var(--navy); font-size: .8rem; opacity: 0; animation: fadeIn .5s ease .6s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

/* ==========================================================================
   Header
   ========================================================================== */
.header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header);
  transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), backdrop-filter var(--dur-2); }
.header__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  block-size: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.header__logo { display: block; }
.header__logo-img { block-size: calc(var(--header-h) - 30px); width: auto; transition: opacity var(--dur-2) var(--ease-out); }
.header__logo-img--dark { display: none; }

.header__nav { display: flex; gap: clamp(1rem, 2vw, 2.2rem); }
.header__nav a { position: relative; font-weight: 500; font-size: .98rem; color: #fff; padding-block: .3em; transition: color var(--dur-1); }
.header__nav a::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 0; block-size: 2px; background: var(--sage); transition: inline-size var(--dur-1) var(--ease-out); }
.header__nav a:hover::after, .header__nav a.is-active::after { inline-size: 100%; }

.header__actions { display: flex; align-items: center; gap: .8rem; }

.lang-toggle { display: inline-flex; align-items: center; gap: .3em; font-family: var(--font-mono); font-size: .8rem; color: #fff; padding: .35em .6em; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.35); transition: color var(--dur-1), border-color var(--dur-1); }
.lang-toggle__opt { opacity: .55; transition: opacity var(--dur-1); }
.lang-toggle__opt.is-active { opacity: 1; font-weight: 700; }
.lang-toggle__sep { opacity: .4; }

/* Scrolled state — header turns light/solid */
.header.is-scrolled { background: rgba(250,248,244,.9); box-shadow: 0 1px 0 var(--line-soft), var(--shadow-sm); backdrop-filter: blur(14px) saturate(1.2); }
.header.is-scrolled .header__logo-img--light { display: none; }
.header.is-scrolled .header__logo-img--dark { display: block; }
.header.is-scrolled .header__nav a { color: var(--navy); }
.header.is-scrolled .lang-toggle { color: var(--navy); border-color: var(--line); }
.header.is-scrolled .btn--pill { background: var(--navy); color: #fff; border-color: var(--navy); }
.header.is-scrolled .burger span { background: var(--navy); }

/* Burger */
.burger { display: none; inline-size: 44px; block-size: 44px; position: relative; }
.burger span { position: absolute; inset-inline: 10px; block-size: 2px; background: #fff; transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1); }
.burger span:nth-child(1) { inset-block-start: 17px; }
.burger span:nth-child(2) { inset-block-end: 17px; }
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* ==========================================================================
   Mobile menu overlay
   ========================================================================== */
.menu { position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--navy-900);
  display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-inout);
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__nav { display: flex; flex-direction: column; gap: .4rem; }
.menu__nav a { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 500; color: #fff;
  display: flex; align-items: baseline; gap: 1rem; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu.is-open .menu__nav a:nth-child(1) { transition-delay: .12s; }
.menu.is-open .menu__nav a:nth-child(2) { transition-delay: .18s; }
.menu.is-open .menu__nav a:nth-child(3) { transition-delay: .24s; }
.menu.is-open .menu__nav a:nth-child(4) { transition-delay: .30s; }
.menu.is-open .menu__nav a:nth-child(5) { transition-delay: .36s; }
.menu__idx { font-family: var(--font-mono); font-size: .9rem; color: var(--sage); opacity: .8; }
.menu__cta { align-self: flex-start; opacity: 0; transition: opacity .5s ease .44s; }
.menu.is-open .menu__cta { opacity: 1; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-block-size: 100svh; display: flex; align-items: flex-end;
  padding-block-end: clamp(3rem, 8vh, 7rem); padding-block-start: var(--header-h);
  overflow: hidden; isolation: isolate; }
@supports (min-block-size: 100lvh) { .hero { min-block-size: 100lvh; } }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 40%; will-change: transform; }
.hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,31,82,.88) 0%, rgba(8,31,82,.5) 34%, rgba(8,31,82,.28) 60%, rgba(8,31,82,.55) 100%),
    linear-gradient(to right, rgba(8,31,82,.35), transparent 55%); }

.hero__roofline { position: absolute; inset-block-end: 0; inset-inline: 0; z-index: -1; inline-size: 100%; block-size: min(42vh, 340px); opacity: .9; }
.hero__roofline .roof { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 620; stroke-dashoffset: 620; }
.hero.is-in .roof { transition: stroke-dashoffset 1.6s var(--ease-out); stroke-dashoffset: 0; }
.roof--sage  { stroke: var(--sage); opacity: .85; transition-delay: .2s; }
.roof--slate { stroke: var(--slate); opacity: .7; transition-delay: .38s; }
.roof--white { stroke: rgba(255,255,255,.85); transition-delay: .56s; }

.hero__content { position: relative; max-inline-size: 900px; color: #fff; }
.hero__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1);
  line-height: 1.05; letter-spacing: -.015em; margin-block: 1.1rem 1.6rem; }
.hero__title .line { display: block; }
html.mlg-anim .hero__title .line { opacity: 0; transform: translateY(30px); will-change: transform, opacity;
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.hero.is-in .hero__title .line { opacity: 1; transform: none; }
.hero.is-in .hero__title .line:nth-child(1) { transition-delay: .35s; }
.hero.is-in .hero__title .line:nth-child(2) { transition-delay: .48s; }
.hero.is-in .hero__title .line:nth-child(3) { transition-delay: .61s; }
.hero__title .line--accent { color: var(--sage); }
html.mlg-anim .hero__content > .overline, html.mlg-anim .hero__sub, html.mlg-anim .hero__cta { opacity: 0; transform: translateY(24px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.hero.is-in .hero__content > .overline { opacity: 1; transform: none; transition-delay: .2s; }
.hero.is-in .hero__sub { opacity: 1; transform: none; transition-delay: .78s; }
.hero.is-in .hero__cta { opacity: 1; transform: none; transition-delay: .9s; }
.hero__sub { max-inline-size: 56ch; font-size: var(--fs-lead); color: rgba(255,255,255,.9); font-weight: 300; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 2rem; }

.hero__scroll { position: absolute; inset-block-end: 1.6rem; inset-inline-start: var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: .6rem; color: rgba(255,255,255,.75); }
.hero__scroll-txt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; writing-mode: vertical-rl; }
.hero__scroll-line { inline-size: 1px; block-size: 46px; background: linear-gradient(rgba(255,255,255,.7), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; inset-inline: 0; block-size: 40%; background: var(--sage); animation: scrollDot 1.8s var(--ease-inout) infinite; }
@keyframes scrollDot { 0% { transform: translateY(-100%);} 100% { transform: translateY(250%);} }

/* Word-reveal for titles (JS adds .split spans) */
.line .word { display: inline-block; }

/* ==========================================================================
   Reveal-on-scroll primitive
   ========================================================================== */
html.mlg-anim .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
/* shown state must OUT-specify the gate selector (html.mlg-anim .reveal = 0,2,1) */
html.mlg-anim .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem) clamp(2rem, 5vw, 6rem); align-items: start; }
.about__lead { grid-column: 1 / -1; max-inline-size: 720px; }
.about__headline { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 500; color: var(--navy); margin-block-start: .6rem; letter-spacing: -.01em; }
.about__body p { color: var(--ink-soft); margin-block-end: 1.1rem; }
.about__tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1.6rem; }
.about__tags li { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .5em 1.1em; }

.about__figure { position: relative; grid-column: 2 / 3; grid-row: 2; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.about__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; will-change: transform; }
.about__figure figcaption { position: absolute; inset-block-end: 1.2rem; inset-inline-start: 1.2rem; z-index: 2; }
.about__figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,31,82,.55), transparent 45%); z-index: 1; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 5rem); }
.service { display: flex; align-items: flex-start; gap: 1.1rem; padding-block: 1.35rem;
  border-block-end: 1px solid var(--line-soft); transition: padding-inline var(--dur-2) var(--ease-out); }
.service:hover { padding-inline-start: .5rem; }
.service__num { font-family: var(--font-mono); font-size: .8rem; color: var(--sage-700); padding-block-start: .35em; min-inline-size: 2ch; }
.service__txt { font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem); font-weight: 500; color: var(--navy); line-height: 1.35; position: relative; }
.service::before { content: ""; }

/* ==========================================================================
   NUMBERS (navy band — deliberate contrast chapter, bleeds via rounded top)
   ========================================================================== */
.numbers { position: relative; z-index: var(--z-content); background: var(--navy-900);
  color: #fff; padding-block: clamp(4.5rem, 8vw, 8rem); overflow: hidden;
  border-radius: clamp(28px, 5vw, 60px) clamp(28px, 5vw, 60px) 0 0; margin-block-start: clamp(2rem,4vw,4rem); }
.numbers::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 100% at 20% 0%, rgba(157,195,156,.18), transparent 60%); }
.numbers .wrap { position: relative; z-index: 1; }
.numbers__head { max-inline-size: 640px; margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.numbers__sub { color: rgba(255,255,255,.75); font-size: var(--fs-lead); font-weight: 300; margin-block-start: 1rem; }
.numbers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.stat { border-inline-start: 1px solid rgba(255,255,255,.18); padding-inline-start: clamp(1rem, 2vw, 1.8rem); }
.stat__num { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height: 1; color: #fff; letter-spacing: -.02em; }
.stat__num .u { color: var(--sage); }
.stat__label { display: block; margin-block-start: .7rem; color: rgba(255,255,255,.72); font-size: .95rem; }

/* rounded bottom to flow back into light */
.numbers { box-shadow: 0 40px 0 var(--navy-900); } /* fills gap under rounded top if any */

/* ==========================================================================
   WHY US
   ========================================================================== */
.why { background: var(--navy-900); color: #fff; margin-block-start: 0; padding-block-start: clamp(3rem,6vw,5rem);
  border-radius: 0 0 clamp(28px, 5vw, 60px) clamp(28px, 5vw, 60px); }
.why .overline { color: var(--sage-200); }
.why .chapter-title { color: #fff; }
.why .chapter-title em { color: var(--sage); }
.why .chapter-intro { color: rgba(255,255,255,.75); }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); overflow: hidden; }
.feat { background: var(--navy-900); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1.1rem;
  transition: background var(--dur-2) var(--ease-out); min-block-size: 190px; }
.feat:hover { background: var(--navy-800); }
.feat__ic { inline-size: 44px; block-size: 44px; border-radius: 12px; background: rgba(157,195,156,.14); position: relative; }
.feat__ic::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 22px; block-size: 22px;
  background: var(--sage); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.feat h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-h4); line-height: 1.35; color: #fff; }

/* icon masks (inline SVG data URIs) */
.feat__ic[data-ic="clock"]::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.feat__ic[data-ic="globe"]::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18'/%3E%3C/svg%3E"); }
.feat__ic[data-ic="shield"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.feat__ic[data-ic="coins"]::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); }
.feat__ic[data-ic="chart"]::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 16v-3M12 16V8M16 16v-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 16v-3M12 16V8M16 16v-6'/%3E%3C/svg%3E"); }
.feat__ic[data-ic="wrench"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M15 6a4 4 0 0 0-5 5l-6 6 2 2 6-6a4 4 0 0 0 5-5l-2 2-2-2 2-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M15 6a4 4 0 0 0-5 5l-6 6 2 2 6-6a4 4 0 0 0 5-5l-2 2-2-2 2-2z'/%3E%3C/svg%3E"); }
.feat__ic[data-ic="phone"]::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.feat__ic[data-ic="network"]::before{ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3Cpath d='M12 7v4M12 11l-6 6M12 11l6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3Cpath d='M12 7v4M12 11l-6 6M12 11l6 6'/%3E%3C/svg%3E"); }
.feat__ic[data-ic="doc"]::before    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }

/* ==========================================================================
   PROJECTS / GALLERY (masonry via columns)
   ========================================================================== */
.gallery { column-count: 3; column-gap: clamp(.8rem, 1.5vw, 1.4rem); padding-inline: var(--gutter); max-width: var(--maxw); margin-inline: auto; }
.ph { position: relative; break-inside: avoid; margin-block-end: clamp(.8rem, 1.5vw, 1.4rem); border-radius: var(--radius); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); }
.ph img { inline-size: 100%; block-size: auto; transition: transform 1s var(--ease-out); }
.ph::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,31,82,.72), rgba(8,31,82,.05) 45%, transparent 65%); opacity: .35; transition: opacity var(--dur-2) var(--ease-out); }
.ph:hover::after { opacity: .85; }
.ph:hover img { transform: scale(1.06); }
.ph figcaption { position: absolute; inset-block-end: 1rem; inset-inline-start: 1.1rem; z-index: 2; color: #fff;
  transform: translateY(8px); opacity: 0; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.ph:hover figcaption { transform: none; opacity: 1; }
.ph figcaption span { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }
.ph figcaption small { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--sage-200); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes { position: relative; max-inline-size: 900px; margin-inline: auto; text-align: center; }
.quotes__track { position: relative; }
html.mlg-anim .quote { position: absolute; inset-block-start: 0; inset-inline: 0; opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); pointer-events: none; }
html.mlg-anim .quote.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
/* editor / no-JS: show quotes stacked, not hidden */
.mlg-editor-preview .quote { position: relative !important; opacity: 1 !important; transform: none !important; margin-block-end: 2rem; }
.quote p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem); line-height: 1.5; color: var(--navy); }
.quote cite { display: block; margin-block-start: 1.6rem; font-family: var(--font-mono); font-style: normal; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--slate-700); }
.quotes__dots { display: flex; justify-content: center; gap: .6rem; margin-block-start: 2.4rem; }
.quotes__dots button { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--line); transition: background var(--dur-1), transform var(--dur-1); }
.quotes__dots button.is-active { background: var(--navy); transform: scale(1.25); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta { position: relative; z-index: var(--z-content); padding-block: clamp(4rem, 8vw, 7rem); }
.cta__inner { position: relative; overflow: hidden; border-radius: var(--radius-lg); text-align: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%); color: #fff;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem); box-shadow: var(--shadow-lg); }
.cta__inner::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; inline-size: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(157,195,156,.28), transparent 65%); }
.cta__title { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-tight); margin-block: 1rem 1.4rem; }
.cta__title em { color: var(--sage); }
.cta__sub { max-inline-size: 60ch; margin-inline: auto; color: rgba(255,255,255,.82); font-weight: 300; font-size: var(--fs-lead); margin-block-end: 2.2rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; z-index: var(--z-content); background: var(--navy-900); color: #fff; padding-block: clamp(3.5rem, 6vw, 6rem) 0; scroll-margin-top: var(--header-h); }
.footer__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.footer__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug); margin-block: .5rem 2rem; }
.footer__title em { color: var(--sage); }

/* form */
.lead-form { display: grid; gap: 1.1rem; }
.field { position: relative; }
.field input { inline-size: 100%; padding: 1.15rem 1.1rem .55rem; font: inherit; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; transition: border-color var(--dur-1), background var(--dur-1); }
.field input:focus { outline: none; border-color: var(--sage); background: rgba(255,255,255,.1); }
.field label { position: absolute; inset-block-start: .95rem; inset-inline-start: 1.1rem; color: rgba(255,255,255,.6); pointer-events: none; transition: transform var(--dur-1) var(--ease-out), font-size var(--dur-1), color var(--dur-1); transform-origin: inset-inline-start; }
.field input:focus + label, .field input:not(:placeholder-shown) + label { transform: translateY(-.7rem) scale(.78); color: var(--sage-200); }
.field input[dir="ltr"] + label { inset-inline-start: 1.1rem; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #e0736b !important; background: rgba(224,115,107,.08) !important; }
.field.is-invalid label, .field.is-invalid .field__label { color: #e8a09a !important; }
.hp, .mlg-hp { position: absolute !important; inset-inline-start: -9999px !important; inline-size: 1px; opacity: 0 !important; block-size: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none; }
.lead-form__note { min-block-size: 1.2em; font-size: .9rem; margin-block-start: .2rem; }
.lead-form__note.is-ok { color: var(--sage); }
.lead-form__note.is-err { color: #ff9a9a; }

.footer__logo img { block-size: 62px; width: auto; margin-block-end: 1.2rem; }
.footer__blurb { color: rgba(255,255,255,.7); max-inline-size: 44ch; margin-block-end: 1.8rem; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-block-end: 1.8rem; }
.footer__nav a { color: rgba(255,255,255,.8); font-weight: 500; transition: color var(--dur-1); }
.footer__nav a:hover { color: var(--sage); }
.footer__social { display: flex; gap: .8rem; }
.social { inline-size: 46px; block-size: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); transition: background var(--dur-1), transform var(--dur-1), border-color var(--dur-1); }
.social svg { inline-size: 20px; block-size: 20px; fill: #fff; }
.social:hover { background: var(--sage); border-color: var(--sage); transform: translateY(-3px); }
.social:hover svg { fill: var(--navy-900); }

.footer__bar { margin-block-start: clamp(2.5rem, 5vw, 4rem); border-block-start: 1px solid rgba(255,255,255,.12);
  padding-block: 1.6rem; padding-inline: var(--gutter); max-width: var(--maxw); margin-inline: auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; color: rgba(255,255,255,.55); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); background: rgba(6,17,45,.94); backdrop-filter: blur(8px);
  display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility .4s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-inline-size: 90vw; max-block-size: 82vh; border-radius: 10px; box-shadow: var(--shadow-lg); }
.lightbox__close { position: absolute; inset-block-start: 1.2rem; inset-inline-end: 1.4rem; font-size: 2.4rem; line-height: 1; color: #fff; opacity: .8; }
.lightbox__close:hover { opacity: 1; }
.lightbox__nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); font-size: 3rem; color: #fff; opacity: .7; padding: 1rem; transition: opacity var(--dur-1); }
.lightbox__nav:hover { opacity: 1; }
.lightbox__nav--prev { inset-inline-start: 1rem; }
.lightbox__nav--next { inset-inline-end: 1rem; }
.lightbox__cap { position: absolute; inset-block-end: 1.4rem; inset-inline: 0; text-align: center; color: rgba(255,255,255,.85); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { column-count: 2; }
}

@media (max-width: 860px) {
  .header__nav { display: none; }
  .header__cta { display: none; }
  .burger { display: block; }

  .about__grid { grid-template-columns: 1fr; }
  .about__figure { grid-column: 1; grid-row: auto; aspect-ratio: 3/4; max-block-size: 60vh; }
  .services__list { grid-template-columns: 1fr; }
  .numbers__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .stat { border-inline-start: none; border-block-start: 1px solid rgba(255,255,255,.18); padding-block-start: 1rem; padding-inline-start: 0; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .why__grid { grid-template-columns: 1fr; }
  .gallery { column-count: 1; }
  .hero__scroll { display: none; }
  .footer__bar { justify-content: center; text-align: center; }
  .ph figcaption { transform: none; opacity: 1; }         /* touch: always show labels */
  .ph::after { opacity: .55; }
}

/* iOS: keep tap targets comfy, disable heavy blur on low-power */
@media (hover: none) {
  .btn:hover, .social:hover, .ph:hover img { transform: none; }
}

/* ==========================================================================
   v2 additions — Assistant weights, more imagery, motion, partners
   ========================================================================== */

/* Heading weights tuned for the Assistant sans */
.chapter-title, .about__headline, .hero__title, .cta__title, .footer__title { font-weight: 700; }
.stat__num { font-weight: 700; }
.quote p { font-weight: 500; }
.overline { font-weight: 600; }

/* ---- Hero content now lives in .wrap (proper gutters) ---- */
.hero .wrap { width: 100%; }
.hero__content { max-inline-size: 820px; }

/* ---- About: two-image collage ---- */
.about__media { position: relative; grid-column: 2 / 3; grid-row: 2; min-block-size: 520px; }
.about__figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.about__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; will-change: transform; }
.about__figure--main { position: relative; inline-size: 82%; margin-inline-start: auto; aspect-ratio: 4/5; z-index: 1; }
.about__figure--main figcaption { position: absolute; inset-block-end: 1.2rem; inset-inline-start: 1.2rem; z-index: 2; }
.about__figure--main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,31,82,.55), transparent 45%); z-index: 1; }
.about__figure--sub { position: absolute; inset-block-end: -8%; inset-inline-end: 0; inline-size: 46%; aspect-ratio: 3/4; z-index: 2; border: 6px solid var(--stone-50); box-shadow: var(--shadow-lg); }

/* ---- Services: image + list ---- */
.services__body { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.services__figure { position: sticky; top: calc(var(--header-h) + 2rem); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-lg); }
.services__figure img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; will-change: transform; }
.services__figure-badge { position: absolute; inset-block-end: 1.1rem; inset-inline: 1.1rem; z-index: 2; text-align: center;
  background: rgba(250,248,244,.92); color: var(--navy); font-weight: 600; font-size: .9rem; padding: .7em 1em; border-radius: var(--radius-pill); backdrop-filter: blur(6px); }
.services__body .services__list { grid-template-columns: 1fr 1fr; }

/* ---- Numbers: faint building bg ---- */
.numbers__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.numbers__bg img { inline-size: 100%; block-size: 120%; object-fit: cover; opacity: .16; mix-blend-mode: luminosity; will-change: transform; }

/* ---- CTA: building bg under navy overlay ---- */
.cta__inner { padding: 0; }
.cta__bg { position: absolute; inset: 0; z-index: 0; }
.cta__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .28; will-change: transform; }
.cta__content { position: relative; z-index: 2; padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem); }
.cta__inner::before { z-index: 1; }

/* ---- Partners marquee ---- */
.partners { padding-block-end: clamp(4rem, 7vw, 8rem); }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 1.4rem; inline-size: max-content; direction: ltr; /* LTR so the duplicated half sits to the left and -50% loops seamlessly in RTL */ animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partner { flex: 0 0 auto; display: grid; place-items: center; min-inline-size: 190px; block-size: 108px; padding-inline: 2rem;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1); }
.partner:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.partner span { font-weight: 700; font-size: 1.4rem; color: var(--navy); letter-spacing: -.01em; opacity: .78; }
.partner img { max-block-size: 62px; max-inline-size: 150px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter var(--dur-1), opacity var(--dur-1); }
.partner:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; } }

/* ---- Service cards (image top + navy title bar) ---- */
.scards { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.8rem, 1.4vw, 1.3rem); }
.scard { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.scard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.scard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--navy-100); }
.scard__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.scard:hover .scard__media img { transform: scale(1.09); }
.scard__title { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--navy); color: #fff; font-weight: 700; font-size: .98rem; line-height: 1.3; padding: 1rem .75rem; min-block-size: 82px;
  border-block-start: 3px solid transparent; transition: border-color var(--dur-1); }
.scard:hover .scard__title { border-block-start-color: var(--sage); }

/* ---- Interactive expanding panels (projects showcase) ---- */
.showcase { display: flex; gap: .7rem; block-size: min(64vh, 620px); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }
.showcase .panel { position: relative; flex: 1 1 0%; min-inline-size: 0; margin: 0; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  transition: flex-grow .7s var(--ease-inout); will-change: flex-grow; }
.showcase .panel img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.showcase .panel:hover, .showcase .panel:focus-visible, .showcase .panel.is-active { flex-grow: 4.4; outline: none; }
.showcase .panel figcaption { inset-inline-start: 1.4rem; inset-block-end: 1.4rem; opacity: 0; transform: translateY(10px); }
.showcase .panel:hover figcaption, .showcase .panel.is-active figcaption { opacity: 1; transform: none; }
.showcase .panel figcaption span { font-size: 1.6rem; }
.showcase .panel::after { opacity: .5; }
.showcase .panel:hover::after, .showcase .panel.is-active::after { opacity: .8; }

/* ---- Responsive for v2 blocks ---- */
@media (max-width: 1100px) { .scards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .scards { grid-template-columns: repeat(2, 1fr); }
  .showcase { block-size: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: .8rem; padding-block: .3rem; scrollbar-width: none; }
  .showcase::-webkit-scrollbar { display: none; }
  .showcase .panel { flex: 0 0 80%; scroll-snap-align: center; block-size: 58vh; }
  .showcase .panel figcaption { opacity: 1; transform: none; }
  .about__media { grid-column: 1; grid-row: auto; min-block-size: auto; max-block-size: none; }
  .about__figure--main { inline-size: 100%; margin-inline: 0; aspect-ratio: 3/4; max-block-size: 62vh; }
  .about__figure--sub { display: none; }
  .services__body { grid-template-columns: 1fr; }
  .services__figure { position: relative; top: auto; aspect-ratio: 16/10; max-block-size: 44vh; margin-block-end: .5rem; }
  .services__body .services__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .scards { grid-template-columns: 1fr 1fr; }
  .scard__title { font-size: .84rem; min-block-size: 66px; padding: .7rem .45rem; }
  .showcase .panel { flex: 0 0 84%; block-size: 56vh; }
}

/* ==========================================================================
   ELEMENTOR EDITOR / PREVIEW NEUTRALISATION
   Keep everything visible & flat while editing (animations only run on a live
   frontend tab). Real editor signals only — never rely on html.mlg-anim here.
   ========================================================================== */
/* .elementor-editor-active is on the preview <body> WITHOUT any JS — reliable. */
.elementor-editor-active .header,
.mlg-editor-preview .header { position: relative; background: var(--navy-900); }
.elementor-editor-active .header .header__logo-img--light,
.mlg-editor-preview .header .header__logo-img--light { display: block; }
.elementor-editor-active .header .header__logo-img--dark,
.mlg-editor-preview .header .header__logo-img--dark { display: none; }
.elementor-editor-active .hero,
.mlg-editor-preview .hero { min-block-size: 620px; }
.elementor-editor-active .reveal,
.mlg-editor-preview .reveal { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .showcase .panel figcaption,
.mlg-editor-preview .showcase .panel figcaption { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .showcase .panel,
.mlg-editor-preview .showcase .panel { flex: 1 1 0 !important; }
.elementor-editor-active .marquee__track,
.mlg-editor-preview .marquee__track { animation: none !important; }
.elementor-editor-active .preloader,
.mlg-editor-preview .preloader { display: none !important; }

/* Each widget owns its padding — neutralise Elementor's default widget spacing. */
.elementor-widget-mlg-hero, .elementor-widget-mlg-about, .elementor-widget-mlg-services,
.elementor-widget-mlg-numbers, .elementor-widget-mlg-why, .elementor-widget-mlg-projects,
.elementor-widget-mlg-testimonials, .elementor-widget-mlg-partners, .elementor-widget-mlg-cta,
.elementor-widget-mlg-header, .elementor-widget-mlg-footer { width: 100%; }

/* ==========================================================================
   NEUTRALISE THEME (Hello Elementor) reset.css PINK (#cc3366)
   Its reset forces color/border #cc3366 on a / button / [type=submit] and
   loads after us, so we override with matching specificity + !important.
   Links take the surrounding text colour (dark on light, white on dark);
   buttons stay brand navy/white. No pink anywhere.
   ========================================================================== */
.header a, .hero a, .about a, .services a, .numbers a, .why a,
.projects a, .testimonials a, .partners a, .cta a, .footer a { color: inherit; }
.header:not(.is-scrolled) .header__nav a { color: #fff; }
.header.is-scrolled .header__nav a { color: var(--navy); }

/* custom <button> elements — strip the theme's pink border/colour */
.lang-toggle, .burger, .quotes__dots button,
.mlg-lead-form button, .mlg-lead-form [type="submit"], [type="button"], button.btn {
  border-color: currentColor;
  outline-color: transparent;
}
/* brand buttons keep their colours regardless of the theme */
.btn--solid, .mlg-lead-form button[type="submit"], .mlg-lead-form .btn--solid {
  color: #fff !important; border: none !important;
}
.btn--ghost-light { color: #fff !important; }
.btn--pill { color: #fff !important; }
.header.is-scrolled .btn--pill { color: #fff !important; background: var(--navy) !important; border-color: var(--navy) !important; }
.btn--solid:hover, .btn--pill:hover, .btn--ghost-light:hover { color: #fff !important; }
/* form inputs keep our borders (not pink) */
.field input { border-color: rgba(255,255,255,.18) !important; }
.field input:focus { border-color: var(--sage) !important; }

/* ==========================================================================
   LIVE-SITE FIXES (v1.0.2)
   ========================================================================== */

/* 1. FONT — theme/Elementor set a system font on the widget wrapper, and our
   text inherited it. Set our font on the section roots so all descendants
   inherit Assistant. (No !important, so Elementor typography controls still win.) */
.header, .hero, .about, .services, .numbers, .why, .projects,
.testimonials, .partners, .cta, .footer { font-family: var(--font-body); }
.hero__title, .about__headline, .chapter-title, .cta__title, .footer__title,
.numbers__head p { font-family: var(--font-display); }

/* 2. REMOVE the hamburger button + mobile menu overlay entirely (client request) */
.burger { display: none !important; }
.menu { display: none !important; visibility: hidden !important; }

/* 3. PINK — Hello Elementor's reset forces color:#cc3366 !important on <button>.
   Our custom buttons need !important to win. */
.lang-toggle, .lang-toggle * { color: #fff !important; }
.header.is-scrolled .lang-toggle, .header.is-scrolled .lang-toggle * { color: var(--navy) !important; }
.quotes__dots button { border: 0 !important; }
.btn--solid, .header .btn--pill, .footer .btn--solid { color: #fff !important; }

/* 4. TESTIMONIAL DOTS — classic clean round dots */
.quotes__dots { gap: .55rem; }
.quotes__dots button { width: 11px; height: 11px; border-radius: 50%; background: var(--slate-300); transform: none; box-shadow: none; }
.quotes__dots button.is-active { background: var(--navy); transform: none; }

/* 5. MOBILE HEADER — guarantee the logo is visible (no burger crowding it now) */
@media (max-width: 860px) {
  .header__inner { gap: .6rem; }
  .header__logo { flex: 0 0 auto; }
  .header__logo-img { block-size: 40px; width: auto; max-width: 150px; }
  .header__cta { display: none; }        /* keep header light on mobile: logo + language only */
}

/* ==========================================================================
   LIVE-SITE FIXES round 2 (v1.0.2)
   ========================================================================== */

/* A. Header readability over the hero — subtle top gradient so the WHITE logo &
   nav are visible on bright sky (fixes "logo not visible"). Removed when scrolled. */
.header:not(.is-scrolled) { background: linear-gradient(to bottom, rgba(8,31,82,.78), rgba(8,31,82,.35) 55%, rgba(8,31,82,0)); }

/* B. PINK — Hello reset forces #cc3366 with !important on a/button; match it. */
.header__nav a, .menu__nav a, .footer__nav a, .footer a, .footer__bar span,
.hero a:not(.btn), .about a, .services a, .projects a, .partners a, .cta a { color: inherit !important; }
.header:not(.is-scrolled) .header__nav a { color: #fff !important; }
.header.is-scrolled .header__nav a { color: var(--navy) !important; }
.lang-toggle { border: 1px solid rgba(255,255,255,.4) !important; color: #fff !important; }
.header.is-scrolled .lang-toggle { border-color: var(--line) !important; color: var(--navy) !important; }
.lang-toggle .lang-toggle__opt, .lang-toggle .lang-toggle__sep { color: inherit !important; }
.btn--pill { border: 1px solid rgba(255,255,255,.4) !important; color: #fff !important; }
.header.is-scrolled .btn--pill { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.btn--solid { border: none !important; color: #fff !important; }
.quotes__dots button { border: 0 !important; }

/* C. Mobile hero — the big title was overflowing horizontally and (in RTL)
   pushing the logo off-screen. Constrain it. */
@media (max-width: 700px) {
  .hero__content { max-inline-size: 100%; }
  .hero__title { font-size: clamp(1.9rem, 7.4vw, 2.7rem); line-height: 1.12; }
  .hero__title .line { overflow-wrap: break-word; word-break: normal; }
  .hero__sub { font-size: 1.02rem; }
  .header__logo-img { block-size: 38px; }
}

/* ==========================================================================
   LIVE-SITE FIXES round 3 (v1.0.3)
   ========================================================================== */

/* 1. SERVICE CARDS — the whole lower area must be navy (no white gap between
   the image and the title bar). Make the card background navy and let the
   title fill all remaining height. */
.scard { background: var(--navy); }
.scard__media { flex: 0 0 auto; }
.scard__title { flex: 1 1 auto; }

/* 2. TESTIMONIALS — replace the round dots with thin, elegant lines */
.quotes__dots { gap: .8rem; align-items: center; }
.quotes__dots button { width: 30px; height: 2px; border-radius: 0; background: var(--slate-300); transform: none; box-shadow: none; transition: background .3s, width .3s; }
.quotes__dots button.is-active { width: 46px; height: 2px; background: var(--navy); transform: none; }

/* 3. PARTNER MARQUEE — uniform per-item spacing (margin, not flex gap) so the
   duplicated track's -50% translate loops perfectly seamlessly (logos never
   bunch up or leave an empty gap / disappear). */
.marquee__track { gap: 0 !important; }
.marquee__track .partner { margin-inline-end: 1.4rem; }

/* ==========================================================================
   DESIGN & STRUCTURE REVISIONS round 4 (v1.0.4)
   Design/layout only — no source text is altered. Applies globally (CSS),
   so it takes effect on existing widgets regardless of saved Elementor data.
   ========================================================================== */

/* ---- 1. HEADER LOGO — size is controlled per-widget in Elementor (logo_size slider).
   Keep only a safe max-width on small screens so a huge logo can't overflow. ---- */
@media (max-width: 860px) { .header__logo-img { max-width: 210px; } }

/* Header CTA is HIDDEN on mobile (it was getting cut off) — keep the mobile
   header clean: logo + language toggle only. */
@media (max-width: 860px) {
  .header__inner { gap: .5rem; }
  .header__cta { display: none !important; }
  .header__logo-img { max-width: 150px; }
}

/* ---- 2. HERO — make the primary line ("ניהול מבנים מקצועי") dominant ---- */
.hero__title .line:first-child { font-size: var(--hero-t1, clamp(3rem, 1.7rem + 6.4vw, 7rem)); font-weight: 800; letter-spacing: -.02em; line-height: .98; }
.hero__title .line--accent { font-size: var(--hero-t2, clamp(1.35rem, 1rem + 2vw, 2.4rem)); font-weight: 600; margin-block-start: .5rem; opacity: .96; }
@media (max-width: 700px) {
  .hero__title .line:first-child { font-size: var(--hero-t1, clamp(2.3rem, 9.4vw, 3.1rem)); }
  .hero__title .line--accent { font-size: var(--hero-t2, clamp(1.05rem, 4.6vw, 1.45rem)); }
}

/* ---- 3. ABOUT — value chips (שקיפות · זמינות · אחריות) enlarged & prominent ---- */
.about__tags { gap: .8rem; margin-block-start: 2.1rem; }
.about__tags li {
  font-size: .98rem; letter-spacing: .06em; font-weight: 700; text-transform: none;
  color: var(--navy); background: var(--sage-100);
  border: 1.5px solid var(--sage-700); padding: .72em 1.5em;
}

/* ---- 4. SERVICES — larger card titles + image opens on click (zoom cursor) ---- */
.scard__title { font-size: 1.14rem; min-block-size: 92px; line-height: 1.28; }
.scard__media { cursor: zoom-in; }
.scards[data-zoom="0"] .scard__media { cursor: default; }
@media (max-width: 560px) { .scard__title { font-size: .96rem; min-block-size: 72px; } }

/* CTA row shared by content sections (about / services / why / numbers) */
.mlg-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: clamp(2rem, 4vw, 3rem); }
.chapter-head--center + .mlg-cta-row, .mlg-cta-row--center { justify-content: center; }
/* On the navy bands, a navy button would vanish — use a bright sage button */
.numbers .mlg-cta-row .btn--solid, .why .mlg-cta-row .btn--solid {
  background: var(--sage) !important; color: var(--navy-900) !important;
}
.numbers .mlg-cta-row .btn--solid:hover, .why .mlg-cta-row .btn--solid:hover {
  background: var(--sage-500) !important; color: var(--navy-900) !important;
}

/* ---- 5. WHY US — completely reworked, bolder, more prominent, less repetitive ---- */
.why { padding-block: clamp(4rem, 7vw, 6.5rem); }
.why .chapter-head { max-inline-size: 900px; }
.why .chapter-title { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); font-weight: 800; letter-spacing: -.02em; }
.why .chapter-intro { font-size: var(--fs-lead); max-inline-size: 60ch; }
.why__grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(1rem, 2vw, 1.6rem); background: transparent; border: 0; border-radius: 0; overflow: visible;
}
.why .feat {
  background: rgba(255,255,255,.05); border: 1px solid rgba(157,195,156,.28);
  border-radius: var(--radius-lg); padding: clamp(1.8rem, 3vw, 2.8rem);
  flex-direction: row; align-items: flex-start; gap: 1.4rem; min-block-size: 0;
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.why .feat:hover { background: rgba(157,195,156,.12); transform: translateY(-4px); border-color: var(--sage); }
.why .feat__ic { inline-size: 60px; block-size: 60px; border-radius: 16px; flex: 0 0 auto; background: rgba(157,195,156,.18); }
.why .feat__ic::before { inline-size: 30px; block-size: 30px; }
.why .feat h3 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); font-weight: 600; }
@media (max-width: 700px) {
  .why__grid { grid-template-columns: 1fr !important; }
  .why .feat { padding: 1.5rem; gap: 1.1rem; }
  .why .feat__ic { inline-size: 52px; block-size: 52px; }
}

/* ---- 6. NUMBERS — single heading (hide secondary paragraph), CTA-driven band ---- */
.numbers__sub { display: none !important; }
.numbers__head { text-align: center; margin-inline: auto; }
.numbers__head .overline { justify-content: center; }
.numbers__head .overline::before { display: none; }
.numbers .mlg-cta-row { justify-content: center; margin-block-start: clamp(2.5rem, 5vw, 4rem); }

/* ---- 7. PROJECTS — remove text/captions from images, images become a carousel ---- */
.projects .panel figcaption, .projects .ph figcaption, .showcase figcaption { display: none !important; }
.projects .ph::after, .showcase .panel::after { opacity: .28 !important; }
.projects .ph:hover::after, .showcase .panel:hover::after { opacity: .4 !important; }

/* Carousel: equal fixed-width slides on a horizontal snap track (no hover-expand) */
.showcase {
  block-size: auto; overflow-x: auto; scroll-snap-type: none !important; scroll-behavior: smooth;
  gap: clamp(.8rem, 1.5vw, 1.2rem); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-block: .4rem;
}
.showcase::-webkit-scrollbar { display: none; }
.showcase .panel {
  flex: 0 0 clamp(260px, 31%, 460px) !important; scroll-snap-align: none;
  block-size: min(58vh, 540px); cursor: pointer;
}
.showcase .panel:hover, .showcase .panel:focus-visible, .showcase .panel.is-active { flex-grow: 0 !important; }
@media (max-width: 860px) { .showcase .panel { flex: 0 0 82% !important; block-size: 56vh; } }

/* Carousel arrows */
.showcase-wrap { position: relative; max-width: var(--maxw); margin-inline: auto; }
.showcase-arrow {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 3;
  inline-size: 52px; block-size: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; box-shadow: var(--shadow-md);
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1); opacity: .95;
}
.showcase-arrow:hover { background: var(--navy-700); transform: translateY(-50%) scale(1.08); }
.showcase-arrow svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.showcase-arrow--prev { inset-inline-start: calc(var(--gutter) - 6px); }
.showcase-arrow--next { inset-inline-end: calc(var(--gutter) - 6px); }
@media (max-width: 700px) { .showcase-arrow { display: none; } }

/* Image-zoom overlay (service card images open on click) */
.mlg-zoom-overlay { position: fixed; inset: 0; z-index: var(--z-lightbox); background: rgba(6,17,45,.94); backdrop-filter: blur(8px);
  display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility .35s; }
.mlg-zoom-overlay.is-open { opacity: 1; visibility: visible; }
.mlg-zoom-overlay img { max-inline-size: 90vw; max-block-size: 84vh; border-radius: 12px; box-shadow: var(--shadow-lg); }
.mlg-zoom-overlay__close { position: absolute; inset-block-start: 1.2rem; inset-inline-end: 1.4rem; font-size: 2.4rem; line-height: 1; color: #fff; opacity: .85; background: none; border: 0; cursor: pointer; }

/* Editor: keep the projects carousel flat & fully visible while editing */
.elementor-editor-active .showcase, .mlg-editor-preview .showcase { overflow: visible; flex-wrap: wrap; }
.elementor-editor-active .showcase .panel, .mlg-editor-preview .showcase .panel { flex: 0 0 46% !important; }

/* ==========================================================================
   REVISIONS round 5 (v1.0.5)
   Numbers heading · creative Why redesign · carousel arrow direction/colour/pos
   ========================================================================== */

/* ---- 5. NUMBERS — one big heading ---- */
.numbers__head .overline {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); letter-spacing: -.02em;
  text-transform: none; color: #fff; gap: 0;
}
.numbers__head .overline::before { display: none !important; }

/* ---- 4. WHY US — creative "spotlight" cards (pointer-follow glow, gradient edge,
   ghost index number). Overrides the earlier round-4 Why layout. ---- */
.why::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 80% 0%, rgba(157,195,156,.12), transparent 60%); }
.why .wrap { position: relative; z-index: 1; }
.why__grid { grid-template-columns: repeat(2, 1fr) !important; gap: clamp(1rem, 2vw, 1.6rem); background: transparent; border: 0; border-radius: 0; overflow: visible; }
.why .feat {
  position: relative; overflow: hidden; isolation: isolate;
  flex-direction: column; align-items: flex-start; gap: 1.2rem;
  padding: clamp(1.8rem, 3vw, 2.8rem); min-block-size: 200px;
  border-radius: 24px; border: 1px solid rgba(157,195,156,.22);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), background var(--dur-2);
}
.why .feat:hover { transform: translateY(-6px); border-color: rgba(157,195,156,.55); background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); }
/* pointer-follow spotlight */
.why .feat::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(157,195,156,.22), transparent 60%);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.why .feat:hover::after { opacity: 1; }
.why .feat > * { position: relative; z-index: 1; }
.why .feat__idx {
  position: absolute; inset-block-start: .7rem; inset-inline-end: 1.1rem; z-index: 0;
  font-family: var(--font-mono); font-weight: 800; font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1; color: rgba(157,195,156,.16); letter-spacing: -.02em;
}
.why .feat__ic { inline-size: 62px; block-size: 62px; border-radius: 18px; flex: 0 0 auto; background: rgba(157,195,156,.16); }
.why .feat__ic::before { inline-size: 32px; block-size: 32px; background: var(--sage); }
.why .feat h3 { font-size: clamp(1.3rem, 1.05rem + .7vw, 1.7rem); font-weight: 600; color: #fff; }
@media (max-width: 700px) {
  .why__grid { grid-template-columns: 1fr !important; }
  .why .feat { min-block-size: 0; padding: 1.6rem; }
}

/* ---- 6. CAROUSEL ARROWS — kill theme pink, fix direction, positions ---- */
/* arrows are NEVER pink — force white stroke/fill directly (not via currentColor,
   which the Hello theme paints #cc3366). The per-widget arrow-colour control has
   higher specificity ({{WRAPPER}} .showcase-arrow svg) so it still overrides this. */
.showcase-arrow, .showcase-arrow:hover, .showcase-arrow:focus { color: #fff !important; }
.showcase-arrow svg { stroke: #fff !important; fill: none !important; }
/* mirror the glyphs when the site is toggled to English (LTR) so they still point right */
html[dir="ltr"] .showcase-arrow svg { transform: scaleX(-1); }
/* arrows-below option */
.showcase-wrap--bottom { padding-block-end: 4.6rem; }
.showcase-wrap--bottom .showcase-arrow { inset-block-start: auto; inset-block-end: 0; transform: none; }
.showcase-wrap--bottom .showcase-arrow:hover { transform: scale(1.08); }
.showcase-wrap--bottom .showcase-arrow--prev { inset-inline-start: auto; inset-inline-end: calc(50% + .55rem); }
.showcase-wrap--bottom .showcase-arrow--next { inset-inline-end: auto; inset-inline-start: calc(50% + .55rem); }
@media (max-width: 700px) { .showcase-wrap--bottom .showcase-arrow { display: inline-grid; } }

/* ==========================================================================
   REVISIONS round 6 (v1.0.6)
   Logo height driven by a CSS variable set inline on .header by the widget
   render — robust against header portaling & Elementor's cached widget CSS.
   No !important, so Elementor's own live editor preview still wins while editing.
   ========================================================================== */
.header__logo-img { block-size: var(--logo-h, 60px); max-block-size: none; }
@media (max-width: 700px) { .header__logo-img { block-size: var(--logo-h-m, 46px); } }

/* ==========================================================================
   REVISIONS round 7 (v1.0.7)
   WHY US — "sticky split": a pinned aside (title + giant counter that follows
   scroll) beside a tall scrolling list of reasons. Overrides rounds 4-5.
   ========================================================================== */
.why__split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }

.why__aside { position: sticky; top: calc(var(--header-h) + 2.2rem); align-self: start; }
.why__aside .chapter-head { margin-block-end: 0; max-inline-size: none; }
.why__aside .chapter-title { color: #fff; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; }
.why__aside .chapter-title em { color: var(--sage); }
.why__aside .chapter-intro { color: rgba(255,255,255,.72); }

.why__counter { display: flex; align-items: baseline; gap: .5rem; margin-block-start: clamp(2rem, 4vw, 3rem); line-height: 1; }
.why__counter-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(4.5rem, 9vw, 8.5rem); color: var(--sage); letter-spacing: -.03em; }
.why__counter-total { font-family: var(--font-mono); font-size: 1.5rem; color: rgba(255,255,255,.45); }
.why__counter-label { display: block; margin-block-start: .7rem; font-size: var(--fs-lead); font-weight: 600; color: #fff; min-block-size: 2.6em; }
.why__progress { margin-block-start: 1.4rem; block-size: 3px; background: rgba(255,255,255,.14); border-radius: 3px; overflow: hidden; max-inline-size: 320px; }
.why__progress-bar { display: block; block-size: 100%; inline-size: 25%; background: var(--sage); border-radius: 3px; transition: inline-size .6s var(--ease-out); }
.why__aside .mlg-cta-row { margin-block-start: 2.4rem; }

.why__list { display: flex; flex-direction: column; }
.why__list .feat {
  min-block-size: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.4rem;
  background: transparent; border: 0; border-radius: 0; border-block-end: 1px solid rgba(255,255,255,.12);
  padding-block: 2rem; padding-inline: 0; overflow: visible; isolation: auto;
}
.why__list .feat::after { display: none !important; }        /* kill round-5 spotlight glow */
.why__list .feat:last-child { border-block-end: 0; }
.why__list .feat__ic { inline-size: 66px; block-size: 66px; border-radius: 18px; background: rgba(157,195,156,.16); }
.why__list .feat__ic::before { inline-size: 34px; block-size: 34px; background: var(--sage); }
.why__list .feat h3 { color: #fff; font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.2; }

/* static-first: everything visible with no JS; dim the inactive ones only when live */
html.mlg-anim .why__list .feat { opacity: .34; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
html.mlg-anim .why__list .feat.is-active { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .why__split { grid-template-columns: 1fr; gap: 2rem; }
  .why__aside { position: static; }
  .why__counter, .why__progress { display: none; }
  .why__list .feat { min-block-size: auto; padding-block: 1.5rem; }
  html.mlg-anim .why__list .feat { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .why__list .feat { opacity: 1 !important; transform: none !important; } }

/* editor: show all reasons fully, no sticky trickery while editing */
.elementor-editor-active .why__aside, .mlg-editor-preview .why__aside { position: static; }
.elementor-editor-active .why__list .feat, .mlg-editor-preview .why__list .feat { min-block-size: auto; opacity: 1 !important; transform: none !important; }

/* (The former position:sticky overflow-fix rules were removed — the Why section
   is now the no-scroll interactive version and a self-contained rounded band,
   so it needs overflow:hidden to clip its glow, handled in round 9 below.) */

/* ==========================================================================
   REVISIONS round 8 (v1.0.9)
   WHY US — no-scroll interactive version. Same cinematic feel (giant counter),
   but it changes on HOVER / FOCUS / TAP of a reason — no position:sticky and no
   tall scroll blocks, so it needs zero scrolling and can't get "stuck". Overrides
   the round-7 sticky/tall rules.
   ========================================================================== */
.why__split { grid-template-columns: .85fr 1.15fr; align-items: start; }
.why__aside { position: static !important; top: auto; align-self: start; }

.why__list { flex-direction: column; gap: .7rem; }
.why__list .feat {
  min-block-size: 0; flex-direction: row; align-items: center; gap: 1.2rem;
  padding: clamp(1.05rem, 2vw, 1.5rem) clamp(1.2rem, 2vw, 1.6rem);
  border: 1px solid rgba(255,255,255,.12); border-inline-start: 3px solid transparent;
  border-radius: 18px; background: rgba(255,255,255,.04);
  transition: background .35s var(--ease-out), border-color .35s, border-inline-start-color .35s;
  cursor: default;
}
.why__list .feat:hover, .why__list .feat.is-active {
  background: rgba(157,195,156,.13); border-color: rgba(157,195,156,.32); border-inline-start-color: var(--sage);
}
.why__list .feat:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.why__list .feat__ic { inline-size: 56px; block-size: 56px; }
.why__list .feat__ic::before { inline-size: 28px; block-size: 28px; }
.why__list .feat h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
/* everything visible & un-dimmed (no scroll driver anymore) */
html.mlg-anim .why__list .feat { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .why__split { grid-template-columns: 1fr; gap: 1.8rem; }
  .why__counter { display: flex; }
  .why__progress { display: block; }
  .why__list .feat { padding-block: 1.1rem; }
}

/* ==========================================================================
   REVISIONS round 9 (v1.1.0) — SECTION ORDER
   New order: hero · about · WHY · testimonials · services · NUMBERS · projects.
   "Why" and "Numbers" used to be stitched into ONE navy block (one rounded on
   top, the other on the bottom). In the new order they are far apart, so each
   becomes a self-contained navy "island": rounded on all corners, floating
   between the light sections with margin — smooth transitions, no harsh edges.
   ========================================================================== */
.why {
  margin-block: clamp(2rem, 4vw, 4.5rem);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  border-radius: clamp(28px, 4vw, 48px);
  overflow: hidden;                 /* clip the ::before glow to the rounded band */
}
.numbers {
  margin-block: clamp(2rem, 4vw, 4.5rem);
  border-radius: clamp(28px, 4vw, 48px);
  box-shadow: none;                 /* drop the old stitch-filler shadow */
}
/* the light sections keep flowing on the morphing page background between the
   islands — nothing else needed for smooth transitions. */

/* ==========================================================================
   REVISIONS round 10 (v1.1.1) — WHY US back to SCROLL-DRIVEN
   The pinned aside's counter advances automatically as you scroll through the
   reasons (no hover). Sticky needs a NON-clipping section, so instead of
   overflow:hidden we round the glow via border-radius:inherit. Overrides round 8/9.
   ========================================================================== */
.why { overflow: visible; }                 /* sticky must not be clipped by its own section */
.why::before { border-radius: inherit; }    /* keep the glow inside the rounded band without overflow:hidden */

.why__aside { position: sticky !important; top: calc(var(--header-h) + 2.2rem); align-self: start; }

.why__list { flex-direction: column; gap: 0; }
.why__list .feat {
  min-block-size: 58vh; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.4rem;
  border: 0; border-radius: 0; background: transparent;
  border-block-end: 1px solid rgba(255,255,255,.1);
  padding-block: 2rem; padding-inline: 0; cursor: default;
}
.why__list .feat:last-child { border-block-end: 0; }
.why__list .feat:hover, .why__list .feat.is-active { background: transparent; border-color: rgba(255,255,255,.1); border-inline-start-color: transparent; }
.why__list .feat__ic { inline-size: 64px; block-size: 64px; }
.why__list .feat__ic::before { inline-size: 32px; block-size: 32px; }
.why__list .feat h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); }

/* dim inactive reasons; the centred one lights up as you scroll (static-first) */
html.mlg-anim .why__list .feat { opacity: .3; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
html.mlg-anim .why__list .feat.is-active { opacity: 1; transform: none; }

/* sticky is killed by any clipping ancestor — force Elementor's wrappers visible */
.elementor-element:has(.why__aside),
.elementor-widget-container:has(.why__aside),
.elementor-column-wrap:has(.why__aside),
.elementor-widget-wrap:has(.why__aside),
.e-con:has(.why__aside),
.e-con-inner:has(.why__aside) { overflow: visible !important; }

@media (max-width: 860px) {
  .why__aside { position: static !important; }
  .why__list .feat { min-block-size: auto; padding-block: 1.4rem; }
  html.mlg-anim .why__list .feat { opacity: 1; transform: none; }
}

/* ==========================================================================
   REVISIONS round 11 (v1.1.2) — WHY reasons now have a title + subtitle
   ========================================================================== */
.why__list .feat { gap: 1rem; }
.why__list .feat h3 { margin-block-end: 0; }
.why__list .feat__desc {
  color: rgba(255,255,255,.72); font-weight: 300; line-height: 1.65;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); max-inline-size: 48ch;
}

/* ==========================================================================
   REVISIONS round 12 (v1.1.3) — Footer contact details + logo size
   ========================================================================== */
.footer__contact { margin-block: .2rem 1.9rem; }
.footer__contact-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: #fff; margin-block-end: .9rem; }
.footer__contact ul { display: grid; gap: .75rem; }
.footer__contact a, .footer__contact-static {
  display: inline-flex; align-items: center; gap: .7rem;
  color: rgba(255,255,255,.82) !important; transition: color var(--dur-1);
}
.footer__contact a:hover { color: var(--sage) !important; }
.footer__contact svg { inline-size: 20px; block-size: 20px; fill: var(--sage); flex: 0 0 auto; }
.footer__contact span { font-size: .96rem; letter-spacing: .01em; }
.footer__contact span[dir="ltr"] { font-family: var(--font-mono); }

/* ==========================================================================
   REVISIONS round 13 (v1.1.4) — Service cards: editable title + optional text
   The navy bar now stacks a bold title and an optional description line.
   ========================================================================== */
.scard__title { flex-direction: column; gap: .35rem; }
.scard__title-txt { margin: 0; font-size: inherit; font-weight: 700; color: inherit; line-height: 1.25; }
.scard__desc { margin: 0; font-weight: 400; font-size: .82rem; line-height: 1.42; color: rgba(255,255,255,.82); }

/* standalone heading / sub-heading widgets */
.mlg-subheading { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-soft); }

/* Why-us: custom uploaded SVG/image icon (overrides the preset masked icon) */
.feat__ic--custom { display: flex; align-items: center; justify-content: center; }
.feat__ic--custom::before { display: none !important; }
.feat__ic--custom img { inline-size: 62%; block-size: 62%; object-fit: contain; }

/* ==========================================================================
   MOBILE TEXT SAFETY — never cut a word mid-way; keep whole words on phones.
   (A word breaks only if it alone is wider than the screen — rare.)
   ========================================================================== */
@media (max-width: 700px) {
  .hero__title, .hero__title .line, .hero__sub, .overline,
  .chapter-title, .chapter-intro, .about__headline, .about__body p,
  .cta__title, .cta__sub, .footer__title, .footer__blurb,
  .scard__title-txt, .scard__desc, .feat h3, .feat__desc, .stat__label,
  .why__counter-label, .quote p, .quote cite, .partner span, .mlg-subheading {
    word-break: normal; overflow-wrap: break-word; hyphens: none;
  }
  /* absolute guard against horizontal overflow from any element */
  html, body { overflow-x: clip; }
  .wrap, .footer__grid, .about__grid, .why__split { max-inline-size: 100%; }
}

/* ==========================================================================
   REVISIONS round 14 (v1.1.5) — Terms/consent checkbox (was an invisible bar)
   ========================================================================== */
.lead-form__consent { display: flex; align-items: flex-start; gap: .55rem; margin-block-start: .1rem; cursor: pointer; }
.lead-form__consent input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto; -moz-appearance: auto;
  inline-size: 18px; block-size: 18px; min-inline-size: 18px; margin: .14rem 0 0; flex: 0 0 auto;
  accent-color: var(--sage); cursor: pointer;
  background: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; box-shadow: none;
  opacity: 1; position: static; pointer-events: auto; block-size: 18px;
}
.lead-form__consent-txt { font-size: .85rem; color: rgba(255,255,255,.75); line-height: 1.5; }
.lead-form__consent-txt a { color: var(--sage) !important; text-decoration: underline; }

/* ==========================================================================
   REVISIONS round 15 (v1.1.5) — full form field types (Elementor-like)
   text · email · tel · number · url · textarea · select · radio · checkbox ·
   date · time — plus half-width fields.
   ========================================================================== */
.lead-form { grid-template-columns: 1fr 1fr; }
.lead-form > * { grid-column: 1 / -1; }            /* full width by default */
.field--half { grid-column: span 1; }
@media (max-width: 520px) { .field--half { grid-column: 1 / -1; } }

/* textarea — same treatment as text inputs (incl. floating label) */
.field--textarea textarea {
  inline-size: 100%; padding: 1.4rem 1.1rem .7rem; font: inherit; color: #fff; line-height: 1.5;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px;
  resize: vertical; min-block-size: 120px; transition: border-color var(--dur-1), background var(--dur-1);
}
.field--textarea textarea:focus { outline: none; border-color: var(--sage) !important; background: rgba(255,255,255,.1); }
.field--textarea label { inset-block-start: 1.15rem; }
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-.7rem) scale(.78); color: var(--sage-200); }

/* static label used by select / radio / checkbox groups */
.field__label { display: block; color: rgba(255,255,255,.72); font-size: .82rem; letter-spacing: .04em; margin-block-end: .5rem; }

/* select */
.field--choice select {
  inline-size: 100%; padding: .95rem 1.1rem; font: inherit; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 1rem center; background-size: 16px;
}
.field--choice select:focus { outline: none; border-color: var(--sage) !important; }
.field--choice option { color: #111; }             /* dropdown items readable on native menu */

/* radio / checkbox groups */
.field--choice .field__options { display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; }
.field--choice .opt { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.85); cursor: pointer; font-size: .95rem; }
.field--choice .opt input { appearance: auto; -webkit-appearance: auto; inline-size: 17px; block-size: 17px; min-inline-size: 17px; accent-color: var(--sage); cursor: pointer; margin: 0; }

/* ==========================================================================
   REVISIONS round 16 (v1.1.5) — MOBILE POLISH
   ========================================================================== */
@media (max-width: 860px) {
  /* WHY: the giant scroll counter has no sticky pin on mobile, so it just reads
     as a big empty block. Hide it — each reason already carries its title + text. */
  .why__counter, .why__counter-label, .why__progress { display: none; }
  .why__aside { margin-block-end: 1.4rem; }
  .why__aside .chapter-head { margin-block-end: 0; }
  .why__aside .mlg-cta-row { margin-block-start: 1.4rem; }
  .why__list .feat { padding-block: 1.3rem; }
  .why__list .feat h3 { font-size: 1.35rem; }

  /* tighten the two navy bands on small screens */
  .numbers { padding-block: clamp(3rem, 9vw, 4rem); }
  .why { padding-block: clamp(2.6rem, 8vw, 3.6rem); }
}
/* keep service cards in a row equal height so the navy bars align */
.scards { align-items: stretch; }
.scard { block-size: 100%; }