/* Impact360 — homepage composition (shared components live in site.css)
   v2 · corporate restraint (tools/BRIEF.md): the lens + dock stay as the brand moment; everything else is flat
   navy/blue type on frosted panels. No drift, rings, orbs, halos or glows; the one loop is the client-logo marquee
   (the client's request), slow and pausable, static under reduced motion. */

/* ---------------------------------------------------------------- hero: the film seen through the lens */
.home-hero { --plate: clamp(72px, 9vw, 128px); height: 100vh; height: 100svh; min-height: 640px; max-height: 1180px; padding: var(--inset); }
.hero-window {
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: clamp(28px, 3vw, 46px);
  background: #16306f url(/assets/video/d72408_e81780d369b04a3da036920611785e5a_poster-720.jpg) center / cover;
  box-shadow: 0 50px 110px -50px rgba(10, 31, 68, .6), 0 0 0 1px rgba(255, 255, 255, .4);
  --focus: #fff;
}
.hero-window::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 -60px 120px -60px rgba(6, 18, 48, .5);
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* the film is the only motion: no slow zoom */
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 18, 48, .34) 0%, rgba(6, 18, 48, 0) 24%, rgba(6, 18, 48, 0) 58%, rgba(6, 18, 48, .55) 100%),
    radial-gradient(70% 60% at 50% 48%, rgba(6, 18, 48, 0) 40%, rgba(6, 18, 48, .28) 100%);
}
.hero-stage {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: calc(var(--nav-top) + var(--bar-h) + 10px) 16px calc(var(--plate) + 112px);
}
/* v3: the title is plain display type on the film (no lens), the CTA sits under it */
.hero-stage { align-content: center; gap: clamp(26px, 4vh, 44px); }
.hero-title {
  margin: 0; text-align: center; color: #fff;
  font: 800 clamp(56px, 9.4vw, 148px)/.92 var(--font-display); letter-spacing: -.035em;
  text-shadow: 0 2px 40px rgba(6, 18, 48, .45);
}
.hero-title .w { display: block; }
.hero-title strong { color: #6f9bff; font-weight: inherit; margin-inline-start: -.06em; }
.hero-cta .glass-button-text { white-space: nowrap; }

/* entrance only (one shot) */
.js .hero-title { animation: rise-in 1.1s var(--ease) both; }
.js .hero-cta { animation: rise-in 1s var(--ease) .35s both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------------------------------------------------------------- statement plate resting on the hero edge */
.home-intro { position: relative; z-index: 3; margin-top: calc(-1 * clamp(72px, 9vw, 128px)); padding-inline: var(--gutter); }
.intro-plate {
  --tint-a: rgba(255, 255, 255, .74); --tint-b: rgba(255, 255, 255, .6);
  max-width: 1080px; margin-inline: auto;
  padding: clamp(32px, 4.4vw, 64px) clamp(22px, 5vw, 84px);
  border-radius: clamp(30px, 3vw, 44px);
  text-align: center;
}
.intro-plate strong { font-weight: inherit; }
.intro-lead { font: 900 clamp(30px, 4.3vw, 62px)/1.1 var(--font-display); letter-spacing: -.016em; color: var(--ink); text-wrap: balance; }
.intro-lead .c-brand { color: var(--blue); }
.intro-sub { margin: clamp(14px, 1.6vw, 22px) auto 0; max-width: 46ch; font: 500 clamp(17px, 1.5vw, 21px)/1.65 var(--font-body); color: var(--ink-2); text-wrap: balance; }

/* ---------------------------------------------------------------- model */
.home-model { padding-block: clamp(96px, 11vw, 160px) clamp(40px, 5vw, 72px); }
.model-title {
  margin-block-end: clamp(40px, 5vw, 72px);
  font: 900 clamp(40px, 5.6vw, 84px)/1.06 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.model-title a { display: inline-block; text-decoration: none; color: inherit; border-radius: 12px; }
.model-title .ln { display: inline-block; transition: color .3s; }
.model-title a:hover .ln--2 { color: var(--blue); }
.brand-word { color: var(--blue); font-weight: 800; letter-spacing: -.04em; }

.model-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "copy stats" "cta stats";
  column-gap: clamp(40px, 6vw, 96px); row-gap: 36px; align-items: center;
}
.model-copy-wrap { grid-area: copy; max-width: 40em; }
.model-copy { font: 400 clamp(17px, 1.3vw, 19px)/1.85 var(--font-body); color: var(--ink-2); }
.model-copy > p:first-child { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.6; font-weight: 500; color: var(--ink); text-wrap: balance; }
.model-copy > h3 { font: 900 clamp(23px, 2.1vw, 30px)/1.25 var(--font-display); color: var(--ink); }
.model-copy > h3 strong { font-weight: 800; letter-spacing: -.03em; color: var(--blue); }
.model-copy > h3 .rx { font-weight: 500; letter-spacing: -.02em; color: var(--ink-2); }
.model-cta { grid-area: cta; align-self: start; }

/* two frosted stat panels side by side on the grid's second column: blue numeral, hairline, label */
.model-stats {
  grid-area: stats; align-self: center;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px);
}
.model-stats .stat { /* the two panels share one grid row, so they stretch to the same height */
  --tint-a: rgba(255, 255, 255, .74); --tint-b: rgba(255, 255, 255, .58);
  padding: clamp(22px, 2.2vw, 32px) clamp(20px, 2vw, 28px);
  border-radius: var(--r-lg);
  justify-content: flex-start; text-align: start;
}
.model-stats .stat-num {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--blue);
  font: 700 clamp(52px, 5.2vw, 80px)/1 var(--font-display); letter-spacing: -.045em;
}
.model-stats .stat-label {
  margin-block-start: 18px; padding-block-start: 14px; border-top: 1px solid rgba(10, 31, 68, .16);
  font: 500 clamp(14.5px, 1.1vw, 16.5px)/1.45 var(--font-body); color: var(--ink-2); text-wrap: pretty;
}

