@font-face{
  font-family:"Montserrat";
  src:url("assets/fonts/Montserrat-Variable.ttf") format("truetype-variations");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

@font-face{
  font-family:"Sloop Script Pro";
  src:url("assets/fonts/Sloop-Script-Pro.otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:"Sloop Script Pro";
  src:url("assets/fonts/Sloop-Script-Pro-Bold.otf") format("opentype");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

:root{
  --font-main:"Montserrat",Arial,sans-serif;
  --font-script:"Sloop Script Pro","Montserrat",Arial,sans-serif;
  --font:var(--font-main);
  --font-title:var(--font-main);
  --font-text:var(--font-main);
  --font-display:var(--font-main);
  --font-hand:var(--font-script);
  --hand:var(--font-script);
  --serif:var(--font-main);
  --type-body-leading:1.45;
  --type-display-leading:.78;
  --type-label-tracking:.12em;
}

html,body,button,input,textarea,select{
  font-family:var(--font-main);
}

body{
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

button,input,textarea,select{font:inherit}

h1,h2,h3,
.company-hero h1,.company-prologue-title,
.company-chapter h2,.company-idea h2,.company-city h2,.company-final h2,
.company-idea-word,.factory-stamp,.company-cta strong,
.branding-copy h1,.branding-copy h2,.story-copy h2,
.brand-system>h2,.brand-cases-head h2,.brand-cta h2,
.system-grid h3,.brand-case-grid b,
.hero-copy h1,.work-head h2,.next-title h3,.copy h1,.soon h2,
.value-card h3,.case-reveal h2{
  font-weight:900;
}

/* Montserrat is the architecture: all structural and interface text. */
.hero-story h1,.direction-copy h2,.cases-head h2,.case-copy h3,.contact h2,
.branding-copy h1,.branding-copy h2,.story-copy h2,.brand-system>h2,.system-grid h3,
.brand-cases-head h2,.brand-case-grid b,.brand-cta h2,
.hero-copy h1,.work-head h2,.next-title h3,.copy h1,.copy>p,.soon h2,
.company-hero h1,.company-prologue-title,.company-chapter h2,.company-idea h2,
.company-city h2,.company-final h2,.company-cta strong,
.phone-scene-pills button,.phone-scene-cta strong,.phone-scene-copy,.phone-scene-scroll,
.fit-cursor,.stats b,.hero-location{
  font-family:var(--font-main);
}

/* Sloop is a gesture laid over the architecture, never a body-text face. */
.hero-hand,.hand-label,.card-short,.wipe-no,.hero-note,.poster-note,.marker-note,
.section-scribble,.manifesto-type em{
  font-family:var(--font-script);
  font-style:normal;
  font-weight:400;
  letter-spacing:0;
  text-transform:lowercase;
}

/* Company: one script gesture per full-screen composition. */
.company-hero h1,.company-chapter h2,.company-idea h2,.company-city h2,.company-final h2{
  position:relative;
}

.company-hero h1 strong,
.company-chapter h2 em,
.company-idea h2 span,
.company-city h2 em,
.company-final h2 em{
  position:relative;
  z-index:2;
  display:inline-block;
  width:max-content;
  max-width:100%;
  font-family:var(--font-script);
  font-style:normal;
  font-weight:700;
  line-height:.64;
  letter-spacing:0;
  text-transform:lowercase;
  white-space:nowrap;
  transform:translate(.08em,-.12em) rotate(-3deg);
  transform-origin:left center;
}

.company-hero h1 strong{margin-top:-.02em;margin-left:.66em}
.company-chapter h2 em,.company-city h2 em,.company-final h2 em{margin-top:-.08em}
.company-idea h2 span{margin-top:-.1em;color:var(--company-acid)}

/* Service page: preserve the layouts, but let the accent cross the base line. */
.brand-system h2,.brand-cases-head h2,.brand-cta h2,.soon h2{position:relative}
.brand-system h2 em,.brand-cases-head em,.brand-cta em,.soon h2 em{
  position:relative;
  z-index:2;
  display:inline-block;
  width:max-content;
  max-width:100%;
  margin-top:-.13em;
  font-family:var(--font-script);
  font-style:normal;
  font-weight:700;
  line-height:.66;
  letter-spacing:0;
  text-transform:lowercase;
  white-space:nowrap;
  transform:translate(.08em,-.08em) rotate(-2.5deg);
  transform-origin:left center;
}

@media(max-width:720px){
  .company-hero h1 strong,
  .company-chapter h2 em,
  .company-idea h2 span,
  .company-city h2 em,
  .company-final h2 em,
  .brand-system h2 em,.brand-cases-head em,.brand-cta em,.soon h2 em{
    max-width:94vw;
    white-space:normal;
    line-height:.7;
    transform:translate(.03em,-.08em) rotate(-2deg);
  }

  .company-hero h1 strong{margin-left:.08em}
}