/* ECHO — Light & Sound · main.css
   כל ערך מגיע מ-tokens.css. אפס ערכים קשיחים כאן. */

/* ============================ RESET ============================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  word-spacing:var(--ws-body);color:var(--color-text);background:var(--color-bg);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--color-accent);color:var(--color-accent-contrast)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px;border-radius:2px}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:999;
  background:var(--color-accent);color:var(--color-accent-contrast);padding:12px 20px;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{inset-inline-start:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.label{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--color-text-faint);
  direction:ltr;display:inline-block}

/* ============================ GRAIN ============================ */
.grain{position:fixed;inset:-120px;z-index:var(--z-grain);pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite}
@keyframes grainShift{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-12px,8px)}
  33%{transform:translate(9px,-14px)} 50%{transform:translate(-7px,11px)}
  66%{transform:translate(13px,6px)} 83%{transform:translate(-10px,-9px)}}

/* ====================== VOLUMETRIC BEAMS ====================== */
.beam-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.beam{position:absolute;top:-28vh;width:34vw;height:150vh;background:var(--grad-beam);
  filter:blur(58px);opacity:0;transform-origin:50% 0%;will-change:transform,opacity}
.beam--a{right:8%;transform:rotate(15deg)}
.beam--b{left:4%;background:linear-gradient(180deg,rgba(23,224,212,.3) 0%,rgba(23,224,212,0) 78%);transform:rotate(-18deg)}
.beam--c{right:44%;background:linear-gradient(180deg,rgba(255,46,126,.2) 0%,rgba(255,46,126,0) 74%);transform:rotate(5deg)}

/* ========================== CURSOR ============================ */
.cursor{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--color-line-strong);z-index:var(--z-cursor);pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;mix-blend-mode:difference;
  transition:width var(--dur-fast) var(--ease-brand),height var(--dur-fast) var(--ease-brand),
             background var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand)}
.cursor.is-hot{width:64px;height:64px;background:rgba(255,255,255,.9);border-color:transparent}
@media(hover:none),(max-width:900px){.cursor{display:none}}

/* ========================== LOADER =========================== */
.loader{position:fixed;inset:0;z-index:var(--z-loader);background:var(--color-bg-deep);display:grid;place-items:center}
.loader__mark{position:relative;display:grid;place-items:center}
.loader__bar{position:absolute;bottom:-38px;right:0;height:1px;width:0;background:var(--grad-brand)}
.loader__pct{position:absolute;bottom:-70px;right:0;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.14em;color:var(--color-text-faint);direction:ltr}

/* ============================ NAV ============================ */
.nav{position:fixed;top:0;inset-inline:0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--gutter);border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-brand),backdrop-filter var(--dur-base) var(--ease-brand),
             border-color var(--dur-base) var(--ease-brand),padding var(--dur-base) var(--ease-brand)}
.nav.is-stuck{background:rgba(5,6,13,.72);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--color-line);padding-block:var(--space-3)}
.nav__logo img{width:124px;height:auto}
.nav__links{display:flex;gap:var(--space-5);align-items:center}
.nav__link{position:relative;font-size:var(--fs-sm);color:var(--color-text-dim);
  transition:color var(--dur-fast) var(--ease-brand)}
.nav__link::after{content:'';position:absolute;bottom:-6px;inset-inline-end:0;height:1px;width:0;
  background:var(--color-accent);transition:width var(--dur-base) var(--ease-brand)}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--color-text)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{width:100%}
.nav__toggle{display:none;width:44px;height:44px;place-items:center}
.nav__toggle span{display:block;width:22px;height:1.5px;background:var(--color-text);position:relative}
.nav__toggle span::before,.nav__toggle span::after{content:'';position:absolute;inset-inline:0;
  height:1.5px;background:var(--color-text);transition:transform var(--dur-base) var(--ease-brand)}
.nav__toggle span::before{top:-7px}.nav__toggle span::after{top:7px}
.nav.is-open .nav__toggle span{background:transparent}
.nav.is-open .nav__toggle span::before{transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__toggle span::after{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1024px){
  .nav__toggle{display:grid}
  .nav__links{position:fixed;inset:0;background:var(--color-bg-deep);
    flex-direction:column;justify-content:center;gap:var(--space-4);
    font-size:1.5rem;transform:translateY(-100%);transition:transform var(--dur-slow) var(--ease-brand)}
  .nav.is-open .nav__links{transform:translateY(0)}
  .nav__link{color:var(--color-text);font-size:1.5rem;font-family:var(--font-display);font-weight:800}
  .nav .btn--cta{display:none}
}

/* ========================== BUTTONS ========================== */
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);
  padding:14px 26px;border-radius:var(--radius-pill);font-family:var(--font-body);
  font-weight:600;font-size:var(--fs-sm);overflow:hidden;isolation:isolate;
  transition:transform var(--dur-base) var(--ease-brand),box-shadow var(--dur-base) var(--ease-brand)}
