/* Javan Studios / Honold — V3 refinement
   Typography, hierarchy and motion pass. Loaded after styles.css. */
:root{
  --ease-premium:cubic-bezier(.16,1,.3,1);
  --ease-gentle:cubic-bezier(.22,.61,.36,1);
  --label:clamp(12px,.82vw,14px);
  --body:clamp(16px,1.04vw,18px);
  --body-lg:clamp(20px,1.55vw,28px);
  --section-gap:clamp(118px,10vw,190px);
}

/* ---------- typographic hierarchy ---------- */
.topbar{height:78px}
.studio-mark{font-size:14px;letter-spacing:-.015em}
.prepared{font-size:12px;opacity:.78;gap:9px}
.private-dot{width:6px;height:6px}
.lang{width:35px;height:35px;font-size:10px;font-weight:600;transition:background .35s var(--ease-premium),color .35s var(--ease-premium),transform .35s var(--ease-premium)}
.lang:hover{transform:scale(1.05)}

.section-inner{padding:var(--section-gap) var(--mx)}
.eyebrow{
  font-size:var(--label);
  line-height:1.25;
  letter-spacing:.115em;
  font-weight:600;
  margin-bottom:clamp(30px,3vw,48px);
  opacity:.67;
}
.display{
  font-size:clamp(62px,7.1vw,124px);
  line-height:.92;
  letter-spacing:-.062em;
  text-wrap:balance;
}
.lead{
  font-size:var(--body-lg);
  line-height:1.43;
  letter-spacing:-.025em;
  max-width:860px;
}
.text-link{
  font-size:15px;
  line-height:1.2;
  padding:13px 0;
  gap:16px;
  font-weight:500;
  transition:opacity .3s ease,gap .4s var(--ease-premium);
}
.text-link:hover{gap:24px;opacity:1}