/* ---------------------------------------------------------------- clients: a calm marquee (static wall without JS / motion)
   The data-marquee contract (site.js §6) moves the tiles; the running geometry (tile width clamp(150px, 15vw, 224px),
   16:10, track height --th) is site.js's and stays untouched here. No colour field behind the rail (v2). */
.home-clients { padding-block: clamp(40px, 5vw, 72px) clamp(80px, 9vw, 136px); }
.clients-title { text-align: center; font-size: clamp(24px, 2.4vw, 34px); color: var(--ink-2); padding-inline: var(--gutter); margin-block-end: clamp(6px, 1vw, 14px); }
.clients-marquee .marquee-viewport { padding-block: clamp(24px, 2.6vw, 38px) clamp(30px, 3.2vw, 46px); }
.clients-marquee.is-running .marquee-viewport { /* a longer, softer edge fade than the shared 9% */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.home-clients .logo-tile {
  --tint-a: rgba(255, 255, 255, .84); --tint-b: rgba(255, 255, 255, .7);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, .6vw, 9px);
  container-type: inline-size; /* its width is always definite (site.js rail width / a grid track) */
  border-radius: var(--r-md);
  box-shadow: inset 0 1px .5px #fff, inset 0 0 0 .5px rgba(255, 255, 255, .5), 0 1px 1px rgba(10, 31, 68, .04), 0 14px 30px -20px rgba(10, 31, 68, .32);
}
/* moving tiles: the frost would re-blur a flat, featureless gradient every frame for no visible difference (checked
   side by side), so the running rail keeps the tint, rim and shadow and drops only the backdrop pass */