.btn--cta{background:var(--color-accent);color:var(--color-accent-contrast);box-shadow:var(--glow-accent)}
.btn--cta::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--grad-brand);
  opacity:0;transition:opacity var(--dur-base) var(--ease-brand)}
.btn--cta:hover::before{opacity:1}
.btn--cta:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(23,224,212,.55);color:var(--color-text)}
.btn--ghost{border:1px solid var(--color-line-strong);color:var(--color-text)}
.btn--ghost:hover{border-color:var(--color-text);transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}

/* =========================== HERO ============================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero--page{min-height:72svh}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.08);transform:scale(1.12);will-change:transform}
.hero__veil{position:absolute;inset:0;z-index:-1;background:var(--grad-veil)}
.hero__veil::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 40%,transparent 20%,rgba(5,6,13,.7) 100%)}
.hero__inner{width:100%;padding-block:var(--space-6) var(--space-5);position:relative}
.hero__eyebrow{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.hero__eyebrow::before{content:'';width:clamp(28px,6vw,72px);height:1px;background:var(--color-accent)}
.hero__title{font-family:var(--font-display);font-weight:900;font-size:var(--fs-hero);
  line-height:var(--lh-tight);margin-bottom:var(--space-4)}
.hero--page .hero__title{font-size:var(--fs-h1)}
.hero__title .ln{display:block;overflow:hidden}
.hero__title .ln>span{display:block}
.hero__title .hl{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{max-width:54ch;color:var(--color-text-dim);font-size:clamp(1rem,1.5vw,1.22rem);margin-bottom:var(--space-5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.hero__meta{margin-top:var(--space-6);padding-top:var(--space-3);border-top:1px solid var(--color-line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4)}
.hero__meta div{display:flex;flex-direction:column;gap:6px}
.hero__meta strong{font-family:var(--font-display);font-weight:800;font-size:1.05rem}

/* animated intro states (JS sets them visible) */
.js .hero__title .ln>span{opacity:0}   /* GSAP מגדיר yPercent — אסור transform/translate כאן */
.js .hero__eyebrow,.js .hero__sub,.js .hero__actions,.js .hero__meta,.js .scrollcue,.js .sound{opacity:0}

.scrollcue{position:absolute;inset-inline-start:var(--gutter);bottom:var(--space-4);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue__track{width:1px;height:56px;background:var(--color-line-strong);position:relative;overflow:hidden}
.scrollcue__track::after{content:'';position:absolute;top:0;left:0;width:100%;height:40%;
  background:var(--color-accent);animation:cueRun 2.2s var(--ease-inout) infinite}
@keyframes cueRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(250%)}}
@media(max-width:900px){.scrollcue{display:none}}

/* ======================= SOUND TOGGLE ======================== */
.sound{position:absolute;inset-inline-end:var(--gutter);bottom:var(--space-5);z-index:3;
  display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--color-line-strong);background:rgba(5,6,13,.5);backdrop-filter:blur(12px);
  font-size:var(--fs-sm);font-weight:600;
  transition:border-color var(--dur-base) var(--ease-brand),background var(--dur-base) var(--ease-brand)}
.sound:hover{border-color:var(--color-accent);background:rgba(5,6,13,.75)}
.sound__bars{display:flex;align-items:flex-end;gap:3px;height:16px}
.sound__bars i{width:2px;height:4px;background:var(--color-accent);border-radius:1px}
.sound.is-on .sound__bars i{animation:eq .9s var(--ease-inout) infinite alternate}
.sound.is-on .sound__bars i:nth-child(2){animation-delay:.15s}
.sound.is-on .sound__bars i:nth-child(3){animation-delay:.3s}
.sound.is-on .sound__bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{from{height:3px}to{height:16px}}
@media(max-width:900px){.sound{bottom:var(--space-4);padding:8px 14px}.sound__txt{display:none}}

/* ========================== TICKER =========================== */
.ticker{border-block:1px solid var(--color-line);background:var(--color-bg-deep);
  padding-block:var(--space-3);overflow:hidden;position:relative;z-index:1}
.ticker__row{display:flex;gap:var(--space-5);width:max-content;will-change:transform}
.ticker__item{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint);
  white-space:nowrap;direction:ltr}
.ticker__item::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--color-brand)}

/* ========================= SECTIONS ========================== */
.section{position:relative;padding-block:var(--space-8);z-index:1}
.section--tight{padding-block:var(--space-7)}
.section__head{margin-bottom:var(--space-6);max-width:70ch}
.section__title{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h2);
  line-height:var(--lh-head);margin-block:var(--space-3);position:relative}
.section__lead{color:var(--color-text-dim);max-width:58ch}
.rule{position:relative;height:1px;background:var(--color-line);margin-block:var(--space-5)}
.rule::before{content:'';position:absolute;inset-inline:0;top:0;height:7px;
  background-image:repeating-linear-gradient(to left,var(--color-line) 0 1px,transparent 1px 44px)}

/* =========================== BENTO =========================== */
.bento{display:grid;gap:var(--space-3);grid-template-columns:repeat(12,1fr)}
.card{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--color-surface);
  border:1px solid var(--color-line);min-height:300px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:var(--space-4);isolation:isolate;
  transition:border-color var(--dur-base) var(--ease-brand),transform var(--dur-base) var(--ease-brand)}
