/* ===========================================================
   I.H STUDIO · Creative Intelligence
   Shared stylesheet · premium dark · single blue accent
   =========================================================== */

:root{
  /* surfaces */
  --bg:        #0a0a0a;
  --bg-soft:   #101013;
  --bg-card:   #121318;
  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);

  /* ink */
  --ink:       #ffffff;
  --ink-dim:   rgba(255,255,255,.66);
  --ink-faint: rgba(255,255,255,.42);

  /* brand blue (single accent) */
  --blue:        #0E5FE8;
  --blue-bright: #2E8BFF;
  --blue-soft:   #7FB4FF;
  --blue-glow:   rgba(46,139,255,.30);

  /* system */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: 'Inter', 'Assistant', 'Heebo', system-ui, -apple-system, sans-serif;
  --font-he: 'Assistant', 'Heebo', system-ui, sans-serif;
}

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

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

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.01em;
  overflow-x:clip; /* clip (not hidden) so position:sticky still works */
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ambient blue glow fixed behind everything */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(14,95,232,.18), transparent 70%),
    radial-gradient(40% 40% at 85% 15%, rgba(46,139,255,.08), transparent 70%);
  pointer-events:none; z-index:0;
}

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

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

/* ---------- typography ---------- */
h1,h2,h3{ font-weight:700; line-height:1.05; letter-spacing:-.03em; }
.display{ font-size:clamp(2.4rem, 7vw, 5rem); font-weight:800; }
.h2{ font-size:clamp(1.7rem, 4vw, 2.8rem); font-weight:700; }
.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-soft);
}
.lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-dim); max-width:60ch; }
.muted{ color:var(--ink-dim); }
.grad-blue{ background:linear-gradient(120deg,var(--blue-soft),var(--blue-bright)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:600; font-size:.98rem; letter-spacing:0;
  padding:.85em 1.6em; border-radius:999px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  will-change:transform;
}
.btn-primary{
  background:linear-gradient(120deg,var(--blue),var(--blue-bright));
  color:#fff; box-shadow:0 8px 30px -8px var(--blue-glow);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 44px -10px var(--blue-glow); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--blue-bright); color:#fff; transform:translateY(-2px); }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
html[dir="rtl"] .btn:hover .arr{ transform:translateX(-3px); }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:14px var(--gutter);
  backdrop-filter:saturate(140%) blur(14px);
  background:rgba(10,10,10,.55);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-head.scrolled{ background:rgba(10,10,10,.82); border-bottom-color:var(--line-soft); }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height:38px; width:auto; }
.nav-cta{ display:flex; align-items:center; gap:1.4rem; }
.nav-cta a.link{ font-size:.92rem; color:var(--ink-dim); transition:color .2s; }
.nav-cta a.link:hover{ color:#fff; }
@media (max-width:600px){ .nav-cta a.link{ display:none; } .brand img{ height:32px; } }

/* ---------- hero (home) ---------- */
.hero{ padding:clamp(70px,14vh,150px) 0 clamp(50px,9vh,110px); text-align:center; }
.hero .logo-mark{ height:clamp(120px,22vw,200px); width:auto; margin:0 auto 2.2rem; filter:drop-shadow(0 10px 50px var(--blue-glow)); }
.hero .display{ margin:0 auto; max-width:16ch; }
.hero .lead{ margin:1.5rem auto 0; text-align:center; }
.hero .cta-row{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem; }

/* ---------- section rhythm ---------- */
.section{ padding:clamp(56px,10vh,120px) 0; }
.section-head{ margin-bottom:clamp(28px,5vh,56px); max-width:62ch; }
.section-head .h2{ margin-top:.5rem; }

/* ---------- showcase grid (cinematic 16:9 film tiles) ---------- */
.work-grid{
  display:grid; gap:clamp(14px,2vw,22px);
  grid-template-columns:1fr;
}
@media (min-width:600px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .work-grid{ grid-template-columns:repeat(3,1fr); } }
.work-card{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line);
  background:var(--bg-card); cursor:pointer;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.work-card:hover{ transform:translateY(-6px); border-color:rgba(46,139,255,.5); box-shadow:0 24px 60px -24px var(--blue-glow); }
.work-card video,.work-card img,.work-card .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.work-card video{ opacity:0; transition:opacity .5s var(--ease); }
.work-card.playing video{ opacity:1; }
/* the video is inserted as firstChild, so the poster <img> paints on top of it.
   fade the poster out while playing so the moving video shows through. */
.work-card img{ transition:opacity .5s var(--ease); }
.work-card.playing img{ opacity:0; }
.work-card .ph{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#16181f,#0c0d11);
  color:var(--ink-faint); font-size:.85rem; letter-spacing:.08em;
}
.work-card .tag{
  position:absolute; left:12px; bottom:12px; z-index:2;
  font-size:.74rem; font-weight:600; letter-spacing:.04em;
  padding:.35em .7em; border-radius:999px;
  background:rgba(10,10,10,.6); border:1px solid var(--line);
  backdrop-filter:blur(6px); color:var(--ink-dim);
}
.work-card .play{
  position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .4s var(--ease); pointer-events:none;
}
.work-card.playing .play{ opacity:0; }
.work-card .play span{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(14,95,232,.22); border:1px solid rgba(127,180,255,.5);
  backdrop-filter:blur(6px);
}
.work-card .play span::after{ content:""; margin-left:3px; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff; }

/* ---------- scroll-expand showcase (ported from old site, rebranded) ---------- */
.expand{ position:relative; height:240vh; background:var(--bg); }
.expand__track{ position:sticky; top:0; height:100vh; overflow:hidden; }
.expand__stage{ position:absolute; inset:0; display:grid; place-items:center; }
.expand__bg{ position:absolute; inset:0; background:url("/assets/showcase/showcase-bg.jpg") center/cover no-repeat; will-change:opacity; }
.expand__bg::after{ content:""; position:absolute; inset:0; background:rgba(8,9,12,.5); }
.expand__media{
  position:relative; z-index:2; width:300px; height:420px; max-width:100vw; max-height:100vh;
  border-radius:18px; overflow:hidden; box-shadow:0 40px 110px rgba(0,0,0,.6); will-change:width,height,border-radius;
}
.expand__video{ width:100%; height:100%; object-fit:cover; }
.expand__title{
  position:absolute; z-index:3; inset-block-start:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center; gap:clamp(1rem,4vw,4rem); width:100%;
  font-weight:800; color:#fff; white-space:nowrap;
  font-size:clamp(2rem,7vw,5.5rem); letter-spacing:-.02em; mix-blend-mode:difference; pointer-events:none;
}
.expand__w{ will-change:transform; }
.expand__hint{ position:absolute; z-index:3; inset-block-end:8%; font-size:.72rem; letter-spacing:.28em; color:rgba(255,255,255,.7); }

/* ---------- statement / one-liner ---------- */
.statement{ text-align:center; }
.statement p{ font-size:clamp(1.4rem,3.2vw,2.3rem); font-weight:600; line-height:1.3; max-width:24ch; margin:0 auto; letter-spacing:-.02em; }

/* ---------- contact CTA band ---------- */
.cta-band{
  text-align:center; border-radius:24px; padding:clamp(40px,7vw,80px) var(--gutter);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(14,95,232,.20), transparent 70%),
    var(--bg-soft);
  border:1px solid var(--line);
}
.cta-band .h2{ max-width:18ch; margin:0 auto; }
.cta-band .lead{ margin:1.1rem auto 2rem; }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--line-soft); padding:48px 0 56px; margin-top:40px; }
.site-foot .inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.site-foot img{ height:46px; opacity:.92; }
.site-foot .links{ display:flex; gap:1.4rem; font-size:.92rem; }
.site-foot .links a{ color:var(--ink-dim); transition:color .2s; }
.site-foot .links a:hover{ color:var(--blue-bright); }
.site-foot .copy{ color:var(--ink-faint); font-size:.82rem; width:100%; margin-top:1.4rem; }