.hero{padding-top:150px}
.hero h1{font-size:clamp(68px,8vw,144px);line-height:.87;letter-spacing:-.073em;text-wrap:balance}
.hero-body{font-size:clamp(20px,1.55vw,29px);max-width:760px;margin-top:52px;color:#c8c3bc}
.hero-note{font-size:12px;bottom:34px;letter-spacing:.01em;color:#85817b}

.strengths-intro{padding-bottom:84px}
.strengths .lead{margin-top:48px}
.word-rail{gap:clamp(30px,4vw,66px);padding:32px var(--mx);transition:transform .15s linear}
.word-rail span{
  font-size:clamp(40px,4.35vw,76px);
  color:#25221e!important;
  opacity:1;
  transition:color .35s var(--ease-premium),opacity .35s var(--ease-premium),transform .45s var(--ease-premium);
}
.word-rail span:nth-child(2n){color:#25221e!important}
.word-rail span:hover{color:#6a3a24!important;transform:translateY(-4px)}
.word-rail:has(span:hover) span:not(:hover){opacity:.28}
.pivot{padding-top:130px;padding-bottom:190px}
.pivot p{font-size:clamp(40px,4.55vw,82px)}

/* ---------- restrained motion / layered parallax ---------- */
.hero-copy,.hero-stage,.why-copy,.rennweg-stage,.transition-product,.season-copy,.work-head{will-change:transform}
.hero-copy{transform:translate3d(0,var(--parallax-y,0px),0)}
.hero-stage{
  transform:translate3d(var(--pointer-x,0px),calc(var(--pointer-y,0px) + var(--parallax-y,0px)),0);
  transition:transform .32s var(--ease-gentle)
}
.why-copy,.rennweg-stage,.transition-product,.season-copy,.work-head{transform:translate3d(0,var(--parallax-y,0px),0)}
.case-card video{transform:scale(1.035) translate3d(0,var(--media-shift,0px),0);will-change:transform;transition:transform .18s linear}

/* more depth in hero, without agitation */
.float-product{animation-duration:10s}
.fp-1{animation-duration:11s}.fp-2{animation-duration:13s}.fp-3{animation-duration:12s}.fp-4{animation-duration:14s}
.orbit{transition:transform .9s var(--ease-premium),opacity .9s var(--ease-premium)}
.hero:hover .orbit-a{transform:scale(1.025)}
.hero:hover .orbit-b{transform:scale(.985)}

/* ---------- why / Rennweg ---------- */
.why{min-height:110vh;align-items:stretch}
.why-copy{padding-top:190px;padding-bottom:180px;position:sticky;top:46px;align-self:start}
.why .lead{margin-top:46px;font-size:clamp(20px,1.42vw,27px)}
.pill-row{gap:10px}
.pill-row span{font-size:13px;padding:11px 16px;transition:background .35s ease,color .35s ease,border-color .35s ease}
.pill-row span:hover{background:#f7eee5;color:#4a2717;border-color:#f7eee5}
.rennweg-stage{min-height:110vh}
.street{font-size:12px}

/* ---------- opportunity cards ---------- */
.opportunities .section-inner{padding-bottom:190px}
.opportunity-grid{margin-top:66px}
.opportunity-card{padding:38px 36px 82px;min-height:390px;transition:background .5s var(--ease-premium),transform .5s var(--ease-premium)}
.opportunity-card:hover{background:#f8f5ef;transform:translateY(-5px)}
.opportunity-card .n{font-size:12px}
.opportunity-card h3{font-size:clamp(32px,2.8vw,52px);margin-top:92px}
.opportunity-card p{font-size:var(--body);line-height:1.55;max-width:410px}

/* ---------- transition / show ---------- */
.transition-section{min-height:100vh;padding-top:170px;padding-bottom:170px}
.transition-section .lead{margin-top:48px}
.transition-product img{width:min(650px,44vw);animation-duration:12s}

/* ---------- explorer ---------- */
.explorer-head{padding-top:150px;padding-bottom:60px}
.explorer-title{font-size:clamp(46px,4.65vw,82px)}
.concept-tabs{gap:9px}
.concept-tab,.application-tab{font-size:12px;padding:11px 16px;transition:background .35s var(--ease-premium),color .35s var(--ease-premium),border-color .35s var(--ease-premium),transform .35s var(--ease-premium)}
.concept-tab:hover,.application-tab:hover{transform:translateY(-2px)}
.concept-canvas{padding-top:70px;padding-bottom:58px;transition:background .9s var(--ease-premium),color .9s var(--ease-premium)}
.concept-count{font-size:12px;letter-spacing:.11em;margin-bottom:18px}
.concept-meta h3{font-size:clamp(54px,5.6vw,96px)}
.concept-meta p:not(.concept-count){font-size:16px;line-height:1.45;margin-top:16px}
.favorite-btn{font-size:13px;padding:13px 17px;transition:all .35s var(--ease-premium)}
.favorite-btn:hover{transform:translateY(-2px)}
.application-tabs{margin-top:56px;margin-bottom:22px}
.board-kicker,.social-copy span,.campaign-copy span{font-size:12px;letter-spacing:.135em}
.brand-board-copy p,.social-copy p,.campaign-copy p{font-size:16px;line-height:1.55}
.browser-bar b{font-size:11px}
.explorer-note{font-size:13px;line-height:1.5;margin-top:28px;max-width:920px}

/* ---------- season ---------- */
.season{padding-top:175px}
.season .lead{margin-top:46px}
.season-nav{top:42px;gap:9px}
.season-nav button{font-size:12px;padding:11px 16px;transition:all .35s var(--ease-premium)}
.season-nav button:hover{transform:translateY(-2px)}
.season-number{font-size:13px}
.season-label p{font-size:16px;line-height:1.45}

/* ---------- studio / proof ---------- */
.studio .lead,.work .lead{margin-top:46px}
.capability-row{grid-template-columns:92px 1fr 1fr;padding:33px 0}
.capability-row .n{font-size:12px}
.capability-row h3{font-size:clamp(25px,1.8vw,32px)}
.capability-row p{font-size:16px;line-height:1.5}
.work{padding-top:180px;padding-bottom:200px}
.work-head{padding-bottom:78px}
.case-grid{gap:24px}
.case-card{border-radius:22px;transition:transform .6s var(--ease-premium),background .6s var(--ease-premium)}
.case-card:hover{transform:translateY(-6px);background:#191919}
.case-card div{padding:24px 26px 28px}
.case-card h3{font-size:21px}
.case-card p{font-size:13px}

/* ---------- selections / CTA ---------- */
.selection-box{margin-top:76px;padding:32px 0;min-height:140px}
.selection-pill{font-size:14px;padding:13px 17px}
.selection-empty,.selection-note{font-size:16px;line-height:1.55}
.cta{padding-top:170px}
.cta .lead{margin-top:48px}
.contact-actions{margin-top:58px}
.contact-actions a{font-size:15px;padding:19px 24px;transition:transform .4s var(--ease-premium),background .35s ease,color .35s ease}
.contact-actions a:hover{transform:translateY(-3px)}
.contact-person h3{font-size:20px}
.contact-person p,.contact-person a{font-size:13px;line-height:1.5}
.cta footer{font-size:11px}

/* ---------- reveal behaviour: calm, editorial ---------- */
.reveal{
  opacity:0;
  transform:translate3d(0,38px,0) scale(.995);
  filter:blur(3px);
  transition:opacity 1.05s var(--ease-premium),transform 1.05s var(--ease-premium),filter 1.05s var(--ease-premium);
}
.reveal.visible{opacity:1;transform:none;filter:blur(0)}
.opportunity-card.reveal:nth-child(2){transition-delay:.08s}
.opportunity-card.reveal:nth-child(3){transition-delay:.16s}
.case-card.reveal:nth-child(2){transition-delay:.07s}
.case-card.reveal:nth-child(3){transition-delay:.14s}
.case-card.reveal:nth-child(4){transition-delay:.21s}

@media(max-width:1000px){
  .why{min-height:auto}
  .why-copy{position:relative;top:auto;padding-top:135px;padding-bottom:70px}
  .rennweg-stage{min-height:600px}
  .word-rail:has(span:hover) span:not(:hover){opacity:1}
}

@media(max-width:650px){
  :root{--label:12px;--body:16px;--body-lg:18px;--section-gap:105px}
  .topbar{height:62px}
  .studio-mark{font-size:12px}
  .lang{font-size:9px;width:30px;height:30px}
  .eyebrow{font-size:12px;letter-spacing:.105em;margin-bottom:26px}
  .hero h1,.display{font-size:clamp(50px,14.5vw,76px)}
  .hero-body,.lead{font-size:18px;line-height:1.48}
  .text-link{font-size:14px}
  .word-rail{padding-block:22px}
  .word-rail span{font-size:38px}
  .pivot p{font-size:40px}
  .opportunity-card .n,.concept-count,.season-number{font-size:11px}
  .opportunity-card p,.brand-board-copy p,.social-copy p,.campaign-copy p,.capability-row p,.selection-empty,.selection-note{font-size:15px}
  .concept-tab,.application-tab,.season-nav button{font-size:11px}
  .explorer-note{font-size:12px}
  .cta footer{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .hero-copy,.hero-stage,.why-copy,.rennweg-stage,.transition-product,.season-copy,.work-head,.case-card video,.word-rail{transform:none!important}
  .reveal{filter:none}
}