.card:hover{border-color:var(--color-line-strong);transform:translateY(-4px)}
.card__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.card__bg img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.08) brightness(.62);transform:scale(1.06);
  transition:transform var(--dur-cine) var(--ease-brand),filter var(--dur-cine) var(--ease-brand)}
.card:hover .card__bg img{transform:scale(1.14);filter:saturate(1.15) contrast(1.1) brightness(.78)}
.card__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,13,.15) 0%,rgba(5,6,13,.9) 100%)}
.card__num{position:absolute;top:var(--space-4);inset-inline-end:var(--space-4);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;color:var(--color-text-faint);direction:ltr}
.card__title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);margin-bottom:8px}
.card__text{color:var(--color-text-dim);font-size:var(--fs-sm);max-width:42ch}
.card__more{margin-top:var(--space-3);font-size:var(--fs-sm);color:var(--color-accent);font-weight:600}
.card__line{position:absolute;bottom:0;inset-inline-end:0;height:2px;width:0;
  background:var(--grad-cta);transition:width var(--dur-slow) var(--ease-brand)}
.card:hover .card__line{width:100%}
.card--a{grid-column:span 7;min-height:440px}
.card--b{grid-column:span 5;min-height:440px}
.card--c{grid-column:span 5}
.card--d{grid-column:span 7}
@media(max-width:900px){.card--a,.card--b,.card--c,.card--d{grid-column:span 12;min-height:320px}}

/* ================== HORIZONTAL WORKS ========================= */
.works{position:relative;background:var(--color-bg-deep);overflow:hidden}
.works__pin{height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.works__head{padding-inline:var(--gutter);margin-bottom:var(--space-4);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}
.works__title{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h2);line-height:var(--lh-head)}
.works__hint{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-text-faint);direction:ltr;white-space:nowrap}
.works__track{display:flex;gap:var(--space-3);padding-inline:var(--gutter);width:max-content;will-change:transform}
.slide{position:relative;flex:none;width:clamp(260px,34vw,480px);height:clamp(340px,54vh,600px);
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-line)}
.slide img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.08) brightness(.74);transform:scale(1.08);
  transition:transform var(--dur-cine) var(--ease-brand),filter var(--dur-cine) var(--ease-brand)}
.slide:hover img{transform:scale(1);filter:saturate(1.15) contrast(1.1) brightness(.95)}
.slide::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(2,3,9,.88) 100%)}
.slide__cap{position:absolute;inset-inline:var(--space-4);bottom:var(--space-4);z-index:2}
.slide__cap strong{display:block;font-family:var(--font-display);font-weight:800;font-size:1.15rem}
.slide__cap span{color:var(--color-text-dim);font-size:var(--fs-sm)}
.slide--tall{height:clamp(400px,66vh,700px)}
.works__bar{height:1px;background:var(--color-line);margin-inline:var(--gutter);margin-top:var(--space-4);position:relative}
.works__bar i{position:absolute;inset-inline-end:0;top:0;height:1px;width:6%;background:var(--grad-cta)}
@media(max-width:900px){
  .works__pin{height:auto;padding-block:var(--space-7)}
  .works__track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:var(--space-3)}
  .slide{scroll-snap-align:start;width:78vw;height:60vh}
  .slide--tall{height:60vh}
  .works__bar{display:none}
}

/* ========================== PILLARS ========================== */
.pillars{padding-block:var(--space-8);position:relative;z-index:1}
.pillars__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-6) var(--space-5);margin-top:var(--space-7)}
.pillar{position:relative;display:flex;flex-direction:column;gap:var(--space-3);
  padding-top:var(--space-4);border-top:1px solid var(--color-line)}
.pillar::after{content:'';position:absolute;top:0;inset-inline-end:0;height:1px;width:0;
  background:var(--grad-cta);transition:width var(--dur-cine) var(--ease-brand)}
.pillar:hover::after{width:100%}
.pillar__n{font-family:var(--font-mono);font-weight:700;
  font-size:clamp(3.4rem,7vw,6rem);line-height:.85;letter-spacing:-.02em;direction:ltr;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.55;transition:opacity var(--dur-slow) var(--ease-brand)}
.pillar:hover .pillar__n{opacity:1}
.pillar b{font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.05;color:var(--color-text)}
.pillar p{color:var(--color-text-dim);font-size:var(--fs-body);max-width:34ch}

/* ========================== PROSE ============================ */
.prose{max-width:68ch}
.prose h2{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h2);
  line-height:var(--lh-head);margin-block:var(--space-6) var(--space-3)}
.prose h3{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);
  margin-block:var(--space-5) var(--space-2)}
.prose p{color:var(--color-text-dim);margin-bottom:var(--space-3)}
.prose ul{margin-block:var(--space-3);display:grid;gap:var(--space-2)}
.prose li{color:var(--color-text-dim);padding-inline-start:22px;position:relative}
.prose li::before{content:'';position:absolute;inset-inline-start:0;top:.65em;
  width:7px;height:1px;background:var(--color-accent)}