/* ---------- scroll reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.reveal-ready [data-reveal].in{ opacity:1; transform:none; }
html:not(.reveal-ready) [data-reveal]{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
[data-reveal][data-delay="5"]{ transition-delay:.40s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  [data-reveal]{ opacity:1!important; transform:none!important; }
}

/* ===========================================================
   VALUE PAGE (RTL · Hebrew) · /3sec, /hook, ...
   =========================================================== */
html[dir="rtl"] body{ font-family:var(--font-he); letter-spacing:0; }
html[dir="rtl"] .display,html[dir="rtl"] .h2,html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{ letter-spacing:-.01em; }

.value-main{ position:relative; z-index:1; min-height:60vh; }

.value-hero{ text-align:center; padding:clamp(48px,11vh,120px) 0 clamp(28px,5vh,56px); }
.value-hero .logo-mark{ height:clamp(86px,16vw,140px); width:auto; margin:0 auto 1.8rem; filter:drop-shadow(0 10px 40px var(--blue-glow)); }
.value-hero .eyebrow{ display:block; margin-bottom:1rem; }
.value-hero .title{ font-size:clamp(2rem,6.5vw,3.8rem); font-weight:800; max-width:18ch; margin:0 auto; }

/* subhead under the title */
.value-sub{ max-width:46ch; margin:1.2rem auto 0; color:var(--ink-dim); font-size:clamp(1.05rem,2.2vw,1.3rem); line-height:1.6; }

