/* ============================================================
   VEMMAR case — evidence-led laboratory inside the Studio shell.
   Shell (nav/foot/tools) styles come from studio-case-shell.css.
   Studio narration: Einstein. Brand artifacts: Alacrity/FbUnica.
   No liquid gradient inside the case body.
   ============================================================ */

.vemmar-case{margin:0;background:#F6F5F0}
.case-main{font-family:'Einstein','FbUnicaSans',sans-serif;color:#2E382C;line-height:1.75}
.case-main *,.case-main *::before,.case-main *::after{box-sizing:border-box}
.case-main img{max-width:100%;height:auto;display:block}
.case-main h1,.case-main h2{line-height:1.2;color:#475444;margin:0 0 .5em;font-weight:600}
.case-main p{margin:0 0 1em}
.case-main :focus-visible{outline:2px solid #475444;outline-offset:3px}
.case-main .wrap{width:min(100% - clamp(32px,6vw,48px),1180px);margin-inline:auto}

.text-link{color:#475444;text-decoration:none;border-bottom:1px solid rgba(71,84,68,.4);padding-bottom:2px}
.text-link:hover{border-bottom-color:#475444}

/* ---------- masthead ---------- */
.case-masthead{padding:clamp(46px,7vw,96px) 0 clamp(30px,4vw,54px)}
.masthead-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,72px);align-items:end}
.case-eyebrow{
  font-size:.95rem;color:#74866C;letter-spacing:.02em;margin:0 0 14px;
}
.case-masthead h1{font-size:clamp(2.2rem,5.4vw,4.2rem);letter-spacing:-.01em}
.masthead-copy p{font-size:1.06rem;color:#3d463b;max-width:44ch}
@media(max-width:860px){.masthead-grid{grid-template-columns:1fr}}

/* ---------- hero world ---------- */
.hero-world{margin:0;position:relative;overflow:hidden;background:#475444}
.hw-scene{width:100%;height:clamp(340px,52vw,640px);object-fit:cover;object-position:18% 50%}
.hw-lockup{
  position:absolute;top:50%;inset-inline-start:clamp(24px,8vw,120px);transform:translateY(-50%);
}
.hw-lockup img{width:clamp(200px,26vw,360px);height:auto}
.hw-fig{
  position:absolute;bottom:18px;inset-inline-start:22px;
  color:#E2E6DA;background:rgba(46,56,44,.55);padding:6px 12px;border-radius:2px;
}
@media(max-width:640px){
  .hw-scene{object-position:64% 50%;height:420px}
  .hw-lockup{inset-inline-start:50%;transform:translate(50%,-50%);max-width:calc(100% - 24px)}
  .hw-lockup img{width:min(220px,100%)}
}

/* ---------- generic section rhythm ---------- */
.case-sec{padding-block:clamp(64px,9vw,130px)}
.sec-sage{background:#E2E6DA}
.sec-forest{background:#475444;color:#E7EAE0}
.sec-forest h2{color:#F6F5F0}
.sec-forest p{color:#DCE1D3}
.sec-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,5vw,84px);align-items:center}
.sec-grid>*{min-width:0}
.sec-grid.flip{grid-template-columns:1.1fr .9fr}
.sec-grid.flip .sec-copy{order:2}
.sec-grid.flip .sec-media{order:1}
@media(max-width:860px){
  .sec-grid,.sec-grid.flip{grid-template-columns:1fr}
  .sec-grid.flip .sec-copy{order:1}
  .sec-grid.flip .sec-media{order:2}
}
.sec-no{
  font-family:"Alacrity Sans",sans-serif;font-size:.8rem;letter-spacing:.28em;
  color:#74866C;margin:0 0 16px;text-transform:uppercase;
}
.sec-forest .sec-no{color:#B7B8A9}
.case-sec h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
.sec-copy p{font-size:1.04rem;max-width:52ch}
.sec-media{margin:0;position:relative}
.sec-head-c{max-width:720px;margin-bottom:clamp(30px,4vw,56px)}
.sec-lead-c{font-size:1.05rem}

/* 01 origin */
.original-ad img{border-radius:3px;box-shadow:0 26px 70px rgba(46,56,44,.28)}
.original-ad figcaption{margin-top:12px;font-size:.9rem;color:#74866C}

/* 02 mark build */
.mark-build{
  background:#F6F5F0;border:1px solid rgba(71,84,68,.22);border-radius:3px;
  padding:clamp(40px,6vw,84px);
}
.mark-build img{width:min(420px,80%);margin-inline:auto}
.mb-guide{position:absolute;background:rgba(71,84,68,.35)}
.mb-guide.gh{height:1px;inset-inline:6%}
.mb-guide.gv{width:1px;top:10%;bottom:10%}
.mb-a{
  position:absolute;width:12px;height:12px;border:1.5px solid #475444;background:#F6F5F0;
  border-radius:50%;
}

/* 03 logo board */
.logo-board{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
}
.lb{
  border-radius:3px;min-height:210px;position:relative;
  display:flex;align-items:center;justify-content:center;padding:26px 22px 40px;
  border:1px solid rgba(71,84,68,.18);
}
.lb img{max-width:82%;max-height:130px;width:auto}
.lb .lb-mark{max-height:96px}
.lb .lb-tall{max-height:160px}
.lb-wide{grid-column:span 3}
.lb-forest{background:#475444;grid-column:span 3}
.lb-light{background:#F6F5F0;grid-column:span 2}
.lb-sage{background:#E2E6DA;grid-column:span 2}
.lb .vm-index{position:absolute;bottom:12px;inset-inline-start:16px;font-size:.66rem}
.lb-forest .vm-index{color:#B7B8A9}
@media(max-width:860px){
  .logo-board{grid-template-columns:1fr 1fr}
  .lb-wide,.lb-forest,.lb-light,.lb-sage{grid-column:span 1}
  .lb-wide{grid-column:span 2}
  .lb-forest{grid-column:span 2}
}

/* 04 palette */
.palette{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.palette li{
  min-height:230px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
}
.palette b{font-family:"Alacrity Sans",sans-serif;letter-spacing:.22em;font-size:.78rem;font-weight:600}
.palette span{font-family:"Alacrity Sans",sans-serif;font-size:.95rem;letter-spacing:.1em}
.palette small{font-size:.72rem;opacity:.75;letter-spacing:.06em}
@media(max-width:860px){.palette{grid-template-columns:1fr}.palette li{min-height:110px}}

/* 05 type spec */
.type-spec{
  background:#475444;color:#F6F5F0;border-radius:3px;
  padding:clamp(30px,4.5vw,60px);display:flex;flex-direction:column;gap:22px;
}
.ts-big{font-family:"Alacrity Sans",sans-serif;font-weight:600;font-size:clamp(4.4rem,9vw,7.5rem);line-height:1}
.ts-abc{font-family:"Alacrity Sans",sans-serif;font-size:clamp(.95rem,1.6vw,1.25rem);letter-spacing:.18em;color:#E2E6DA}
.ts-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  border-top:1px solid rgba(246,245,240,.28);padding-top:16px;
}
.ts-lat{font-family:"Alacrity Sans",sans-serif;letter-spacing:.3em;font-size:.8rem;color:#B7B8A9}
.ts-mairo{font-family:"Mairo",cursive;font-size:2rem;color:#F6F5F0}
.ts-heb{font-family:"FbUnicaSans",sans-serif;font-size:1.15rem;color:#E7EAE0}
.ts-note{font-size:.8rem;color:#B7B8A9;letter-spacing:.1em}

/* 06 dossier */
.dossier-c{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dossier-c figure{margin:0;position:relative;overflow:hidden;border-radius:3px}
.dossier-c img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:transform 1.2s cubic-bezier(.32,.72,0,1)}
.dossier-c figure:hover img{transform:scale(1.04)}
.dossier-c figcaption{
  position:absolute;bottom:12px;inset-inline-start:12px;
  font-family:"Alacrity Sans",sans-serif;font-size:.66rem;letter-spacing:.24em;
  color:#E2E6DA;background:rgba(46,56,44,.62);padding:6px 10px;border-radius:2px;
}
@media(max-width:860px){.dossier-c{grid-template-columns:1fr 1fr}}

/* 07 packaging */
.pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pack-grid figure{margin:0;overflow:hidden;border-radius:3px}
.pack-grid img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* 08 before/after */
.ba-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:920px;margin-inline:auto}
.ba-split figure{margin:0;position:relative;background:#F6F5F0;border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.ba-tag{
  position:absolute;top:16px;inset-inline-start:16px;z-index:2;
  background:#2E382C;color:#E2E6DA;font-size:.82rem;padding:6px 12px;border-radius:2px;
}
.ba-generic{height:320px;background:#D8D6CF;display:flex;align-items:center;justify-content:center;filter:grayscale(1)}
.g-bottle{width:96px;height:200px;margin-top:44px;background:#efefec;border:1px solid #bbb;border-radius:6px;position:relative}
.g-cap{position:absolute;top:-36px;left:50%;transform:translateX(-50%);width:42px;height:36px;background:#9a9a97;border-radius:3px 3px 0 0}
.g-label{
  position:absolute;inset-inline:9px;top:66px;height:78px;background:#fff;border:1px solid #ccc;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:Arial,Helvetica,sans-serif;color:#777;
}
.g-label span{font-size:1rem;letter-spacing:.18em}
.g-label small{font-size:.7rem}
.ba-after img{height:320px;object-fit:cover;object-position:50% 55%}
.ba-split figcaption{padding:14px 16px;font-size:.95rem;color:#2E382C;background:#E2E6DA;margin-top:auto}
@media(max-width:700px){.ba-split{grid-template-columns:1fr}}

/* 09 social */
.phone-shot img{width:min(360px,78%);margin-inline:auto;filter:drop-shadow(0 34px 60px rgba(30,38,28,.35))}
.social-legend{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.social-legend li{border-top:1px solid rgba(71,84,68,.25);padding-top:10px;font-size:.98rem}
.social-legend b{font-family:"Alacrity Sans",sans-serif;letter-spacing:.2em;font-size:.8rem;color:#475444}

/* 10 devices — working screens
   v4: ה-iframe שומר על viewport פנימי אמיתי (1280×800 / 390×844) ומקבל סקייל לפי רוחב המסך בפועל
   (--s נקבע בסקריפט בעמוד, עם ערכי ברירת מחדל ב-CSS). המכשיר החיצוני נשאר רספונסיבי. */
.devices{
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,4vw,56px);
  flex-wrap:wrap;
}
.mac{width:min(760px,100%);max-width:100%}
.mac-screen{
  --vw:1280px;--vh:800px;--s:.545;
  position:relative;
  background:#0d0f0c;border-radius:18px 18px 0 0;padding:16px 16px 22px;
  border:1px solid #2a2e27;
  height:calc(var(--vh) * var(--s) + 38px);overflow:hidden;
}
.vemmar-case .mac-screen iframe,
.vemmar-case .iph-screen iframe{
  max-width:none;width:var(--vw);height:var(--vh);border:0;background:#F6F5F0;
  transform:scale(var(--s));transform-origin:top right;display:block;
}
.mac-screen iframe{border-radius:6px}
.mac-base{
  height:16px;border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#c9cbc4,#a8aaa2);
  position:relative;
}
.mac-base::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:7px;border-radius:0 0 8px 8px;background:#8f918a;
}
.iph{
  width:250px;max-width:100%;flex:none;background:linear-gradient(145deg,#86898c,#5d6063 45%,#7d8083);
  border-radius:40px;padding:9px;box-shadow:0 30px 70px rgba(30,38,28,.35);
}
.iph-screen{
  --vw:390px;--vh:844px;--s:.595;
  border-radius:32px;overflow:hidden;background:#F6F5F0;position:relative;
  height:calc(var(--vh) * var(--s));
}
.devices-note{text-align:center;margin-top:26px;font-size:.95rem;color:#74866C}
@media(max-width:860px){
  .mac-screen{--s:.5}
}
@media(max-width:640px){
  .mac-screen{--s:.26;padding:10px 10px 14px;height:calc(var(--vh) * var(--s) + 24px)}
}

/* 11 campaign */
.ads-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ads-gallery figure{margin:0}
.ads-gallery img{border-radius:3px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.ads-gallery figcaption{margin-top:10px;font-size:.85rem;color:#B7B8A9;text-align:center}
@media(max-width:760px){.ads-gallery{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ads-gallery{grid-template-columns:1fr}}

/* 12 motion */
.motion-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:960px;margin-inline:auto}
.motion-card{margin:0;position:relative;border-radius:3px;overflow:hidden;background:#475444}
.motion-card video{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.motion-card figcaption{
  padding:12px 16px;font-size:.92rem;color:#2E382C;background:#F6F5F0;
  border:1px solid rgba(71,84,68,.18);border-top:0;
}
.media-toggle{
  position:absolute;top:14px;inset-inline-end:14px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;
  background:rgba(46,56,44,.72);color:#F6F5F0;border:1px solid rgba(246,245,240,.35);
  border-radius:999px;padding:8px 16px;cursor:pointer;font-family:inherit;font-size:.9rem;
}
.media-toggle:hover{background:rgba(46,56,44,.9)}
@media(max-width:760px){.motion-grid{grid-template-columns:1fr}}

/* 13 close */
.case-close{background:#E2E6DA}
.close-inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding-block:clamp(8px,2vw,20px);
}
.close-inner h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.close-inner .btn{margin-top:10px}
.concept-note{
  margin-top:clamp(34px,5vw,60px);font-size:.8rem;color:#9aa093;
}

/* studio-primary CTA inside the case body (shell scopes .btn to nav/foot/tools) */
.case-main .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:999px;border:1px solid rgba(240,240,240,0);
  font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;
  transition:transform .35s cubic-bezier(.32,.72,0,1),box-shadow .35s cubic-bezier(.32,.72,0,1);
}
.case-main .btn-primary{background:var(--teal,#0C3F51);color:var(--paper,#F0EEE6);box-shadow:0 10px 26px rgba(12,63,81,.28)}
.case-main .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(12,63,81,.34)}

/* v4: דוגמת הטיפוגרפיה נשברת בכוונה במובייל במקום להיחתך */
@media(max-width:640px){
  .ts-abc{font-size:.85rem;letter-spacing:.1em;line-height:1.7}
  .ts-abc .ts-abc-a,.ts-abc .ts-abc-b{display:block}
  .ts-row{flex-wrap:wrap;gap:6px 14px}
  .ts-mairo{font-size:1.7rem}
  .ts-note{white-space:nowrap}
}
@media(max-width:359px){
  .type-spec{padding:22px 18px;gap:16px}
  .ts-big{font-size:3.6rem}
  .ts-abc{font-size:.78rem;letter-spacing:.06em;word-break:break-all}
  .ts-heb{font-size:1rem;word-break:break-all}
}

@media(max-width:359px){
  .ts-lat,.vm-index,.hw-fig{white-space:normal;letter-spacing:.14em;overflow-wrap:anywhere}
  .palette b{letter-spacing:.1em}
}