.prose strong{color:var(--color-text);font-weight:600}

/* ========================== SPECS ============================ */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;margin-top:var(--space-6);border-top:1px solid var(--color-line)}
.spec{position:relative;padding:var(--space-5) var(--space-4) var(--space-5) 0;
  border-bottom:1px solid var(--color-line);
  transition:background var(--dur-base) var(--ease-brand)}
.spec::before{content:'';position:absolute;top:-1px;inset-inline-end:0;height:1px;width:0;
  background:var(--grad-cta);transition:width var(--dur-cine) var(--ease-brand)}
.spec:hover::before{width:100%}
.spec:hover{background:linear-gradient(180deg,rgba(110,75,255,.05),transparent)}
.spec__n{font-family:var(--font-mono);font-size:.7rem;letter-spacing:var(--ls-label);
  color:var(--color-text-faint);direction:ltr;display:block;margin-bottom:var(--space-3)}
.spec h4{font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.15;margin-bottom:10px}
.spec p{color:var(--color-text-dim);font-size:var(--fs-sm);max-width:36ch}

/* ==================== PULL QUOTE (עמודי שירות) =============== */
.pull{margin-block:var(--space-7);padding-inline-start:var(--space-4);
  border-inline-start:2px solid var(--color-accent);max-width:26ch}
.pull p{font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.15;color:var(--color-text)}

/* ==================== NEXT SERVICE (מעבר בין עמודים) ========= */
.next{position:relative;display:block;min-height:52svh;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;z-index:1}
.next__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.next__bg img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.08) brightness(.42);transform:scale(1.06);
  transition:transform var(--dur-cine) var(--ease-brand),filter var(--dur-cine) var(--ease-brand)}
.next:hover .next__bg img{transform:scale(1.13);filter:saturate(1.15) contrast(1.1) brightness(.62)}
.next__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,13,.5) 0%,rgba(5,6,13,.92) 100%)}
.next__inner{width:100%;padding-block:var(--space-6)}
.next__label{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.next__label::before{content:'';width:clamp(28px,6vw,72px);height:1px;background:var(--color-accent)}
.next__title{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h1);
  line-height:var(--lh-head);display:flex;align-items:center;gap:var(--space-3)}
.next__arrow{display:inline-block;color:var(--color-accent);
  transition:transform var(--dur-slow) var(--ease-brand)}
.next:hover .next__arrow{transform:translateX(-14px)}

/* ========================== GALLERY ========================== */
.gallery{columns:3;column-gap:var(--space-3)}
.gallery figure{break-inside:avoid;margin-bottom:var(--space-3);position:relative;
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-line)}
.gallery img{width:100%;height:auto;filter:saturate(1.06) contrast(1.08) brightness(.82);
  transition:filter var(--dur-cine) var(--ease-brand),transform var(--dur-cine) var(--ease-brand)}
.gallery figure:hover img{filter:saturate(1.15) contrast(1.1) brightness(1);transform:scale(1.03)}
@media(max-width:1024px){.gallery{columns:2}}
@media(max-width:640px){.gallery{columns:1}}

/* ========================== LIGHTBOX ========================= */
.lb{position:fixed;inset:0;z-index:var(--z-loader);background:rgba(2,3,9,.94);
  backdrop-filter:blur(10px);display:none;place-items:center;padding:var(--space-4)}
.lb.is-open{display:grid}
.lb img{max-width:92vw;max-height:86vh;width:auto;border-radius:var(--radius-md)}
.lb__close{position:absolute;top:var(--space-4);inset-inline-end:var(--space-4);
  width:48px;height:48px;border-radius:50%;border:1px solid var(--color-line-strong);display:grid;place-items:center}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;border:1px solid var(--color-line-strong);display:grid;place-items:center;font-size:1.3rem}
.lb__nav--prev{inset-inline-end:var(--space-4)}
.lb__nav--next{inset-inline-start:var(--space-4)}

/* =========================== CTA ============================= */
.cta{position:relative;text-align:center;padding-block:var(--space-8);overflow:hidden;z-index:1}
.cta__glow{position:absolute;inset-inline:0;top:50%;height:520px;transform:translateY(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(110,75,255,.22) 0%,transparent 70%);pointer-events:none}
.cta__title{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h1);
  line-height:var(--lh-head);margin-block:var(--space-3) var(--space-4)}
.cta__sub{color:var(--color-text-dim);max-width:48ch;margin:0 auto var(--space-5)}

/* ========================== FOOTER =========================== */
.foot{border-top:1px solid var(--color-line);background:var(--color-bg-deep);
  padding-block:var(--space-6) var(--space-5);position:relative;z-index:1;overflow:hidden}

/* וורדמארק ענק חצוי — הסיום הוא חלק מהעיצוב, לא הדבקה */
.foot__mark{position:relative;margin-bottom:var(--space-6);pointer-events:none;user-select:none}
.foot__mark img{width:100%;max-width:none;opacity:.14;
  transform:translateY(22%);filter:grayscale(.2)}
