/* Simulator in Motion — layout values measured from the original site. */

@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;
  src:url(../assets/fonts/manrope-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;
  src:url(../assets/fonts/manrope-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/poppins-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/poppins-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --max-w:1400px;
  --gutter:4vw;
  --mobile-gutter:6vw;
  --unit:min(100vw,1400px);          /* type stops growing past 1400px */
  --vpad:max(100vw,900px);           /* vertical padding stops shrinking below 900px */
  --ink:#1c1c1c;
  --paper:#fff;
  --light:#fafafa;
  --logo-size:calc(16px + .6 * var(--unit) / 100);
  --h2-size:calc(16px + 2.16 * var(--unit) / 100);
  --header-h:calc(var(--gutter) + 1.2 * var(--logo-size));
}
@media (max-width:768px){
  /* below the breakpoint the original scales type by viewport height, not width */
  :root{
    --unit:min(100vh,900px);
    --header-h:calc(var(--mobile-gutter) * 2 + 37.2px);
  }
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/24px Poppins,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2{margin:0;font:500 var(--h2-size)/1.1136 Manrope,"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.02em}
p{margin:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- header ---------- */
.header{position:fixed;inset:0 0 auto;z-index:1000;display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--gutter) / 2) var(--gutter);transition:background-color .2s ease,padding .2s ease}
.header.is-scrolled{background:var(--paper);padding-block:calc(var(--gutter) * .45)}
.header__logo{font:500 var(--logo-size)/1.2 Manrope,"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.header__nav{display:flex;gap:18px}
.header__nav a{padding:1.6px 0;text-decoration:none}
.header__nav a:hover{opacity:.6}
.header__burger{display:none;width:37.2px;height:37.2px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.header__burger span{display:block;width:26px;height:1px;margin:0 auto;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.header__burger span+span{margin-top:7px}
.is-open .header__burger span:first-child{transform:translateY(4px) rotate(45deg)}
.is-open .header__burger span+span{transform:translateY(-4px) rotate(-45deg)}

@media (max-width:768px){
  .header{padding:var(--mobile-gutter)}
  .header__burger{display:block}
  .header__nav{position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:24px;
    background:var(--paper);font-size:var(--logo-size);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
  .is-open .header__nav{opacity:1;visibility:visible}
  body.is-open{overflow:hidden}
}

/* ---------- sections ---------- */
.section{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:40vh}
.section--small{min-height:33vh}
.section--medium{min-height:66vh}
.section--flat{min-height:0}
.section--top{justify-content:flex-start}
.section--inset{padding:var(--header-h) var(--gutter) var(--gutter)}
.section__inner{position:relative;display:flex;flex-direction:column;padding:var(--gutter) 0 calc(var(--vpad) * .066)}
.section__inner--center{padding-block:calc(var(--vpad) * .066)}
.section__inner--mail{padding-block:calc(var(--vpad) * .04)}
.section__bg{position:absolute;inset:0;overflow:hidden}
.section--inset .section__bg{inset:var(--header-h) var(--gutter) var(--gutter)}
.section__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.section__bg::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.3}
.section--dark{color:var(--light)}

/* ---------- fluid grids, reproduced from the original section definitions ---------- */
.grid{display:grid;position:relative;overflow-x:clip}

.grid--hero{
  --cell:calc((var(--max-w) - 2px * 7) / 8);
  grid-template-rows:repeat(16,minmax(24px,auto));
  grid-template-columns:minmax(calc(var(--mobile-gutter) - 2px),1fr) repeat(8,minmax(0,var(--cell))) minmax(calc(var(--mobile-gutter) - 2px),1fr);
  row-gap:3px;column-gap:2px}
.grid--split{
  --cell:calc(var(--max-w) / 8);
  grid-template-rows:repeat(15,minmax(24px,auto));
  grid-template-columns:minmax(var(--mobile-gutter),1fr) repeat(8,minmax(0,var(--cell))) minmax(var(--mobile-gutter),1fr)}
.grid--contact,.grid--mail{
  --cell:calc((var(--max-w) - 11px * 7) / 8);
  grid-template-columns:minmax(calc(var(--mobile-gutter) - 11px),1fr) repeat(8,minmax(0,var(--cell))) minmax(calc(var(--mobile-gutter) - 11px),1fr);
  gap:11px}
.grid--contact{grid-template-rows:repeat(4,minmax(24px,auto))}
.grid--mail{grid-template-rows:repeat(11,minmax(24px,auto))}

.hero-title{grid-area:8/2/17/10}
.split-text{grid-area:1/2/7/10}
.split-video{grid-area:7/2/15/10}
.contact-title{grid-area:2/2/4/10}
.contact-mail{grid-area:1/2/2/10}
.contact-social{grid-area:2/2/3/10}

@media (min-width:768px){
  .grid--hero{
    --cw:min(var(--max-w),calc(100vw - var(--gutter) * 4));   /* inset background */
    --cell:calc((var(--max-w) - 2px * 23) / 24);
    grid-template-rows:repeat(12,minmax(calc(var(--cw) * .0215),auto));
    grid-template-columns:minmax(calc(var(--gutter) - 2px),1fr) repeat(24,minmax(0,var(--cell))) minmax(calc(var(--gutter) - 2px),1fr)}
  .grid--split{
    --cw:min(var(--max-w),calc(100vw - var(--gutter) * 2));
    --cell:calc(var(--max-w) / 24);
    grid-template-rows:repeat(16,minmax(calc(var(--cw) * .0215),auto));
    grid-template-columns:minmax(var(--gutter),1fr) repeat(24,minmax(0,var(--cell))) minmax(var(--gutter),1fr)}
  .grid--contact,.grid--mail{
    --cell:calc((var(--max-w) - 11px * 23) / 24);
    grid-template-columns:minmax(calc(var(--gutter) - 11px),1fr) repeat(24,minmax(0,var(--cell))) minmax(calc(var(--gutter) - 11px),1fr)}
  .grid--contact{--cw:min(var(--max-w),calc(100vw - var(--gutter) * 4));grid-template-rows:repeat(4,minmax(calc(var(--cw) * .0215),auto))}
  .grid--mail{--cw:min(var(--max-w),calc(100vw - var(--gutter) * 2));grid-template-rows:repeat(2,minmax(calc(var(--cw) * .0215),auto))}

  .hero-title{grid-area:9/3/13/25}
  .split-text{grid-area:3/2/7/12;align-self:center}
  .split-video{grid-area:1/12/17/26;align-self:start}
  .contact-title{grid-area:1/5/3/23;align-self:start}
  .contact-mail{grid-area:1/8/2/20;align-self:start}
  .contact-social{grid-area:2/8/3/20;align-self:start}
}

/* ---------- blocks ---------- */
.hero-title h2,.contact-title h2{text-align:center}
.split-text p{margin:16px 0}
.split-video{position:relative}
.split-video video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.contact-mail p{text-align:center}
.contact-mail a{color:#000}
.contact-social{display:flex;justify-content:center}
.contact-social a{display:block;width:20px;height:20px;color:#000;transition:opacity .2s ease}
.contact-social a:hover{opacity:.6}
.contact-social svg{width:100%;height:100%;fill:currentColor}

/* ---------- gallery ---------- */
.gallery{padding-block:var(--gutter)}
.gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25vw;
  width:min(var(--max-w),calc(100vw - var(--gutter) * 2));margin-inline:auto}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{max-width:675px;padding:15px 0;font-size:16px;line-height:21px;color:#000}
@media (max-width:768px){
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
  .gallery figcaption{max-width:375px;font-size:13.6px}
}

/* scroll-in effect on the gallery tiles, as on the original */
.reveal{opacity:0;transform:scale(.86);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.site-footer{height:28px}
@media (max-width:768px){.site-footer{height:48px}}