/* the value content area (filled per episode) */
.value-body{ max-width:60ch; margin:0 auto; padding:clamp(8px,2vh,20px) 0; font-size:1.12rem; }

/* each section = its own block, generous breathing room, fades in on scroll */
.value-section{ padding-block:clamp(34px,6vh,64px); }
.value-section + .value-section{ border-top:1px solid var(--line-soft); }
.value-section > h2{
  color:var(--blue-bright);
  font-size:clamp(1.45rem,4vw,2.1rem); font-weight:800; line-height:1.2;
  letter-spacing:-.01em; margin-bottom:1rem;
}
.value-section p{ color:rgba(255,255,255,.9); line-height:1.8; }
.value-section p + p{ margin-top:1em; }
.value-section strong,.value-section b{ color:#fff; font-weight:700; }

/* numbered / bulleted lists inside a section */
.vlist{ list-style:none; padding:0; margin:0; counter-reset:v; }
.vlist li{ position:relative; padding-inline-start:2.6rem; line-height:1.75; color:rgba(255,255,255,.9); }
.vlist li + li{ margin-top:1.1em; }
.vlist--num li{ counter-increment:v; }
.vlist--num li::before{
  content:counter(v); position:absolute; inset-inline-start:0; top:.05em;
  width:1.7rem; height:1.7rem; display:grid; place-items:center;
  font-size:.9rem; font-weight:700; color:var(--blue-bright);
  border:1px solid rgba(46,139,255,.5); border-radius:50%;
}
.vlist--dot li::before{
  content:""; position:absolute; inset-inline-start:.55rem; top:.7em;
  width:.5rem; height:.5rem; border-radius:50%; background:var(--blue-bright);
}
.value-body a{ color:var(--blue-bright); text-decoration:underline; text-underline-offset:3px; }

/* hero reel player (9:16) at top of a value page */
.value-reel{
  position:relative; width:100%; max-width:330px; aspect-ratio:9/16; margin:clamp(20px,4vh,36px) auto 0;
  border-radius:20px; overflow:hidden; border:1px solid rgba(127,180,255,.28);
  background:linear-gradient(160deg,#16181f,#0c0d11);
  box-shadow:0 30px 80px -30px var(--blue-glow), 0 0 0 1px rgba(46,139,255,.10);
}
.value-reel video{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.value-reel__ph{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center; gap:.6rem; text-align:center;
  color:var(--ink-faint); font-size:.85rem; letter-spacing:.04em; padding:1rem;
}
.value-reel__ph::before{ content:""; width:46px; height:46px; border-radius:50%; background:rgba(14,95,232,.22); border:1px solid rgba(127,180,255,.5); }

/* callout / quote tied to the actual video */
.callout{
  margin:1.4rem 0 0; padding:1rem 1.2rem; border-radius:14px;
  border:1px solid rgba(46,139,255,.35); background:rgba(14,95,232,.08);
  border-inline-start:3px solid var(--blue-bright);
  color:#fff; font-weight:600; line-height:1.7;
}

/* card grid for the "3 ways" / "3 mistakes" sections */
.cardgrid{ display:grid; grid-template-columns:1fr; gap:clamp(12px,2vw,18px); margin-top:1.6rem; }
@media (min-width:720px){ .cardgrid{ grid-template-columns:repeat(3,1fr); } }
.vcard{
  position:relative; padding:1.5rem 1.4rem 1.4rem; border-radius:16px;
  border:1px solid var(--line); background:var(--bg-card);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.vcard:hover{ border-color:rgba(46,139,255,.45); transform:translateY(-3px); }
.vcard__no{
  display:inline-grid; place-items:center; width:2.6rem; height:2.6rem; margin-bottom:.9rem;
  font-size:1.3rem; font-weight:800; color:var(--blue-bright);
  border:1px solid rgba(46,139,255,.5); border-radius:50%;
}
.vcard h3{ font-size:1.16rem; font-weight:700; color:#fff; margin-bottom:.5rem; line-height:1.3; letter-spacing:-.01em; }
.vcard p{ color:rgba(255,255,255,.75); line-height:1.7; font-size:1rem; }

/* "save this" formula card (screenshot-friendly) */
.formula{
  margin:clamp(36px,7vh,64px) auto; max-width:560px; text-align:center;
  padding:clamp(28px,5vw,44px) clamp(20px,4vw,36px); border-radius:22px;
  border:1px solid rgba(46,139,255,.4);
  background:radial-gradient(90% 130% at 50% 0%, rgba(14,95,232,.16), transparent 70%), var(--bg-soft);
  box-shadow:0 24px 60px -28px var(--blue-glow);
}
.formula__label{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-soft); margin-bottom:1rem; }
.formula__eq{ font-size:clamp(1.25rem,3.6vw,1.7rem); font-weight:800; color:#fff; line-height:1.5; letter-spacing:-.01em; }
.formula__eq b{ color:var(--blue-bright); font-weight:800; }

/* a clearly-marked placeholder block (shown until real copy is dropped in) */
.placeholder{
  border:1px dashed rgba(127,180,255,.4); border-radius:14px;
  padding:1.4em 1.5em; background:rgba(14,95,232,.06); color:var(--ink-dim);
}
.placeholder b{ color:var(--blue-soft); }

/* optional episode video frame */
.value-video{ max-width:420px; margin:clamp(20px,4vh,40px) auto; aspect-ratio:9/16; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--bg-card); }
.value-video video,.value-video .ph{ width:100%; height:100%; object-fit:cover; }
.value-video .ph{ display:flex; align-items:center; justify-content:center; color:var(--ink-faint); background:linear-gradient(160deg,#16181f,#0c0d11); font-size:.85rem; }

/* the single bottom CTA · follow on Instagram */
.value-cta{
  text-align:center; max-width:680px; margin:clamp(36px,7vh,72px) auto 0;
  border-radius:24px; padding:clamp(36px,6vw,60px) var(--gutter);
  background:radial-gradient(90% 130% at 50% 0%, rgba(14,95,232,.22), transparent 70%), var(--bg-soft);
  border:1px solid var(--line);
}
.value-cta .h2{ font-size:clamp(1.4rem,4vw,2rem); margin-bottom:.6rem; }
.value-cta .handle{ color:var(--blue-soft); font-weight:600; margin-bottom:1.6rem; }
.cta-btns{ display:flex; flex-direction:column; gap:.9rem; align-items:center; }
.cta-btns .btn{ font-size:1.02rem; padding:1em 1.8em; width:100%; max-width:440px; justify-content:center; text-align:center; }
@media (min-width:640px){ .cta-btns .btn{ width:auto; } }

/* IG glyph */
.ig-glyph{ width:1.15em; height:1.15em; vertical-align:-.2em; }