.foot__mark::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,var(--color-bg-deep) 88%)}
@media(max-width:900px){.foot__mark{margin-bottom:var(--space-5)}}

.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-5);margin-bottom:var(--space-5)}
.foot__logo img{width:150px;margin-bottom:var(--space-3)}
.foot__grid p{color:var(--color-text-dim);font-size:var(--fs-sm);max-width:38ch}
.foot h5{font-family:var(--font-display);font-weight:800;font-size:1rem;margin-bottom:var(--space-3)}
.foot ul{display:grid;gap:10px}
.foot li a{color:var(--color-text-dim);font-size:var(--fs-sm);transition:color var(--dur-fast) var(--ease-brand)}
.foot li a:hover{color:var(--color-accent)}
.foot__bar{border-top:1px solid var(--color-line);padding-top:var(--space-4);
  display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;
  color:var(--color-text-faint);font-size:var(--fs-sm)}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr}}

/* ==================== FLOATING WHATSAPP ====================== */
.wa{position:fixed;inset-inline-start:24px;bottom:24px;z-index:var(--z-nav);
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--color-accent);box-shadow:var(--glow-accent);
  transition:transform var(--dur-base) var(--ease-brand)}
.wa::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--color-accent);
  animation:waPing 2.8s var(--ease-inout) infinite}
@keyframes waPing{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.75);opacity:0}}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px;fill:var(--color-accent-contrast)}
.wabar{display:none}
@media(max-width:900px){
  .wa{display:none}
  .wabar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-nav);
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:14px env(safe-area-inset-right) calc(14px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    background:var(--color-accent);color:var(--color-accent-contrast);font-weight:600}
  .wabar svg{width:22px;height:22px;fill:var(--color-accent-contrast)}
  body{padding-bottom:64px}
}

/* ========================= REVEALS =========================== */
.js [data-rise]{opacity:0;transform:translateY(28px)}
.echo-wrap{position:relative;display:inline-block}
.echo-ghost{position:absolute;inset-inline-end:0;top:0;white-space:nowrap;
  pointer-events:none;color:var(--color-text);user-select:none}

@media (prefers-reduced-motion: reduce){
  .grain,.scrollcue__track::after,.wa::after{animation:none}
  .js [data-rise],.js .hero__eyebrow,.js .hero__sub,.js .hero__actions,
  .js .hero__meta,.js .scrollcue,.js .sound{opacity:1;transform:none}
  .js .hero__title .ln>span{opacity:1}
}

/* ================= BLUR-UP IMAGE LOADING ==================== */
.lq{position:relative;overflow:hidden;background-size:cover;background-position:center}
.lq::after{content:'';position:absolute;inset:0;backdrop-filter:blur(14px);
  transition:opacity var(--dur-slow) var(--ease-brand)}
.lq.is-loaded::after{opacity:0}
.lq > img{opacity:0;transition:opacity var(--dur-slow) var(--ease-brand)}
.lq.is-loaded > img{opacity:1}

/* ==================== PAGE TRANSITION ======================== */
.curtain{position:fixed;inset:0;z-index:calc(var(--z-loader) + 10);pointer-events:none;
  display:grid;place-items:center;background:var(--color-bg-deep);
  clip-path:inset(0 0 100% 0)}
.curtain.is-in{pointer-events:all}
.curtain img{width:min(230px,42vw);opacity:0}

/* ================= FULLSCREEN MENU (desktop) ================= */
.menubtn{display:none;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:600}
.menubtn__bars{display:grid;gap:5px;width:24px}
.menubtn__bars i{height:1.5px;background:var(--color-text);display:block;
  transition:transform var(--dur-base) var(--ease-brand),opacity var(--dur-base) var(--ease-brand)}
.menubtn__bars i:last-child{width:60%;margin-inline-start:auto}
.menu.is-open ~ .nav .menubtn__bars i:first-child{transform:translateY(3px) rotate(45deg)}
@media(min-width:1025px){.menubtn{display:flex}.nav__links{display:none}}

.menu{position:fixed;inset:0;z-index:calc(var(--z-nav) + 5);background:var(--color-bg-deep);
  display:grid;grid-template-columns:1.15fr .85fr;
  clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-cine) var(--ease-brand);
  pointer-events:none}
.menu.is-open{clip-path:inset(0 0 0 0);pointer-events:all}
.menu__list{display:flex;flex-direction:column;justify-content:center;
  gap:var(--space-2);padding:var(--space-8) var(--gutter)}
.menu__item{position:relative;overflow:hidden}
.menu__link{display:flex;align-items:baseline;gap:var(--space-3);
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.06;
  color:var(--color-text-faint);transform:translateY(105%);
  transition:color var(--dur-base) var(--ease-brand)}
.menu.is-open .menu__link{transform:translateY(0);
  transition:transform var(--dur-slow) var(--ease-brand),color var(--dur-base) var(--ease-brand)}