.clients-marquee.is-running .logo-tile { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* each mark: an <img> box cropped to the file's ink box (object-fit) and sized to one optical area (home.py) */
.home-clients .logo-img { flex: none; width: var(--w); height: auto; aspect-ratio: var(--ar); max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.home-clients .logo-img--contain { object-fit: contain; }
.home-clients .logo-img--tone { filter: url(#ko-tone); opacity: .8; } /* full-colour files: same ink, BDO/Clalit tone */
.home-clients .logo-tile:hover .logo-img--tone { filter: url(#ko-tone-blue); opacity: .9; } /* = the Wix marks' blue */
/* a captioned tile keeps its mark on the rail's centre line (rows 1fr · mark · 1fr) with the district line hanging
   in the lower band; a caption taller than that band (2 lines in the 114px phone wall) takes the room it needs from
   the top band, so the mark only rises when it has to */
.home-clients .logo-tile--cap { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(min-content, 1fr); justify-items: center; align-items: start; gap: 0; padding-block: 8px; }
.home-clients .logo-tile--cap .logo-img { grid-row: 2; }
.home-clients .logo-tile--cap .logo-cap { grid-row: 3; margin-block-start: clamp(6px, 4cqi, 9px); }
.home-clients .logo-cap {
  max-width: 100%; padding-inline: 8px; text-align: center; text-wrap: balance;
  font: 600 12px/1.25 var(--font-body); letter-spacing: .01em; color: var(--ink-3);
  font-size: clamp(12px, 5.8cqi, 12.5px); /* scales with its tile (150–224px running, ~114px in the phone wall); 12px floor */
  transition: color .3s;
}
.home-clients .logo-tile:hover .logo-cap { color: var(--blue); }
/* the pause / play control: small and quiet, centred under the rail (WCAG 2.2.2) */
.clients-marquee .marquee-controls { margin-block-start: 0; }
.clients-marquee .marquee-toggle { height: 34px; min-width: 34px; color: var(--ink-3); background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(10, 31, 68, .1); }
.clients-marquee .marquee-toggle:hover { color: var(--ink); background: rgba(255, 255, 255, .85); transform: none; }
.clients-marquee .marquee-toggle:focus-visible { box-shadow: inset 0 0 0 1px rgba(10, 31, 68, .1), 0 0 0 2.5px #fff; } /* keep the ring's white inner band */
.clients-marquee .marquee-toggle .i { width: 12px; height: 12px; }
/* static wall (no JS, reduced motion): 6 + 6 on desktop, 4 × 3 on tablets, 3 × 4 on phones */
.home-clients .marquee:not(.is-running) .logo-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.home-clients .marquee:not(.is-running) .logo-wall .logo-tile { grid-column: auto; }
@media (forced-colors: active) {
  .home-clients .logo-tile { forced-color-adjust: none; background: #fff; } /* the inked marks need their light ground */
}

/* ---------------------------------------------------------------- how it works: numbered frosted panels under a thin rule */
.how-steps { position: relative; padding-block-start: 30px; }
.how-rule { position: absolute; inset-inline: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .32); }
.how-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.how-step { position: relative; display: flex; min-width: 0; }
.how-dot { position: absolute; top: -34px; inset-inline-start: clamp(18px, 2vw, 28px); width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.how-card {
  --tint-a: rgba(255, 255, 255, .16); --tint-b: rgba(255, 255, 255, .07); --blur: 18px;
  flex: 1; min-height: clamp(190px, 16.5vw, 236px);
  padding: clamp(20px, 2vw, 28px);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5);
}
.how-num { display: block; font: 600 clamp(56px, 5.4vw, 80px)/.9 var(--font-display); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.how-title { font: 700 clamp(18px, 1.5vw, 22px)/1.35 var(--font-body); color: #fff; text-wrap: balance; }

/* ---------------------------------------------------------------- contact: standard heading over the frosted panel */
.home-contact .sec-head { margin-block-end: clamp(24px, 3vw, 40px); }
.home-contact .contact-panel { --tint-a: rgba(255, 255, 255, .74); --tint-b: rgba(255, 255, 255, .6); border-radius: var(--r-xl); }
.home-contact .field :where(input, textarea) { background: rgba(255, 255, 255, .86); } /* plain white fields (the shared tint is lilac-ish) */
/* primary CTA pool (the send button): one flat IMPACT blue and a soft navy shadow instead of the shared blue glow */
.page-home .cta-pool:not(.cta-pool--smoke)::before { background: var(--blue); box-shadow: 0 12px 26px -14px rgba(10, 31, 68, .55), inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .hero-stage { padding-block-end: calc(var(--plate) + 104px); }
}
@media (max-width: 1079px) {
  .home-clients .marquee:not(.is-running) .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 820px; }
}
@media (max-width: 900px) {
  .model-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stats" "cta"; row-gap: 40px; }
  .model-copy-wrap { max-width: none; } /* one column: copy, the stat row and the CTA share the same width */
  .how-steps { padding-block-start: 0; }
  .how-rule, .how-dot { display: none; }
  .how-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-hero { --plate: 64px; min-height: 620px; }
  .hero-stage { padding: calc(var(--nav-top) + var(--bar-h) + 6px) 12px calc(var(--plate) + 96px); }
  .hero-title { font-size: clamp(48px, 15vw, 72px); }
  .hero-cta .glass-button-text { white-space: normal; }
  .home-intro { margin-top: calc(-1 * 64px); padding-inline: 14px; }
  .intro-plate { padding: 30px 20px 32px; border-radius: 30px; }
  .intro-lead { font-size: clamp(28px, 8.6vw, 40px); line-height: 1.14; }
  .intro-sub { font-size: 17px; }
  .home-model { padding-block-start: 96px; }
  .model-title { font-size: clamp(36px, 10vw, 48px); line-height: 1.08; }
  .model-copy { font-size: 17px; line-height: 1.8; }
  .model-copy > p:first-child { font-size: 19px; }
  .model-stats { gap: 10px; }
  .model-stats .stat { min-height: 0; padding: 20px 16px 18px; border-radius: 22px; }
  .model-stats .stat-num { font-size: 44px; }
  .model-stats .stat-label { font-size: 14px; margin-block-start: 12px; padding-block-start: 10px; }
  .clients-title { margin-block-end: 22px; }
  .home-clients .marquee:not(.is-running) .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-inline: 16px; }
  .home-clients .logo-tile { border-radius: 16px; }
  .how-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .how-card { min-height: 0; flex-direction: row; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 22px; }
  .how-num { flex: none; min-width: 58px; font-size: 40px; line-height: 1; }
  .how-title { font-size: 17.5px; flex: 1; min-width: 0; text-align: start; } /* one-line captions hug the start edge too */
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-title, .js .hero-cta { animation: none; }
}