/* Idea Studio World - rebuild of the Framer design
   Breakpoints: Desktop 1440 / Tablet 810 / Phone 390 */
:root{
  --bg:#F9F9F9; --ink:#690000; --red:#EB0023; --cream:#E0D8C3; --dark:#1D1B1C;
  --sans:"Zalando Sans Expanded","Zalando Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cond:"Francois One",Impact,"Arial Narrow",sans-serif;
  --track:350vh;
  --k:1;
  --frame-w:calc(1100px*var(--k)); --frame-h:calc(500px*var(--k));
  --logo-w:calc(748px*var(--k)); --logo-h:calc(342.23px*var(--k));
  --hero-img:url("assets/logo.png");
  --tiger-img:url("assets/tigeress.png");
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p,h1,h2{ margin:0; }

.nav{ position:fixed; inset:0 0 auto 0; height:72px; z-index:10;
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.nav__title{ font-family:var(--sans); font-size:16px; font-weight:500; line-height:2;
  letter-spacing:1px; color:var(--ink); pointer-events:auto; transition:color .35s ease; }
.nav.is-over-dark .nav__title{ color:var(--cream); }

.track{ position:relative; width:100%; height:var(--track); }
.hero{ position:sticky; top:0; width:100%; height:100vh; height:100svh; overflow:hidden; z-index:5; }
.hero__bg{ position:absolute; inset:0; z-index:3; overflow:hidden; }
.hero__bg-inner{ position:absolute; inset:0; transform:scale(1.3); transform-origin:50% 50%; will-change:transform; }
.hero__bg-inner img{ width:100%; height:100%; object-fit:cover; object-position:center; }

.mask{ position:absolute; left:0; width:100%; height:50%; background:var(--bg);
  z-index:8; overflow:hidden; will-change:transform; }
.mask--top{ top:0; }
.mask--bottom{ bottom:0; display:flex; flex-direction:column; justify-content:flex-end; }
.mask__frame{ position:absolute; width:var(--frame-w); height:var(--frame-h);
  left:52%; transform:translateX(-50%); overflow:hidden; }
.mask__frame--top{ bottom:calc(-100px*var(--k)); }
.mask__frame--bottom{ top:calc(-231px*var(--k)); }
.logo{ position:absolute; width:var(--logo-w); height:var(--logo-h); left:50%;
  transform:translateX(-50%); background-image:var(--hero-img);
  background-size:cover; background-position:center; background-repeat:no-repeat; }
.mask__frame--top .logo{ bottom:calc(-51.97px*var(--k)); }
.mask__frame--bottom .logo{ top:calc(40.53px*var(--k)); }

.herobar{ position:relative; z-index:2; width:100%; display:grid;
  grid-template-columns:repeat(3,minmax(200px,1fr)); gap:10px; padding:32px 40px 24px; align-items:start; }
.herobar__col{ display:flex; }
.herobar__col--start{ justify-content:flex-start; }
.herobar__col--center{ justify-content:center; }
.herobar__col--end{ justify-content:flex-end; }

/* rest label Zalando 12px; hover label Francois One 11.5px stretched to the
   same width. Same cap height, same width, same baseline - see README.  */
.rolllink{ --roll-top:1.8px; --roll-travel:-24.4px; --roll-x:0px;
  position:relative; display:flex; flex-direction:row; align-items:center;
  justify-content:center; gap:10px; width:200px; height:min-content;
  overflow:hidden; cursor:pointer; text-decoration:none; }
.rolllink__win{ position:relative; display:flex; flex-direction:row; align-items:center;
  justify-content:center; gap:10px; height:18px; width:100%; overflow:visible; }
.rolllink__inner{ position:absolute; z-index:1; top:var(--roll-top); left:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:10px; width:100%; transform:translate(var(--roll-x),0);
  transition:transform .55s cubic-bezier(1,-.06,.2,.92); }
.rolllink:hover .rolllink__inner,
.rolllink:focus-visible .rolllink__inner{ transform:translate(var(--roll-x),var(--roll-travel)); }
.rolllink--left{ justify-content:flex-start; }
.rolllink--left .rolllink__win{ justify-content:flex-start; }
.rolllink--right{ justify-content:flex-end; }
.rolllink--right .rolllink__win{ justify-content:flex-end; }
.rolllink--right .rolllink__inner{ align-items:flex-end; left:auto; right:0; }
.rolllink--center{ --roll-x:-50%; }
.rolllink--center .rolllink__inner{ left:50%; width:max-content; }
.rolllink__a,.rolllink__b{ display:block; line-height:1.2; text-transform:uppercase;
  white-space:nowrap; color:var(--ink); }
.rolllink__a{ font-family:var(--sans); font-size:12px; font-weight:500; }
/* Hover label, taken straight from the live DOM before/after hover:
     rest  label 2  GF;Francois One-regular        14px
     HOVER label 2  GF;Zalando Sans Expanded-600   12px
   i.e. the same family and size as the resting label, one weight step
   up (500 -> 600). No face change, no stretch - the original does not
   stretch, and 600 is only ~2% wider than 500.                        */
.rolllink__b{ font-family:var(--sans); font-size:12px; font-weight:600; }

.about{ position:relative; z-index:6; background:var(--bg); display:flex;
  justify-content:center; overflow:hidden; }
.about__inner{ width:min(1376px,100%); padding:200px 0; display:flex;
  flex-direction:column; align-items:center; gap:48px; }
.about__title{ width:100%; font-family:var(--sans); font-size:110px; font-weight:600;
  line-height:.9; letter-spacing:0; text-transform:uppercase; text-align:center; color:var(--red); }
.about__body{ width:70%; font-size:35px; font-weight:400; line-height:1.2;
  text-align:center; color:var(--ink); }
.about__tiger{ width:270px; height:149px; margin-bottom:12px;
  background-image:var(--tiger-img); background-size:cover; background-position:center; }

/* enter/exit spring: stiffness 100, damping 10, mass 1 as a linear() curve */
.scrub{ opacity:0;
  transition:opacity 1.41s linear(
    0, 0.0742, 0.2518, 0.4729, 0.6922, 0.8797, 1.0203, 1.1103, 1.1544,
    1.1622, 1.1447, 1.1131, 1.0766, 1.0418, 1.013, 0.9922, 0.9795, 0.974,
    0.974, 0.9776, 0.983, 0.989, 0.9945, 0.9989, 1.0019, 1.0037, 1.0043,
    1.0041, 1.0034, 1.0025, 1.0015, 1.0007, 1, 0.9996, 1);
  will-change:opacity; }
.scrub.is-in{ opacity:1; }
.no-js .scrub{ opacity:1; }

.footer{ position:relative; z-index:6; background:var(--dark); color:var(--cream);
  min-height:788px; display:flex; flex-direction:column; align-items:center;
  padding:175px 0 150px; overflow:hidden; }
.footer__tag{ font-size:12px; font-weight:400; letter-spacing:-0.6px; line-height:1.4;
  text-transform:uppercase; color:var(--cream); text-align:center; margin-bottom:64px; }
.footer__cta{ position:relative; width:100%; display:flex; align-items:center;
  justify-content:center; margin-bottom:64px; }
.footer__big{ width:100%; font-size:125px; font-weight:500; line-height:.9;
  text-transform:uppercase; text-align:center; color:var(--cream); }
.footer__links{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.footer__links .rolllink__a,
.footer__links .rolllink__b{ color:var(--cream); }
.footer__links .rolllink{ width:200px; }

@media (max-width:1100px){
  :root{ --k:0.745; }
  .herobar{ grid-template-columns:repeat(3,1fr); padding:32px 24px 24px; }
  .herobar .rolllink{ width:100%; }
  .about__inner{ padding:140px 24px; gap:40px; }
  .about__title{ font-size:72px; }
  .about__body{ width:86%; font-size:26px; }
  .footer__big{ font-size:88px; }
  .footer{ min-height:640px; padding:120px 0 110px; }
  .footer__tag,.footer__cta{ margin-bottom:52px; }
}
@media (max-width:700px){
  :root{ --k:0.428; }
  .nav{ height:60px; }
  .nav__title{ font-size:14px; }
  .mask__frame{ left:50%; }
  .herobar{ grid-template-columns:repeat(3,1fr); padding:24px 16px 20px; gap:8px; }
  .herobar .rolllink{ width:100%; }
  .footer__links .rolllink{ width:auto; min-width:180px; }
  .about__inner{ padding:100px 20px; gap:32px; }
  .about__title{ font-size:40px; }
  .about__body{ width:100%; font-size:19px; }
  .about__tiger{ width:180px; height:99px; }
  .footer{ min-height:520px; padding:80px 20px 72px; }
  .footer__tag,.footer__cta{ margin-bottom:40px; }
  .footer__big{ font-size:44px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
}