.menu__link:hover{color:var(--color-text)}
.menu__link span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:var(--ls-label);
  color:var(--color-text-faint);direction:ltr}
.menu__preview{position:relative;overflow:hidden;background:var(--color-bg)}
.menu__preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);
  filter:saturate(1.06) contrast(1.08) brightness(.7);
  transition:opacity var(--dur-slow) var(--ease-brand),transform var(--dur-cine) var(--ease-brand)}
.menu__preview img.is-live{opacity:1;transform:scale(1)}
.menu__foot{position:absolute;inset-inline:var(--gutter);bottom:var(--space-5);
  display:flex;justify-content:space-between;gap:var(--space-4);
  color:var(--color-text-faint);font-size:var(--fs-sm);z-index:2}
@media(max-width:1024px){.menu{grid-template-columns:1fr}.menu__preview{display:none}}

/* ======================== CLIENTS =========================== */
.clients{padding-block:var(--space-8);position:relative;z-index:1}
.clients__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1px;background:var(--color-line);border:1px solid var(--color-line);margin-top:var(--space-6)}
.client{background:var(--color-bg);min-height:130px;display:grid;place-items:center;
  padding:var(--space-4);text-align:center;
  transition:background var(--dur-base) var(--ease-brand)}
.client:hover{background:var(--color-surface)}
.client span{font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  color:var(--color-text-dim);transition:color var(--dur-base) var(--ease-brand)}
.client:hover span{color:var(--color-text)}
.client img{max-height:52px;width:auto;filter:grayscale(1) brightness(1.6);opacity:.6;
  transition:filter var(--dur-base) var(--ease-brand),opacity var(--dur-base) var(--ease-brand)}
.client:hover img{filter:none;opacity:1}
.client{align-content:center;gap:5px}
/* שם משני בלטינית מתחת לשם העברי */
.client__en{font-family:var(--font-mono);font-style:normal;font-size:.68rem;
  letter-spacing:var(--ls-label);direction:ltr;text-transform:uppercase;
  color:var(--color-text-faint);transition:color var(--dur-base) var(--ease-brand)}
.client:hover .client__en{color:var(--color-accent)}

/* ================= AUDIO-REACTIVE (מחלקת מצב) =============== */
.is-audio .beam{transition:none}

/* =========================== BLOG ============================ */
.hero--post{min-height:56svh;align-items:flex-end}
.post__meta{font-family:var(--font-mono);font-size:.75rem;letter-spacing:var(--ls-label);
  color:var(--color-text-faint);direction:ltr;margin-top:var(--space-3)}
.post{max-width:68ch}
.post__lede{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.6;color:var(--color-text);
  padding-inline-start:var(--space-4);border-inline-start:2px solid var(--color-accent);
  margin-bottom:var(--space-6)}
.post h2{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h2);
  line-height:var(--lh-head);margin-block:var(--space-7) var(--space-3)}
.post h3{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);
  margin-block:var(--space-5) var(--space-2)}
.post p{color:var(--color-text-dim);margin-bottom:var(--space-3)}
.post ul,.post ol{margin-block:var(--space-3);display:grid;gap:var(--space-2);padding-inline-start:0}
.post li{color:var(--color-text-dim);padding-inline-start:22px;position:relative}
.post li::before{content:'';position:absolute;inset-inline-start:0;top:.65em;
  width:7px;height:1px;background:var(--color-accent)}
.post strong{color:var(--color-text);font-weight:600}
.post a:not(.btn){color:var(--color-accent);border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease-brand)}
.post a:not(.btn):hover{border-bottom-color:var(--color-accent)}
.post table{width:100%;border-collapse:collapse;margin-block:var(--space-4);font-size:var(--fs-sm)}
.post th,.post td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--color-line)}
.post th{font-family:var(--font-display);font-weight:800;color:var(--color-text)}
.post td{color:var(--color-text-dim)}
.post blockquote{margin-block:var(--space-5);padding-inline-start:var(--space-4);
  border-inline-start:2px solid var(--color-brand)}
.post blockquote p{font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.25;color:var(--color-text)}

/* FAQ */
.faq{display:grid;border-top:1px solid var(--color-line);margin-top:var(--space-4)}
.faq__item{border-bottom:1px solid var(--color-line)}
.faq__item summary{cursor:pointer;list-style:none;padding:var(--space-4) 0;
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  display:flex;justify-content:space-between;gap:var(--space-3);align-items:center;
  transition:color var(--dur-fast) var(--ease-brand)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:'+';color:var(--color-accent);font-family:var(--font-mono);
  font-size:1.3rem;flex:none;transition:transform var(--dur-base) var(--ease-brand)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{color:var(--color-accent)}
.faq__a{padding-bottom:var(--space-4)}
.faq__a p{color:var(--color-text-dim);margin:0;max-width:66ch}

/* קישורי אשכול */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--color-line);border:1px solid var(--color-line)}
.related__item{background:var(--color-bg);padding:var(--space-4);display:grid;gap:10px;
  transition:background var(--dur-base) var(--ease-brand)}
.related__item:hover{background:var(--color-surface)}
.related__item strong{font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.3}

/* אינדקס הבלוג */
.postlist{display:grid;gap:1px;background:var(--color-line);
  border:1px solid var(--color-line);margin-top:var(--space-6)}
.postlist a{background:var(--color-bg);padding:var(--space-5) var(--space-4);
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:baseline;
  transition:background var(--dur-base) var(--ease-brand);position:relative}
.postlist a:hover{background:var(--color-surface)}
.postlist a::after{content:'';position:absolute;bottom:0;inset-inline-end:0;height:2px;width:0;
  background:var(--grad-cta);transition:width var(--dur-slow) var(--ease-brand)}
.postlist a:hover::after{width:100%}
.postlist h3{font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.2rem,2.4vw,1.8rem);line-height:1.2;margin-bottom:8px}
.postlist p{color:var(--color-text-dim);font-size:var(--fs-sm);max-width:64ch}
@media(max-width:700px){.postlist a{grid-template-columns:1fr}}

/* ========================== CATALOG ========================== */
.catalog{display:grid;gap:var(--space-8);margin-top:var(--space-6)}
.catgroup__head{display:flex;align-items:baseline;gap:var(--space-3);
  padding-bottom:var(--space-3);border-bottom:1px solid var(--color-line-strong)}
.catgroup__n{font-family:var(--font-mono);font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;direction:ltr;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.catgroup__head h3{font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.4rem,2.6vw,2.1rem);flex:1}

.gear{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--color-line);border:1px solid var(--color-line);
  border-top:0;margin-top:-1px}
.gear__item{background:var(--color-bg);display:flex;flex-direction:column;
  position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--dur-base) var(--ease-brand)}
.gear__item::after{content:'';position:absolute;bottom:0;inset-inline-end:0;height:2px;width:0;
  background:var(--grad-cta);transition:width var(--dur-slow) var(--ease-brand)}
.gear__item:hover{background:var(--color-surface)}
.gear__item:hover::after{width:100%}

.gear__img{position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  padding:var(--space-4);background:
    radial-gradient(70% 70% at 50% 40%,rgba(110,75,255,.10),transparent 70%),
    var(--color-bg-deep);overflow:hidden}
.gear__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform var(--dur-cine) var(--ease-brand),filter var(--dur-cine) var(--ease-brand);
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.6))}
.gear__item:hover .gear__img img{transform:scale(1.07)}
/* פריטי צילום — ממלאים את המסגרת במקום לרחף בתוכה */
.gear__img--photo{padding:0}
.gear__img--photo img{width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;filter:saturate(1.06) contrast(1.06) brightness(.92)}
.gear__img--photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,13,.12) 0%,rgba(5,6,13,.5) 100%);
  pointer-events:none}
.gear__item:hover .gear__img--photo img{transform:scale(1.07);
  filter:saturate(1.14) contrast(1.08) brightness(1.02)}

/* כרטיס בלי צילום — נראה מכוון, לא שבור.
   רשת שרטוט בשפת ה-Light Plot + הוורדמארק בעדינות. */
.gear__img--none{
  background:
    linear-gradient(to left, var(--color-line) 1px, transparent 1px) 0 0/38px 38px,
    linear-gradient(to bottom, var(--color-line) 1px, transparent 1px) 0 0/38px 38px,
    radial-gradient(70% 70% at 50% 45%, rgba(110,75,255,.14), transparent 72%),
    var(--color-bg-deep);
  position:relative}
.gear__img--none::before{
  content:'';position:absolute;inset:0;
  background:url('../assets/logo/echo-wordmark-reverse.png') center/48% no-repeat;
  opacity:.16;filter:grayscale(.3)}
.gear__img--none span{display:none}

.gear__body{padding:var(--space-4);display:grid;gap:8px;align-content:start;flex:1}
.gear__body h4{font-family:var(--font-mono);font-weight:700;font-size:1.02rem;
  color:var(--color-text);direction:ltr;text-align:start}
/* שם מעורב (לטינית+עברית): פונט מונו מרווח עברית גרוע — עוברים לפונט הגוף */
.gear__body h4.is-mixed{font-family:var(--font-display),var(--font-body);
  letter-spacing:normal;unicode-bidi:plaintext}
.gear__spec{font-family:var(--font-body);font-size:var(--fs-sm);
  color:var(--color-accent);font-weight:600}
.gear__body p{color:var(--color-text-dim);font-size:var(--fs-sm);line-height:1.6}


/* ═══════════════════ MOBILE — תיקונים ═══════════════════ */
@media (max-width: 900px) {
  :root { --wabar-h: 58px; }

  /* הסרגל הדביק חייב מרווח אמיתי מתחתיו — כולל safe-area באייפון */
  body { padding-bottom: calc(var(--wabar-h) + env(safe-area-inset-bottom)); }
  .wabar { height: var(--wabar-h); box-sizing: content-box; }

  /* ההירו נכנס במסך אחד, בלי שהסרגל יבלע את סרגל המטא */
  .hero { min-height: calc(100svh - var(--wabar-h)); }
  .hero--page { min-height: calc(62svh - var(--wabar-h)); }
  .hero__inner { padding-block: var(--space-5) var(--space-5); }
  .hero__title { font-size: clamp(2rem, 8.6vw, 3.1rem); margin-bottom: var(--space-3); }
  .hero__sub { font-size: 1rem; line-height: 1.55; margin-bottom: var(--space-4); }
  .hero__actions { gap: var(--space-2); }
  .hero__actions .btn { padding: 12px 20px; font-size: .9rem; }
  /* סרגל המטא: 4 שורות בעברית לא נכנסות במסך טלפון.
     נשארות התוויות הטכניות בלבד — שורה אחת, אותו רושם, 80px פחות. */
  .hero__meta { display: flex; gap: var(--space-4); margin-top: var(--space-4);
    padding-top: var(--space-3); overflow-x: auto; scrollbar-width: none; }
  .hero__meta::-webkit-scrollbar { display: none; }
  .hero__meta > div { flex: none; }
  .hero__meta strong { display: none; }

  /* כפתור הקול עבר לראש ההירו — למטה הוא התנגש בסרגל המטא ובסרגל הוואטסאפ */
  .sound { top: calc(var(--space-7) + 6px); bottom: auto;
    inset-inline-end: var(--gutter); padding: 11px 14px; min-height: 44px; }

  /* ─── התפריט ─── */
  /* 9 פריטים חייבים להיכנס במסך אחד — משתמש לא מגלה שצריך לגלול בתפריט */
  .nav__links {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    justify-content: center;
    padding-block: calc(var(--space-7) + 6px) var(--space-5);
    gap: clamp(4px, 1.4vh, 14px);
  }
  /* אזור מגע של 44px — המינימום לנגישות במגע */
  .nav__link { font-size: clamp(1.15rem, 5.2vw, 1.6rem); line-height: 1.25;
    min-height: 44px; display: flex; align-items: center; }
  .nav__link::after { bottom: 4px; }
  /* הסרגל הדביק הסתיר את הפריטים האחרונים — מוסתר כשהתפריט פתוח */
  .nav.is-open ~ .wabar,
  .nav.is-open ~ .wa { display: none; }
  .nav.is-open { background: var(--color-bg-deep); }

  /* טיפוגרפיה כללית */
  .section { padding-block: var(--space-7); }
  .section__title, .cta__title { font-size: clamp(1.6rem, 6.4vw, 2.2rem); }
  .pillar__n { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .pillar b { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .catgroup__head { flex-wrap: wrap; gap: var(--space-2); }
  .catgroup__head h3 { flex: 1 1 100%; }
  .foot__mark img { transform: translateY(30%); }
  .post__lede { font-size: 1.05rem; }
  .next { min-height: 40svh; }
  .next__title { font-size: clamp(1.8rem, 8vw, 2.6rem); }

  /* גלריה — עמודה אחת נעימה יותר מ-2 צרות */
  .gallery { columns: 1; }
}

@media (max-width: 420px) {
  .hero__meta { grid-template-columns: 1fr; gap: var(--space-2); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
}

/* כרטיס פיצ'ר — קטגוריה עם פריט אחד מקבלת פריסה רחבה במקום עמודה מתוחה */
.gear--feature{grid-template-columns:1fr}
.gear--feature .gear__item{flex-direction:row-reverse;align-items:stretch}
.gear--feature .gear__img{flex:1 1 56%;aspect-ratio:auto;min-height:400px;
  padding:var(--space-6);position:relative;isolation:isolate}
/* אור סטודיו רך מאחורי מוצרים מרוקעים — ציוד שחור על רקע שחור נעלם בלי זה */
.gear__img:not(.gear__img--photo):not(.gear__img--none){position:relative;isolation:isolate}
.gear__img:not(.gear__img--photo):not(.gear__img--none)::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 64% 60% at 50% 52%,
    rgba(124,132,196,.13) 0%, rgba(124,132,196,.05) 46%, transparent 72%)}
.gear__img:not(.gear__img--photo):not(.gear__img--none) img{position:relative;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
.gear--feature .gear__img::before{background:radial-gradient(ellipse 62% 58% at 50% 52%,
    rgba(124,132,196,.20) 0%, rgba(124,132,196,.07) 45%, transparent 72%)!important}
.gear--feature .gear__img img{filter:drop-shadow(0 24px 46px rgba(0,0,0,.65))}
.gear--feature .gear__body{flex:1 1 44%;justify-content:center;align-content:center;
  padding:var(--space-6);gap:var(--space-3)}
.gear--feature .gear__body h4{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.gear--feature .gear__spec{font-size:1rem}
.gear--feature .gear__body p{font-size:var(--fs-body);max-width:46ch}
@media(max-width:900px){
  .gear--feature .gear__item{flex-direction:column}
  .gear--feature .gear__img{min-height:0;aspect-ratio:4/3;padding:var(--space-4)}
  .gear--feature .gear__body{padding:var(--space-4)}
}